/* =====================================================================
   APOLO — Hoja de estilo
   Línea gráfica tomada del sitio oficial del estudio (apolo.ec):
     verde primario #104224 · verde del logo #134227 · verde casi negro #1B2519
     tipografía Montserrat · fondo blanco · texto #666 · titulares #333
   El azul #2EA3F2 del sitio es el color por defecto del tema Divi,
   NO es color de marca: no se usa aquí.
   ===================================================================== */

:root {
  --verde:        #104224;
  --verde-logo:   #134227;
  --verde-oscuro: #1B2519;
  --verde-claro:  #1d6b3c;
  --verde-tenue:  #eef4f0;

  --blanco:  #ffffff;
  --papel:   #f7f8f7;
  --linea:   #e2e6e3;
  --texto:   #666666;
  --titulo:  #333333;
  --tenue:   #8a938d;

  /* Semáforo: separado del color de marca, como manda el diseño de estado */
  --rojo:      #b3261e;
  --rojo-f:    #fdeceb;
  --ambar:     #9a6700;
  --ambar-f:   #fdf6e3;
  --verde-ok:  #1d6b3c;
  --verde-ok-f:#e9f4ed;
  --gris-f:    #f0f2f0;

  --radio: 8px;
  --sombra: 0 1px 3px rgba(16,66,36,.08), 0 1px 2px rgba(16,66,36,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Montserrat, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--titulo); font-weight: 600; margin: 0 0 .6rem; line-height: 1.25; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
a { color: var(--verde); }

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--verde-oscuro);
  padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
  height: 62px;
  position: sticky; top: 0; z-index: 50;
}
.cabecera img.logo { height: 32px; width: auto; display: block; }
.cabecera .sep { flex: 1; }
.cabecera .quien { color: #cfd8d2; font-size: 12.5px; text-align: right; line-height: 1.3; }
.cabecera .quien strong { color: #fff; display: block; font-weight: 600; }
.cabecera .rol {
  display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.14); color: #e8efe9; padding: 2px 7px; border-radius: 3px;
}

/* ---------- Navegación ---------- */
.nav {
  background: var(--blanco); border-bottom: 1px solid var(--linea);
  padding: 0 20px; display: flex; gap: 4px; overflow-x: auto;
  position: sticky; top: 62px; z-index: 40;
}
.nav button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 12px 14px; font: inherit; font-size: 13.5px; color: var(--texto);
  cursor: pointer; white-space: nowrap;
}
.nav button:hover { color: var(--verde); }
.nav button[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }

/* ---------- Estructura ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.rejilla { display: grid; gap: 14px; }
.rejilla.dos  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra);
}
.tarjeta > h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tarjeta .cuenta {
  font-size: 11px; background: var(--verde-tenue); color: var(--verde);
  padding: 1px 7px; border-radius: 999px; font-weight: 600;
}

/* ---------- Métrica ---------- */
.metrica { text-align: center; padding: 18px 12px; }
.metrica .num { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--titulo); }
.metrica .etq { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); margin-top: 6px; }
.metrica.rojo  .num { color: var(--rojo); }
.metrica.ambar .num { color: var(--ambar); }
.metrica.verde .num { color: var(--verde-ok); }

/* ---------- Término ---------- */
.termino {
  display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea);
  align-items: flex-start;
}
.termino:last-child { border-bottom: none; }
.termino .franja { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.termino .franja.rojo { background: var(--rojo); }
.termino .franja.ambar { background: var(--ambar); }
.termino .franja.verde { background: var(--verde-ok); }
.termino .franja.gris { background: #ccc; }
.termino .cuerpo { flex: 1; min-width: 0; }
.termino .titulo-t { color: var(--titulo); font-weight: 600; font-size: 13.5px; }
.termino .meta { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.termino .desglose {
  font-size: 11.5px; color: var(--tenue); margin-top: 6px;
  background: var(--papel); padding: 6px 9px; border-radius: 5px; border-left: 2px solid var(--linea);
}
.termino .dias { text-align: right; flex: none; min-width: 88px; }
.termino .dias .n { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.termino .dias .u { font-size: 10.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Etiquetas de estado ---------- */
.etq {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.etq.rojo  { background: var(--rojo-f);   color: var(--rojo); }
.etq.ambar { background: var(--ambar-f);  color: var(--ambar); }
.etq.verde { background: var(--verde-ok-f); color: var(--verde-ok); }
.etq.gris  { background: var(--gris-f);   color: var(--tenue); }
.etq.muralla { background: var(--verde-oscuro); color: #fff; }

/* ---------- Tabla ---------- */
.rodante { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--papel); }

/* ---------- Formularios y botones ---------- */
label { display: block; font-size: 12px; color: var(--titulo); font-weight: 600; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--linea); border-radius: 6px; background: var(--blanco); color: var(--titulo);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde);
}
.campo { margin-bottom: 13px; }

button.b {
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  background: var(--verde); color: #fff;
}
button.b:hover { background: var(--verde-claro); }
button.b:disabled { opacity: .5; cursor: not-allowed; }
button.b.sec { background: var(--blanco); color: var(--verde); border-color: var(--linea); }
button.b.sec:hover { background: var(--verde-tenue); }
button.b.chico { padding: 5px 11px; font-size: 12px; }
button.b:focus-visible, .nav button:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---------- Apolo AI ---------- */
.bajada { color: var(--tenue); font-size: 13px; margin: -2px 0 14px; max-width: 70ch; }

.chat {
  height: min(46vh, 420px); min-height: 220px; overflow-y: auto;
  padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}
.chat-vacio { margin: auto; text-align: center; color: var(--tenue); font-size: 13px; max-width: 46ch; }

.msg { max-width: 88%; font-size: 13.5px; line-height: 1.55; }
.msg p { margin: 0 0 .5em; }
.msg p:last-child { margin-bottom: 0; }
.msg.yo {
  align-self: flex-end; background: var(--verde); color: #fff;
  padding: 9px 13px; border-radius: 12px 12px 3px 12px; white-space: pre-wrap;
}
.msg.ia {
  align-self: flex-start; background: var(--papel); color: var(--titulo);
  padding: 10px 14px; border-radius: 12px 12px 12px 3px; border: 1px solid var(--linea);
}
.msg.ia .vineta { position: relative; padding-left: 14px; margin: 2px 0; }
.msg.ia .vineta::before { content: '·'; position: absolute; left: 4px; font-weight: 700; color: var(--verde); }
.msg.pensando { color: var(--tenue); font-style: italic; }

.chat-barra { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.chat-barra textarea {
  flex: 1; resize: none; overflow-y: auto; max-height: 140px;
  line-height: 1.45; padding: 10px 12px;
}
.chat-barra button.b { flex: none; }

.chat-pie { font-size: 11.5px; color: var(--tenue); margin: 8px 0 0; line-height: 1.45; }
.chat-consumo {
  display: block; margin-top: 10px; font-size: 11.5px; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  /* En el móvil el hilo se queda con la pantalla, no con un alto fijo que
     obligue a hacer scroll dentro del scroll. */
  .chat { height: min(52vh, 360px); min-height: 180px; }
  .msg { max-width: 94%; }
  .chat-barra button.b { padding: 9px 12px; }
}

/* ---------- Avisos ---------- */
.aviso {
  padding: 11px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px;
  border-left: 3px solid;
}
.aviso.info  { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); }
.aviso.error { background: var(--rojo-f); border-color: var(--rojo); color: var(--rojo); }
.aviso.ambar { background: var(--ambar-f); border-color: var(--ambar); color: var(--ambar); }

.vacio { text-align: center; padding: 30px 20px; color: var(--tenue); font-size: 13.5px; }

/* ---------- Ingreso ---------- */
/* [ALTO EN MÓVIL] En iOS, 100vh mide la pantalla CON la barra del navegador
   desplegada, así que la pantalla de ingreso quedaba más alta que lo visible:
   el recuadro se iba arriba y debajo asomaba una franja del fondo del body.
   100svh mide el alto realmente visible. Se deja 100vh antes como respaldo
   para navegadores viejos que no entienden svh. */
.ingreso {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde-oscuro);
  padding: 24px 20px;
}
/* Y el fondo del documento acompaña, para que ni el rebote del scroll
   de iOS muestre el color de papel debajo. */
body.en-ingreso { background: var(--verde-oscuro); overscroll-behavior-y: none; }
.ingreso .caja {
  background: #fff; border-radius: 12px; padding: 34px 30px; width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
/* El recuadro de ingreso lleva solo el logo del estudio: sin subtítulo,
   el margen del logo asume todo el aire hasta el primer campo. */
.ingreso img.logo { height: 62px; display: block; margin: 0 auto 28px; }
.ingreso button.b { width: 100%; margin-top: 6px; }

.pie {
  text-align: center; color: var(--tenue); font-size: 11.5px;
  padding: 26px 20px; border-top: 1px solid var(--linea); margin-top: 40px;
}

/* ---------- Móvil primero: el abogado vive en audiencias ---------- */
@media (max-width: 640px) {
  main { padding: 14px 12px 50px; }
  .cabecera { padding: 0 12px; height: 56px; }
  .cabecera img.logo { height: 24px; }
  .cabecera .quien { font-size: 11px; }
  .nav { top: 56px; padding: 0 8px; }
  .nav button { padding: 11px 10px; font-size: 13px; }
  .tarjeta { padding: 13px 14px; }
  .termino .dias { min-width: 62px; }
  /* Las tres métricas de un vistazo: el abogado mira el móvil entre audiencias */
  .rejilla.tres { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rejilla.tres .metrica { padding: 12px 4px; }
  .rejilla.tres .metrica .num { font-size: 1.5rem; }
  .rejilla.tres .metrica .etq { font-size: 9px; letter-spacing: .02em; }
  .termino .dias .n { font-size: 1.15rem; }
  h1 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta { transition: box-shadow .15s ease; }
}