/* "Se busca" (compra inversa). Mobile first. Usa las variables de e.css para que el rediseño las cambie solo. */
.pedidos-cab { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 14px; }
.pedidos-cab h1 { margin: 0 0 4px; }
.pedidos-cab p { margin: 0; color: #556; }

/* Botones táctiles: mínimo 44 px de alto y ocupan el ancho en pantallas chicas */
.pedidos-cab .boton, .pedidos-acciones .boton, .form-pedido .boton, .form-canal .boton,
.pedidos-filtros .boton, .pedidos-paginas .boton, .pedido-cerrar .boton, .pedidos-vacio .boton, .botones .boton {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: 44px; padding: 10px 16px; text-align: center; text-decoration: none; cursor: pointer;
}
.boton.principal { background: var(--acento); color: var(--tinta, #17122b); border: 0; }
.boton.secundario { background: #fff; color: var(--primario, #56304f); border: 1px solid var(--primario, #56304f); }

.pedidos-tabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pedidos-tabs a { flex: none; padding: 10px 14px; border: 1px solid var(--bordes, #e8ddd5); border-radius: var(--radio, 5px); background: #fff; color: inherit; text-decoration: none; white-space: nowrap; }
.pedidos-tabs a.activa { background: var(--primario, #56304f); border-color: var(--primario, #56304f); color: #fff; }
.badge-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: var(--radio, 5px); background: var(--acento, #f2c45b); color: var(--tinta, #302438); font-size: 12px; font-weight: 700; text-align: center; }

.pedidos-filtros { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 14px; }
.pedidos-filtros input, .pedidos-filtros select { width: 100%; min-height: 44px; box-sizing: border-box; margin: 0; }

.pedidos-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pedido-card { border: 1px solid var(--bordes, #e8ddd5); border-radius: var(--radius, 6px); background: #fff; }
.pedido-card > a { display: block; padding: 14px; color: inherit; text-decoration: none; }
.pedido-canal { display: inline-block; padding: 2px 10px; border-radius: 10px; background: var(--fondo, #f8f3ec); color: var(--secundario, #38283a); font-size: 12px; font-weight: 600; }
.pedido-titulo { margin: 8px 0 4px; font-size: 18px; line-height: 1.25; }
.pedido-resumen { margin: 0 0 8px; color: #556; overflow-wrap: anywhere; }
.pedido-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 13px; color: #667; }
.pedido-card.mis .pedido-cerrar { padding: 0 14px 14px; }
.pedidos-lista.mis .pedido-cerrar { display: flex; gap: 8px; }
.pedidos-lista.mis .pedido-cerrar select { flex: 1; min-width: 0; min-height: 44px; }
.pedidos-vacio { padding: 24px 12px; text-align: center; }
.pedidos-paginas { display: flex; gap: 8px; justify-content: space-between; margin: 16px 0; }

/* Ficha */
.migas { margin: 6px 0 10px; font-size: 13px; color: #667; }
.pedido-detalle h1 { margin: 8px 0; line-height: 1.2; }
.pedido-descripcion { margin: 14px 0; padding: 14px; border-radius: var(--radius, 6px); background: var(--fondo, #f8f3ec); overflow-wrap: anywhere; }
.pedido-autor { color: #556; }
.aviso-estado { padding: 12px; border-radius: var(--radius, 6px); background: #fff3cd; color: #5c4a00; }
.pedidos-acciones { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.pedidos-acciones small, .ayuda { color: #667; font-size: 13px; }
.pedido-ofertas h2 { margin-top: 24px; }
.ofertas-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ofertas-lista li { padding: 14px; border: 1px solid var(--bordes, #e8ddd5); border-radius: var(--radius, 6px); background: #fff; }
.ofertas-lista p { margin: 6px 0 10px; overflow-wrap: anywhere; }
.oferta-precio { margin: 4px 0; font-size: 20px; font-weight: 700; }
.oferta-precio small { font-size: 13px; font-weight: 400; color: #667; }
.pedido-cerrar { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.pedido-cerrar select { min-height: 44px; }

/* Formularios */
.form-pedido, .form-canal { display: grid; gap: 12px; max-width: 640px; }
.form-pedido label, .form-canal label, dialog label { display: grid; gap: 4px; font-weight: 600; }
.form-pedido input, .form-pedido select, .form-pedido textarea, .form-canal input, .form-canal select,
dialog input, dialog select, dialog textarea { width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; font-size: 16px; /* 16px evita el zoom automático en iPhone */ }
.fila-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.campo-error { margin: 0; padding: 8px 10px; border-radius: 4px; background: #fde8e8; color: #7a1c1c; font-size: 14px; }

/* Canales */
.mis-canales, .lista-canales { margin: 0 0 22px; }
.canales-mios, .lista-canales ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.canales-mios li, .lista-canales li { padding: 12px 14px; border: 1px solid var(--bordes, #e8ddd5); border-radius: var(--radius, 6px); background: #fff; }
.canales-mios li { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.canales-mios small, .canal-fila small { display: block; color: #667; }
.canal-fila { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.lista-canales summary { padding: 10px 0 4px; color: var(--secundario, #38283a); font-weight: 600; cursor: pointer; }
.form-canal { padding-top: 6px; }

dialog { width: min(92vw, 460px); max-height: 90dvh; overflow-y: auto; padding: 18px; border: 1px solid var(--bordes, #e8ddd5); border-radius: var(--radius, 6px); }
dialog .botones { display: flex; gap: 8px; margin-top: 12px; }
dialog .botones .boton { flex: 1; }

@media (min-width: 700px) {
	.pedidos-cab { flex-direction: row; align-items: center; justify-content: space-between; }
	.pedidos-filtros { grid-template-columns: 2fr 1.3fr 1.3fr auto; }
	.pedidos-acciones { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.fila-2 { grid-template-columns: 1fr 1fr; }
	.pedido-cerrar { flex-direction: row; align-items: end; }
}

/* =====================================================================
   BOTONES (ver la explicación en chat.css): se imponen con #cuerpo para ganarle a "#cuerpo .boton { width:100% }"
   y al "justify-content:right / height:60px" que e.css aplica en móvil.
   ===================================================================== */
#cuerpo .pedidos-cab .boton, #cuerpo .pedidos-acciones .boton, #cuerpo .form-pedido > .boton,
#cuerpo .form-canal .boton, #cuerpo .pedidos-vacio .boton, #cuerpo .ofertas-lista .boton {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: auto; min-height: 48px; padding: 10px 16px; box-sizing: border-box;
	white-space: normal; text-align: center; font-size: 1em;
}
#cuerpo .pedidos-filtros .boton { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 16px; box-sizing: border-box; }
#cuerpo .pedidos-paginas .boton { display: flex; align-items: center; justify-content: center; flex: 1; width: auto; height: 48px; padding: 0 14px; }
#cuerpo .pedido-cerrar .boton, #cuerpo .canales-mios .boton {
	display: flex; align-items: center; justify-content: center; width: auto; flex: none; height: 48px; padding: 0 16px;
}
#cuerpo .pedido-cerrar { flex-direction: row; align-items: stretch; }
#cuerpo .pedido-ofertas .pedido-cerrar { flex-direction: column; }
#cuerpo .pedido-ofertas .pedido-cerrar .boton { width: 100%; }
#cuerpo dialog .botones { display: flex; gap: 8px; margin-top: 12px; }
#cuerpo dialog .botones .boton {
	display: flex; align-items: center; justify-content: center;
	flex: 1; width: auto; height: 48px; padding: 0 12px; white-space: normal; font-size: 1em;
}
#cuerpo .boton.secundario, #cuerpo dialog .boton.secundario { background: #fff; color: var(--primario, #56304f); border: 1px solid var(--primario, #56304f); }
#cuerpo .boton.principal { background: var(--acento); color: var(--primario, #56304f); border: 0; }
.pedidos-tabs a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.pedido-card > a { min-height: 44px; }
@media (min-width: 750px) {
	#cuerpo .pedidos-cab .boton, #cuerpo .pedidos-acciones .boton { width: auto; }
	#cuerpo .pedido-ofertas .pedido-cerrar { flex-direction: row; align-items: end; }
	#cuerpo .pedido-ofertas .pedido-cerrar .boton { width: auto; }
}