/* Oficina Jurídica SES-HUC — identidad institucional */
:root {
  --azul: #0060B0;         /* azul institucional del logo */
  --azul-claro: #2F8FD0;
  --azul-cielo: #EAF3FB;
  --navy: #12283F;
  --tinta: #1d2b3a;
  --tinta-2: #51616f;
  --tinta-3: #8494a2;
  --fondo: #f4f6f9;
  --carta: #ffffff;
  --borde: #e2e8ef;
  --ok: #1a7f37;
  --alerta: #9a6700;
  --alerta-bg: #fff8e1;
  --grave: #d1242f;
  --grave-bg: #fdecea;
  --morado: #8F6FB5;
  --morado-bg: #f3eefa;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(18,40,63,.06), 0 4px 14px rgba(18,40,63,.05);
}
* { box-sizing: border-box; margin: 0; }
html { font-size: 15px; }
body {
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--fondo); color: var(--tinta);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Estructura ── */
.marco { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral {
  background: var(--navy); color: #cfdce8; padding: 20px 14px;
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0;
  height: 100vh;
}
.lateral .logo-caja {
  background: #fff; border-radius: 8px; padding: 9px 12px; margin-bottom: 6px;
}
.lateral .logo-caja img { width: 100%; display: block; }
.lateral .area {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #7f97ab; padding: 10px 10px 12px;
}
.lateral a.nav {
  color: #cfdce8; padding: 9px 12px; border-radius: 8px; font-size: .94rem;
  display: flex; justify-content: space-between; align-items: center;
}
.lateral a.nav:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.lateral a.nav.activo { background: var(--azul); color: #fff; font-weight: 600; }
.lateral .cifra {
  font-size: .72rem; background: rgba(255,255,255,.14); border-radius: 99px;
  padding: 1px 8px;
}
.lateral .pie { margin-top: auto; padding: 10px; font-size: .8rem; color: #7f97ab; }
.lateral .pie b { color: #fff; display: block; font-size: .9rem; }

.contenido { padding: 26px 34px 60px; max-width: 1180px; }
.cabecera { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.cabecera h1 { font-size: 1.5rem; color: var(--navy); letter-spacing: -.01em; }
.cabecera .sub { color: var(--tinta-2); font-size: .95rem; }

/* ── Cartas y tiles ── */
.carta {
  background: var(--carta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px;
}
.fila-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 14px; margin-bottom: 20px; }
.tile { background: var(--carta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; }
.tile .n { font-size: 1.9rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .t { font-size: .82rem; color: var(--tinta-2); margin-top: 2px; }
.tile.alerta { border-left: 4px solid var(--grave); }
.tile.alerta .n { color: var(--grave); }
.tile.morado { border-left: 4px solid var(--morado); }
.tile.morado .n { color: var(--morado); }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .dos-col { grid-template-columns: 1fr; } .marco { grid-template-columns: 1fr; } .lateral { position: static; height: auto; } }
.carta h2 { font-size: 1.02rem; color: var(--navy); margin-bottom: 12px; }
.carta h2 .mini { font-weight: 400; color: var(--tinta-3); font-size: .84rem; }

/* ── Tablas ── */
.tabla-marco { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th { text-align: left; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
tr:hover td { background: #f8fafc; }
td.num { font-variant-numeric: tabular-nums; }
.recorte { max-width: 380px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block; }

/* ── Chips de estado ── */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  padding: 2px 10px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.chip.ok      { color: var(--ok); background: #e8f5ec; }
.chip.alerta  { color: var(--alerta); background: var(--alerta-bg); }
.chip.grave   { color: var(--grave); background: var(--grave-bg); }
.chip.morado  { color: #6b4d96; background: var(--morado-bg); }
.chip.neutro  { color: var(--tinta-2); background: #eef2f6; }
.chip.azul    { color: var(--azul); background: var(--azul-cielo); }

/* ── Formularios ── */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
input[type=text], select {
  font: inherit; padding: 7px 12px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--carta); color: var(--tinta); min-width: 130px;
}
input[type=text]:focus, select:focus { outline: 2px solid var(--azul-claro); border-color: transparent; }
button, .boton {
  font: inherit; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 8px;
  background: var(--azul); color: #fff; cursor: pointer;
}
button:hover, .boton:hover { background: #00518f; text-decoration: none; }
button.suave { background: var(--azul-cielo); color: var(--azul); }
button.suave:hover { background: #d9eaf8; }
.paginas { margin-top: 16px; display: flex; gap: 8px; align-items: center;
  color: var(--tinta-2); font-size: .9rem; }

/* ── Gráficas ── */
.grafica { width: 100%; height: auto; display: block; }
.grafica .grid { stroke: #edf1f5; stroke-width: 1; }
.grafica .tick { font: 400 11px -apple-system, "Segoe UI", sans-serif; fill: var(--tinta-3); }
.grafica .etq  { font: 400 12px -apple-system, "Segoe UI", sans-serif; fill: var(--tinta-2); }
.grafica .valor{ font: 600 12px -apple-system, "Segoe UI", sans-serif; fill: var(--tinta); }
.grafica .barra:hover { filter: brightness(.85); }

/* ── Línea de tiempo (detalle de tutela) ── */
.linea { list-style: none; padding: 0; position: relative; margin-left: 8px; }
.linea::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--borde); }
.linea li { padding: 0 0 18px 30px; position: relative; }
.linea li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px;
  height: 16px; border-radius: 99px; background: var(--carta);
  border: 4px solid var(--azul-claro); }
.linea li.pend::before { border-color: var(--alerta); }
.linea li.grave::before { border-color: var(--grave); }
.linea li.morado::before { border-color: var(--morado); }
.linea .cuando { font-size: .8rem; color: var(--tinta-3); }
.linea .que { font-weight: 600; color: var(--navy); }
.linea .detalle { font-size: .9rem; color: var(--tinta-2); margin-top: 3px; max-width: 72ch; }

/* ── Ficha de datos ── */
.ficha { display: grid; grid-template-columns: 190px 1fr; gap: 7px 16px; font-size: .93rem; }
.ficha dt { color: var(--tinta-3); }
.ficha dd { color: var(--tinta); }

/* ── Selector de usuaria ── */
.equipo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px; max-width: 820px; }
.persona { color: var(--tinta); font-weight: 400;
  text-align: center; padding: 26px 14px; cursor: pointer; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--carta); box-shadow: var(--sombra);
  transition: transform .12s ease; width: 100%; }
.persona:hover { transform: translateY(-2px); background: var(--azul-cielo); }
.persona .avatar { width: 58px; height: 58px; border-radius: 99px; background: var(--azul);
  color: #fff; font-size: 1.4rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 10px; }
.persona .rol { font-size: .8rem; color: var(--tinta-3); }
.portada { min-height: 100vh; display: flex; flex-direction: column; gap: 26px;
  align-items: center; justify-content: center; padding: 40px; }
.portada img { width: 340px; max-width: 90vw; }
.portada h1 { color: var(--navy); font-size: 1.3rem; font-weight: 600; }

.talonario-sig { display: flex; align-items: center; gap: 20px; }
.talonario-sig .numero { font-size: 2.6rem; font-weight: 800; color: var(--azul);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nota-etl { font-size: .85rem; color: var(--tinta-2); background: var(--alerta-bg);
  border: 1px solid #f3e3b3; border-radius: 8px; padding: 10px 14px; margin-top: 14px; }