/* CARRITO HEADER */
  .carrito-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
 
  .carrito-label { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
 
  #producto-actual {
    background: var(--color-bg-input-solid);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 8px;
    font-size: 15px;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    transition: border-color 0.2s var(--ease-apple);
  }
 
  #producto-actual.vacio {
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .carrito-quitar {
    color: var(--color-rojo-suave);
    cursor: pointer;
    font-weight: 500;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.15s var(--ease-apple);
  }
  .carrito-quitar:hover { color: #ffb3ab; }
 
  .carrito-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 2px solid var(--color-accent);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-verde);
  }
 
  /* DETALLES */
  .detalles-label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
    margin-top: 10px;
    margin-bottom: 8px;
  }
 
  .detalles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Un hijo de grid mide por defecto lo que mida su contenido
     (min-width:auto), así que un <select> con una opción larga —"— Documento
     Tributario —"— o un panel con una línea que no se puede cortar estiran su
     columna, y la grilla entera termina más ancha que el carrito: se veía
     saliéndose por el lado derecho, con los <select> de la otra columna
     cortados. Con min-width:0, 1fr vuelve a ser de verdad la mitad y lo que no
     entra se recorta adentro. */
  .detalles-grid > *,
  .detalles-grid > * > * {
    min-width: 0;
  }
 
  .detalles-group { display: flex; flex-direction: column; }
 
  .detalles-group label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 3px;
  }
 
  .detalles-group select,
  .detalles-group input {
    width: 100%;
    padding: 5px 6px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-input-solid);
    color: rgba(255, 255, 255, 0.7);
  }

  /* El campo de escribir usa el token (16px, por el zoom de iOS); el
     <select> se queda en 15px — ver la escala en vitrina.css. */
  .detalles-group input  { font-size: var(--fs-input); }
  .detalles-group select { font-size: 15px; }

  /* El estilo "deshabilitado" (.detalles-group select:disabled) y el
     glow rojo de campo obligatorio (.campo-invalido) ya no viven acá:
     se centralizaron en utilidades.css para que cualquier .form-group o
     .detalles-group de la app los herede solo, sin repetirlos por
     sección — ver ahí "Estado deshabilitado" y "Borde rojo temporal". */

  /* El glow morado de focus para "Persona" y "Empresa" tampoco vive acá:
     se centralizó en utilidades.css (.form-group input:focus / select /
     textarea) para que cualquier .form-group de la app lo herede solo,
     sin repetirlo sección por sección. Como Persona y Empresa ya usan
     .form-group, lo reciben automático. */
 
  .descuento-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
  }
 
  .descuento-wrapper span { font-size: 15px; color: rgba(255, 255, 255, 0.7); flex-shrink: 0; }
  .descuento-wrapper input { flex: 1; }
 
  .checkboxes-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
  }
 
  .checkbox-label {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s var(--ease-apple);
  }
  .checkbox-label:hover { color: rgba(255, 255, 255, 0.9); }
 
  .producto-cliente-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.2s var(--ease-apple);
  }
  .producto-cliente-label:hover {
    color: rgba(255, 255, 255, 0.9);
  }
 
  /* BOTONES DEL CARRITO */
  .carrito-header-btns {
    display: flex;
    gap: 6px;
    align-items: center;
  }
 
  /* ── Botón ícono plano (Siguiente / Volver) — mismo estilo que navbar ── */
  .btn-icono-plano {
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-size: 20px;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple);
}
.btn-icono-plano:hover {
  color: #e1bee7;
  transform: scale(1.1);
}

/* Modificador para los botones "Limpiar/Vaciar/Borrar" (ícono de
   basurero) — antes cada uno repetía style="color:#ff8a80" a mano en
   index.html/carrito.js/agenda.js; ahora es un solo lugar. */
.btn-icono-plano-rojo { color: var(--color-rojo-suave); }
.btn-icono-plano-rojo:hover { color: #ff5252; }

  /* MODAL PDF, y el de un archivo adjunto: la misma ventana ──────
     Los dos estaban escritos aparte, con las mismas trece líneas y el
     mismo comentario copiado. Son la misma ventana mostrando cosas
     distintas, así que ahora es una sola regla y cada uno agrega abajo
     solo lo suyo (el del adjunto se deja medir por la imagen). */
  #modal-preview,
  #modal-preview-archivo {
    display: none;
    position: fixed;
    inset: 0;
    /* Opacidad baja + blur más fuerte: se ve el fondo real (difuminado),
       no una capa casi negra encima. Antes era 0.82 de opacidad — casi
       opaco, tapaba el contenido de atrás en vez de solo desenfocarlo. */
    background: rgba(0,0,0,0.35);
    /* Los mismos 2px que .fx-velo (utilidades.css), que es de donde
       salió el criterio: acá el fondo tiene que seguir leyéndose,
       porque uno abre el comprobante justo para compararlo con lo que
       hay detrás. Esta ventana no usa la clase compartida solo por el
       negro, que es más claro que el de los otros velos. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 24px;
    animation: fadeIn 0.2s ease;
  }
  #modal-preview.active,
  #modal-preview-archivo.active { display: flex; }
  /* Selector por ID+clase: hace falta para ganarle a la regla de arriba,
     que también es por ID — con solo ".cerrando" (una clase) nunca
     hubiera ganado el empate de especificidad. Antes este modal cerraba
     sin ninguna transición (solo se le sacaba .active). */
  #modal-preview.cerrando,
  #modal-preview-archivo.cerrando { animation: fadeOutModalPreview 0.18s var(--ease-apple) forwards; }
 
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fadeOutModalPreview { from { opacity: 1; } to { opacity: 0; } }
 
  .modal-contenido {
    background: var(--color-bg-panel);
    width: 340px;
    max-width: 95vw;
    height: 92%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    border: 1px solid var(--color-border);
  }
 
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    /* Imprimir + Descargar + Compartir + ✕ no caben en los 340px de
       ancho del comprobante: sin esto el último quedaba cortado contra
       el borde. Se dejan envolver a una segunda línea. */
    flex-wrap: wrap;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--color-accent-dark), #4a1372);
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
  }
  /* La fila de botones de la derecha. En el HTML va con "display:flex;
     flex-shrink:0" escrito inline, y ese flex-shrink:0 es justo lo que
     hacía que, al no caber, se saliera por la derecha en vez de
     acomodarse — "Compartir" quedaba cortado contra el borde. Se le
     devuelve la capacidad de encoger (por eso el !important: hay que
     ganarle a un estilo inline) y se la deja envolver. */
  .modal-header > div {
    flex-shrink: 1 !important;
    /* Los botones se quedan juntos en una sola fila: lo que cede es el
       título, que ya viene con ellipsis. Solo cuando ni así alcanza, la
       fila entera baja a una segunda línea (flex-wrap del .modal-header
       de arriba) — pero completa, no partida por la mitad. */
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
  }
  .modal-header h3 { margin: 0; font-size: 17px; font-weight: 500; }
 
  .modal-cerrar {
    background: rgba(255,255,255,0.15);
    border: none;
    color: rgba(255, 255, 255, 0.9);
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--ease-apple), transform 0.15s var(--ease-apple);
  }
  .modal-cerrar:hover { background: rgba(255,255,255,0.3); transform: scale(1.08); }

  /* En teléfono los cuatro botones (Imprimir/Descargar/Compartir/✕) no
     alcanzan a entrar con el padding de escritorio y la fila entera se
     iba a una segunda línea. Se aprietan un poco y entran todos al lado
     del título, que es como se ve mejor. */
  @media (max-width: 480px) {
    .modal-header { padding: 10px; gap: 6px; }
    .modal-header button.modal-cerrar { padding: 0 8px !important; font-size: 11px !important; }
  }
 
  /* MODAL PREVIEW ARCHIVO ADJUNTO — solo lo que se diferencia del de
     arriba: la ventana se acomoda al tamaño de la imagen. */
  #modal-preview-archivo .modal-contenido {
    width: auto;
    max-width: 90vw;
    height: auto;
    /* dvh y no vh: en el Safari del iPhone, vh mide la ventana SIN la
       barra de direcciones ni la de abajo, o sea más alto que lo que
       realmente se ve. La ventana quedaba centrada contra esa altura
       imaginaria y la barra morada de botones se iba por arriba del
       borde, media tapada y sin poder alcanzarla. El vh de la línea de
       arriba queda como respaldo para los navegadores sin dvh. */
    max-height: 90vh;
    max-height: 90dvh;
  }
  #modal-preview-archivo .modal-body img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
  }
  #modal-preview-archivo .modal-body iframe {
    width: 80vw;
    height: 80vh;
    max-width: 900px;
    border: none;
    background: #fff;
  }
 
  /* El comprobante se ve angosto, como una boleta térmica de verdad
     (76mm de ancho real + el padding que ya trae el HTML del ticket).
     Las flechas van con position:absolute por encima del contenido, así
     que no hace falta dejarles espacio de más al costado. */
  #modal-preview-archivo .modal-contenido.preview-modal-comprobante {
    width: 320px;
    max-width: 90vw;
  }
  #modal-preview-archivo .modal-contenido.preview-modal-comprobante .modal-body iframe {
    width: 100%;
    max-width: 320px;
    height: 80vh;
    height: 80dvh;
  }
  /* En un comprobante el nombre del archivo no dice nada que no esté
     adentro —el código sale impreso en el ticket, grande— y en 320px se
     comía el ancho de los botones hasta dejarlo en "Co…". Se saca solo
     acá: para una foto del equipo o un adjunto cualquiera, el nombre es
     lo único que identifica lo que se está mirando. */
  #modal-preview-archivo .modal-contenido.preview-modal-comprobante #preview-archivo-nombre {
    display: none;
  }
 
  /* Flechas de navegación de la galería (comprobante + adjuntos) */
  .preview-archivo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple), transform 0.15s var(--ease-apple);
  }
  .preview-archivo-nav:hover {
    background: rgba(0,0,0,0.75);
    box-shadow: 0 0 0 2px rgba(206,147,216,0.4);
    transform: translateY(-50%) scale(1.08);
  }
  .preview-archivo-nav:disabled { opacity: 0.25; cursor: default; }
  .preview-archivo-nav-izq { left: 8px; }
  .preview-archivo-nav-der { right: 8px; }
  @media (max-width: 640px) {
    .preview-archivo-nav { width: 36px; height: 36px; font-size: 20px; }
  }
 
  /* Tira de miniaturas de la galería (comprobante + adjuntos) */
  #preview-archivo-miniaturas {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  #preview-archivo-miniaturas:empty { display: none; padding: 0; border-top: none; }
  .preview-mini-item {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    transition: border-color 0.15s var(--ease-apple), opacity 0.15s var(--ease-apple), transform 0.15s var(--ease-apple);
    opacity: 0.6;
  }
  .preview-mini-item:hover { opacity: 0.85; transform: translateY(-2px); }
  .preview-mini-item.activa { border-color: #9c6ade; opacity: 1; }
  .preview-mini-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .preview-mini-item .preview-mini-icono { font-size: 20px; }
 
  .modal-body {
    flex: 1;
    overflow: hidden;
    background: #0d0d0d;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Comprobantes impresos (ver _abrirComprobanteImpresoModal, carrito.js):
     el <canvas> con la página dibujada casi siempre es más alto que el
     modal (es un ticket largo) — sin esto, "overflow:hidden" +
     "align-items:center" de arriba recortaba todo menos una franja del
     medio, sin ninguna forma de ver el resto. */
  .modal-body.modal-body-scroll {
    overflow-y: auto;
    align-items: flex-start;
  }
  #pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
  }
  #pdf-cargando {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
 
  /* ═══════════════════════════════════════════════════════════════
     PANEL EXPANDIDO: Seguimiento, Cantidad, Descuento, Garantía
     ═══════════════════════════════════════════════════════════════ */
  
  /* Select de seguimiento del producto */
  #producto-actual select[id^="seguimiento-item-"] {
    background: var(--color-bg-input-solid);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 15px;
    transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  }
  #producto-actual select[id^="seguimiento-item-"] option {
    background: var(--color-bg-input-solid);
    color: rgba(255, 255, 255, 0.7);
  }
  #producto-actual select[id^="seguimiento-item-"]:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 147, 216, 0.2);
  }
 
  /* Input cantidad */
  #producto-actual input[id^="cantidad-item-"] {
    background: var(--color-bg-input-solid);
    color: #e0e0e0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 15px;
    text-align: center;
    transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  }
  #producto-actual input[id^="cantidad-item-"]:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 147, 216, 0.2);
  }
 
  /* Input descuento + select tipo descuento */
  #producto-actual input[id^="desc-item-"],
  #producto-actual select[id^="desc-tipo-item-"] {
    background: var(--color-bg-input-solid);
    color: #e0e0e0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 15px;
    text-align: center;
    height: 32px;
    box-sizing: border-box;
    transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  }
  #producto-actual input[id^="desc-item-"]:focus,
  #producto-actual select[id^="desc-tipo-item-"]:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 147, 216, 0.2);
  }
  #producto-actual select[id^="desc-tipo-item-"] option {
    background: var(--color-bg-input-solid);
    color: rgba(255, 255, 255, 0.7);
  }
 
  /* Input duración garantía + select unidad */
  #producto-actual input[onchange^="actualizarGarantiaItem"],
  #producto-actual select[onchange^="actualizarGarantiaItem"] {
    background: var(--color-bg-input-solid);
    color: #e0e0e0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  }
  #producto-actual select[onchange^="actualizarGarantiaItem"] {
    height: 29px;
  }
  #producto-actual input[onchange^="actualizarGarantiaItem"]:focus,
  #producto-actual select[onchange^="actualizarGarantiaItem"]:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 147, 216, 0.2);
  }
  #producto-actual select[onchange^="actualizarGarantiaItem"] option {
    background: var(--color-bg-input-solid);
    color: rgba(255, 255, 255, 0.7);
  }
/* ================================================================
   AUTOCOMPLETE CLIENTE (nombre / rut)
   ================================================================ */
.autocomplete-wrap {
  position: relative;
}
 
.autocomplete-lista {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--color-bg-input-solid);
  border: 1px solid var(--color-border-card);
  border-radius: 12px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
 
.autocomplete-lista.activo {
  display: block;
  animation: asomarse 0.15s var(--ease-apple);
}
 
.autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #272727;
  transition: background 0.15s var(--ease-apple), box-shadow 0.15s var(--ease-apple);
}
 
.autocomplete-item:last-child {
  border-bottom: none;
}
 
.autocomplete-item:hover,
.autocomplete-item.activo {
  background: rgba(206, 147, 216, 0.12);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
 
.autocomplete-nombre {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85); overflow-wrap: anywhere;
}

/* Precio al lado del nombre — hoy solo lo usa el combo "Reparar" en el
   campo Categoría (agenda.js, _mostrarReparAC), donde cada opción ya
   corresponde a un servicio puntual con precio propio. */
.autocomplete-precio {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
  flex-shrink: 0;
}
 
.autocomplete-rut {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
 
.autocomplete-vacio {
  padding: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

/* .panel-metodo-extra y compañía (usadas acá para "Monto abonado" /
   "Forma de pago") se movieron a utilidades.css — son un estilo de
   panel genérico, no algo específico del carrito. */

/* ── "Enviar el comprobante a este correo" (carrito › Persona) ──
   Va pegada al campo de correo porque es sobre ese correo: se marca
   cuando el cliente pide que se lo manden, y se desmarca sola en cada
   venta nueva. */
.chk-enviar-correo {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 13px; color: var(--txt-sub);
  cursor: pointer;
  user-select: none;
}
.chk-enviar-correo input { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; }
.chk-enviar-correo:hover { color: var(--txt-cuerpo); }

/* ── Falta por cobrar: la segunda mitad de una venta en dos tiempos ──
   Un aviso, no un formulario: la venta se cierra con Procesar como
   cualquier otra (ver _actualizarPanelCobrarSaldo en carrito.js). Va en
   el mismo panel que "Monto abonado" (.panel-metodo-extra). */
.cobrar-saldo-monto {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-verde);
  margin-bottom: 8px;
}
.cobrar-saldo-nota {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--txt-sub);
}

/* ── La tarjeta de un producto en el carrito ────────────────────────
   Estaba escrita con los estilos pegados adentro del JS, repetidos en
   cada línea del carrito. Acá quedan una vez.

   El orden: arriba el panel de cantidad / descuento / garantía, después
   las fechas de la garantía en su propia línea, y al final los datos que
   vienen del catálogo. Antes las fechas eran una cuarta columna del
   panel, apretadas al lado de los campos y partidas en dos renglones. */
.cr-panel {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 8px 10px 10px;
  background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border);
}
.cr-lbl {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.cr-in {
  width: 100%;
  padding: 5px;
  font-size: 13px;
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-input-solid);
  color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}
.cr-sel {
  padding: 5px 2px;
  font-size: 11px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-input-solid);
  color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}

/* Inicia / Vence, la cuarta columna del panel: va pegada al selector de
   días porque es su resultado. */
.cr-fechas {
  /* La base es justo lo que mide "Inicia: 03-10-2026" (92px). Importa
     el número: un contenedor flex decide si parte el renglón MIRANDO
     las bases, no los tamaños ya encogidos — con una base mayor que el
     hueco que queda, las fechas se caían abajo aunque después hubieran
     cabido. min-width:0 le permite achicarse si hace falta en vez de
     empujar a todos. */
  flex: 1 1 92px;
  min-width: 0;
  padding-bottom: 5px;
  font-size: 10px;
  line-height: 1.5;
  color: #888;
  white-space: nowrap;
}
.cr-fechas strong { color: #ccc; }

/* La línea de abajo: costo / venta / proveedor / ganancia. Es para mirar
   mientras se ajusta cantidad o descuento, que es justo cuando cambia la
   ganancia. */
.cr-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 6px 10px;
  background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border);
}
.cr-dato { font-size: 10px; color: #888; white-space: nowrap; }
.cr-dato b { color: #ccc; font-weight: 600; }
.cr-vence { color: var(--color-accent) !important; }