[x-cloak] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
}

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 0.5em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Barra superior: siempre blanca, porque el logo lleva "PANTHER" en negro. */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px var(--espacio);
  background: #fff; color: var(--tinta);
  border-bottom: 3px solid var(--acento);
  /* Acompaña la bajada (Mirko, 2026-10-03). */
  /* Capas: barra 12 < pizarra flotante 14 < ventanas (.modal-fondo) 20 < escáner 50. */
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 12;
}
.barra { transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.barra.compacta { padding-block: 2px; }
.barra.compacta .barra-marca { width: 31px; }
.barra.compacta .barra-marca img { height: 30px; }
.barra.compacta .barra-saludo { opacity: 0; max-height: 0; overflow: hidden; }
/* En el celular, compacta: los enlaces en una sola fila que se desliza de lado. */
@media (max-width: 599px) {
  .barra.compacta .barra-usuario { flex: 1; min-width: 0; justify-items: stretch; }
  .barra.compacta .barra-acciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
    max-width: 100%; }
  .barra.compacta .barra-acciones > * { flex: none; }
}
/* Al compactarse, el texto se esconde detrás de la pantera (Mirko, 2026-10-03): un solo logo; el
   contenedor se angosta hasta la pantera (121 de 515 px del logo) y el logo se achica, con transición. */
.barra-marca { display: flex; align-items: center; flex-shrink: 0; overflow: hidden; width: 155px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.barra-marca img { display: block; width: auto; height: 36px; max-width: none;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.barra-saludo { transition: opacity 0.3s ease, max-height 0.3s ease; max-height: 2em; }
@media (prefers-reduced-motion: reduce) {
  .barra-marca, .barra-marca img, .barra-saludo, .barra { transition: none; }
}
.barra-usuario { display: grid; justify-items: end; }
.barra-saludo { margin: 0 8px; font-size: 0.85rem; color: var(--acero); white-space: nowrap;
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.barra-acciones { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.barra .boton-texto { color: var(--tinta); padding: 6px 8px; }
.boton-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: none; border: none; border-radius: var(--radio-chico); color: var(--tinta); cursor: pointer;
}
.boton-icono:hover { background: var(--resalte); }
.aviso-ok {
  margin: 12px var(--espacio) 0; padding: 10px 12px;
  color: var(--positivo); background: color-mix(in srgb, var(--positivo) 10%, var(--superficie));
  border-left: 4px solid var(--positivo); border-radius: var(--radio-chico);
}
.opciones { border: none; margin: 0 0 12px; padding: 0; }
.opciones legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.opciones label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; }
.opciones input { width: 20px; min-height: 0; height: 20px; margin: 0; }
.opciones-en-linea { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 2px 0 8px; }
.opciones-en-linea label { min-height: 36px; }
/* Dentro de una caja del formulario, la leyenda va sobre el borde como en las demás cajas. */
.formulario .opciones legend { margin-bottom: 4px; padding: 0; font-weight: 600; }

.contenedor { max-width: 1100px; margin: 0 auto; padding: var(--espacio); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.boton:disabled { opacity: 0.6; cursor: progress; }
.boton-primario { background: var(--acento); color: var(--texto-sobre-acento); }
.boton-secundario { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton-gris { background: var(--linea); color: var(--texto); }
.boton-peligro { background: var(--negativo); color: #fff; }
.boton-texto {
  background: none; border: none; padding: 8px; color: inherit; font: inherit;
  text-decoration: underline; cursor: pointer;
}

/* Campos */
label { display: block; font-weight: 500; margin-bottom: 12px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; min-height: 44px; padding: 8px 10px;
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
}
textarea { min-height: 80px; resize: vertical; }
/* Casillas y opciones (2026-10-01): de su tamaño, no como un campo de texto. */
input[type="checkbox"], input[type="radio"] {
  display: inline-block; flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  vertical-align: middle; accent-color: var(--acento);
}
.casilla { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.falta-dato { color: var(--negativo); font-weight: 600; }
.campo-error { color: var(--negativo); font-size: 0.9rem; margin: -8px 0 12px; }
.campo-aviso { color: var(--texto); font-size: 0.9rem; margin: -8px 0 12px; padding: 6px 10px;
  background: color-mix(in srgb, #d98e04 18%, var(--superficie)); border-left: 3px solid #d98e04; }
.aviso-error {
  margin: 12px 0; padding: 10px 12px; overflow-wrap: anywhere; /* nombres de archivo largos */
  color: var(--negativo); background: color-mix(in srgb, var(--negativo) 10%, var(--superficie));
  border-left: 4px solid var(--negativo); border-radius: var(--radio-chico);
}

/* Cifras y estados */
.cifra { font-family: var(--fuente-cifras); font-variant-numeric: tabular-nums; font-weight: 600; }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.estado {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; background: var(--linea); color: var(--texto);
}
.estado[data-estado="venta"] { background: var(--acento); color: var(--texto-sobre-acento); }
.estado[data-estado="reservado"] { background: color-mix(in srgb, #d98e04 38%, var(--superficie)); color: var(--texto); }
.estado[data-estado="vendido"] { background: var(--marino); color: #fff; }
@media (prefers-color-scheme: dark) { .estado[data-estado="vendido"] { background: var(--texto); color: var(--fondo); } }
.estado[data-estado="devuelto"] { background: color-mix(in srgb, #d98e04 22%, var(--superficie)); }
.etiqueta-consignacion {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--linea); background: var(--superficie);
}
/* Auto de prueba (roadmap 44): solo lo ve el desarrollador. */
.etiqueta-prueba {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: color-mix(in srgb, #b42318 18%, var(--superficie));
}
/* «Borren mis datos» pendiente (ROADMAP 71): lo resuelve un administrador. */
.etiqueta-datos {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: #b42318; border: 1px solid #b42318;
}
/* Implementos de una consignación: casillas en el formulario, lista ✓/✗ en la ficha */
.implementos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 16px;
  margin: 0; padding: 0; list-style: none;
}
.implementos label {
  display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; font-weight: 400; text-align: left;
}
.implementos input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; }
.implementos li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.implementos li[data-tiene="no"] { color: var(--texto-suave); }
.implementos .marca { flex: none; width: 1em; font-weight: 700; text-align: center; }
.implementos li[data-tiene="si"] .marca { color: var(--positivo); }
.subtitulo-seccion { margin: 16px 0 6px; font-size: 1rem; }

/* La placa: el objeto físico, siempre blanca con borde negro. */
.placa {
  display: inline-block;
  padding: 0.1em 0.5em 0.08em;
  background: #fff; color: #15181b;
  border: 2px solid #15181b; border-radius: var(--radio-chico);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  font-family: var(--fuente-cifras); font-weight: 700; font-size: 1.25rem;
  letter-spacing: 0.06em; line-height: 1.1; white-space: nowrap;
}
.placa::before {
  content: "CHILE"; display: block; text-align: center;
  font-size: 0.34em; font-weight: 600; letter-spacing: 0.5em; margin-bottom: 0.1em;
}

/* Inicio de sesión (Mirko, 2026-10-09): marino con el logo blanco animado, en el mismo lugar y tamaño
   que la pantera de la pantalla de carga (--logo-ancho y --logo-arriba): al quitarse la carga, la
   pantera queda quieta y aparece «PANTHER MOTORS». */
.fondo-marino { background: var(--marino); }
.login {
  min-height: 100vh; max-width: 400px; margin: 0 auto;
  display: grid; align-content: start; gap: 16px;
  padding: var(--logo-arriba) var(--espacio) 24px;
}
.login-logo { margin: 0 0 8px; justify-self: center; width: var(--logo-ancho); font-size: inherit; }
.login p { margin: 0; color: var(--niebla); opacity: 0.8; text-align: center; }
.login .boton { width: 100%; }

/* Listado */
.resumen { margin: 0 0 16px; color: var(--texto-suave); }
.resumen p { margin: 0 0 2px; }
.resumen strong { color: var(--texto); font-size: 1.1rem; }
/* Con "Mis vehículos" y "Simular transferencia" (B6) no caben en 375 px: se parten en líneas. */
.listado-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.listado-acciones input { margin: 0; flex: 1 1 180px; min-width: 0; }
.pestanas {
  display: flex; gap: 2px; overflow-x: auto; margin-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.pestanas button {
  padding: 10px 12px; background: none; border: none; border-bottom: 3px solid transparent;
  font: inherit; color: var(--texto-suave); white-space: nowrap; cursor: pointer;
}
.pestanas button[aria-selected="true"] { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }
.cuenta { font-size: 0.8rem; color: var(--texto-suave); }
.vacio { color: var(--texto-suave); }
.ayuda { margin: 0 0 .5rem; color: var(--texto-suave); font-size: .9rem; }
.lista-autos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) {
  .lista-autos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
.tarjeta-auto {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  color: inherit; text-decoration: none;
}
.tarjeta-auto:hover { border-color: var(--asfalto); }
.tarjeta-foto {
  display: block; width: 104px; height: 78px; object-fit: cover;
  border-radius: var(--radio-chico); background: var(--linea);
}
.tarjeta-datos { display: grid; gap: 4px; align-content: start; min-width: 0; }
.tarjeta-modelo { font-weight: 600; overflow-wrap: anywhere; }
.tarjeta-cifras { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.9rem; color: var(--texto-suave); }

/* Formularios de página */
.contenedor-angosto { max-width: 720px; }
.formulario fieldset {
  min-width: 0; margin: 0 0 16px; padding: 14px 16px 4px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
/* El título va dentro de la caja (no montado sobre el borde): float saca la
   leyenda del borde del fieldset. */
.formulario legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 600; font-size: 1.05rem; }
.formulario legend + * { clear: both; }
.fila { display: grid; gap: 0 12px; }
@media (min-width: 600px) { .fila { grid-template-columns: 1fr 1fr; } }
.formulario-botones { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 32px; }

/* Ficha */
.franja-ver-como { margin: 0; padding: 8px 16px; background: var(--marino); color: #fff; text-align: center; }
.franja-ver-como .boton-texto { color: #fff; }
/* Avisos push en este celular (Mirko, 2026-10-08): campana de la barra y franja con el estado. */
.boton-avisos { position: relative; }
.boton-avisos.con-punto::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--acento);
}
.franja-avisos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
  margin: 0; padding: 8px 16px; background: var(--superficie); color: var(--texto); border-bottom: 1px solid var(--linea);
  text-align: center;
}
.franja-avisos .aviso-error { flex-basis: 100%; margin: 0; }
/* ROADMAP 83: sin ningún celular con avisos, la franja se queda a la vista y se nota */
.franja-avisos-sin-celular { border-bottom: 3px solid var(--acento); font-weight: 600; }
.aviso-revisar-nota { margin-bottom: 16px; padding: 12px 16px; border: 2px solid var(--acento); border-radius: var(--radio); background: var(--superficie); }
.aviso-revisar-nota p { margin: 0 0 8px; font-weight: 600; }
.ficha-grid { display: grid; gap: 16px; }
/* B2: las secciones se ordenan con order (cada persona elige el suyo). */
.ficha-principal { display: flex; flex-direction: column; }
.orden-arriba { order: -1; }
.orden-abajo { order: 100; }
.ordenar-ficha { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.mover-seccion { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
.seccion[draggable="true"] { cursor: grab; outline: 2px dashed var(--linea); }
@media (min-width: 900px) {
  .ficha-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  /* Roadmap 45: la columna completa (Resultado + historial) acompaña el scroll. */
  .columna-derecha { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
.columna-derecha { display: grid; gap: 16px; align-content: start; min-width: 0; }
.total-comisiones { font-size: 1.15rem; margin: 0 0 16px; }
.seccion {
  margin-bottom: 16px; padding: 16px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
.seccion-titulo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.seccion-titulo h2 { margin: 0; }
.ficha-encabezado { display: grid; gap: 14px; }
@media (min-width: 600px) { .ficha-encabezado { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
/* En celular, sin fotos no se muestra el recuadro vacío (ocupaba media pantalla). */
@media (max-width: 599px) { .ficha-sin-foto { display: none; } }
.ficha-portada {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-chico); background: var(--linea);
}
/* Redes donde está publicado (Mirko, 2026-10-06; antes lavado, mecánica y pintura) bajo la foto de
   portada, con la forma de los botones de la ficha. Apagado = no publicado (como un botón
   secundario); encendido = publicado (relleno con el azul de acento y un brillo leve). La web no se
   toca: brilla sola mientras el auto está a la venta. */
.ficha-media { display: grid; gap: 10px; min-width: 0; }
/* Ficha del taller (Mirko, 2026-10-06): la foto es lo principal que ve Planing; más grande y con
   flechas a los costados en vez de un botón por foto. */
@media (min-width: 600px) { .taller-encabezado { grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); } }
.carrusel { position: relative; }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; font-size: 2rem; line-height: 1; color: #fff;
  background: rgba(0, 0, 0, 0.45); border: 0; border-radius: 50%; cursor: pointer;
}
.carrusel-flecha:hover { background: rgba(0, 0, 0, 0.65); }
.carrusel-flecha:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.carrusel-anterior { left: 8px; }
.carrusel-siguiente { right: 8px; }
.carrusel-contador {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; font-size: 0.85rem; color: #fff;
  background: rgba(0, 0, 0, 0.55); border-radius: 999px;
}
/* En escritorio la columna de la foto se estira hasta el borde de la tarjeta y los íconos
   quedan a media altura entre la foto y el borde (el margen iguala el relleno de la tarjeta). */
@media (min-width: 600px) {
  .ficha-media { align-self: stretch; grid-template-rows: auto 1fr; gap: 0; }
  .ficha-media .redes { align-self: center; margin-top: 16px; }
}
.redes { display: flex; justify-content: center; gap: 10px; }
.red-item { display: contents; }
.boton-red {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; color: var(--texto-suave);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-chico); cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.boton-red:hover:not(:disabled) { background: var(--resalte); }
.boton-red:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton-red:disabled, .boton-red.automatica { cursor: default; }
.boton-red.automatica:not(.encendida):hover { background: var(--superficie); }
.icono-red {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.boton-red.encendida {
  color: var(--texto-sobre-acento); background: var(--acento); border-color: var(--acento);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acento) 35%, transparent);
}
.boton-red.encendida:hover:not(:disabled) { background: var(--acento); }
@media (prefers-reduced-motion: reduce) { .boton-red { transition: none; } }
/* En la tarjeta del listado: solo los encendidos, chicos, junto a la patente. */
.tarjeta-patente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.red-mini {
  display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--texto-sobre-acento);
  background: var(--acento); border-radius: var(--radio-chico);
}
.red-mini .icono-red { width: 16px; height: 16px; stroke-width: 1.8; }
.ficha-titulo h1 { margin: 10px 0 6px; overflow-wrap: anywhere; }
.ficha-titulo p { margin: 0 0 12px; }
.ficha-titulo .ficha-precio { font-size: 1.1rem; color: var(--texto-suave); }
.ficha-precio strong { color: var(--texto); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
/* Botones al pie de una sección de la ficha (comisión, cambiar tipo, cobro) */
.acciones-seccion { align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.acciones-seccion .boton-texto { padding-left: 0; padding-right: 0; }
.datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos-fila { display: contents; }
/* Datos del vehículo: en escritorio sobra ancho, pares dato-valor en dos columnas. */
@media (min-width: 900px) {
  .datos-vehiculo { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; }
}
/* Publicación para redes (roadmap 59) */
.publicacion-previa { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.9rem;
  background: var(--resalte); color: var(--texto); border-radius: var(--radio); padding: 12px; margin: 8px 0 12px;
  max-height: 420px; overflow-y: auto; }
.publicacion-faltas { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.publicacion-faltas li, .falta-publicacion { font-size: 0.8rem; padding: 2px 8px; border-radius: 999px;
  background: #fff4e5; color: #8a4b00; }
.publicacion-form { display: grid; gap: 10px; margin-bottom: 12px; }
.publicacion-form label { display: grid; gap: 4px; }
.publicacion-form textarea { font: inherit; }
/* Botones del auto en la ficha (Mirko, 2026-10-05): grilla, todos del mismo tamaño */
.acciones-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.acciones-ficha .boton { width: 100%; }
@media (max-width: 600px) { .acciones-ficha { grid-template-columns: 1fr; } }
/* Publicación (roadmap 59): degradado de Instagram, como el botón del sitio */
.boton-publicacion { background: linear-gradient(135deg, #e1306c, #833ab4); color: #fff; border-color: transparent; }
.boton-publicacion:hover:not(:disabled) { filter: brightness(1.08); }
/* Un color por tipo de acción (Mirko, 2026-10-05); texto blanco y el mismo brillo al pasar */
.acciones-ficha {
  --c-precio: #b7791f; --c-venta: #1e7a4c; --c-a-venta: #1a4db5; --c-a-preparacion: #4b5568;
  --c-transferencia: #00132c; --c-devolver: #b42318; --c-reservar: #0f766e;
}
@media (prefers-color-scheme: dark) {
  .acciones-ficha {
    --c-precio: #c98a2b; --c-venta: #2a9a62; --c-a-venta: #3a6fd8; --c-a-preparacion: #64708a;
    --c-transferencia: #2b4a7a; --c-devolver: #d0453a; --c-reservar: #14918a;
  }
}
.boton-precio, .boton-venta, .boton-a-venta, .boton-a-preparacion, .boton-transferencia, .boton-devolver,
.boton-reservar {
  color: #fff; border-color: transparent;
}
.boton-precio { background: var(--c-precio); }
.boton-venta { background: var(--c-venta); }
.boton-a-venta { background: var(--c-a-venta); }
.boton-a-preparacion { background: var(--c-a-preparacion); }
.boton-transferencia { background: var(--c-transferencia); }
.boton-devolver { background: var(--c-devolver); }
.boton-reservar { background: var(--c-reservar); }
/* Reserva vigente (ROADMAP 34): recuadro bajo la cabecera, con el borde del estado "Reservado" */
.recuadro-reserva { border-left: 4px solid #d98e04; }
.recuadro-reserva .seccion-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.subtitulo-reserva { font-size: 1rem; margin: 16px 0 4px; }
.reserva-monto { margin: 0; }
.opciones-cierre { display: grid; gap: 8px; margin: 12px 0; }
.opciones-cierre .boton { width: 100%; white-space: normal; text-align: left; }
/* Venta de un auto reservado: la reserva abonada, fija, en el pago */
.fila-reserva-venta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 8px;
  padding: 8px 10px; border-left: 4px solid #d98e04; background: var(--resalte); }
.acciones-ficha .boton:hover:not(:disabled) { filter: brightness(1.08); }
.icono-boton { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.modal-publicacion .publicacion-previa { max-height: 50vh; }
/* Con «Publicar en redes» son hasta cuatro botones: en el celular bajan a otra fila. */
.modal-publicacion .modal-botones { flex-wrap: wrap; }
.publicacion-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
/* Publicar en redes (ROADMAP 70): miniaturas en orden, con mover y quitar. */
.redes-publicadas p { margin: 4px 0; font-size: 0.9rem; color: var(--texto-suave); }
.redes-fotos { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.redes-foto { display: flex; flex-direction: column; gap: 2px; }
.redes-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-chico);
  border: 1px solid var(--linea); }
.redes-foto:first-child img { outline: 2px solid var(--acento); outline-offset: -2px; }
.redes-foto-botones { display: flex; justify-content: space-between; }
.redes-foto-botones .boton-texto { min-width: 26px; padding: 2px; }
.redes-casillas { display: flex; gap: 16px; margin: 8px 0; }
/* Avance al publicar: una fila por etapa (Mirko, 2026-10-08). */
.redes-etapas { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.redes-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px;
  border-radius: var(--radio-chico); background: var(--resalte); font-size: 0.9rem; }
.redes-etapa-simbolo { width: 1.2em; text-align: center; font-weight: 600; }
.redes-etapa progress { flex: 1 1 100%; height: 6px; accent-color: var(--acento); }
.etapa-listo .redes-etapa-simbolo { color: var(--positivo); }
.etapa-error { color: var(--negativo); }
.etapa-publicando .redes-etapa-simbolo { display: inline-block; animation: girar-etapa 1s linear infinite; }
@keyframes girar-etapa { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .etapa-publicando .redes-etapa-simbolo { animation: none; } }
.falta-publicacion { font-size: 0.7rem; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
.etiqueta-reserva { font-size: 0.75rem; padding: 1px 8px; margin-left: 6px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, #d98e04 38%, var(--superficie)); color: var(--texto); }
.lista-gastos { list-style: none; margin: 0; padding: 0; }
.gasto {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  padding: 10px 0; border-top: 1px solid var(--linea);
}
.gasto-desc { overflow-wrap: anywhere; }
.gasto-meta { grid-column: 1 / -1; font-size: 0.85rem; color: var(--texto-suave); }
.gasto-botones { grid-column: 1 / -1; display: flex; gap: 4px; margin-left: -8px; }

/* Detalle (notas) y revisión (líneas) */
.nueva-nota { display: grid; gap: 8px; margin-bottom: 12px; }
.nueva-nota .boton { justify-self: start; }
.lista-notas, .lista-revision { list-style: none; margin: 0; padding: 0; }
.nota, .linea { padding: 10px 0; border-top: 1px solid var(--linea); }
.nota p, .linea p { margin: 0 0 4px; overflow-wrap: anywhere; white-space: pre-line; }
.nota .gasto-meta, .linea .gasto-meta { display: block; }
.linea-resuelta { opacity: 0.6; }
.lista-notas-anuladas { list-style: none; margin: 0; padding: 0; }
.lista-notas-anuladas li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0;
  border-top: 1px solid var(--linea); overflow-wrap: anywhere; }
.linea-foto { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radio-chico); float: right; margin-left: 8px; }
.linea-resolucion { font-size: 0.9rem; }

/* Resultado */
.resultado { padding: 16px; background: var(--marino); color: #fff; border-radius: var(--radio); }
.resultado dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.resultado dd { margin: 0; text-align: right; }
.resultado .positivo { color: #6fd8a3; }
.resultado .negativo { color: #ff9585; }
.resultado-tercero { margin: 0 0 .5rem; color: #dbe2ee; font-size: .9rem; }
.resultado-pagos { color: #dbe2ee; margin-top: 8px; font-size: 0.95rem; }
.resultado-pagos p { margin: 4px 0; }
.resultado-costo, .resultado-margen { font-size: 1.15rem; }
/* Roadmap 45: rentabilidad al precio publicado, separada del resultado actual. */
.resultado-esperado { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.resultado-esperado-titulo { margin: 0 0 6px; color: #dbe2ee; font-size: .95rem; }
.resultado-esperado-margen { font-size: 1.1rem; }
@media (max-width: 899px) {
  .resultado {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 10px var(--espacio) calc(10px + env(safe-area-inset-bottom));
    border-radius: 0; border-top: 3px solid var(--acento);
  }
  .resultado-detalle { display: none; }
  /* "Ver detalle" abre la barra con el bloque completo (cliente, 2026-10-01). */
  .resultado.abierto { max-height: 75vh; overflow: auto; }
  .resultado.abierto .resultado-detalle { display: revert; }
  .resultado-ver { float: right; color: #dbe2ee; }
  body.con-resultado { padding-bottom: 140px; } /* barra de hasta 3 filas (tercero vendido) */
}
@media (min-width: 900px) { .resultado-ver { display: none; } }

/* Modales */
.modal-fondo {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 12, 14, 0.55);
}
.modal {
  width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  padding: 20px var(--espacio); background: var(--superficie);
  border-radius: var(--radio) var(--radio) 0 0;
}
@media (min-width: 600px) {
  .modal-fondo { align-items: center; padding: 16px; }
  .modal { border-radius: var(--radio); }
}
.modal-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal fieldset { min-width: 0; margin: 4px 0 12px; padding: 0; border: none; }
.modal legend { padding: 0; margin-bottom: 6px; font-weight: 600; }

.margen-previo { margin: 0 0 12px; padding: 10px 12px; background: var(--fondo); border-radius: var(--radio-chico); }
.margen-previo p { margin: 0; }
.zona-peligro { margin: 24px 0; text-align: center; }

/* Fotos */
.boton-archivo { margin: 0; }
.boton-archivo:focus-within { outline: 3px solid var(--acento); outline-offset: 2px; }
.galeria {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
.foto img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-chico); background: var(--linea);
}
.foto .boton-texto { padding: 4px 0; font-size: 0.9rem; }
.foto { position: relative; }
.foto-ver { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radio-chico); }
.foto-ver:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.foto-marca { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; margin: 0; accent-color: var(--negativo); }
.foto-marcada img { outline: 3px solid var(--negativo); outline-offset: -3px; opacity: 0.85; }
.foto-portada {
  position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--marino); color: #fff; font-size: 0.75rem; font-weight: 600; pointer-events: none;
}
.seccion-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.seleccion-fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.seleccion-fotos span { flex: 1 1 auto; color: var(--texto-suave); font-size: 0.9rem; }

/* Visor de fotos (Mirko, 2026-10-05): siempre oscuro, como un visor de galería. */
.visor {
  position: fixed; inset: 0; z-index: 60; background: #000; color: #fff;
  display: grid; grid-template-rows: auto minmax(0, 1fr); touch-action: none;
}
.visor-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
}
.visor-acciones { display: flex; align-items: center; gap: 8px; }
.visor-accion {
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: none; color: #fff;
  padding: 8px 14px; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.visor-accion:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visor-contador { font-variant-numeric: tabular-nums; font-size: 0.95rem; }
/* minmax(0, 1fr) y min-height: 0: la fila no crece con la foto, así cabe entera (Mirko, 2026-10-05). */
.visor-escena { position: relative; overflow: hidden; min-height: 0; touch-action: none; }
.visor-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  user-select: none; transform-origin: center;
}
.visor-boton {
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff;
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.visor-boton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visor-boton:disabled { opacity: 0.3; cursor: default; }
.visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); }
.visor-anterior { left: 10px; }
.visor-siguiente { right: 10px; }

/* Pantalla de carga: pantera blanca con «Cargando» y un brillo que la recorre (img/cargando.svg) sobre
   marino, como el logo en negativo. Mismo lugar y tamaño que el logo del login. */
:root { --logo-ancho: min(300px, 72vw); --logo-arriba: max(24px, calc(42vh - var(--logo-ancho) * 0.4555)); }
.pantalla-carga {
  position: fixed; inset: 0; z-index: 50;
  padding: var(--logo-arriba) var(--espacio) 0; text-align: center;
  background: var(--marino); transition: opacity 200ms ease;
}
.pantalla-carga img { display: block; width: var(--logo-ancho); height: auto; margin: 0 auto; }
.pantalla-carga p {
  margin: 0; font-family: var(--fuente-cifras); font-weight: 600; font-size: 1.1rem;
  letter-spacing: 0.3em; color: var(--niebla); opacity: 0.7;
}
.pantalla-carga .carga-lenta {
  max-width: 260px; margin: 20px auto 0; font-family: var(--fuente); font-size: 0.95rem; letter-spacing: 0; text-align: center;
  visibility: hidden; animation: aparecer 0s 10s forwards;
}
.pantalla-carga-saliendo { opacity: 0; pointer-events: none; }
/* Si la app no arranca (mala señal, CDN caído), sin JS: aparece a los 10 s. */
@keyframes aparecer { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .pantalla-carga { transition: none; }
}

/* Panel de desarrollador */
.lista-panel { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.tarjeta-panel {
  padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow-wrap: anywhere;
}
.tarjeta-panel[data-estado="resuelta"], .tarjeta-panel[data-activo="false"] { opacity: 0.7; }
.tarjeta-panel p { margin: 0 0 6px; }
.panel-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.panel-mensaje { white-space: pre-wrap; }
.panel-contexto { font-size: 0.9rem; color: var(--texto-suave); }
.panel-contexto a { margin-left: 8px; }
.panel-resolver { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.panel-resolver label { flex: 1 1 200px; margin: 0; }
.panel-botones { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.estado[data-tipo="error"] { background: color-mix(in srgb, var(--negativo) 18%, var(--superficie)); }
.panel-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 0 0 20px; }
.panel-cifras div { padding: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.panel-cifras dt { font-size: 0.85rem; color: var(--texto-suave); }
.panel-cifras dd { margin: 4px 0 0; font-size: 1.3rem; }

/* Compra pendiente (auto cargado por un vendedor) */
.aviso-pendiente {
  display: block; width: 100%; margin: 0 0 12px; padding: 10px 12px; text-align: left; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--texto);
  background: color-mix(in srgb, #d98e04 18%, var(--superficie));
  border: 1px solid #d98e04; border-radius: var(--radio-chico);
}
.etiqueta-pendiente {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: color-mix(in srgb, #d98e04 22%, var(--superficie));
}

/* Usuarios */
.campo-rol { margin-bottom: 12px; }
.panel-botones select { width: auto; min-height: 36px; margin: 0; }

/* Firma dibujada (representante y página de firma): siempre sobre blanco */
.etiqueta-lienzo { margin: 4px 0 6px; font-weight: 500; }
.lienzo-firma {
  display: block; width: 100%; height: 180px; margin-bottom: 8px; background: #fff; cursor: crosshair;
  border: 1px dashed var(--linea); border-radius: var(--radio-chico);
}
.firma-guardada { max-width: 320px; width: 100%; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-chico); }

/* Contrato de consignación */
.nota-contrato { margin: 8px 0 0; color: var(--texto-suave); }
.qr-contenido { display: grid; justify-items: center; gap: 8px; text-align: center; }
.qr-contenido label { width: 100%; text-align: left; }
.qr-img { width: min(280px, 100%); background: #fff; border-radius: var(--radio-chico); }
/* Página pública de firma */
.cabecera-firma { display: flex; justify-content: center; padding: 12px; background: #fff; border-bottom: 1px solid var(--linea); }
.resumen-firma { margin: 8px 0 4px; padding: 12px; background: var(--fondo); border-radius: var(--radio-chico); }
.resumen-firma p { margin: 2px 0; }
.opcion-acepto { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-weight: 500; }
.opcion-acepto input { width: 20px; height: 20px; min-height: 0; margin: 0; }

/* Documentos del auto */
.documentos-resumen { font-size: .85rem; font-weight: 400; color: var(--texto-suave); }
.lista-documentos { list-style: none; margin: 0 0 8px; padding: 0; }
.documento-fila { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.documento-fila:last-child { border-bottom: 0; }
.documento-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.documento-nombre { font-weight: 600; }
.documento-ok { color: var(--positivo); font-size: .9rem; overflow-wrap: anywhere; }
.documento-falta, .documento-meta { color: var(--texto-suave); font-size: .9rem; }
.documento-botones { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.documentos-anteriores { list-style: none; margin: 4px 0 0; padding-left: 12px; font-size: .9rem; }
.documento-anterior { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Panel financiero */
.finanzas-controles { display: flex; flex-wrap: wrap; gap: var(--espacio); align-items: center; margin-block: var(--espacio); }
/* Todo en una línea a la misma altura: "Mes" junto al selector y el Excel a la derecha. */
.finanzas-mes { display: flex; align-items: center; gap: 8px; margin: 0; }
.finanzas-mes select { width: auto; margin: 0; }
.finanzas-excel { margin-left: auto; }
.selector-de { display: flex; gap: 8px; }
.tarjetas-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: var(--espacio); }
.tarjeta-cifra { background: var(--superficie); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 4px; }
.tarjeta-cifra span { color: var(--texto-suave); font-size: 0.9rem; }
.tarjeta-cifra strong { font-size: 1.3rem; }
.tarjeta-cifra.positiva strong { color: var(--positivo); }
.tarjeta-cifra.negativa strong { color: var(--negativo); }
.tabla-finanzas { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--radio); }
.tabla-finanzas th, .tabla-finanzas td { padding: 8px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-finanzas td { text-align: right; }
.fila-linea { cursor: pointer; }
.fila-total th, .fila-total td { font-weight: 600; }
.detalle-linea { list-style: none; padding: 8px 12px; margin: 0; display: grid; gap: 6px; }
.detalle-linea li { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.grafico-12 { overflow-x: auto; margin-top: var(--espacio); }
.grafico-12 svg { width: 100%; min-width: 480px; height: 180px; }
.grafico-meses { display: flex; min-width: 480px; color: var(--texto-suave); font-size: 0.8rem; }
.grafico-meses span { flex: 1; text-align: center; }
.grafico-12 .fuera-de-lista { cursor: default; }
.grafico-ingresos { fill: var(--acento); cursor: pointer; }
.grafico-gastos { fill: var(--acero); cursor: pointer; }
.grafico-utilidad { fill: none; stroke: var(--positivo); stroke-width: 2; }
.grafico-cero { stroke: var(--linea); }
.flujo-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--espacio); }
.linea-flujo summary { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; cursor: pointer; }
.lista-comprometido { list-style: none; padding: 0; display: grid; gap: 6px; }
.lista-comprometido li { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 600px) {
  .tarjetas-cifras { grid-template-columns: 1fr 1fr; }
}

/* Historial (pedido 9) */
.filtros-historial { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 16px; }
.filtros-historial label { display: grid; gap: 4px; min-width: 0; }
.filtros-historial input, .filtros-historial select { width: 100%; min-width: 0; }
@media (min-width: 720px) {
  .filtros-historial { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
}
.lista-historial { list-style: none; margin: 0 0 16px; padding: 0; }
.lista-historial .registro { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--linea); }
.lista-historial .registro-abrir { display: grid; flex: 1; gap: 2px; min-width: 0; padding: 10px 4px; background: none;
  border: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lista-historial .registro-abrir:hover { background: var(--resalte); }
.acciones-desarrollador { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.registro-fecha, .registro-quien { font-size: 0.875rem; color: var(--texto-suave); }
.registro-texto { overflow-wrap: anywhere; }
.tabla-cambios { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-cambios th, .tabla-cambios td { padding: 6px 8px; border-bottom: 1px solid var(--linea); text-align: left;
  vertical-align: top; overflow-wrap: anywhere; }
.tabla-scroll { overflow-x: auto; }
.lista-papelera { list-style: none; margin: 0 0 16px; padding: 0; }
.entrada-papelera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 4px; border-bottom: 1px solid var(--linea); }
.entrada-texto { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.entrada-botones { display: flex; gap: 8px; }
.datos-papelera { margin: 0 0 12px; }
.datos-papelera > div { display: flex; gap: 8px; padding: 2px 0; }
.datos-papelera dt { color: var(--texto-suave); min-width: 8rem; }
.datos-papelera dd { margin: 0; overflow-wrap: anywhere; }
.seccion-historial { margin: 0; }
.seccion-historial summary { cursor: pointer; }
.seccion-historial summary h2 { display: inline; margin: 0; font-size: 1.15rem; }
.seccion-historial details[open] summary { margin-bottom: 8px; }
.seccion-historial .registro { display: grid; gap: 2px; padding: 10px 4px; }

/* Escáner de documentos (punto 49) */
.escaner-modal { max-width: 640px; }
.escaner-aviso { margin: 0 0 12px; color: var(--texto-suave); }
.escaner-aviso:empty { margin: 0; }
.escaner-entradas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.escaner-archivo { position: relative; cursor: pointer; }
.escaner-archivo input {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.escaner-archivo:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.escaner-archivo.deshabilitado { opacity: 0.6; cursor: progress; }
.escaner-paginas { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.escaner-paginas li { display: flex; align-items: center; gap: 12px; }
.escaner-paginas img {
  width: 56px; height: 72px; object-fit: cover;
  border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff;
}
.escaner-paginas span { flex: 1; }
.escaner-marco { position: relative; width: 100%; line-height: 0; background: var(--fondo); border-radius: var(--radio-chico); }
.escaner-lienzo { display: block; width: auto; height: auto; max-width: 100%; max-height: 65vh; margin: 0 auto; touch-action: none; }
.escaner-modal [hidden] { display: none !important; }
.escaner-svg { position: absolute; left: 0; top: 0; touch-action: none; overflow: visible; }
.escaner-poligono { fill: rgba(26, 77, 181, 0.15); stroke: var(--acento); stroke-width: 2; }
.escaner-manija { fill: var(--acento); fill-opacity: 0.85; stroke: #fff; stroke-width: 3; cursor: grab; touch-action: none; }
/* Foco y arrastre: más grande y de otro color (ámbar con borde oscuro) para verse sobre la foto en claro y oscuro. */
.escaner-manija:focus-visible, .escaner-manija.arrastrando {
  outline: none; r: 18px; fill: #ffc400; fill-opacity: 1; stroke: #111; stroke-width: 4;
}

/* Pizarra (roadmap 51) */
.pizarra-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pizarra-dias { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block: 8px 12px; }
.pizarra-dias h2 { margin: 0; min-width: 0; }
.pizarra-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pizarra-nota { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px 12px;
  display: grid; gap: 4px; min-width: 0; }
.pizarra-aviso { border-left: 4px solid var(--acento); }
.pizarra-nota.atrasada { border-left: 4px solid var(--negativo); }
.pizarra-nota.hecha .pizarra-texto { text-decoration: line-through; color: var(--texto-suave); }
.pizarra-check { display: flex; gap: 10px; align-items: flex-start; }
.pizarra-texto { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pizarra-meta { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; color: var(--texto-suave); font-size: 0.9em; }
.pizarra-acciones { display: flex; gap: 12px; }
.pizarra-mover { display: inline-flex; gap: 12px; }
/* Más fina (Mirko, 2026-10-03): que entren más tareas en la pantalla. Las acciones van a la derecha. */
.pizarra-lista { gap: 4px; }
/* Texto a todo el ancho; abajo, en una línea, para quién (izquierda) y las acciones (derecha). */
.pizarra-nota { padding: 6px 10px; gap: 0 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pizarra-nota > :first-child { grid-column: 1 / -1; }
.pizarra-nota > .pizarra-meta { grid-column: 1; }
.pizarra-nota > .pizarra-acciones { grid-column: 2; grid-row: 2; font-size: 0.85em; }
.pizarra-check { align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.pizarra-una-linea { white-space: normal; overflow-wrap: anywhere; margin: 0; line-height: 1.35; }
.pizarra-check input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }
.pizarra-meta { font-size: 0.8em; gap: 6px; }
.pizarra-acciones .boton-texto { min-height: 32px; padding-inline: 4px; }
.modal-nota label { margin-bottom: 8px; }
.modal-nota textarea { min-height: 56px; }
.modal-nota fieldset { margin-bottom: 8px; }
.modal-nota .opciones { display: flex; flex-wrap: wrap; gap: 0 16px; }
.modal-nota .opciones legend { width: 100%; margin-bottom: 2px; }
.modal-nota .opciones label { min-height: 32px; margin: 0; }
.modal-nota .opciones input { width: 18px; height: 18px; }
.pizarra-nota[draggable="true"] { cursor: grab; }
.pizarra-nota.arrastrando { opacity: 0.5; }

/* Pizarra flotante (Mirko, 2026-10-03): botón arriba a la derecha bajo la barra (lo sigue al bajar)
   y ventana encima del contenido, que se mueve desde el título y se agranda desde la esquina. */
.pizarra-flotante { position: fixed; right: 16px; top: calc(var(--barra-bajo, 64px) + 10px); z-index: 14; }
.flotante-boton { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: none;
  border-radius: 50%; background: var(--acento); color: var(--texto-sobre-acento); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.flotante-numero { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--negativo); color: #fff; font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center; }
.flotante-ventana { position: fixed; display: flex; flex-direction: column; background: var(--superficie);
  color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); overflow: hidden; }
.flotante-asa { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(315deg, var(--texto-suave) 0 2px, transparent 2px 5px, var(--texto-suave) 5px 7px, transparent 7px);
  opacity: 0.6; }
.flotante-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--linea); cursor: move; touch-action: none; user-select: none; }
.flotante-cabecera .boton-texto { min-height: 28px; padding-inline: 6px; cursor: pointer; }
.flotante-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; }
.pizarra-hoy .pizarra-lista { margin-block: 6px; gap: 4px; }
.pizarra-hoy .pizarra-nota { padding: 4px 8px; gap: 0; }
.pizarra-hoy .pizarra-check { align-items: center; gap: 8px; }
.pizarra-hoy .pizarra-check input { min-height: 0; margin: 0; flex: none; }
.pizarra-hoy .pizarra-texto { font-size: 0.95em; }
.pizarra-hoy .pizarra-meta { display: inline; font-size: 0.85em; }
.pizarra-hoy p { margin: 0; }
.pizarra-hoy .aviso-error, .pizarra-hoy .vacio { margin-block: 4px; }

/* Página de la Pizarra con el estilo del panel de la pantalla principal (Mirko, 2026-10-03):
   una línea por nota (texto y, en gris chico, para quién) y los botones al lado. */
.pizarra-barra { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pizarra-barra h1 { font-size: 1.4rem; margin: 0; }
.pizarra-barra .pizarra-dias { margin: 0; gap: 4px; }
.pizarra-barra .pizarra-dias h2 { font-size: 0.95rem; }
/* El botón con el porte de la flecha: más ancho que alto (Mirko, 2026-10-03). */
.pizarra-barra .pizarra-dias .boton { min-height: 0; height: 16px; padding: 0 7px 2px; font-size: 0.75rem; line-height: 1; }
.pizarra-barra .boton-primario { margin-left: auto; min-height: 34px; padding: 4px 14px; font-size: 0.9rem; }
.pizarra-pagina .seccion { padding: 8px 12px; margin-bottom: 10px; }
.pizarra-pagina .seccion h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave); margin: 0 0 6px; }
.pizarra-pagina .pizarra-nota { padding: 4px 8px; }
.pizarra-pagina .pizarra-nota > :first-child { grid-column: 1; }
.pizarra-pagina .pizarra-nota > .pizarra-acciones { grid-column: 2; grid-row: 1; }
.pizarra-pagina .pizarra-check { display: inline; }
.pizarra-pagina .pizarra-check input { vertical-align: -3px; margin-right: 8px; }
.pizarra-pagina .pizarra-texto { font-size: 0.95em; }
.pizarra-pagina .pizarra-meta { display: inline; font-size: 0.8em; }
.pizarra-pagina .etiqueta-pendiente { font-size: 0.9em; padding: 0 6px; }
.pizarra-pagina .pizarra-acciones { gap: 6px; }
.pizarra-pagina .pizarra-mover { gap: 6px; }
.pizarra-pagina .pizarra-acciones .boton-texto { min-height: 28px; }
/* Casillas de marcar a la mitad (Mirko, 2026-10-03): página y panel. El texto también marca (está en la etiqueta). */
.pizarra-pagina .pizarra-check input, .pizarra-hoy .pizarra-check input { width: 13px; height: 13px; }
.pizarra-pagina .pizarra-check input { vertical-align: -1px; margin-right: 6px; }
/* En el celular: hoja que baja desde arriba, a todo el ancho; se agranda con la manija de abajo. */
@media (max-width: 599px) {
  .flotante-ventana { left: 0; right: 0; border-radius: 0 0 var(--radio) var(--radio); }
  .flotante-asa { left: 50%; right: auto; width: 56px; height: 20px; transform: translateX(-50%); cursor: ns-resize;
    background: none; opacity: 1; }
  .flotante-asa::after { content: ""; position: absolute; left: 12px; right: 12px; top: 8px; height: 5px;
    border-radius: 3px; background: var(--texto-suave); }
  .flotante-cuerpo { padding-bottom: 22px; }
  .flotante-cabecera { cursor: default; }
}
.flotante-botones { display: inline-flex; gap: 4px; }
.flotante-nueva { padding-block: 4px; }
.flotante-nueva .modal-botones { margin-top: 8px; }
.flotante-nueva .modal-botones .boton { min-height: 34px; padding: 0 12px; }
/* Grupos de la ventana flotante con el nombre en vertical al lado (Mirko, 2026-10-03). */
.flotante-grupo { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; margin-block: 6px; }
.flotante-grupo-etiqueta { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave);
  border-left: 2px solid var(--linea); padding-inline: 2px; }
.flotante-grupo.avisos .flotante-grupo-etiqueta { border-left-color: var(--acento); color: var(--acento); }
.flotante-grupo .pizarra-lista { margin: 0; }

/* Probar el asistente de WhatsApp (Mirko, 2026-10-06): chat parecido a WhatsApp. */
.chat-encabezado { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.chat-encabezado h1 { margin-bottom: 4px; }
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 320px; max-height: 60vh; overflow-y: auto;
  padding: 14px; margin: 12px 0; background: #efeae2; border: 1px solid var(--linea); border-radius: var(--radio-chico); }
.chat-fila { display: flex; }
.chat-cliente { justify-content: flex-end; }
.chat-burbuja { max-width: 85%; padding: 8px 12px; border-radius: 10px; background: #fff; color: #111;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); overflow-wrap: anywhere; }
.chat-cliente .chat-burbuja { background: #d9fdd3; }
.chat-aviso { background: #fff6d6; font-size: 0.9rem; }
.chat-texto { margin: 0; white-space: pre-wrap; }
.chat-nota { margin: 6px 0 0; font-size: 0.75rem; color: #667; }
.chat-escribiendo { font-style: italic; color: #667; }
.chat-espera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 0.85rem; color: #667; }
.chat-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.chat-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--linea); }
/* Lista o tarjeta del catálogo de WhatsApp en el chat de prueba (ROADMAP 77). */
.chat-tarjeta { display: grid; gap: 6px; min-width: 0; }
.chat-tarjeta-tipo { margin: 0; font-size: 0.8rem; color: var(--texto-suave); }
.chat-tarjeta-auto { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.chat-tarjeta-foto { grid-row: span 2; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--linea); }
.chat-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-tarjeta-nombre { font-weight: 600; overflow-wrap: anywhere; }
.chat-tarjeta-precio { font-size: 0.9rem; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; resize: vertical; }
/* Copia de la conversación en una sugerencia de tipo asistente (dev.html). */
.chat-copia { min-height: 0; max-height: 50vh; }
.conversacion-copia summary { cursor: pointer; font-size: 0.9rem; color: var(--texto-suave); }
.estado[data-tipo="asistente"] { background: color-mix(in srgb, var(--positivo) 18%, var(--superficie)); }

/* Prospectos y agenda del asistente (roadmap 25, fases 2-3): como la pizarra, compacto en el celular. */
.prospectos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.prospectos-barra h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prospectos-barra > .boton { margin-left: auto; }
.aviso-listo {
  margin: 12px 0; padding: 10px 12px; overflow-wrap: anywhere;
  color: var(--positivo); background: color-mix(in srgb, var(--positivo) 10%, var(--superficie));
  border-left: 4px solid var(--positivo); border-radius: var(--radio-chico);
}
/* «Recordarme» de un push (Mirko, 2026-10-10) */
.franja-posponer {
  margin: 12px 0; padding: 10px 12px; background: var(--superficie);
  border-left: 4px solid var(--acento); border-radius: var(--radio-chico);
}
.franja-posponer p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prospectos-medicion {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 0 0 12px;
}
.prospectos-medicion div { padding: 6px 10px; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-chico); min-width: 0; }
.prospectos-medicion dt { font-size: 0.75rem; color: var(--texto-suave); }
.prospectos-medicion dd { margin: 0; font-size: 1.1rem; }
.prospectos-lista, .agenda-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.prospecto-tarjeta { padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); min-width: 0; overflow-wrap: anywhere; }
.prospecto-tarjeta[data-estado="nuevo"] { border-left: 4px solid var(--acento); }
.prospecto-tarjeta p { margin: 4px 0; }
.prospecto-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.prospecto-nombre { padding: 0; background: none; border: none; font: inherit; font-weight: 600; color: inherit;
  text-align: left; cursor: pointer; text-decoration: underline; overflow-wrap: anywhere; }
.prospecto-hace { margin-left: auto; font-size: 0.85rem; color: var(--texto-suave); white-space: nowrap; }
.prospecto-auto { font-weight: 500; }
.prospecto-senal, .prospecto-meta { font-size: 0.9rem; color: var(--texto-suave); }
.prospecto-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.prospecto-resumen { white-space: pre-wrap; }
.prospecto-tarjeta .panel-botones { margin-top: 6px; gap: 8px; }
.prospecto-detalle .acciones { margin: 8px 0 16px; }
.prospecto-detalle .chat { min-height: 0; }
.boton-whatsapp { background: var(--whatsapp); color: var(--texto-sobre-whatsapp); text-decoration: none; }
/* Conversación probada desde la app (canal app): no es WhatsApp. */
.etiqueta-canal {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  border: 1px dashed var(--acento); color: var(--texto); background: var(--superficie);
}
/* Novedades del asistente después de tomado (Mirko, 2026-10-08). */
.etiqueta-novedades {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--acento); color: var(--texto-sobre-acento);
}
.novedades-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.novedades-lista li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 4px 0; border-bottom: 1px solid var(--linea);
  min-width: 0; overflow-wrap: anywhere; }
.novedad-cuando { font-size: 0.85rem; color: var(--texto-suave); white-space: nowrap; }
/* Contexto de la novedad (Mirko, 2026-10-08): lo que se hablaba en ese momento, en gris y cursiva. */
.novedad-contexto { flex-basis: 100%; display: grid; gap: 2px; font-size: 0.85rem; font-style: italic;
  color: var(--texto-suave); }
.agenda-visita { padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--superficie); min-width: 0; overflow-wrap: anywhere; }
.agenda-visita p { margin: 2px 0; }
.agenda-visita[data-estado="por_confirmar"] { border-left: 4px solid #d98e04; }
.agenda-visita[data-estado="realizada"], .agenda-visita[data-estado="no_vino"] { opacity: 0.75; }
/* Auto vendido con visitas agendadas (Mirko, 2026-10-08): arriba de la agenda y como insignia. */
.agenda-visita[data-auto-vendido="true"] { border-left: 4px solid var(--marino); }
.etiqueta-auto-vendido {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--marino); color: #fff;
}
@media (prefers-color-scheme: dark) {
  .etiqueta-auto-vendido { background: var(--texto); color: var(--fondo); }
  .agenda-visita[data-auto-vendido="true"] { border-left-color: var(--texto); }
}
.agenda-hora { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.agenda-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.agenda-quien .boton-texto { padding: 4px 0; }
.agenda-por-confirmar { border-left: 4px solid #d98e04; }
.agenda-visita .panel-botones { gap: 8px; margin-top: 6px; }
.visita-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.visita-form h3 { margin: 0 0 8px; font-size: 1rem; }

/* Guía del vendedor (Mirko, 2026-10-07) */
.guia-bajada { color: var(--texto-suave); max-width: 65ch; }
.guia-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.guia-seccion { scroll-margin-top: 80px; }
.guia-seccion h3 { margin: 16px 0 6px; font-size: 1.05rem; }
.guia-seccion ul, .guia-seccion ol { padding-left: 22px; display: grid; gap: 4px; }
.guia-seccion p, .guia-seccion li { max-width: 68ch; }
.guia-respuestas { display: grid; gap: 4px; margin: 0; }
.guia-respuestas dt { font-weight: 600; margin-top: 10px; }
.guia-respuestas dd { margin: 0; color: var(--texto-suave); }
.aviso-guia {
  display: block; width: 100%; margin-bottom: 10px; padding: 10px 14px; border: none; border-radius: var(--radio);
  background: var(--marino); color: #fff; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
/* Botón redondo de la guía al lado izquierdo, bajo la barra (la pizarra queda a la derecha), y su ventana,
   que la primera vez también se abre a la izquierda (Mirko, 2026-10-07). */
.guia-flotante { position: fixed; left: 16px; top: calc(var(--barra-bajo, 64px) + 10px); z-index: 14; }
/* En el celular, abajo a la izquierda: arriba tapaba «← Autos» y los títulos (la ventana sigue siendo hoja). */
@media (max-width: 599px) {
  .guia-flotante { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
.guia-flotante .flotante-cuerpo { padding: 10px 14px; }
.guia-flotante .guia-seccion { margin-bottom: 12px; padding: 12px; scroll-margin-top: 8px; }
.guia-flotante .guia-seccion h2 { font-size: 1.1rem; }
.enlace-guia, .enlace-guia-indice { font: inherit; cursor: pointer; }
.enlace-guia { border: none; background: none; padding: 0; color: var(--acento); text-decoration: underline; }
.enlace-guia-indice { padding: 4px 12px; border-radius: 999px; background: var(--superficie);
  border: 1px solid var(--linea); color: var(--texto); font-size: 0.9rem; }
.enlace-guia-indice:hover { border-color: var(--acento); }