/* ===========================================================================
   pedidos.css — /pedido y /mis-pedidos, y los pedidos dentro de /mi-empresa.

   Los colores, las tipografías, la cabecera y .wrap vienen de styles.css;
   el armador (.sumar), .btn-lleno, .btn-borde y .logo vienen de
   proveedores.css. Acá está solo lo propio del pedido: las líneas, los
   totales, las tarjetas de estado y los dos diálogos.

   Las dos páginas son oscuras como la ficha del proveedor, no claras como
   /perfil: el pedido se mira al lado del catálogo, y saltar de negro a
   crema entremedio se siente como cambiar de sitio.
   =========================================================================== */

[hidden] { display: none !important; }

.fondo-oscuro { background: var(--negro); color: var(--crema); }
.fondo-oscuro .pie__legal { color: var(--tenue); }

.pagina-pedido { padding-block: clamp(22px, 3vw, 40px) 70px; }

.volver-linea { margin-bottom: 18px; }
.volver-linea .volver {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--sobre-oscuro); font-size: .875rem;
}
.volver-linea .volver:hover { color: var(--naranja); }

.titulo-pedido {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.03em;
  color: var(--crema);
}
.bajada-pedido {
  margin-top: 8px; max-width: 62ch;
  color: var(--sobre-oscuro); font-size: .9375rem; line-height: 1.6;
}

/* ------------------------------------------------------------ el vacío */
.vacio-pedido {
  margin-top: 28px; padding: 44px 28px; text-align: center;
  border: 1px solid var(--chip-oscuro); background: var(--superficie);
}
.vacio-pedido h2 {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--crema);
}
.vacio-pedido p {
  margin: 10px auto 22px; max-width: 46ch;
  color: var(--tenue); font-size: .9375rem; line-height: 1.6;
}
.vacio-pedido .btn-lleno { display: inline-block; padding-inline: 30px; }

/* ================================================== un bloque por proveedor */
.bloque-prov {
  margin-top: 26px; padding: 24px clamp(18px, 3vw, 28px) 26px;
  background: var(--superficie); border: 1px solid var(--chip-oscuro);
}
.bloque-prov__cabeza {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--chip-oscuro);
}
.bloque-prov__quien { flex: 1 1 200px; min-width: 0; }
.bloque-prov__quien h2 {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--crema);
  letter-spacing: -.02em;
}
.bloque-prov__quien p { margin-top: 3px; font-size: .8125rem; color: var(--tenue); }

.enlace-quitar {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--tenue); font-size: .8125rem; text-decoration: underline;
}
.enlace-quitar:hover { color: var(--naranja); }

/* --------------------------------------------------------- las líneas */
.lineas { display: flex; flex-direction: column; }
.linea {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  padding-block: 15px; border-bottom: 1px solid var(--chip-oscuro);
}
.linea__que { flex: 1 1 220px; min-width: 0; }
.linea__que b {
  display: block;
  font-family: var(--display); font-size: .9375rem; font-weight: 500; color: var(--crema);
}
.linea__que span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--tenue); }
.linea__plata { flex-shrink: 0; text-align: right; min-width: 108px; }
.linea__plata span { display: block; font-size: .75rem; color: var(--tenue); }
.linea__plata b {
  font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--crema);
}

/* ---------------------------------------------------------- los totales */
.totales {
  display: flex; justify-content: flex-end; gap: 28px; flex-wrap: wrap;
  padding-block: 18px;
}
.totales > div { text-align: right; }
.totales span {
  display: block;
  font-family: var(--display); font-size: .625rem; letter-spacing: .12em; color: var(--tenue);
}
.totales b {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500; color: var(--sobre-oscuro);
}
.totales__final b { font-size: 1.5rem; font-weight: 700; color: var(--crema); letter-spacing: -.02em; }

.aviso-minimo {
  border-left: 2px solid var(--naranja); padding: 12px 14px;
  background: rgba(244, 116, 22, .07);
  font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro);
}
.aviso-minimo b { color: var(--naranja); font-weight: 600; }

/* --------------------------------------------------------- el mensaje */
.campo-mensaje { display: block; margin-top: 18px; }
.campo-mensaje > span {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-size: .75rem; letter-spacing: .04em; color: var(--tenue);
}
.campo-mensaje textarea {
  width: 100%; resize: vertical; min-height: 58px;
  border: 1px solid var(--borde-oscuro); background: var(--negro); color: var(--crema);
  padding: 11px 13px; font-family: inherit; font-size: .9375rem;
}
.campo-mensaje textarea:focus { outline: 2px solid var(--naranja); outline-offset: -2px; }

/* -------------------------------------------------------- las salidas */
.salidas {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px;
}
.salidas > * { flex: 1 1 180px; }
.salidas .btn-lleno[disabled] { opacity: .45; cursor: not-allowed; }
.btn--apagado { opacity: .4; pointer-events: none; }

.nota-salidas {
  margin-top: 12px; font-size: .8125rem; line-height: 1.65; color: var(--tenue);
  max-width: 78ch;
}
.nota-salidas b { color: var(--sobre-oscuro); font-weight: 600; }

.aviso-salida {
  margin-top: 14px; padding: 12px 14px;
  border-left: 2px solid var(--naranja); background: rgba(244, 116, 22, .07);
  font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro);
}
.aviso-salida--bueno { border-left-color: var(--verde); background: rgba(56, 160, 72, .09); }

/* ===================================================== las tarjetas de estado

   Sirven para los dos lados: el local mirando qué le contestaron y el
   proveedor mirando qué le están pidiendo. La franja de la izquierda dice
   en qué está sin tener que leer. */
.filtros-pedidos {
  display: flex; gap: 8px; flex-wrap: wrap; margin-block: 22px 4px;
}
.filtros-pedidos button {
  border: 1px solid var(--borde-oscuro); background: transparent; color: var(--sobre-oscuro);
  font-family: var(--display); font-size: .8125rem; padding: 8px 15px; cursor: pointer;
}
.filtros-pedidos button:hover { border-color: var(--tenue); color: var(--crema); }
.filtros-pedidos button[aria-pressed="true"] {
  background: var(--naranja); border-color: var(--naranja); color: var(--negro); font-weight: 700;
}

.tarjeta-pedido {
  margin-top: 14px; padding: 20px clamp(16px, 2.5vw, 26px) 22px;
  background: var(--superficie);
  border: 1px solid var(--chip-oscuro); border-left: 3px solid var(--tenue);
}
.tarjeta-pedido--enviado   { border-left-color: var(--naranja); }
.tarjeta-pedido--aceptado  { border-left-color: var(--verde); }
.tarjeta-pedido--rechazado { border-left-color: var(--borde-oscuro); }
.tarjeta-pedido--entregado { background: #101010; border-left-color: var(--chip-oscuro); }
.tarjeta-pedido--cancelado { border-left-color: var(--rojo); }
/* Va DESPUÉS de los otros estados a propósito: pesa lo mismo que
   .tarjeta-pedido--aceptado y tiene que ganarle, porque un pedido atrasado
   sigue estando aceptado y lo que importa ahora es el atraso. */
.tarjeta-pedido--atrasado { border-left-color: var(--rojo); }
/* Con una fecha nueva sobre la mesa el rojo sobra: ya no es un silencio, es
   algo que decidir. Va después del rojo para ganarle cuando pasan las dos. */
.tarjeta-pedido--espera-fecha { border-left-color: var(--naranja); }
.tarjeta-pedido--nuevo { outline: 2px solid var(--naranja); outline-offset: 2px; }

.tarjeta-pedido__cabeza {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.marbete-estado {
  font-family: var(--display); font-size: .625rem; letter-spacing: .1em; font-weight: 700;
  padding: 4px 8px; background: var(--chip-oscuro); color: var(--sobre-oscuro);
}
.marbete-estado--enviado  { background: var(--naranja); color: var(--negro); }
.marbete-estado--aceptado { background: var(--verde); color: #fff; }
.marbete-estado--atrasado { background: var(--rojo); color: #fff; }
/* El cancelado va en contorno y no relleno: en el historial es un dato, no
   una alarma. La alarma es el atrasado, que todavía se puede arreglar. */
.marbete-estado--cancelado {
  background: transparent; border: 1px solid var(--rojo); color: var(--rojo); padding: 3px 7px;
}

/* ===================================================== la franja del atraso

   Un párrafo rojo arriba de la tarjeta. Cuenta lo mismo en los dos paneles
   —cuántos días, qué pasa si nadie hace nada— pero con palabras distintas:
   para el proveedor es su compromiso pasado de fecha; para el local es un
   respaldo que corre solo. El naranja es para cuando ya hay una fecha nueva
   esperando respuesta: eso no es una alarma, es algo que decidir. */
.franja-atraso {
  margin-bottom: 10px; padding: 9px 12px;
  border-left: 2px solid var(--rojo); background: rgba(231, 76, 60, .10);
  font-size: .875rem; line-height: 1.55; color: var(--sobre-oscuro);
}
.franja-atraso b { color: var(--rojo); font-weight: 700; }
.franja-atraso--aviso {
  border-left-color: var(--naranja); background: rgba(244, 116, 22, .10);
}
.franja-atraso--aviso b { color: var(--naranja); }

.cuentas-pedidos b.rojo { color: var(--rojo); }

/* ============================================= el antes y el después

   En el diálogo de la fecha nueva, las dos fechas lado a lado: la pregunta
   que se está contestando es exactamente «¿de cuándo a cuándo?». */
.cambio-fecha {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--chip-oscuro); padding: 16px 18px;
}
.cambio-fecha__lado { flex: 1 1 140px; min-width: 0; }
.cambio-fecha__lado span {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-size: .5625rem; letter-spacing: .1em; color: var(--tenue);
}
.cambio-fecha__lado b {
  font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--tenue);
  text-decoration: line-through;
}
.cambio-fecha__lado--nueva b {
  color: var(--crema); font-weight: 700; text-decoration: none;
}
.cambio-fecha__flecha { flex: none; color: var(--naranja); }
@media (max-width: 460px) {
  .cambio-fecha__flecha { transform: rotate(90deg); }
}

.tarjeta-pedido__cabeza b {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700; color: var(--crema);
}
/* El :not() no sobra: sin él este selector le gana por especificidad al
   color del marbete y "ACEPTADO" queda gris sobre verde, ilegible. */
.tarjeta-pedido__cabeza > span:not(.marbete-estado) { font-size: .8125rem; color: var(--tenue); }

/* El alto mínimo empareja la columna: una tarjeta de un pedido rechazado
   con un motivo largo y una de uno esperando respuesta terminaban midiendo
   distinto, y la vista saltaba buscando dónde estaba cada total. El mínimo
   lo pone la columna derecha —total, botón y su nota—, que es lo más alto
   que puede haber ahí. */
.tarjeta-pedido__cuerpo {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-top: 14px;
  min-height: 156px;
}
.tarjeta-pedido__que { flex: 1 1 280px; min-width: 0; }

/* Un motivo de rechazo puede venir largo. Se corta en dos líneas: el texto
   entero está en el detalle, y lo que se compara de un vistazo no puede
   estirar la tarjeta al doble que las de al lado. */
.tarjeta-pedido__linea {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-pedido__que .detalle { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-pedido__que .detalle > div {
  display: flex; gap: 14px; font-size: .875rem; color: var(--sobre-oscuro);
}
.tarjeta-pedido__que .detalle b:first-child {
  font-family: var(--display); font-weight: 700; width: 34px; flex-shrink: 0; color: var(--crema);
}
.tarjeta-pedido__que .detalle > div > span { flex-grow: 1; min-width: 0; }
.tarjeta-pedido__que .detalle > div > b:last-child { font-family: var(--display); font-weight: 500; }

.tarjeta-pedido__linea { margin-top: 10px; font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro); }
.tarjeta-pedido__linea b { font-weight: 600; color: var(--crema); }
.tarjeta-pedido__gris {
  color: var(--tenue); font-size: .8125rem; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* El contenido del pedido, en una línea, y el botón que lo abre entero. */
.tarjeta-pedido__resumen {
  margin-top: 10px; font-size: .875rem; color: var(--sobre-oscuro);
}
.ver-detalle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  border: 1px solid var(--borde-oscuro); background: transparent; color: var(--sobre-oscuro);
  font-family: var(--display); font-size: .8125rem; padding: 7px 13px; cursor: pointer;
}
.ver-detalle:hover { border-color: var(--naranja); color: var(--naranja); }

/* El total y el botón en UNA columna, el total arriba.
   Antes iban en dos columnas sueltas y el total caía a distinta altura en
   cada tarjeta según lo largo que fuera el texto de la izquierda: la vista
   tenía que ir a buscarlo. Ahora siempre está en el mismo lugar, justo
   encima del botón que lo cobra. */
.tarjeta-pedido__lado {
  flex: none; width: 226px; display: flex; flex-direction: column; gap: 12px;
}
.tarjeta-pedido__plata { text-align: right; }
.tarjeta-pedido__plata span {
  display: block;
  font-family: var(--display); font-size: .625rem; letter-spacing: .12em; color: var(--tenue);
}
.tarjeta-pedido__plata b {
  font-family: var(--display); font-size: 1.3125rem; font-weight: 700; color: var(--crema);
}

.tarjeta-pedido__acciones { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 720px) {
  .tarjeta-pedido__lado { width: 100%; }
  .tarjeta-pedido__plata { text-align: left; }
}

.btn-verde {
  height: 46px; border: 0; background: var(--verde); color: #fff;
  font-family: var(--display); font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.btn-verde:hover { background: #2F8C3D; }
.btn-naranja-borde {
  height: 44px; border: 1px solid var(--naranja); background: transparent; color: var(--naranja);
  font-family: var(--display); font-size: .875rem; font-weight: 500; cursor: pointer;
}
.btn-naranja-borde:hover { background: rgba(244, 116, 22, .1); }
.btn-gris-borde {
  height: 42px; border: 1px solid var(--borde-oscuro); background: transparent; color: var(--sobre-oscuro);
  font-family: var(--display); font-size: .8125rem; cursor: pointer;
}
.btn-gris-borde:hover { border-color: var(--tenue); color: var(--crema); }
.btn-negro-lleno {
  height: 44px; border: 0; background: var(--crema); color: var(--negro);
  font-family: var(--display); font-size: .875rem; font-weight: 700; cursor: pointer;
}
.btn-negro-lleno:hover { background: #fff; }

.fila-botones { display: flex; gap: 8px; }
.fila-botones > * { flex: 1 1 0; }

/* El recordatorio de calificar: se queda en el historial hasta que lo
   hace. No es un cartel que se cierra, es una tarea pendiente. */
.falta-calificar {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .875rem; color: var(--naranja);
}

.estrellas-vistas { display: inline-flex; gap: 2px; vertical-align: middle; }

/* ================================================================ diálogos */
/* Alto tope y el cuerpo con scroll propio: sin esto, en un portátil el
   calendario empuja el pie fuera de la pantalla y el botón de aceptar
   queda donde nadie lo alcanza. */
.dlg-pedido {
  width: min(560px, calc(100vw - 32px));
  max-height: min(92vh, 880px);
  padding: 0; border: 0;
  background: var(--superficie); color: var(--crema);
  border: 1px solid var(--borde-oscuro);
  overflow: hidden;
}
/* El display va SOLO en [open]: ponerlo en la regla base le gana a la
   hoja del navegador (dialog:not([open]) { display: none }) y el diálogo
   queda tapando la página para siempre, invisible pero comiéndose los
   clics de todo lo que hay detrás. */
.dlg-pedido[open] { display: flex; flex-direction: column; }
.dlg-pedido > .dlg-pedido__cabeza, .dlg-pedido > .visto-verde,
.dlg-pedido > .dlg-pedido__pie, .dlg-pedido > .dlg-error { flex: none; }
.dlg-pedido > .dlg-pedido__cuerpo { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.dlg-pedido::backdrop { background: rgba(0, 0, 0, .68); }
.dlg-pedido__cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 22px 24px 18px; border-bottom: 1px solid var(--chip-oscuro);
}
.dlg-pedido__cabeza h3 {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--crema);
}
.dlg-pedido__cabeza p { margin-top: 5px; font-size: .875rem; color: var(--tenue); }
.dlg-pedido__cerrar {
  flex: none; border: 0; background: transparent; color: var(--tenue); cursor: pointer;
  padding: 4px; line-height: 0;
}
.dlg-pedido__cerrar:hover { color: var(--crema); }
.dlg-pedido__cuerpo { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.dlg-pedido__pie {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 16px 24px 20px; border-top: 1px solid var(--chip-oscuro);
}
.dlg-pedido__pie .crece { flex-grow: 1; font-size: .875rem; color: var(--sobre-oscuro); }

/* --------------------------------------------------------- el calendario */
.mes {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mes b { font-family: var(--display); font-size: 1rem; font-weight: 700; }
.mes button {
  width: 36px; height: 36px; border: 1px solid var(--borde-oscuro);
  background: transparent; color: var(--sobre-oscuro); cursor: pointer;
  display: grid; place-items: center;
}
.mes button:hover:not([disabled]) { border-color: var(--tenue); color: var(--crema); }
.mes button[disabled] { opacity: .3; cursor: not-allowed; }

.semana, .dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.semana span {
  text-align: center;
  font-family: var(--display); font-size: .625rem; letter-spacing: .08em; color: var(--tenue);
}
.dias { margin-top: 8px; }
.dias button {
  height: 40px; border: 1px solid var(--chip-oscuro); background: transparent;
  color: var(--crema); font-family: var(--display); font-size: .9375rem; cursor: pointer;
}
.dias button:hover:not([disabled]) { border-color: var(--naranja); }
.dias button[disabled] { color: #4A443F; cursor: not-allowed; }
/* El día que el proveedor declaró cerrado: se distingue sin apagarse del
   todo, porque elegirlo sigue siendo válido — es su camión. */
.dias button.cerrado { background: #0C0C0C; color: var(--tenue); border-style: dashed; }
.dias button[aria-pressed="true"] {
  background: var(--crema); border-color: var(--crema); color: var(--negro); font-weight: 700;
}

.nota-calendario { margin-top: 11px; font-size: .75rem; color: var(--tenue); line-height: 1.6; }

.aviso-verde {
  border-left: 2px solid var(--verde); background: rgba(56, 160, 72, .09);
  padding: 13px 15px; font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro);
}
.aviso-verde b { font-weight: 600; color: var(--crema); }

/* ------------------------------------------------------------ calificar */
.visto-verde { padding: 30px 24px 24px; text-align: center; background: rgba(56, 160, 72, .09); border-bottom: 1px solid rgba(56, 160, 72, .3); }
.visto-verde span {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--verde);
}
.visto-verde h3 { margin-top: 14px; font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.visto-verde p { margin-top: 6px; font-size: .875rem; color: var(--sobre-oscuro); }

.estrellas-elegir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.estrellas-elegir button {
  width: 50px; height: 50px; border: 1px solid var(--borde-oscuro);
  background: transparent; cursor: pointer; display: grid; place-items: center;
}
.estrellas-elegir button:hover { border-color: var(--naranja); }
.estrellas-elegir > span {
  margin-left: 6px; font-family: var(--display); font-size: .9375rem; color: var(--sobre-oscuro);
}

.motivo-caja textarea, .resena-caja textarea {
  width: 100%; resize: vertical; min-height: 92px;
  border: 1px solid var(--borde-oscuro); background: var(--negro); color: var(--crema);
  padding: 12px; font-family: inherit; font-size: .9375rem;
}
.motivo-caja textarea:focus, .resena-caja textarea:focus {
  outline: 2px solid var(--naranja); outline-offset: -2px;
}
.motivo-caja > span, .resena-caja > span {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-size: .75rem; letter-spacing: .04em; color: var(--tenue);
}
.pie-campo { margin-top: 6px; font-size: .75rem; color: var(--tenue); }

.dlg-error {
  margin: 0 24px 16px; padding: 11px 13px;
  border-left: 2px solid var(--naranja); background: rgba(244, 116, 22, .07);
  font-size: .875rem; color: var(--sobre-oscuro);
}

/* ============================== los pedidos dentro del panel del proveedor

   Va en negro como la ficha de abajo y no en crema como el resto de la
   página: es la misma empresa vista desde el mismo lugar. */
.pedidos-panel {
  background: var(--negro); color: var(--crema);
  padding-block: clamp(26px, 3.5vw, 42px) clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--chip-oscuro);
}
.pedidos-panel__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pedidos-panel__cabeza h2 {
  margin-top: 6px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -.03em; color: var(--crema);
}

.cuentas-pedidos {
  display: flex; gap: 1px; background: var(--chip-oscuro); border: 1px solid var(--chip-oscuro);
}
.cuentas-pedidos > div { background: var(--superficie); padding: 11px 19px; }
.cuentas-pedidos span {
  display: block;
  font-family: var(--display); font-size: .5625rem; letter-spacing: .12em; color: var(--tenue);
}
.cuentas-pedidos b {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--crema);
}
.cuentas-pedidos b.naranja { color: var(--naranja); }

.pedidos-panel .vacio-pedido { margin-top: 14px; padding-block: 34px; }


/* ===================================================== el detalle del pedido

   La lista completa vive acá y no dentro de la tarjeta: así todas las
   tarjetas miden lo mismo y la columna se lee de corrido. */
.detalle-linea { margin-top: 10px; font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro); }
.detalle-linea b { color: var(--crema); font-weight: 600; }

.detalle-tabla { border-top: 1px solid var(--chip-oscuro); }
.detalle-tabla__titulos, .detalle-tabla__fila {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 88px 92px;
  gap: 10px; align-items: baseline;
}
.detalle-tabla__titulos {
  padding-block: 9px;
  font-family: var(--display); font-size: .5625rem; letter-spacing: .1em; color: var(--tenue);
}
.detalle-tabla__titulos span:nth-child(3),
.detalle-tabla__titulos span:nth-child(4),
.detalle-tabla__fila > span:nth-child(3),
.detalle-tabla__fila > b:nth-child(4) { text-align: right; }

.detalle-tabla__fila {
  padding-block: 11px; border-top: 1px solid var(--chip-oscuro);
  font-size: .875rem; color: var(--sobre-oscuro);
}
.detalle-tabla__fila > b:first-child {
  font-family: var(--display); font-weight: 700; color: var(--crema);
}
.detalle-tabla__fila > span:nth-child(2) { color: var(--crema); }
.detalle-tabla__fila small { display: block; margin-top: 2px; color: var(--tenue); font-size: .75rem; }
.detalle-tabla__fila > b:last-child { font-family: var(--display); font-weight: 500; color: var(--crema); }

.detalle-totales {
  display: flex; justify-content: flex-end; gap: 26px; flex-wrap: wrap;
  border-top: 1px solid var(--borde-oscuro); padding-top: 14px;
}
.detalle-totales > div { text-align: right; }
.detalle-totales span {
  display: block;
  font-family: var(--display); font-size: .5625rem; letter-spacing: .12em; color: var(--tenue);
}
.detalle-totales b {
  font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--sobre-oscuro);
}
.detalle-totales__final b { font-size: 1.375rem; font-weight: 700; color: var(--crema); letter-spacing: -.02em; }

.detalle-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
  border-top: 1px solid var(--chip-oscuro); padding-top: 16px;
}
.detalle-datos span {
  display: block;
  font-family: var(--display); font-size: .5625rem; letter-spacing: .1em; color: var(--tenue);
}
.detalle-datos b { font-size: .875rem; font-weight: 500; color: var(--crema); }

.detalle-mensaje {
  margin-top: 14px; border-left: 2px solid var(--naranja); padding: 11px 14px;
  background: rgba(244, 116, 22, .07);
  font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro);
}
.detalle-mensaje span {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-size: .5625rem; letter-spacing: .1em; color: var(--tenue);
}

@media (max-width: 520px) {
  .detalle-tabla__titulos, .detalle-tabla__fila { grid-template-columns: 36px minmax(0, 1fr) 84px; }
  .detalle-tabla__titulos span:nth-child(3), .detalle-tabla__fila > span:nth-child(3) { display: none; }
}


/* ===========================================================================
   MODO CLARO — la parte de los pedidos

   El remapeo de las seis variables (--superficie, --chip-oscuro,
   --borde-oscuro, --sobre-oscuro, --tenue, --crema) sobre .tema-claro NO
   está acá: vive en proveedores.css, que cargan las cuatro páginas que lo
   usan —incluida /proveedores, que no carga esta hoja—. Acá quedan solo los
   parches de lo que es propio del pedido.
   =========================================================================== */

/* Los tres fondos que en oscuro eran --negro. */
.tema-claro .campo-mensaje textarea,
.tema-claro .motivo-caja textarea,
.tema-claro .resena-caja textarea { background: var(--blanco); }
.tema-claro .pedidos-panel { background: #F7F3EE; }

/* ------------------------------------------------- las tarjetas se recortan */
.tema-claro .tarjeta-pedido,
.tema-claro .bloque-prov,
.tema-claro .vacio-pedido,
.tema-claro .dlg-pedido { box-shadow: var(--sombra-card); }

/* Entregado es archivo: se hunde un paso en vez de brillar. */
.tema-claro .tarjeta-pedido--entregado { background: #F2EDE6; box-shadow: none; border-left-color: #CFC5BB; }
/* Las franjas de color (naranja, verde) ya se ven solas sobre blanco. Las
   dos neutras —sin estado y rechazado— sí había que subirlas: en claro,
   --tenue y --borde-oscuro se perdían contra el borde de la tarjeta.
   Ojo con el orden y la especificidad: estas dos reglas pesan igual que
   .tema-claro .tarjeta-pedido--enviado, así que no pueden ir después de
   una regla genérica que vuelva a tocar border-left-color. */
.tema-claro .tarjeta-pedido--rechazado { border-left-color: #B3A89E; }

/* El rojo al 10% casi no se ve sobre blanco. */
.tema-claro .franja-atraso { background: rgba(231, 76, 60, .09); }
.tema-claro .franja-atraso--aviso { background: rgba(244, 116, 22, .10); }
.tema-claro .marbete-estado--cancelado { background: #FDEDEB; }

/* OJO: acá había un `.tema-claro .marbete-estado { background: ... }` para
   darle cuerpo al marbete gris, y le ganaba por especificidad (0,2,0 contra
   0,1,0) a .marbete-estado--enviado y --aceptado: el chip naranja de
   «ESPERANDO» y el verde de «ACEPTADO» salían los dos grises. El marbete
   base ya queda bien con solo el remapeo de --chip-oscuro y --sobre-oscuro,
   así que no hace falta ninguna regla. Si alguna vez hace falta, va con
   :not([class*="--"]) o repitiendo el modificador. */

/* Los avisos naranjas pintados al 7% casi no se ven sobre blanco. */
.tema-claro .aviso-minimo,
.tema-claro .aviso-salida,
.tema-claro .detalle-mensaje,
.tema-claro .dlg-error { background: rgba(244, 116, 22, .10); }
.tema-claro .aviso-salida--bueno,
.tema-claro .aviso-verde { background: rgba(56, 160, 72, .12); }
.tema-claro .visto-verde { background: rgba(56, 160, 72, .12); border-bottom-color: rgba(56, 160, 72, .35); }

/* ------------------------------------------------- el botón de tinta llena */
.tema-claro .btn-negro-lleno { background: var(--tinta); color: #F7F3EE; }
.tema-claro .btn-negro-lleno:hover { background: #000; }

/* ---------------------------------------------------------- el calendario */
.tema-claro .dias button[disabled] { color: #BCB3AB; }
.tema-claro .dias button.cerrado { background: var(--chip-claro); color: var(--tinta-suave); }
.tema-claro .dias button[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: #F7F3EE;
}


/* ===========================================================================
   NETO, IVA Y TOTAL EN VERTICAL

   Iban en fila horizontal y en el teléfono se partían en cualquier parte:
   el IVA terminaba debajo del neto y el total al lado, y había que armar
   la cuenta con la vista. Ahora van uno bajo otro, con el rótulo a la
   izquierda y la cifra a la derecha, como una boleta. No ocupan más alto
   que antes, porque el rótulo pasó de estar encima a estar al lado.
   =========================================================================== */

.totales, .detalle-totales {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  width: min(100%, 268px); margin-left: auto;
}
.totales > div, .detalle-totales > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  text-align: left;
}
.totales span, .detalle-totales span { margin-bottom: 0; }
.totales__final, .detalle-totales__final {
  border-top: 1px solid var(--borde-oscuro); padding-top: 8px; margin-top: 2px;
}


/* Un botón deshabilitado tiene que verse deshabilitado. «Lo recibí» y
   «Marcar como entregado» se apagan hasta que llegue el día del despacho, y
   sin esto quedaban iguales de verdes y sin reaccionar al clic, que es la
   peor combinación posible: parece roto en vez de parecer todavía no. */
.btn-verde[disabled],
.btn-naranja-borde[disabled],
.btn-gris-borde[disabled],
.btn-negro-lleno[disabled] {
  opacity: .42; cursor: not-allowed;
}
.btn-verde[disabled]:hover { background: var(--verde); }
.btn-naranja-borde[disabled]:hover { background: transparent; }
.btn-gris-borde[disabled]:hover { border-color: var(--borde-oscuro); color: var(--sobre-oscuro); }
.btn-negro-lleno[disabled]:hover { background: var(--crema); }