/* Sistema de diseño: design-system/procesos-judiciales/MASTER.md
   Swiss minimal · azul marino institucional · ámbar solo para atención.
   Todo color sale de un token: el modo oscuro solo redefine los tokens. */
:root {
  --c-primario: #1E3A8A;
  --c-primario-2: #1E40AF;
  --c-primario-suave: #E8EEFB;
  --c-enlace: #1E40AF;
  --c-acento: #B45309;
  --c-acento-suave: #FEF3E2;
  --c-fondo: #F8FAFC;
  --c-tarjeta: #FFFFFF;
  --c-hover: #F3F6FB;
  --c-texto: #0F172A;
  --c-texto-2: #475569;
  --c-texto-3: #94A3B8;
  --c-borde: #CBD5E1;
  --c-linea: #E2E8F0;
  --c-neutro: #EEF2F6;
  --c-neutro-texto: #334155;
  --c-barra: #1E3A8A;
  --c-peligro: #B91C1C; --c-peligro-suave: #FDECEC;
  --c-aviso: #92400E;   --c-aviso-suave: #FEF3C7;
  --c-ok: #166534;      --c-ok-suave: #E3F4E8;
  /* Tipos de actuación (línea de tiempo) */
  --t-sentencia: #7C3AED; --t-audiencia: #0369A1; --t-recurso: #C2410C; --t-auto: #1E40AF;
  --t-memorial: #047857;  --t-notificacion: #A16207; --t-despacho: #475569; --t-conciliacion: #BE185D; --t-otro: #64748B;
  --barra: 60px;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --sombra-alta: 0 10px 30px rgba(15,23,42,.14);
  --f-titulo: "Lexend", system-ui, sans-serif;
  --f-cuerpo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* Modo oscuro: mismos roles, valores para fondo oscuro (contraste ≥ 4.5:1 en texto) */
[data-bs-theme="dark"] {
  --c-primario: #3B6FE0;
  --c-primario-2: #6B95F0;
  --c-primario-suave: rgba(99,140,240,.16);
  --c-enlace: #8DB0F7;
  --c-acento: #F59E0B;
  --c-acento-suave: rgba(245,158,11,.15);
  --c-fondo: #0B1120;
  --c-tarjeta: #121A2B;
  --c-hover: #18223A;
  --c-texto: #E5EAF2;
  --c-texto-2: #9AA8BD;
  --c-texto-3: #64748B;
  --c-borde: #2B3850;
  --c-linea: #1F2A3F;
  --c-neutro: #1E293B;
  --c-neutro-texto: #CBD5E1;
  --c-barra: #0F1A3A;
  --c-peligro: #F87171; --c-peligro-suave: rgba(248,113,113,.14);
  --c-aviso: #FBBF24;   --c-aviso-suave: rgba(251,191,36,.14);
  --c-ok: #4ADE80;      --c-ok-suave: rgba(74,222,128,.13);
  --t-sentencia: #A78BFA; --t-audiencia: #38BDF8; --t-recurso: #FB923C; --t-auto: #8DB0F7;
  --t-memorial: #34D399;  --t-notificacion: #FACC15; --t-despacho: #94A3B8; --t-conciliacion: #F472B6; --t-otro: #94A3B8;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  --sombra-alta: 0 12px 34px rgba(0,0,0,.55);
  color-scheme: dark;
}

:root, [data-bs-theme="dark"] {
  --bs-primary: var(--c-primario);
  --bs-body-font-family: var(--f-cuerpo);
  --bs-body-color: var(--c-texto);
  --bs-body-bg: var(--c-fondo);
  --bs-border-color: var(--c-borde);
  --bs-link-color: var(--c-enlace);
  --bs-tertiary-bg: var(--c-neutro);
}
:root { --bs-primary-rgb: 30,58,138; --bs-link-color-rgb: 30,64,175; }
[data-bs-theme="dark"] { --bs-primary-rgb: 59,111,224; --bs-link-color-rgb: 141,176,247; }

body { font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--c-fondo); color: var(--c-texto);
  transition: background-color .25s, color .25s; }
h1, h2, h3, .titulo, .navbar-brand { font-family: var(--f-titulo); letter-spacing: -.01em; }
a { color: var(--c-enlace); }
.num { font-variant-numeric: tabular-nums; }
.text-2 { color: var(--c-texto-2) !important; }
.pequeno { font-size: .8125rem; }           /* 13px */
.micro { font-size: .75rem; }               /* 12px: mínimo permitido */

/* Botones: alto táctil en celular, foco visible siempre */
.btn { border-radius: 10px; font-weight: 600; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn-primary { --bs-btn-bg: var(--c-primario); --bs-btn-border-color: var(--c-primario);
  --bs-btn-hover-bg: var(--c-primario-2); --bs-btn-hover-border-color: var(--c-primario-2);
  --bs-btn-active-bg: var(--c-primario-2); --bs-btn-active-border-color: var(--c-primario-2);
  --bs-btn-disabled-bg: var(--c-primario); --bs-btn-disabled-border-color: var(--c-primario); }
.btn-outline-primary { --bs-btn-color: var(--c-enlace); --bs-btn-border-color: var(--c-primario);
  --bs-btn-hover-bg: var(--c-primario); --bs-btn-hover-border-color: var(--c-primario); --bs-btn-hover-color: #fff; }
.btn-light { --bs-btn-bg: var(--c-neutro); --bs-btn-border-color: var(--c-neutro); --bs-btn-color: var(--c-texto);
  --bs-btn-hover-bg: var(--c-linea); --bs-btn-hover-border-color: var(--c-linea); --bs-btn-hover-color: var(--c-texto); }
.btn-icono { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
@media (max-width: 991.98px) { .btn { min-height: 44px; } .form-control, .form-select { min-height: 44px; } }
:focus-visible { outline: 3px solid #93B4F5; outline-offset: 2px; }
.form-control, .form-select { background-color: var(--c-tarjeta); border-color: var(--c-borde); color: var(--c-texto); }
.form-control:focus, .form-select:focus { border-color: var(--c-primario-2); box-shadow: 0 0 0 3px var(--c-primario-suave);
  background-color: var(--c-tarjeta); color: var(--c-texto); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
.btn.cargando { pointer-events: none; opacity: .85; }

.tarjeta { background: var(--c-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); transition: background-color .25s; }
.tarjeta-titulo { font-family: var(--f-titulo); font-size: 1rem; font-weight: 600; margin: 0; }

/* Barra superior */
.barra-app { background: var(--c-barra); height: var(--barra); color: #fff; }
.barra-app .navbar-brand { color: #fff; font-weight: 600; font-size: 1.05rem; }
.barra-app .marca-icono { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center; }
.barra-app .nav-link { color: rgba(255,255,255,.82); font-weight: 600; padding: .5rem .85rem !important; border-radius: 8px; }
.barra-app .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.barra-app .nav-link.active { color: #fff; background: rgba(255,255,255,.16); }
.btn-tema { width: 40px; height: 40px; border-radius: 50%; border: 0; color: #fff; background: rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: background-color .15s, transform .3s; }
.btn-tema:hover { background: rgba(255,255,255,.2); }
.btn-tema:active { transform: rotate(30deg); }
.avatar { width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-family: var(--f-titulo);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.barra-app .avatar { background: #fff; color: #1E3A8A; }

/* Navegación inferior en celular (≤ 5 destinos) */
.nav-inferior { position: fixed; inset: auto 0 0 0; height: calc(64px + env(safe-area-inset-bottom)); background: var(--c-tarjeta);
  border-top: 1px solid var(--c-linea); display: flex; z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
.nav-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .75rem; font-weight: 600; color: var(--c-texto-2); text-decoration: none; }
.nav-inferior a i { font-size: 1.3rem; }
.nav-inferior a.active { color: var(--c-enlace); }
.nav-inferior a.active i { background: var(--c-primario-suave); border-radius: 14px; padding: 2px 18px; }
@media (max-width: 767.98px) { body.con-sesion { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* Etiquetas (riesgo, estado, alertas): siempre texto + ícono, nunca solo color */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap; border: 0; }
.chip i { font-size: .8rem; }
.riesgo-PROBABLE { background: var(--c-peligro-suave); color: var(--c-peligro); }
.riesgo-POSIBLE  { background: var(--c-aviso-suave); color: var(--c-aviso); }
.riesgo-REMOTO   { background: var(--c-ok-suave); color: var(--c-ok); }
.riesgo-SIN      { background: var(--c-neutro); color: var(--c-texto-2); }
.chip-estado     { background: var(--c-primario-suave); color: var(--c-enlace); }
.chip-terminado  { background: var(--c-neutro); color: var(--c-neutro-texto); }
.chip-alerta     { background: var(--c-acento-suave); color: var(--c-acento); }
.chip-neutro     { background: var(--c-neutro); color: var(--c-neutro-texto); }

/* Maestro / detalle */
.panel-lista { background: var(--c-tarjeta); border-right: 1px solid var(--c-linea); }
.buscador { background: var(--c-tarjeta); border-bottom: 1px solid var(--c-linea); }
.buscador .input-group-text, .buscador .form-control { background: var(--c-fondo); border-color: var(--c-linea); color: var(--c-texto); }
.lista-item { display: block; padding: 14px 16px; min-height: 72px; border-bottom: 1px solid var(--c-linea);
  color: inherit; text-decoration: none; position: relative; transition: background-color .15s; }
.lista-item:hover { background: var(--c-hover); color: inherit; }
.lista-item.activo { background: var(--c-primario-suave); }
.lista-item.activo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primario); }
.lista-item .rad { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--c-texto); }
.lista-item .partes { font-size: .875rem; color: var(--c-neutro-texto); }
.lista-item .meta { font-size: .8125rem; color: var(--c-texto-2); }
@media (min-width: 992px) {
  .col-scroll { height: calc(100vh - var(--barra)); overflow-y: auto; overscroll-behavior: contain; }
}

/* Ficha */
.ficha-barra { position: sticky; top: 0; z-index: 4; background: var(--c-fondo); border-color: var(--c-linea) !important; }
@media (max-width: 991.98px) { .ficha-barra { top: var(--barra); } }
.radicado-principal { font-family: var(--f-titulo); font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.radicado-principal .nw { white-space: nowrap; }

/* Texto largo plegado (observaciones heredadas de AppSheet) */
details.plegable > summary { list-style: none; cursor: pointer; }
details.plegable > summary::-webkit-details-marker { display: none; }
.enlace-plegable { color: var(--c-enlace); font-weight: 600; white-space: nowrap; margin-left: 4px; }
details.plegable .ocultar, details.plegable[open] .resumen, details.plegable[open] .ver { display: none; }
details.plegable[open] .ocultar { display: inline; }
details.plegable .completo { white-space: pre-line; }
.dato .etq { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-texto-2); }
.dato .val { font-size: .95rem; }
.partes-bloque { border-left: 3px solid var(--c-linea); padding-left: 12px; }

/* ---------- Línea de tiempo con tipos de actuación ---------- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl-anio { font-family: var(--f-titulo); font-size: .8125rem; font-weight: 600; color: var(--c-texto-2);
  padding: 6px 0 10px; letter-spacing: .04em; }
.tl-item { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; position: relative; padding-bottom: 18px; }
.tl-item::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--c-linea); }
.tl-item:last-child::before { display: none; }
.tl-icono { --t: var(--t-otro); width: 30px; height: 30px; border-radius: 50%; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
  color: var(--t); background: var(--c-tarjeta); box-shadow: inset 0 0 0 2px var(--t); }
.tl-item.futura .tl-icono { --t: var(--c-acento); background: var(--c-acento-suave); }
.tl-tipo { --t: var(--t-otro); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t); }
.tl-fecha { font-size: .8125rem; font-weight: 700; color: var(--c-enlace); font-variant-numeric: tabular-nums; }
.tl-item.futura .tl-fecha { color: var(--c-acento); }
.tl-item.sin-fecha .tl-fecha { color: var(--c-texto-2); }
.tl-texto { font-size: .95rem; line-height: 1.5; }
@media (min-width: 768px) {
  .tl-item { grid-template-columns: 96px 30px 1fr; }
  .tl-item::before { left: 122px; }
  .tl-fecha { grid-column: 1; text-align: right; padding-top: 5px; }
  .tl-icono { grid-column: 2; grid-row: 1; }
  .tl-cuerpo { grid-column: 3; }
  .tl-cuerpo .tl-fecha { display: none; }
}
@media (max-width: 767.98px) { .tl-item > .tl-fecha { display: none; } }
.tl-editar { opacity: 0; transition: opacity .15s; }
.tl-item:hover .tl-editar, .tl-item:focus-within .tl-editar { opacity: 1; }
@media (hover: none) { .tl-editar { opacity: 1; } }
[data-tipo="sentencia"]    { --t: var(--t-sentencia); }
[data-tipo="audiencia"]    { --t: var(--t-audiencia); }
[data-tipo="recurso"]      { --t: var(--t-recurso); }
[data-tipo="auto"]         { --t: var(--t-auto); }
[data-tipo="memorial"]     { --t: var(--t-memorial); }
[data-tipo="notificacion"] { --t: var(--t-notificacion); }
[data-tipo="despacho"]     { --t: var(--t-despacho); }
[data-tipo="conciliacion"] { --t: var(--t-conciliacion); }

/* Filtros por tipo: fila desplazable en celular */
.tl-filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: thin; }
.tl-filtro { --t: var(--c-texto-2); flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-linea); background: var(--c-tarjeta);
  color: var(--c-texto); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.tl-filtro i { color: var(--t); }
.tl-filtro .n { color: var(--c-texto-2); font-weight: 600; }
.tl-filtro:hover { background: var(--c-hover); }
.tl-filtro[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 12%, var(--c-tarjeta)); }
.tl-filtro[data-tipo="todas"] { --t: var(--c-enlace); }
.tl-oculto { display: none !important; }

/* Marcador de HOY entre lo próximo y lo ya ocurrido */
.tl-hoy { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; color: var(--c-acento);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.tl-hoy::before, .tl-hoy::after { content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--c-acento) 0 6px, transparent 6px 11px); }

/* Esqueleto de carga */
@keyframes brillo { from { background-position: -320px 0; } to { background-position: 320px 0; } }
.esq { border-radius: 8px; background: linear-gradient(90deg, var(--c-neutro) 0, var(--c-hover) 60px, var(--c-neutro) 120px);
  background-size: 640px 100%; animation: brillo 1.1s linear infinite; }

/* Panel */
.kpi { display: flex; gap: 14px; align-items: center; padding: 18px; height: 100%; color: inherit; text-decoration: none;
  transition: box-shadow .15s, transform .15s; }
a.kpi:hover { box-shadow: var(--sombra-alta); color: inherit; transform: translateY(-2px); }
.kpi-icono { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.kpi-valor { font-family: var(--f-titulo); font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-etq { font-size: .8125rem; color: var(--c-texto-2); }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
@media (min-width: 992px) { .d-flex.flex-column > .barras { height: auto; flex: 1 1 auto; min-height: 160px; } }
.pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--c-linea); padding-top: 14px; margin-top: 16px; }
.barras .b { flex: 1; background: var(--c-primario); border-radius: 4px 4px 0 0; min-height: 3px; }
.barras .b.cero { background: var(--c-linea); }
.barras .b.actual { background: var(--c-primario-2); box-shadow: 0 0 0 2px var(--c-primario-suave); }
.medidor { height: 8px; background: var(--c-neutro); border-radius: 999px; overflow: hidden; }
.medidor > span { display: block; height: 100%; border-radius: 999px; }
.medidor .m-PROBABLE { background: var(--c-peligro); } .medidor .m-POSIBLE { background: #D97706; }
.medidor .m-REMOTO { background: #16A34A; } .medidor .m-SIN { background: var(--c-texto-3); } .medidor .m-azul { background: var(--c-primario); }
.fila-enlace { display: block; color: inherit; text-decoration: none; border-radius: 10px; padding: 8px 10px; margin: 0 -10px; transition: background-color .15s; }
.fila-enlace:hover { background: var(--c-hover); color: inherit; }
@media (max-width: 575.98px) {
  .kpi { padding: 14px; gap: 10px; }
  .kpi-icono { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 10px; }
  .kpi-valor { font-size: 1.5rem; }
}

/* Avisos flotantes (toasts) */
.zona-avisos { position: fixed; z-index: 1090; top: calc(var(--barra) + 12px); right: 16px; display: flex; flex-direction: column;
  gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 767.98px) { .zona-avisos { right: 50%; transform: translateX(50%); } }
.aviso { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--c-tarjeta); color: var(--c-texto); box-shadow: var(--sombra-alta); border-left: 4px solid var(--c-ok);
  position: relative; overflow: hidden; animation: aviso-entra .35s cubic-bezier(.2,.8,.2,1) both; }
.aviso.error { border-left-color: var(--c-peligro); }
.aviso .ico { font-size: 1.15rem; color: var(--c-ok); line-height: 1.2; }
.aviso.error .ico { color: var(--c-peligro); }
.aviso .cerrar { margin-left: auto; border: 0; background: none; color: var(--c-texto-2); width: 32px; height: 32px; flex: none; border-radius: 8px; }
.aviso .cerrar:hover { background: var(--c-hover); }
.aviso .progreso { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .25;
  transform-origin: left; animation: aviso-tiempo var(--dur, 4s) linear both; }
.aviso.saliendo { animation: aviso-sale .25s ease-in both; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale  { to { opacity: 0; transform: translateX(24px); } }
@keyframes aviso-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.alerta-clave { font-family: ui-monospace, Consolas, monospace; }
.vacio { color: var(--c-texto-2); text-align: center; padding: 48px 24px; }
.vacio i { font-size: 2.6rem; color: var(--c-texto-3); }
.dropdown-menu { --bs-dropdown-bg: var(--c-tarjeta); --bs-dropdown-link-color: var(--c-texto); --bs-dropdown-link-hover-bg: var(--c-hover);
  --bs-dropdown-border-color: var(--c-linea); }
details summary { color: var(--c-texto-2); }

/* ---------- Movimiento (nivel medio) ----------
   Solo con JS (html.js) para que sin JS todo se vea igual. Se anima transform/opacity. */
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes crecer-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes crecer-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes deslizar { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

html.js .anim { opacity: 0; animation: entrar .45s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
html.js .medidor > span { transform-origin: left; animation: crecer-x .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.25s + var(--i, 0) * 80ms); }
html.js .barras .b { transform-origin: bottom; animation: crecer-y .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.3s + var(--i, 0) * 45ms); }
html.js .lista-item.anim { animation-duration: .35s; animation-delay: calc(var(--i, 0) * 35ms); }

html.js .tl-item.revelar { opacity: 0; transform: translateY(10px); transition: opacity .4s ease-out, transform .4s ease-out; }
html.js .tl-item.revelar.visible { opacity: 1; transform: none; }
html.js .tl-item.revelar.visible .tl-icono { animation: latido .5s ease-out; }
@keyframes latido { 0% { transform: scale(.5); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

@media (max-width: 991.98px) { html.js .ficha-entrada { animation: deslizar .35s cubic-bezier(.2,.7,.2,1) both; } }
@media (min-width: 992px)    { html.js .ficha-entrada { animation: aparecer .3s ease-out both; } }

.lista-item:active, .fila-enlace:active { transform: scale(.995); }
.btn:active { transform: translateY(1px); }

/* ---------- Transiciones entre pantallas (View Transitions) ----------
   Entre páginas completas (Chrome/Edge) y al cambiar de proceso sin recargar. */
@view-transition { navigation: auto; }
.barra-app { view-transition-name: barra; }
.nav-inferior { view-transition-name: nav-inferior; }
::view-transition-old(root) { animation: .18s ease-in both vt-salir; }
::view-transition-new(root) { animation: .28s cubic-bezier(.2,.7,.2,1) both vt-entrar; }
@keyframes vt-salir  { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(8px); } }
::view-transition-group(radicado) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-group(ficha) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html.js .anim, html.js .tl-item.revelar { opacity: 1 !important; transform: none !important; }
  @view-transition { navigation: none; }
}
.aviso .progreso { color: var(--c-ok); }
.aviso.error .progreso { color: var(--c-peligro); }
.radicado-principal:focus { outline: none; }
/* La fila de filtros se puede deslizar: desvanecido en el borde derecho como pista */
.tl-filtros { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 36px; }
/* Antigüedad de la última actuación: el color acompaña al texto ("hace 5 meses"), no lo reemplaza */
.edad { display: inline-flex; align-items: center; }
.edad.atraso { color: var(--c-acento); font-weight: 600; }
.edad.atraso-alto { color: var(--c-peligro); font-weight: 600; }

/* Al pasar el mouse, cada proceso de la lista se levanta un poco (solo con mouse; en táctil no aplica) */
@media (hover: hover) and (pointer: fine) {
  .lista-item { transition: background-color .15s, transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s; }
  .lista-item:hover { transform: translate(4px, -2px); box-shadow: var(--sombra-alta); z-index: 2;
    border-radius: 10px; border-bottom-color: transparent; background: var(--c-tarjeta); }
  .lista-item.activo:hover { background: var(--c-primario-suave); }
}
/* Actuaciones: se ven en mayúsculas mientras se escriben (y el servidor las guarda así) */
.mayusculas { text-transform: uppercase; }
.mayusculas::placeholder { text-transform: none; }
.filtro-admin { background: var(--c-acento-suave); border: 1px dashed color-mix(in srgb, var(--c-acento) 45%, transparent); }
.aviso-pendientes { background: var(--c-acento-suave); border-left: 4px solid var(--c-acento); border-radius: var(--radio); }
.aviso-pendientes li { margin-bottom: 2px; }
.campo-pendiente .form-label { color: var(--c-acento); }
.campo-pendiente .form-control, .campo-pendiente .form-select { border-color: var(--c-acento); box-shadow: 0 0 0 3px var(--c-acento-suave); }
.campo-pendiente .nota-pendiente { color: var(--c-acento); font-size: .8125rem; font-weight: 600; margin-top: 4px; }
.campo-pendiente { display: flex; flex-direction: column; }

/* ---------- Coloreado de tarjetas según el riesgo (se enciende o apaga con el botón de paleta) ----------
   Tonos pastel: el color del criterio mezclado al 13-16 % con el fondo de la tarjeta (funciona igual en modo oscuro),
   más una franja izquierda del color pleno. El texto conserva su contraste. */
:root { --p-rojo: #EF4444; --p-ambar: #F59E0B; --p-verde: #22C55E; --p-azul: #3B82F6; --p-gris: #94A3B8; --p-violeta: #8B5CF6; }
[data-color] .lista-item[data-tinte] { background: color-mix(in srgb, var(--tinte) 14%, var(--c-tarjeta));
  box-shadow: inset 4px 0 0 var(--tinte); }
[data-color] .lista-item[data-tinte]:hover { background: color-mix(in srgb, var(--tinte) 20%, var(--c-tarjeta)); }
[data-color] .lista-item.activo[data-tinte] { background: color-mix(in srgb, var(--tinte) 24%, var(--c-tarjeta));
  box-shadow: inset 6px 0 0 var(--tinte); }
[data-color] .lista-item.activo::before { display: none; }
[data-bs-theme="dark"][data-color] .lista-item[data-tinte] { background: color-mix(in srgb, var(--tinte) 16%, var(--c-tarjeta)); }
#btn-colorear[aria-pressed="true"] { background: var(--c-primario-suave); color: var(--c-enlace); }
  box-shadow: inset 3px 0 0 var(--m); }

/* ---------- Formulario de proceso ---------- */
.seccion-num { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primario-suave); color: var(--c-enlace); font-size: 1.15rem; }
.tarjeta:focus-within .seccion-num { background: var(--c-primario); color: #fff; transition: background-color .2s; }
.lateral-form { position: sticky; top: calc(var(--barra) + 16px); }
.vista-previa { border: 1px solid var(--c-linea); border-radius: 10px; padding: 12px 14px; background: var(--c-tarjeta); }
.vista-previa .rad { font-weight: 700; font-variant-numeric: tabular-nums; }
.vista-previa .partes { font-size: .875rem; color: var(--c-neutro-texto); }
.vista-previa .meta { font-size: .8125rem; color: var(--c-texto-2); }

/* Riesgo como tarjetas seleccionables */
.opciones-riesgo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 767.98px) { .opciones-riesgo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opcion-riesgo { --r: var(--p-gris); display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--c-linea); background: var(--c-tarjeta); min-height: 92px; transition: border-color .15s, background-color .15s, transform .15s; }
.opcion-riesgo i { font-size: 1.25rem; color: var(--r); }
.opcion-riesgo small { color: var(--c-texto-2); font-size: .75rem; line-height: 1.3; }
.opcion-riesgo:hover { border-color: var(--r); transform: translateY(-1px); }
.opcion-riesgo[data-r="PROBABLE"] { --r: var(--p-rojo); } .opcion-riesgo[data-r="POSIBLE"] { --r: var(--p-ambar); }
.opcion-riesgo[data-r="REMOTO"] { --r: var(--p-verde); }
.btn-check:checked + .opcion-riesgo { border-color: var(--r); background: color-mix(in srgb, var(--r) 14%, var(--c-tarjeta));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--r) 22%, transparent); }
.btn-check:focus-visible + .opcion-riesgo, .btn-check:focus-visible + .pastilla { outline: 3px solid #93B4F5; outline-offset: 2px; }

/* Instancia como pastillas */
.opciones-pastilla { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--c-linea); background: var(--c-tarjeta); font-weight: 600; font-size: .875rem; transition: all .15s; }
.pastilla:hover { border-color: var(--c-primario-2); }
.btn-check:checked + .pastilla { background: var(--c-primario); border-color: var(--c-primario); color: #fff; }

/* Barra de guardar fija */
.barra-guardar { position: sticky; bottom: 0; z-index: 20; margin: 16px -16px 0; padding: 12px 16px;
  background: color-mix(in srgb, var(--c-fondo) 85%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--c-linea); }
@media (max-width: 767.98px) { .barra-guardar { bottom: calc(64px + env(safe-area-inset-bottom)); } }
#estado-form.cambios { color: var(--c-acento); font-weight: 600; }
.seccion-num { background: color-mix(in srgb, var(--c-primario) 14%, var(--c-tarjeta)); }
@media (min-width: 992px) { #btn-colorear { width: 34px; height: 31px; } }

/* ---------- Regla fija de colores del cliente: color por ESTADO (💗 💛 🧡 💚 💜 ◻) ---------- */
/* Tonos de la regla del cliente, con pasos validados (scripts de la guía dataviz): mismo tono, luminosidad ajustada
   para que se distingan con daltonismo. Orden de pila en gráficos: abogado › despacho › alegatos › terminado › apelación. */
:root { --e-rojo: #E11D48; --e-amarillo: #CA8A04; --e-naranja: #F97316; --e-verde: #15803D; --e-morado: #7C3AED; --e-gris: #94A3B8; }
[data-bs-theme="dark"] { --e-amarillo: #B58105; --e-naranja: #EA580C; --e-morado: #8B5CF6; }
[data-ec="rojo"] { --e: var(--e-rojo); }   [data-ec="amarillo"] { --e: var(--e-amarillo); }
[data-ec="naranja"] { --e: var(--e-naranja); } [data-ec="verde"] { --e: var(--e-verde); }
[data-ec="morado"] { --e: var(--e-morado); } [data-ec="gris"] { --e: var(--e-gris); }
[data-color="estado"] .lista-item[data-ec] { --tinte: var(--e); }
[data-color="estado"] .lista-item[data-ec="gris"] { --tinte: #CBD5E1; }
.chip-e { background: color-mix(in srgb, var(--e) 16%, var(--c-tarjeta)); color: color-mix(in srgb, var(--e) 62%, var(--c-texto)); }
.chip-e i { color: var(--e); }
/* Estado en el formulario: tarjetas con corazón */
.opciones-estado { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.opcion-estado { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--c-linea); background: var(--c-tarjeta); transition: border-color .15s, background-color .15s, transform .15s; }

.opcion-estado small { color: var(--c-texto-2); font-size: .75rem; line-height: 1.3; }
.opcion-estado:hover { border-color: var(--e); transform: translateY(-1px); }
.btn-check:checked + .opcion-estado { border-color: var(--e); background: color-mix(in srgb, var(--e) 14%, var(--c-tarjeta));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e) 22%, transparent); }
.btn-check:focus-visible + .opcion-estado { outline: 3px solid #93B4F5; outline-offset: 2px; }
.vista-previa[data-ec] { background: color-mix(in srgb, var(--e) 12%, var(--c-tarjeta)); box-shadow: inset 4px 0 0 var(--e); }
.vista-previa[data-ec="gris"] { background: var(--c-tarjeta); box-shadow: none; }

/* ---------- Orbe de estado: círculo de color + ícono, con animación según el estado ---------- */
.orbe { --tam: 24px; width: var(--tam); height: var(--tam); flex: none; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: calc(var(--tam) * .5); color: #fff; background: var(--e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e) 22%, transparent); }
.orbe[data-ec="gris"] { background: var(--c-neutro); color: var(--c-texto-3); box-shadow: inset 0 0 0 1.5px var(--c-borde); }
.orbe[data-ec="amarillo"] { color: #422006; }
.orbe-g { --tam: 40px; }
.min-w-0 { min-width: 0; }
/* Requiere acción del abogado: late continuamente (con onda que se expande) */
.orbe[data-anim="siempre"] { position: relative; animation: orbe-latido 1.6s ease-in-out infinite; }
.orbe[data-anim="siempre"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--e);
  animation: orbe-onda 1.6s ease-out infinite; }
@keyframes orbe-latido { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } 30% { transform: scale(.98); } }
@keyframes orbe-onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
/* Los demás se animan al pasar el mouse por la tarjeta, la opción o el propio orbe */
:is(.lista-item, .opcion-estado, .fila-enlace, .tarjeta):hover .orbe[data-ec="amarillo"][data-anim="hover"] i { animation: orbe-reloj 1.2s ease-in-out; }
:is(.lista-item, .opcion-estado, .fila-enlace, .tarjeta):hover .orbe[data-ec="naranja"][data-anim="hover"] i { animation: orbe-subir .8s ease-in-out 2; }
:is(.lista-item, .opcion-estado, .fila-enlace, .tarjeta):hover .orbe[data-ec="verde"][data-anim="hover"] { animation: orbe-brillo 1.4s ease-in-out; }
@keyframes orbe-reloj { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
@keyframes orbe-subir { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes orbe-brillo { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--e) 30%, transparent); } }
.opcion-estado .orbe { margin-top: 1px; }
.chip-e i { font-size: .8rem; }

/* ================= Utilidades compartidas ================= */
.letra-esp { letter-spacing: .08em; }
.text-primario { color: var(--c-primario); }
.text-aviso { color: var(--c-aviso); }

/* ================= Ingreso: marca + formulario ================= */
.pagina-ingreso .barra-app { display: none; }
.ingreso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--c-fondo); }
.ingreso-marca {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #2B4FB5 0%, #1E3A8A 45%, #142a66 100%);
  padding: calc(28px + env(safe-area-inset-top)) 24px 28px;
}
.ingreso-marca::after {   /* columnas tenues del ícono como textura de fondo */
  content: ""; position: absolute; inset: auto -40px -60px auto; width: 300px; height: 300px; opacity: .08;
  background: url("iconos/icono.svg") center / contain no-repeat; pointer-events: none;
}
.ingreso-marca-contenido { position: relative; z-index: 1; max-width: 440px; }
.ingreso-logo {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-size: 1.5rem; margin-bottom: 14px;
}
.ingreso-titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 1.6rem; margin: 0 0 4px; color: #fff; }
.ingreso-lema { margin: 0; opacity: .85; }
.ingreso-puntos { margin: 36px 0 0; display: grid; gap: 18px; }
.ingreso-puntos li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.45; opacity: .92; }
.ingreso-puntos i {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); font-size: 1.05rem;
}
.ingreso-formulario { display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px 40px; }
.ingreso-caja { width: 100%; max-width: 420px; }
@media (min-width: 768px) {
  .ingreso { grid-template-columns: minmax(360px, 46%) 1fr; }
  .ingreso-marca { display: flex; align-items: center; padding: 56px clamp(32px, 5vw, 72px); }
  .ingreso-marca::after { width: 460px; height: 460px; inset: auto -90px -110px auto; }
  .ingreso-titulo { font-size: 2.2rem; }
  .ingreso-lema { font-size: 1.1rem; }
  .ingreso-formulario { align-items: center; padding: 48px; }
  .ingreso-caja { background: var(--c-tarjeta); border: 1px solid var(--c-linea); border-radius: 18px; padding: 40px; box-shadow: var(--sombra-alta); }
}

/* ================= Empresa: chip en la barra y tarjetas de selección ================= */
.chip-empresa {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 260px; min-height: 36px;
  padding: 4px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); transition: background .15s;
}
.chip-empresa:hover, .chip-empresa:focus-visible { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 575.98px) { .chip-empresa { max-width: 52vw; } }

.empresa-tarjeta {
  display: flex; flex-direction: column; border: 1px solid var(--c-linea); color: inherit; cursor: pointer; font: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.empresa-tarjeta:hover, .empresa-tarjeta:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--c-primario); }
.empresa-tarjeta.actual { border-color: var(--c-primario); box-shadow: 0 0 0 3px var(--c-primario-suave); }
.empresa-sello {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, #2748A8, #162C6B);
}
.empresa-cifras .num { white-space: nowrap; font-size: clamp(1rem, 2.4vw, 1.2rem); }
.empresa-cifras { border-top: 1px solid var(--c-linea); padding-top: 14px; margin-top: auto; }
.empresa-entrar {
  display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--c-enlace);
  background: var(--c-primario-suave); border-radius: 10px; padding: 10px 14px;
}
.empresa-tarjeta:hover .empresa-entrar i { transform: translateX(4px); }
.empresa-entrar i { transition: transform .18s ease; }

/* ================= Instalar ================= */
.qr { width: 100%; max-width: 220px; background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--c-linea); }
.qr svg { width: 100%; height: auto; display: block; }
.pasos-instalar { padding-left: 1.2rem; display: grid; gap: 8px; }
.app-instalada-aviso { display: none; }
.app-instalada .app-instalada-aviso { display: block; }
@media (prefers-reduced-motion: reduce) {
  .empresa-tarjeta, .empresa-entrar i { transition: none; }
  .empresa-tarjeta:hover { transform: none; }
}

/* Lista en dos columnas en pantallas anchas (últimas actuaciones del panel) */
@media (min-width: 992px) {
  .lista-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}