/* 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;
    max-height: 90vh;
  }
  #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;
  }
 
  /* 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);
}