/* Paleta tomada de las gráficas de la agencia: negro carbón, naranja y blanco.
   Los grises son neutros a propósito — cualquier tinte azul pelea con el naranja
   y aleja la página de las piezas que Choni publica en Instagram. */
:root {
  /* Carbón, no negro puro: la pieza tiene el fondo oscuro pero con luz: el
     asfalto, el degradado, la carrocería. El negro absoluto contra texto
     blanco cansa la vista en una pantalla que el vendedor mira todo el día. */
  --fondo: #101013;
  --panel: #191920;
  --panel-alto: #212128;
  --borde: #2e2e36;
  --borde-alto: #3e3e48;
  /* Negro pleno, sólo para líneas. Contra el carbón de los paneles no lee
     como un borde sino como una hendidura, que es como están separados los
     bloques en las gráficas de la agencia. */
  --negro: #000;
  /* Blanco roto en vez de blanco puro, para bajar el golpe de contraste. */
  --texto: #dcdce1;
  --texto-tenue: #97979f;
  /* El único blanco pleno queda para el logo, que así sigue siendo el punto
     más brillante de la pantalla aunque todo lo demás baje. */
  --blanco: #f4f4f6;

  /* Naranja del logo. Es el acento principal: botones, foco, paso activo, precio. */
  --naranja: #e59113;
  --naranja-alto: #f5a83a;
  --naranja-tenue: rgba(229, 145, 19, 0.1);
  /* El ámbar quemado de las estelas de luz de la pieza. Da profundidad a los
     degradados sin meter un color nuevo. */
  --ambar: #b4670c;
  /* El texto sobre naranja va oscuro: contra el naranja el negro lee mucho
     mejor que el blanco, y es como está en las gráficas. */
  --sobre-naranja: #1a1408;

  /* El plateado de la carrocería del auto. Segundo color de la pieza después
     del naranja, y acá sirve para lo que está cumplido o es secundario. */
  --plata: #b3b7bd;
  --plata-tenue: #6f747c;

  /* Semánticos del desglose. No son de marca, pero suma y resta necesitan
     distinguirse de un vistazo. */
  --verde: #47ad78;
  --rojo: #d4695f;
  --amarillo: #d09c3c;
  --radio: 12px;

  /* Sin esto el desplegable nativo de los <select> sale blanco en Android y
     rompe el modo oscuro justo en el paso 1. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.contenedor { max-width: 720px; margin: 0 auto; padding: 16px 16px 64px; }

/* ── Encabezado / marca ──
   Reconstruida con tipografía a partir del logo de la agencia: "LAZONA" en
   blanco, "AUTOS" en naranja y "MULTIMARCAS" debajo, espaciado y entre líneas. */
.cabecera {
  position: relative;
  text-align: center;
  padding: 22px 16px 20px;
  margin-bottom: 20px;
  /* Degradado frío tirando a gris acero: es la luz sobre la carrocería,
     apagándose hasta el negro en el borde de abajo. */
  background: linear-gradient(160deg, #26262d 0%, #1a1a21 45%, #0d0d10 100%);
  border: 1px solid var(--negro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: var(--radio);
  overflow: hidden;
}
/* El corte en diagonal es la firma de las piezas gráficas: una cuña que cruza
   la esquina, del naranja al ámbar quemado de las estelas. */
.cabecera::before {
  content: "";
  position: absolute; top: 0; bottom: 0; right: -40px;
  width: 130px;
  background: linear-gradient(100deg, transparent, rgba(180, 103, 12, 0.22), rgba(229, 145, 19, 0.16));
  transform: skewX(-18deg);
  pointer-events: none;
}
.cabecera::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ambar) 22%, var(--naranja) 50%, var(--ambar) 78%, transparent);
}

.marca-nombre {
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: var(--blanco);
}
.marca-nombre span { color: var(--naranja); }

.marca-sub {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 6px;
  font-size: clamp(9px, 2.6vw, 11px); font-weight: 600;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--texto-tenue);
}
/* Las líneas al costado son parte del logo, no un adorno agregado. */
.marca-sub::before, .marca-sub::after {
  content: ""; height: 1px; width: clamp(28px, 12vw, 64px);
  background: linear-gradient(90deg, transparent, var(--naranja));
}
.marca-sub::after { background: linear-gradient(90deg, var(--naranja), transparent); }

.marca-lugar {
  position: relative;
  margin: 12px 0 0; font-size: 13px; color: var(--texto-tenue);
}

/* ── Aviso de demo ── */
/* Va en amarillo y no en naranja a propósito: el naranja está reservado para
   acción y precio, y este cartel es permanente — competiría con el número que
   el vendedor tiene que mirar. El amarillo semántico ya existe para advertir. */
.aviso-demo {
  background: rgba(208, 156, 60, 0.12);
  border: 1px solid rgba(208, 156, 60, 0.35);
  color: var(--amarillo);
  border-radius: var(--radio);
  padding: 10px 14px; font-size: 13px; margin-bottom: 12px;
}
.aviso-demo strong { color: var(--amarillo); letter-spacing: 0.04em; }

/* ── Origen de los precios ── */
/* Va en plata, no en naranja: es un dato de origen, no una acción ni un
   precio. Reservar el naranja para lo que el vendedor tiene que mirar. */
.aviso-fuente {
  background: rgba(179, 183, 189, 0.06);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--plata-tenue);
  color: var(--plata);
  border-radius: var(--radio);
  padding: 10px 14px; font-size: 13px; margin-bottom: 20px;
}
.pie-fuente { font-size: 11px; color: var(--texto-tenue); margin: 18px 0 0; text-align: center; }

/* ── Fotos ── */
.contador { font-size: 13px; color: var(--texto-tenue); font-weight: 400; }

.grilla-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin: 14px 0;
}

.foto {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--negro); background: var(--panel-alto);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #d8d8dc; font-size: 10px; padding: 12px 6px 4px; text-align: right;
}

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── Confirmación (reemplaza confirm() nativo) ── */
.confirmar-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.confirmar-caja {
  background: var(--panel);
  border: 1px solid var(--borde-alto);
  border-radius: var(--radio);
  padding: 22px 20px; max-width: 360px; width: 100%;
}
.confirmar-mensaje {
  color: var(--texto); font-size: 15px; line-height: 1.5;
  white-space: pre-line; margin: 0 0 20px;
}
.confirmar-acciones { display: flex; gap: 10px; }

.borrar-foto {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: white;
  border: none; font-size: 13px; line-height: 1;
  display: grid; place-items: center;
}
.borrar-foto:hover { background: var(--rojo); }

.agregar-foto {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0;
  background: var(--panel-alto);
  border: 1px dashed var(--borde-alto);
  border-radius: 10px; color: var(--texto-tenue);
}
.agregar-foto span { font-size: 22px; line-height: 1; }
.agregar-foto small { font-size: 11px; }
.agregar-foto:hover { border-color: var(--naranja); color: var(--naranja); }

/* ── Pasos ── */
.pasos { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
/* El riel de los pasos pendientes va negro pleno: hunde lo que falta y deja
   que el naranja del paso actual sea lo único que se ve. */
.paso-punto {
  flex: 1; height: 4px; border-radius: 2px; background: var(--negro);
  transition: background 0.25s;
}
/* El paso actual va naranja; los ya hechos, plateados. Los dos colores de la
   pieza haciendo trabajo: el naranja llama, el plata acompaña. */
.paso-punto.activo { background: var(--naranja); }
.paso-punto.hecho { background: var(--plata-tenue); }

.tarjeta {
  background: var(--panel);
  /* Borde negro con una línea de luz arriba: el panel queda recortado sobre
     el fondo en vez de flotar sin peso. */
  border: 1px solid var(--negro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 16px;
}
.tarjeta h2 {
  font-size: 15px; margin: 0 0 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Formulario ── */
.campo { margin-bottom: 16px; }
.campo label, .campo .rotulo {
  display: block; font-size: 13px; color: var(--texto-tenue); margin-bottom: 6px;
}

/* Los campos van hundidos en el panel: borde negro y una sombra interna
   arriba, al revés de las tarjetas, que van elevadas. */
select, input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="email"], textarea {
  width: 100%; padding: 12px 14px;
  background: var(--panel-alto);
  border: 1px solid var(--negro);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  color: var(--texto);
  font-family: inherit;
  /* 16px evita que iOS haga zoom al enfocar el campo */
  font-size: 16px;
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--naranja);
  /* El inset se repite porque el halo de foco lo pisaría y el campo saltaría
     de hundido a plano al enfocarlo. */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--naranja-tenue);
}
textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

/* La patente se tipea en minúsculas sin pensar y siempre se lee en mayúsculas:
   el campo las muestra así mientras se escribe y el JS normaliza el valor. */
.patente { text-transform: uppercase; letter-spacing: 1px; }
/* Entre paréntesis y en minúscula: en mayúsculas competía con el rótulo del
   campo y se leía como parte del nombre. */
.opcional { font-size: 12px; color: var(--texto-tenue); opacity: 0.65; }

/* ── Opciones excluyentes (VTV) ──
   Dos botones lado a lado en vez de un <select>: son dos opciones y ninguna
   está elegida de entrada, así que un desplegable escondería la mitad del dato
   y obligaría a un toque de más con el auto delante. */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion {
  padding: 12px 14px;
  background: var(--panel-alto);
  border: 1px solid var(--negro);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  color: var(--texto-tenue);
  font-family: inherit; font-size: 15px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
/* El naranja marca "esto elegiste", no "esto está bien": lo usan igual las dos
   opciones, porque si sólo se encendiera "Al día" parecería que el sistema
   premia una respuesta y el vendedor tendería a marcarla sin mirar. */
.opcion.activa {
  background: var(--naranja-tenue);
  border-color: var(--naranja);
  color: var(--naranja-alto);
  font-weight: 600;
  box-shadow: none;
}
.opcion:focus-visible {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-tenue);
}

/* En el resultado la patente va como chapa: es el dato que dice de qué auto es
   esta cotización, y en plata no compite con el naranja del precio. */
.patente-chapa {
  display: inline-block;
  padding: 1px 7px; margin-right: 2px;
  border: 1px solid var(--plata-tenue); border-radius: 4px;
  color: var(--plata); letter-spacing: 1px; font-weight: 600;
}

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Botones ── */
.botones { display: flex; gap: 10px; margin-top: 20px; }

/* Exportar lo filtrado de un listado: chico y aparte de las acciones
   principales, para que no compita con "Nuevo cliente" ni con el buscador. */
.acciones-exportar { display: flex; gap: 8px; margin: 12px 0; }
button {
  font-family: inherit; font-size: 15px; font-weight: 600;
  border-radius: 10px; border: 1px solid transparent;
  padding: 13px 18px; cursor: pointer;
  transition: filter 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Naranja al ámbar, como los bloques de precio de las gráficas: el degradado
   le saca el plano saturado de un naranja pleno a pantalla completa. */
.btn-primario {
  background: linear-gradient(165deg, var(--naranja-alto), var(--naranja) 55%, var(--ambar));
  color: var(--sobre-naranja); flex: 1;
}
.btn-primario:not(:disabled):hover { filter: brightness(1.08); }
.btn-secundario { background: transparent; color: var(--texto-tenue); border-color: var(--borde-alto); }
.btn-secundario:hover { color: var(--plata); border-color: var(--plata-tenue); }

/* ── Dictado ── */
.zona-dictado { position: relative; }

/* display:block saca el hueco que deja el textarea por ser inline, y que
   corría los botones unos pixeles hacia abajo del borde real del campo. */
.zona-dictado textarea {
  display: block;
  /* Deja libre la franja derecha para que el texto no pase por debajo de los
     botones flotantes. */
  padding-right: 62px;
}

/* Columna de 44px alineada al ancho del micrófono: los dos botones quedan
   centrados en el mismo eje aunque midan distinto. El micrófono se ancla
   abajo y el de borrar arriba, esté o no visible. */
.controles-dictado {
  position: absolute; top: 10px; right: 10px; bottom: 10px;
  width: 44px;
  display: flex; flex-direction: column; align-items: center;
}
.btn-mic {
  margin-top: auto;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--panel-alto); border: 1px solid var(--borde-alto);
  color: var(--texto);
  display: grid; place-items: center; padding: 0;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.btn-mic svg { width: 20px; height: 20px; }
.btn-mic:not(.grabando):hover { border-color: var(--naranja); color: var(--naranja); }
.btn-mic.grabando {
  background: var(--rojo); border-color: var(--rojo); color: white;
  animation: latido 1.4s ease-in-out infinite;
}

.btn-limpiar {
  margin-bottom: auto;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--panel-alto); border: 1px solid var(--borde-alto);
  color: var(--texto-tenue);
  display: grid; place-items: center; padding: 0;
}
.btn-limpiar svg { width: 15px; height: 15px; grid-area: 1 / 1; }
.btn-limpiar:hover { color: var(--texto); border-color: var(--naranja); }
/* En modo deshacer el botón se destaca: es una acción de rescate, no de rutina. */
.btn-limpiar.deshacer { color: var(--amarillo); border-color: rgba(224, 165, 58, 0.4); }
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 105, 95, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(232, 105, 95, 0); }
}

/* ── Mostrar/ocultar contraseña ── */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.btn-mostrar-clave {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--panel-alto); border: 1px solid var(--borde-alto);
  color: var(--texto-tenue);
  display: grid; place-items: center; padding: 0;
}
.btn-mostrar-clave svg { width: 17px; height: 17px; grid-area: 1 / 1; }
.btn-mostrar-clave:hover { color: var(--naranja); border-color: var(--naranja); }
.ayuda-mic { font-size: 12px; color: var(--texto-tenue); margin-top: 8px; }

.ejemplos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  font-size: 12px; padding: 6px 10px; border-radius: 20px;
  background: var(--panel-alto); border: 1px solid var(--borde-alto);
  color: var(--texto-tenue); cursor: pointer;
}
.chip:hover { color: var(--naranja); border-color: var(--naranja); }
.chip.usado {
  opacity: 0.4; pointer-events: none;
  border-style: dashed; text-decoration: line-through;
}

/* ── Resultado ── */
/* El número final va en naranja, como los precios de las gráficas de la
   agencia. Es el dato que el vendedor busca de un vistazo. */
.precio-grande {
  font-size: 40px; font-weight: 800; color: var(--naranja);
  letter-spacing: -0.03em; margin: 4px 0;
}
.rango { font-size: 14px; color: var(--texto-tenue); margin-bottom: 4px; }

/* Cada ítem del desglose separado por una hendidura negra con una línea de
   luz debajo. Es el detalle que hace que las filas se lean una por una: el
   desglose es lo que el vendedor le muestra al cliente para justificar. */
.desglose { margin-top: 20px; border-top: 1px solid var(--negro); }
.linea {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--negro);
  box-shadow: inset 0 -2px 0 -1px rgba(255, 255, 255, 0.04);
}
.linea-texto { flex: 1; min-width: 0; }
.linea-concepto { font-size: 14px; font-weight: 600; }
.linea-detalle { font-size: 12px; color: var(--texto-tenue); }
.linea-monto { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.linea-monto.resta { color: var(--rojo); }
.linea-monto.suma { color: var(--verde); }
.linea.base {
  background: var(--naranja-tenue);
  border-left: 3px solid var(--naranja);
  margin: 0 -18px; padding: 12px 18px 12px 15px;
}

.total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0 0; font-size: 18px; font-weight: 700;
}

.etiqueta-motor {
  display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: var(--panel-alto); border: 1px solid var(--borde);
  color: var(--plata); margin-left: 8px;
  vertical-align: middle; font-weight: 500;
}
.alerta {
  background: rgba(232, 105, 95, 0.12); border: 1px solid rgba(232, 105, 95, 0.35);
  color: #f0928c; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px;
}

/* Las observaciones que no se aplicaron, listadas con su motivo. Se apoya en
   la .alerta que las contiene, así que sólo aporta el sangrado y el aire. */
.lista-pendientes { margin: 6px 0 0; padding-left: 18px; }
.lista-pendientes li { margin-top: 3px; }

/* Lo que se dictó y no mueve el precio: va debajo del desglose y en tono tenue
   a propósito — es una confirmación de que se escuchó, no una línea de la
   cuenta, y compitiendo con los montos distraería de lo que sí suma. */
.en-regla { padding-top: 10px; font-style: italic; }

.cargando { text-align: center; padding: 40px 0; color: var(--texto-tenue); }
.oculto { display: none; }

/* ── Menú ──
   El botón se apoya sobre la cuña naranja de la cabecera, así que va con
   fondo propio: sin él, las tres líneas se pierden justo donde el degradado
   se aclara. */
.btn-menu {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 40px; height: 40px; padding: 0; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--borde-alto);
  color: var(--texto);
  backdrop-filter: blur(2px);
}
.btn-menu svg { width: 22px; height: 22px; }
.btn-menu:hover { color: var(--naranja); border-color: var(--naranja); }

.menu { position: fixed; inset: 0; z-index: 50; }
.menu-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

/* Entra desde la derecha, del mismo lado que el botón que lo abre: así el
   panel se lee como que sale de ahí y no como una pantalla nueva. */
.menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(280px, 82vw);
  display: flex; flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--negro);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.5);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  animation: entrar-menu 0.18s ease-out;
  overflow-y: auto;
}
@keyframes entrar-menu {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
/* Quien comparte el celu del mostrador tiene que poder ver de un vistazo con
   qué usuario está cotizando, sin abrir ninguna otra pantalla. */
.menu-usuario { padding-bottom: 16px; border-bottom: 1px solid var(--negro); }
.menu-usuario-nombre { font-weight: 700; color: var(--blanco); }
.menu-usuario-detalle { font-size: 12px; color: var(--texto-tenue); margin-top: 2px; }

.menu-lista { list-style: none; margin: 12px 0 0; padding: 0; flex: 1; }
.menu-item {
  display: block; padding: 12px 12px; margin-bottom: 2px;
  border-radius: 10px; border-left: 3px solid transparent;
  color: var(--texto); text-decoration: none; font-size: 15px;
}
.menu-item:hover { background: var(--panel-alto); }
.menu-item.activo {
  background: var(--naranja-tenue);
  border-left-color: var(--naranja);
  color: var(--naranja-alto); font-weight: 600;
}
.menu-item:focus-visible, .menu-salir:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--naranja-tenue);
}

.menu-salir {
  margin-top: 16px; width: 100%;
  background: transparent; color: var(--texto-tenue);
  border: 1px solid var(--borde-alto);
}
.menu-salir:hover { color: var(--rojo); border-color: var(--rojo); }

/* ── Login ── */
/* Centrado vertical sólo si sobra alto: con el teclado del celu abierto la
   pantalla se achica y el formulario tiene que poder subir y scrollear. */
.contenedor-login {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 420px;
}
.ayuda-login {
  font-size: 12px; color: var(--texto-tenue);
  text-align: center; margin: 0;
}
.ayuda-login strong { color: var(--plata); font-weight: 600; }

/* ── Fichas de listado (clientes, cotizaciones) ──
   Separadas por la misma hendidura negra que el desglose: son filas que se
   leen una por una, no tarjetas sueltas flotando. */
.ficha {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 14px 0;
  border: none; border-bottom: 1px solid var(--negro);
  box-shadow: inset 0 -2px 0 -1px rgba(255, 255, 255, 0.04);
  background: transparent; color: var(--texto);
  font-family: inherit; font-size: inherit; font-weight: 400;
  border-radius: 0;
}
/* El área táctil se estira a los bordes de la tarjeta: en el celu el pulgar
   cae en cualquier lado de la fila, no justo sobre el texto. */
.ficha-clickable {
  margin: 0 -18px; padding-left: 18px; padding-right: 18px;
  cursor: pointer;
}
.ficha-clickable:hover { background: var(--panel-alto); }
.ficha-clickable:focus-visible {
  outline: none; background: var(--panel-alto);
  box-shadow: inset 3px 0 0 var(--naranja);
}

/* Usuarios inactivos (baja lógica, `web/usuarios.js`): mismo tratamiento que
   las categorías dadas de baja en `.criterio-grupo.de-baja`. */
.ficha.de-baja { opacity: 0.62; }
.ficha.de-baja .ficha-titulo { text-decoration: line-through; }

.ficha-texto { flex: 1; min-width: 0; }
.ficha-titulo { font-size: 15px; font-weight: 600; }
.ficha-detalle { font-size: 12px; color: var(--texto-tenue); margin-top: 2px; }
.ficha-detalle em, .datos-cotizacion em { color: var(--plata-tenue); font-style: normal; }
/* El monto va en naranja y sin cortarse: es el dato que se busca al recorrer
   la lista. */
.ficha-monto {
  font-size: 15px; font-weight: 700; color: var(--naranja);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Marca las cotizaciones inventadas que siembra `?demo=si`. Va en amarillo como
   el resto de las advertencias: una cotización de ejemplo se ve igual que una
   real —la calcula el mismo motor—, así que sin esto no habría cómo saber cuál
   es cuál en el listado. */
.etiqueta-ejemplo {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(208, 156, 60, 0.15);
  border: 1px solid rgba(208, 156, 60, 0.3);
  color: var(--amarillo);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
}

.ficha-acciones { display: flex; gap: 6px; flex: none; }
.btn-icono {
  padding: 8px 12px; font-size: 13px; font-weight: 500;
  background: transparent; border: 1px solid var(--borde-alto);
  color: var(--texto-tenue);
}
.btn-icono:hover { color: var(--texto); border-color: var(--plata-tenue); }
.btn-icono.peligro:hover, .btn-secundario.peligro:hover {
  color: var(--rojo); border-color: var(--rojo);
}

/* ── Datos de una cotización guardada ── */
.datos-cotizacion {
  display: grid; gap: 4px;
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--negro);
  font-size: 13px;
}
.dato-rotulo {
  display: inline-block; min-width: 68px;
  color: var(--texto-tenue); font-size: 12px;
}

/* ── Guardar la cotización (paso 4) ── */
/* Va separado del desglose por una hendidura: el desglose es el resultado y
   esto es una acción sobre él. Sin la línea, el selector de cliente parecía
   una fila más del cálculo. */
.guardar-cotizacion {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--negro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.guardar-cotizacion .campo { margin-bottom: 12px; }
.guardar-cotizacion .btn-secundario { width: 100%; }
.aviso-guardado {
  margin: 12px 0 0; font-size: 13px; color: var(--verde); text-align: center;
}
.aviso-guardado a { color: var(--naranja); }

.notas { min-height: 80px; }

.ayuda-campo { font-size: 12px; color: var(--texto-tenue); margin: 6px 0 0; }

/* En plata y no en naranja: es una aclaración de quién sos, no una alerta.
   Sirve para entender por qué esa fila no se puede borrar. */
.marca-vos {
  font-size: 11px; font-weight: 600; vertical-align: middle;
  padding: 2px 7px; margin-left: 4px; border-radius: 20px;
  background: var(--panel-alto); border: 1px solid var(--borde-alto);
  color: var(--plata);
}

/* Oculto a la vista pero legible por lectores de pantalla: el buscador se
   entiende por su placeholder, pero sin rótulo no tiene nombre accesible. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Criterios de tasación ── */
/* Una tarjeta por categoría en vez de una tabla de 9×3: en un celu las celdas
   de una tabla no dejan lugar para los ejemplos, que son lo único que explica
   qué es "moderado" en chapa. El porqué largo está en criterios.js. */

.aviso-lectura {
  background: var(--panel-alto); border: 1px solid var(--borde);
  border-left: 3px solid var(--plata-tenue);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 20px;
  font-size: 13px; color: var(--texto-tenue);
}
.aviso-lectura strong { color: var(--texto); font-weight: 600; }

.criterios-intro {
  font-size: 13px; color: var(--texto-tenue); margin: 0 0 14px;
}

.criterio-grupo {
  background: var(--panel-alto); border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 4px 14px 6px; margin-bottom: 12px;
}

/* El nombre de la categoría queda pegado arriba al scrollear: con nueve grupos
   parecidos, perderlo de vista es no saber qué se está mirando. El botón de
   ajustar viaja con él, en la misma fila sticky. */
.criterio-encabezado {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0 10px;
  background: var(--panel-alto);
}
.criterio-titulo {
  margin: 0; min-width: 0;
  font-size: 15px; font-weight: 600;
  overflow-wrap: anywhere;
}

/* Discreto a propósito: lo que se hace seguido es corregir un porcentaje, no
   renombrar la categoría. Si compitiera visualmente con los casilleros, la
   tarjeta dejaría de leerse como una lista de valores. */
.criterio-ajustar {
  flex: none; padding: 5px 11px;
  background: none; border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-tenue); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.criterio-ajustar:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.criterio-grupo.ajustando .criterio-ajustar {
  background: var(--naranja-tenue); border-color: var(--naranja); color: var(--naranja-alto);
}

/* ── Panel de ajustes (plegado) ── */
.criterio-panel { display: none; }
.criterio-grupo.ajustando .criterio-panel {
  display: block;
  padding: 12px 0 14px;
  border-top: 1px solid var(--negro);
}

/* Con el panel abierto el ejemplo se edita ahí adentro, así que la fila esconde
   su copia de sólo lectura: verlo dos veces en la misma tarjeta se lee como si
   fueran dos datos distintos. */
.criterio-grupo.ajustando .criterio-ejemplo { display: none; }

.criterio-etiqueta {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; color: var(--texto-tenue);
}
.criterio-texto-editable {
  display: block; width: 100%; margin-top: 5px;
  padding: 9px 11px;
  background: var(--panel); border: 1px solid var(--negro);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  border-radius: 9px;
  color: var(--texto); font: inherit; font-size: 14px; font-weight: 400;
  /* Mismo motivo que en .criterio-input: Chrome de Android le dibuja encima su
     propia caja si no se le saca el appearance. */
  appearance: none; -webkit-appearance: none;
  resize: vertical;
}
.criterio-texto-editable:focus {
  outline: none; border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-tenue);
}
.criterio-etiqueta.cambiado .criterio-texto-editable {
  border-color: var(--naranja); background: var(--naranja-tenue);
}
.criterio-etiqueta.con-error .criterio-texto-editable {
  border-color: var(--rojo); background: rgba(212, 105, 95, 0.12);
}

.criterio-ayuda {
  margin: -6px 0 12px; font-size: 12px; color: var(--texto-tenue); opacity: 0.8;
}
.criterio-ayuda em { color: var(--texto); font-style: normal; font-weight: 600; }
.criterio-protegida { margin: 0; }

.criterio-panel-pie {
  display: flex; justify-content: flex-end;
  padding-top: 4px;
}
.criterio-panel-pie button { padding: 9px 14px; font-size: 13px; }
/* Rojo el de baja y no el de quitar: quitar una tarjeta que nunca se guardó no
   pierde nada, dar de baja saca una categoría de la cotización. */
.criterio-panel-pie .criterio-baja { color: var(--rojo); border-color: var(--rojo); }

/* ── Alta y baja ── */
.criterio-agregar {
  width: 100%; margin: 2px 0 22px; padding: 12px;
  font-size: 14px;
}

/* Una categoría dada de baja se ve apagada pero sigue legible: hay que poder
   leer qué decía para decidir si se la reactiva. */
.criterio-grupo.de-baja { opacity: 0.62; }
.criterio-grupo.de-baja .criterio-titulo { text-decoration: line-through; }
.criterio-baja-cartel {
  margin: 0 0 6px; padding: 7px 10px;
  background: rgba(212, 105, 95, 0.1);
  border-left: 3px solid var(--rojo); border-radius: 6px;
  font-size: 12px; color: var(--texto-tenue);
}

.criterio-fila {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--negro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.criterio-texto { flex: 1; min-width: 0; }
.criterio-nivel { font-size: 14px; font-weight: 600; }
.criterio-ejemplo { font-size: 12px; color: var(--texto-tenue); margin-top: 1px; }

/* El casillero de un porcentaje: signo y "%" impresos, sólo la magnitud se
   tipea. Ancho fijo para que los números queden alineados en columna dentro
   del grupo, que es como se comparan de un vistazo. */
.criterio-campo {
  display: flex; align-items: center; gap: 1px;
  flex: none; width: 96px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--negro);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  border-radius: 9px;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.criterio-campo.resta { color: var(--rojo); }
.criterio-campo.suma { color: var(--verde); }
.criterio-signo-fijo, .criterio-unidad { flex: none; opacity: 0.75; }

/* El input hereda color y tipografía del contenedor: el casillero tiene que
   leerse como un número, no como un formulario. El borde y el fondo son del
   contenedor, no del input, para que el signo quede adentro de la misma caja. */
.criterio-input {
  flex: 1; min-width: 0; width: 100%;
  padding: 0; margin: 0;
  /* Chrome de Android dibuja su propia caja hundida dentro del input y no la
     suelta con `border: none` solo: hace falta sacarle el `appearance`, el
     radio y la sombra, o se ve un casillero adentro del casillero. */
  appearance: none; -webkit-appearance: none;
  background: none; border: none; border-radius: 0; box-shadow: none; outline: none;
  color: inherit; font: inherit; text-align: right;
}
/* El foco se marca en el casillero entero: si sólo se encendiera el input,
   el signo de la izquierda quedaría fuera de lo resaltado y parecería otro
   elemento. */
.criterio-campo:focus-within {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-tenue);
}
/* Naranja y no verde: "esto lo tocaste y todavía no está guardado" no es un
   estado bueno ni malo, es el mismo naranja de "acá estás" del resto de la app. */
.criterio-campo.cambiado {
  border-color: var(--naranja);
  background: var(--naranja-tenue);
}
.criterio-campo.con-error {
  border-color: var(--rojo);
  background: rgba(212, 105, 95, 0.12);
}

/* ── Edición por toque (propuesta 2026-09-28, a prueba) ──
   Todo cuelga de `body.edicion-por-toque`, que pone `EDICION_POR_TOQUE` en
   web/criterios.js: sin esa clase nada de esto aplica. Ver
   diseno-edicion-por-toque-criterios.md.
   En reposo el casillero se lee como texto ("−12%"): sin fondo, sin sombra y
   con el borde transparente — transparente y no ausente, para que al tocarlo
   la caja aparezca sin que el número salte de lugar. Queda sólo un subrayado
   punteado tenue, que es lo que avisa que se puede tocar.
   Lo que NO pasa a reposo: el que tiene el foco (es el que se está editando),
   el que cambió sin guardar y el que tiene error (son avisos, esconderlos
   sería perderlos), y los de una categoría nueva (arrancan vacíos: sin caja
   no habría nada que tocar). */
.edicion-por-toque .criterio-campo:not(.es-nueva .criterio-campo):not(:focus-within):not(.cambiado):not(.con-error) {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  border-bottom: 1px dashed var(--borde-alto);
  border-radius: 0;
}
.edicion-por-toque .criterio-input { cursor: pointer; }
.edicion-por-toque .criterio-input:focus { cursor: text; }
/* Con mouse, pasar por encima adelanta que es un campo. En el celu no hay
   hover y el subrayado alcanza. */
@media (hover: hover) {
  .edicion-por-toque .criterio-campo:not(:focus-within):not(.cambiado):not(.con-error):hover {
    border-bottom-color: var(--naranja);
  }
}

/* La plaza local es el único campo con signo elegible, así que además del
   casillero necesita los dos botones — y entre los tres no queda ancho para el
   texto, que acá es la explicación larga de por qué Areco no es el conurbano:
   comprimida al costado salían nueve líneas de dos palabras. Por eso esta fila
   se apila: la explicación arriba a todo el ancho, los controles abajo. */
.criterio-fila.apilada { flex-wrap: wrap; }
.criterio-fila.apilada .criterio-texto { flex: 1 1 100%; }
.criterio-campo-local {
  flex: 1 1 100%; margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.criterio-campo-local .opciones { grid-template-columns: auto auto; }
.criterio-campo-local .opcion { padding: 8px 14px; font-size: 13px; }

/* ── Barra de guardado ──
   Pegada abajo y fuera del contenedor: con nueve tarjetas de criterios, un
   botón al final del scroll obliga a bajar hasta el fondo para guardar algo
   que se cambió arriba. Aparece sólo cuando hay cambios. */
.barra-guardado {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--borde-alto);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}
/* `.oculto` está declarada antes en esta hoja, así que con la misma
   especificidad perdía contra el `display: flex` de acá y la barra se veía
   siempre. Se gana con las dos clases juntas en vez de tocar la utilidad
   global, que la usan las otras cinco pantallas. */
.barra-guardado.oculto { display: none; }

.barra-guardado-texto { flex: 1; min-width: 0; font-size: 13px; color: var(--naranja-alto); font-weight: 600; }
.barra-guardado-botones { display: flex; gap: 8px; flex: none; }
.barra-guardado-botones button { padding: 11px 16px; font-size: 14px; flex: none; }

/* Sin esto la barra tapa la última fila de criterios al llegar al fondo. */
body[data-seccion="criterios"] .contenedor { padding-bottom: 90px; }

/* Guardado bien, y guardado pero con algo para mirar. El segundo no es un
   error —se guardó— así que no puede ir en rojo como .alerta, pero tampoco
   puede pasar por un éxito limpio. */
.exito, .aviso-revisar {
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px;
}
.exito {
  background: rgba(71, 173, 120, 0.12); border: 1px solid rgba(71, 173, 120, 0.35);
  color: #7fc9a0;
}
.aviso-revisar {
  background: rgba(208, 156, 60, 0.12); border: 1px solid rgba(208, 156, 60, 0.4);
  color: var(--amarillo);
}
.exito ul, .aviso-revisar ul, .alerta ul { margin: 6px 0 0; padding-left: 18px; }
.exito strong, .aviso-revisar strong { color: var(--texto); }

/* ── Secciones todavía no construidas ── */
/* Borde punteado y sin naranja: tiene que leerse como un hueco a llenar y no
   como algo que se pueda tocar. */
.pendiente {
  border: 1px dashed var(--borde-alto); border-radius: var(--radio);
  padding: 20px 18px; text-align: center; color: var(--texto-tenue);
}
.pendiente p { margin: 0; }
.pendiente-nota { margin-top: 10px !important; font-size: 12px; opacity: 0.7; }

/* ── Buscador de filtros múltiples ── */
/* El predictivo flota sobre el listado en vez de empujarlo: si empujara, las
   fichas bajarían con cada tecla y el vendedor tocaría la que no era. */
.buscador-wrap { position: relative; }
.predictivo {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-alto);
  border: 1px solid var(--borde-alto); border-radius: var(--radio);
  /* La sombra es lo que lo despega del listado: sin ella, sobre el carbón del
     panel, las sugerencias se leen como parte de la lista de abajo. */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  /* En un celu, más de media pantalla de sugerencias tapa el resultado. */
  max-height: 52vh; overflow-y: auto;
  padding: 6px;
}
.predictivo-grupo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-tenue); padding: 8px 10px 4px;
}
.predictivo-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  /* 44px de alto: es el mínimo con el que un pulgar no falla el toque. */
  min-height: 44px; padding: 8px 10px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--texto); font-family: inherit; font-size: 15px; text-align: left;
  cursor: pointer;
}
.predictivo-item:hover, .predictivo-item:focus-visible {
  background: var(--naranja-tenue); color: var(--naranja-alto); outline: none;
}
.predictivo-valor { flex: 1; }
/* Cuántas cotizaciones va a dejar el filtro. Va tenue: acompaña la decisión,
   no compite con el nombre. */
.predictivo-cantidad {
  font-size: 12px; color: var(--texto-tenue);
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 20px; padding: 2px 8px; min-width: 24px; text-align: center;
}
/* Los filtros puestos. Naranja y no gris: son lo que está achicando el
   listado, y tienen que verse antes de que el vendedor se pregunte por qué
   falta un auto que sabe que cotizó. */
.filtros-activos {
  display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px;
}
.filtro-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 6px 6px 6px 10px; border-radius: 20px;
  background: var(--naranja-tenue); border: 1px solid var(--naranja);
  color: var(--texto);
}
.filtro-chip-campo { color: var(--texto-tenue); font-size: 12px; }
.filtro-chip-x {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: none; border-radius: 50%;
  color: var(--texto-tenue); font-size: 13px; line-height: 1; cursor: pointer;
}
.filtro-chip-x:hover { background: var(--naranja); color: var(--sobre-naranja); }
.filtro-limpiar {
  font-size: 12px; padding: 6px 12px; border-radius: 20px;
  background: transparent; border: 1px dashed var(--borde-alto);
  color: var(--texto-tenue); font-family: inherit; cursor: pointer;
}
.filtro-limpiar:hover { color: var(--naranja); border-color: var(--naranja); }

@media (max-width: 480px) {
  .precio-grande { font-size: 34px; }
  .fila { grid-template-columns: 1fr; }
  .botones { flex-direction: column-reverse; }
}