/* ============================================================
   CLARA — Sistema visual
   AutoCorp · Renting y Gestión de Flotas
   Derivado de "Look and Feel AutoCorp 2.0" + render de CLARA
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;800;900&family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Marca (manual AutoCorp 2.0) ------------------------- */
  --ac-red:        #D92127;
  --ac-red-deep:   #A81A1F;   /* hover / presionado */
  --ac-red-wash:   #FCEBEC;   /* fondos suaves */
  --ac-blue:       #3363A6;
  --ac-blue-deep:  #274D82;
  --ac-blue-wash:  #EDF2F9;
  --ac-ink:        #323840;   /* texto principal */

  /* --- Materialidad de CLARA (muestreado del render) -------- */
  --ac-bone:       #E4E2D9;   /* chasis: fondo de app */
  --ac-bone-soft:  #EFEEE8;   /* zonas de descanso */
  --ac-shell:      #FFFFFF;   /* superficie de tarjeta */
  --ac-visor:      #16233A;   /* la cara de CLARA: superficie de conversación */
  --ac-visor-2:    #24334E;   /* elevación dentro del visor */
  --ac-glow:       #A0D2F0;   /* brillo de los ojos. SOLO sobre visor. */

  /* --- Texto ------------------------------------------------ */
  --ac-text:       var(--ac-ink);
  --ac-text-soft:  #6B717A;
  --ac-text-mute:  #969BA3;
  --ac-on-visor:      #E8EEF6;
  --ac-on-visor-soft: #98A6BC;

  /* --- Señales de sistema (no son colores de marca) --------- */
  --ac-ok:     #1E8A5F;
  --ac-warn:   #C97A0E;
  --ac-alert:  var(--ac-red);

  /* --- Líneas ----------------------------------------------- */
  --ac-line:        #D6D3C8;  /* sobre bone */
  --ac-line-soft:   #E9E7E0;
  --ac-line-visor:  rgba(160,210,240,.16);

  /* --- Tipografía ------------------------------------------- */
  --ac-display: 'Kanit', system-ui, sans-serif;
  --ac-body:    'Roboto', system-ui, sans-serif;
  --ac-data:    'Roboto Mono', ui-monospace, monospace;

  --ac-t-hero:  clamp(2.6rem, 6vw, 4.5rem);
  --ac-t-h1:    clamp(2rem, 4vw, 2.75rem);
  --ac-t-h2:    1.5rem;
  --ac-t-h3:    1.125rem;
  --ac-t-body:  1rem;
  --ac-t-sm:    .875rem;
  --ac-t-xs:    .75rem;

  /* --- Espaciado (base 4) ----------------------------------- */
  --ac-1: 4px;  --ac-2: 8px;  --ac-3: 12px; --ac-4: 16px;
  --ac-5: 24px; --ac-6: 32px; --ac-7: 48px; --ac-8: 64px; --ac-9: 96px;

  /* --- Forma ------------------------------------------------ */
  /* El chasis de CLARA es redondeado; el sistema gráfico de AutoCorp
     es de ángulo recto. Convive: contenedores rectos, controles blandos. */
  --ac-r-panel: 4px;
  --ac-r-card:  8px;
  --ac-r-ctrl:  10px;
  --ac-r-visor: 20px;
  --ac-r-pill:  999px;

  --ac-shadow-1: 0 1px 2px rgba(50,56,64,.06), 0 4px 16px rgba(50,56,64,.05);
  --ac-shadow-2: 0 2px 6px rgba(50,56,64,.08), 0 16px 40px rgba(50,56,64,.10);
  --ac-shadow-visor: 0 24px 60px rgba(22,35,58,.28);

  --ac-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE
   ============================================================ */

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

body {
  margin: 0;
  background: var(--ac-bone);
  color: var(--ac-text);
  font-family: var(--ac-body);
  font-size: var(--ac-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .ac-display {
  font-family: var(--ac-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}

h1 { font-size: var(--ac-t-h1); text-transform: uppercase; }
h2 { font-size: var(--ac-t-h2); text-transform: uppercase; }
h3 { font-size: var(--ac-t-h3); font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 var(--ac-4); }
a { color: var(--ac-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--ac-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Datos duros: patentes, kilometrajes, importes, fechas.
   Siempre en mono con cifras tabulares. */
.ac-data {
  font-family: var(--ac-data);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Etiqueta de sección. El manual usa este ritmo en todas las piezas. */
.ac-eyebrow {
  font-family: var(--ac-display);
  font-weight: 600;
  font-size: var(--ac-t-xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ac-red);
}

/* ============================================================
   GRAMÁTICA GRÁFICA AUTOCORP
   Dos recursos tomados del manual: el bloque rojo con regla azul
   que encabeza cada lámina, y el encuadre de línea fina que
   recorta el contenido.
   ============================================================ */

.ac-titulo {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: var(--ac-5);
  margin-bottom: var(--ac-6);
}
.ac-titulo::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  background: var(--ac-red);
}
.ac-titulo > div { border-bottom: 3px solid var(--ac-blue); padding-bottom: var(--ac-3); }

/* Encuadre: rectángulo de 1px desfasado detrás del contenido. */
.ac-encuadre { position: relative; }
.ac-encuadre::before {
  content: "";
  position: absolute;
  inset: -14px -14px 28px 28px;
  border: 1px solid var(--ac-red);
  pointer-events: none;
  z-index: 0;
}
.ac-encuadre--azul::before { border-color: var(--ac-blue); }
.ac-encuadre > * { position: relative; z-index: 1; }

/* Cuarto de círculo. Marcador de esquina, nunca decoración suelta. */
.ac-cuadrante {
  width: 44px; height: 44px;
  background: var(--ac-blue);
  border-radius: 0 0 100% 0;
}
.ac-cuadrante--rojo { background: var(--ac-red); }

/* ============================================================
   EL VISOR  ·  elemento firma
   La cara de CLARA es una pantalla azul profunda con un brillo
   frío. Toda superficie donde CLARA habla o piensa usa ese
   material. Es el único lugar del sistema donde aparece --ac-glow.
   ============================================================ */

.ac-visor {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(160,210,240,.14), transparent 62%),
    var(--ac-visor);
  color: var(--ac-on-visor);
  border-radius: var(--ac-r-visor);
  box-shadow: var(--ac-shadow-visor);
  overflow: hidden;
}
.ac-visor::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--ac-line-visor);
  pointer-events: none;
}
.ac-visor h1, .ac-visor h2, .ac-visor h3 { color: #fff; }

/* Barrido de pensamiento. Se activa agregando .is-pensando */
.ac-visor.is-pensando::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(160,210,240,.13) 50%, transparent 60%);
  background-size: 260% 100%;
  animation: ac-barrido 2.4s var(--ac-ease) infinite;
  pointer-events: none;
}
@keyframes ac-barrido {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* Los dos ojos. Indicador de estado en miniatura. */
.ac-ojos { display: inline-flex; gap: 6px; align-items: center; }
.ac-ojos i {
  width: 7px; height: 12px;
  border-radius: 4px;
  background: var(--ac-glow);
  box-shadow: 0 0 10px rgba(160,210,240,.85);
  animation: ac-parpadeo 5.5s steps(1) infinite;
}
@keyframes ac-parpadeo {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.12); }
}

/* ============================================================
   CONTROLES
   ============================================================ */

.ac-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ac-2);
  font-family: var(--ac-display);
  font-weight: 600;
  font-size: var(--ac-t-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--ac-r-ctrl);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ac-ease), transform .18s var(--ac-ease), border-color .18s;
}
.ac-btn:active { transform: translateY(1px); }

.ac-btn--primario   { background: var(--ac-red); color: #fff; }
.ac-btn--primario:hover { background: var(--ac-red-deep); }

.ac-btn--secundario { background: transparent; color: var(--ac-blue); border-color: var(--ac-blue); }
.ac-btn--secundario:hover { background: var(--ac-blue-wash); }

.ac-btn--fantasma   { background: transparent; color: var(--ac-text-soft); }
.ac-btn--fantasma:hover { background: rgba(50,56,64,.06); color: var(--ac-text); }

/* Sobre visor */
.ac-visor .ac-btn--secundario { color: var(--ac-glow); border-color: rgba(160,210,240,.4); }
.ac-visor .ac-btn--secundario:hover { background: rgba(160,210,240,.1); }

.ac-campo {
  width: 100%;
  font-family: var(--ac-body);
  font-size: var(--ac-t-body);
  color: var(--ac-text);
  background: var(--ac-shell);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-r-ctrl);
  padding: 12px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.ac-campo::placeholder { color: var(--ac-text-mute); }
.ac-campo:focus {
  outline: none;
  border-color: var(--ac-blue);
  box-shadow: 0 0 0 3px var(--ac-blue-wash);
}

/* ============================================================
   SUPERFICIES Y ESTADOS
   ============================================================ */

.ac-tarjeta {
  background: var(--ac-shell);
  border: 1px solid var(--ac-line-soft);
  border-radius: var(--ac-r-card);
  padding: var(--ac-5);
  box-shadow: var(--ac-shadow-1);
}

.ac-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ac-body);
  font-weight: 500;
  font-size: var(--ac-t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ac-r-pill);
  white-space: nowrap;
}
.ac-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ac-estado--activo   { color: var(--ac-ok);    background: rgba(30,138,95,.10); }
.ac-estado--service  { color: var(--ac-warn);  background: rgba(201,122,14,.10); }
.ac-estado--taller   { color: var(--ac-blue);  background: var(--ac-blue-wash); }
.ac-estado--alerta   { color: var(--ac-red);   background: var(--ac-red-wash); }
.ac-estado--baja     { color: var(--ac-text-mute); background: rgba(50,56,64,.07); }

/* Tabla de flota */
.ac-tabla { width: 100%; border-collapse: collapse; font-size: var(--ac-t-sm); }
.ac-tabla th {
  font-family: var(--ac-display);
  font-weight: 600; font-size: var(--ac-t-xs);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-text-soft);
  text-align: left;
  padding: 0 var(--ac-4) var(--ac-3);
  border-bottom: 1px solid var(--ac-line);
}
.ac-tabla td { padding: var(--ac-3) var(--ac-4); border-bottom: 1px solid var(--ac-line-soft); }
.ac-tabla tr:last-child td { border-bottom: 0; }
.ac-tabla tbody tr { transition: background .15s; }
.ac-tabla tbody tr:hover { background: var(--ac-bone-soft); }

/* Patente. Formato fijo, siempre reconocible. */
.ac-patente {
  font-family: var(--ac-data);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ac-ink);
  background: var(--ac-bone-soft);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}