/* =====================================================================
   COOPORTUNIDAD · Sistema de diseño "Ruta del crédito"
   Azul cooperativa + naranja impulso (la flecha del isotipo).
   Profundidad: el menú es la capa más profunda (azul noche), el contenido
   flota encima y los indicadores son piezas en relieve que responden al cursor.
   ===================================================================== */
/* Fuentes alojadas en el propio servidor (licencia SIL OFL) */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-variable.woff2") format("woff2-variations"), url("../fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-latin-900-normal.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }

:root {
  --azul: #0B4F6C;
  --azul-2: #0E6489;
  --azul-noche: #062A3A;
  --azul-claro: #E3EEF3;
  --azul-oscuro: #083B51;
  --naranja: #F2A007;
  --naranja-2: #D98C00;
  --naranja-claro: #FFF4DC;
  --fondo: #EEF3F6;
  --superficie: #FFFFFF;
  --superficie-2: #F6F9FB;
  --borde: #D7E1E7;
  --borde-fuerte: #B9C9D3;
  --texto: #13232C;
  --texto-2: #4A5D68;
  --texto-3: #7A8C96;
  --exito: #1F8A5B; --exito-claro: #E2F4EA;
  --rojo: #C63C32; --rojo-claro: #FBE7E5;
  --amarillo: #A86F00; --amarillo-claro: #FFF1D0;
  --info: #1E5FA8; --info-claro: #E3EDFA;
  --gris-claro: #E9EEF1;
  --radio: 14px; --radio-sm: 10px;
  --sombra-1: 0 1px 2px rgba(6,42,58,.06), 0 2px 6px rgba(6,42,58,.05);
  --sombra-2: 0 1px 1px rgba(6,42,58,.04), 0 6px 14px rgba(6,42,58,.08), 0 18px 32px -18px rgba(6,42,58,.30);
  --sombra-3: 0 2px 2px rgba(6,42,58,.05), 0 14px 28px rgba(6,42,58,.12), 0 30px 60px -30px rgba(6,42,58,.45);
  --relieve: inset 0 1px 0 rgba(255,255,255,.75);
  --fuente: "Lato", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: "Archivo", "Lato", "Segoe UI", sans-serif;
  --menu-ancho: 252px;
  --barra-alto: 64px;
  color-scheme: light;
  /* compatibilidad con estilos anteriores */
  --gris-borde: var(--borde); --gris-texto: var(--texto-2); --blanco: var(--superficie); --gris-fondo: var(--fondo);
}
[data-tema="oscuro"] {
  --azul: #4FA9D3; --azul-2: #6BBBE0; --azul-claro: #12303F; --azul-oscuro: #2B7FA6;
  --naranja: #F5B12E; --naranja-2: #F2A007; --naranja-claro: #2E2512;
  --fondo: #0A1A23; --superficie: #102530; --superficie-2: #0D202A; --borde: #1F3B4A; --borde-fuerte: #2C5163;
  --texto: #E4EEF3; --texto-2: #A9BFCA; --texto-3: #7F98A5;
  --exito: #4CC38A; --exito-claro: #12322A; --rojo: #F07267; --rojo-claro: #3A1C1B;
  --amarillo: #F3C057; --amarillo-claro: #33280F; --info: #7DB3F0; --info-claro: #13283F; --gris-claro: #1A3341;
  --sombra-1: 0 1px 2px rgba(0,0,0,.35); --sombra-2: 0 6px 18px rgba(0,0,0,.35); --sombra-3: 0 18px 40px rgba(0,0,0,.5);
  --relieve: inset 0 1px 0 rgba(255,255,255,.05);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente); font-size: 14.5px; line-height: 1.5; color: var(--texto);
  background: var(--fondo); min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-stretch: 112%; color: var(--texto); margin: 0 0 12px; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
small, .muted { color: var(--texto-2); }
code { font-size: 12px; background: var(--gris-claro); padding: 1px 5px; border-radius: 5px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--naranja) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
.ico { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.ico-sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------------
   Barra superior (vidrio)
   --------------------------------------------------------------------- */
.barra-superior {
  position: sticky; top: 0; z-index: 60; height: var(--barra-alto);
  display: flex; align-items: center; gap: 12px; padding: 0 18px 0 12px;
  background: color-mix(in srgb, var(--superficie) 80%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.barra-superior::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: var(--naranja); }
.barra-superior .marca { display: flex; align-items: center; text-decoration: none; padding: 4px 6px; border-radius: 10px; }
.barra-superior .marca img { height: 40px; width: auto; display: block; }
[data-tema="oscuro"] .barra-superior .marca img { filter: brightness(1.7) saturate(.9); }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.boton-icono {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--texto-2); cursor: pointer; position: relative; text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.boton-icono:hover { background: var(--azul-claro); color: var(--azul); text-decoration: none; }
.boton-icono:active { transform: translateY(1px); }
.btn-menu { display: none; }
.icono-notif .contador {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--naranja); color: #13232C; font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--superficie);
}
.buscador-disparo {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; min-width: 300px; margin-left: 8px;
  border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-3);
  font: inherit; cursor: pointer; box-shadow: var(--relieve); transition: border-color .15s, box-shadow .15s;
}
.buscador-disparo:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }
kbd { font-family: var(--fuente); font-size: 11px; font-weight: 700; color: var(--texto-2); background: var(--superficie); border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.buscador-disparo kbd { margin-left: auto; }
.usuario-chip { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; font: inherit; color: var(--texto); position: relative; }
.usuario-chip:hover { box-shadow: var(--sombra-1); }
.avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(145deg, #0E6489, #062A3A); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.usuario-nombre { display: flex; flex-direction: column; line-height: 1.15; text-align: left; font-size: 13px; font-weight: 700; }
.usuario-nombre small { font-weight: 400; font-size: 11.5px; color: var(--texto-3); }
.menu-usuario { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-3); padding: 6px; display: none; z-index: 80; text-align: left; }
.menu-usuario.abierto { display: block; animation: aparecer .16s ease-out; }
.menu-usuario a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--texto); font-weight: 600; }
.menu-usuario a:hover { background: var(--azul-claro); text-decoration: none; }

/* ---------------------------------------------------------------------
   Menú lateral (capa profunda)
   --------------------------------------------------------------------- */
.contenedor-app { display: flex; flex: 1; align-items: stretch; }
.menu-lateral {
  width: var(--menu-ancho); flex-shrink: 0; position: sticky; top: var(--barra-alto); height: calc(100vh - var(--barra-alto));
  overflow-y: auto; padding: 14px 12px 24px; color: #CFE3EC;
  background: radial-gradient(120% 60% at 0% 0%, #0E4A64 0%, transparent 60%), linear-gradient(180deg, #073246 0%, #062A3A 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04), 6px 0 24px -12px rgba(6,42,58,.5);
  transition: width .2s ease;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-grupo { margin: 16px 10px 6px; font-size: 12px; font-weight: 700; color: #7FA9BC; white-space: nowrap; overflow: hidden; }
.menu-grupo:first-child { margin-top: 2px; }
.menu-lateral a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0; border-radius: 12px; color: #CFE3EC;
  font-weight: 600; font-size: 14px; white-space: nowrap; position: relative; transition: background .15s, color .15s;
}
.menu-lateral a .ico { opacity: .85; }
.menu-lateral a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.menu-lateral a.activo {
  color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(0,0,0,.6);
}
.menu-lateral a.activo::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #F2A007; box-shadow: 0 0 12px #F2A007; }
.menu-lateral a.activo .ico { opacity: 1; color: #F2A007; }
.menu-lateral .menu-pie { margin-top: 18px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 12.5px; color: #A9C7D4; }
.menu-lateral .menu-pie .btn { margin-top: 10px; width: 100%; }
body.menu-colapsado { --menu-ancho: 78px; }
body.menu-colapsado .menu-lateral a span, body.menu-colapsado .menu-grupo, body.menu-colapsado .menu-pie { display: none; }
body.menu-colapsado .menu-lateral a { justify-content: center; padding: 11px; }

/* ---------------------------------------------------------------------
   Contenido
   --------------------------------------------------------------------- */
.contenido { flex: 1; min-width: 0; padding: 26px 30px 40px; max-width: 1440px; }
.contenido-publico { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.encabezado-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
h1.titulo-pagina { margin: 0; font-size: 28px; }
.pie { text-align: center; padding: 16px; font-size: 12.5px; color: var(--texto-3); }

/* Explicación de la pantalla */
.ayuda-pagina {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 14px 16px; margin-bottom: 20px; border-radius: var(--radio); border: 1px solid color-mix(in srgb, var(--naranja) 35%, var(--borde));
  background: linear-gradient(100deg, var(--naranja-claro), var(--superficie) 70%);
}
.ico-burbuja { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #13232C; flex-shrink: 0;
  background: linear-gradient(160deg, #FFC94D, #F2A007); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 6px 14px -6px rgba(242,160,7,.8); }
.ayuda-pagina h2 { font-size: 15px; margin: 2px 0 4px; }
.ayuda-pagina p { margin: 0; color: var(--texto-2); max-width: 80ch; }
.ayuda-pagina ol { margin: 8px 0 0; padding-left: 20px; color: var(--texto-2); max-width: 80ch; }
.ayuda-pagina ol li { margin: 3px 0; }
.ayuda-pagina .ayuda-extra { display: none; }
.ayuda-pagina.expandida .ayuda-extra { display: block; }
.ayuda-pagina .ayuda-acciones { display: flex; gap: 6px; }
.ayuda-pagina.minimizada { display: none; }

/* ---------------------------------------------------------------------
   Superficies
   --------------------------------------------------------------------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); padding: 20px 22px; margin-bottom: 20px; }
.tarjeta h2 { display: flex; align-items: center; gap: 8px; }
.encabezado-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.encabezado-flex h2 { margin: 0; }

/* Indicadores en relieve (se inclinan con el cursor) */
.fila-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; margin-bottom: 24px; perspective: 1000px; }
.indicador {
  --tono: var(--azul); position: relative; display: block; padding: 16px 18px 14px; border-radius: 16px; color: var(--texto);
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2)); border: 1px solid var(--borde);
  box-shadow: var(--relieve), 0 6px 0 -2px color-mix(in srgb, var(--tono) 22%, var(--borde)), var(--sombra-2);
  transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; text-decoration: none;
}
a.indicador:hover { text-decoration: none; box-shadow: var(--relieve), 0 8px 0 -2px color-mix(in srgb, var(--tono) 35%, var(--borde)), var(--sombra-3); }
.indicador .valor { font-family: var(--fuente-titulo); font-stretch: 112%; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--tono); font-variant-numeric: tabular-nums; transform: translateZ(24px); }
.indicador .etiqueta { font-size: 13px; color: var(--texto-2); font-weight: 700; margin-top: 4px; transform: translateZ(14px); }
.indicador .kpi-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 10px; color: #fff; transform: translateZ(30px);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tono) 65%, #fff), var(--tono)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 8px 16px -8px var(--tono); }
.indicador .kpi-ayuda { position: absolute; top: 12px; right: 12px; transform: translateZ(20px); }
.indicador .kpi-pie { margin-top: 10px; font-size: 12.5px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; transform: translateZ(10px); }
.indicador.rojo { --tono: var(--rojo); } .indicador.amarillo { --tono: var(--naranja-2); } .indicador.azul { --tono: var(--info); } .indicador.verde { --tono: var(--exito); }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.form-grid .ancho-completo { grid-column: 1 / -1; }
label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--texto-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=file], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); font-size: 14.5px; font-family: inherit;
  background: var(--superficie); color: var(--texto); box-shadow: inset 0 1px 2px rgba(6,42,58,.06); transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--borde-fuerte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 18%, transparent); }
input[type=file] { padding: 8px; background: var(--superficie-2); }
textarea { min-height: 90px; resize: vertical; }
.campo { margin-bottom: 14px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; color: var(--texto); margin: 6px 0; cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--azul); flex-shrink: 0; }
.acciones-form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px 18px; margin: 0 0 18px; background: var(--superficie-2); }
legend { font-family: var(--fuente-titulo); font-stretch: 112%; font-weight: 700; color: var(--texto); padding: 3px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; font-size: 14px; }

/* Ayuda de campo */
.ayuda-campo { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; cursor: help;
  background: var(--azul-claro); color: var(--azul); font: 800 11px var(--fuente); transition: transform .15s, background .15s; flex-shrink: 0; }
.ayuda-campo:hover, .ayuda-campo:focus-visible { background: var(--naranja); color: #13232C; transform: scale(1.15); }

/* ---------------------------------------------------------------------
   Botones con relieve
   --------------------------------------------------------------------- */
.btn {
  --b: var(--azul); --b2: var(--azul-oscuro); --t: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 86%, #fff), var(--b)); color: var(--t);
  border: 1px solid var(--b2); border-radius: 11px; padding: 9px 16px; font: 700 14px var(--fuente); cursor: pointer; text-decoration: none; line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 var(--b2), 0 8px 16px -8px color-mix(in srgb, var(--b) 80%, transparent);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 0 var(--b2), 0 12px 20px -10px color-mix(in srgb, var(--b) 80%, transparent); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 var(--b2), 0 2px 6px -2px rgba(0,0,0,.3); }
.btn-sec, .btn-claro { --b2: var(--borde-fuerte); --t: var(--azul); background: var(--superficie); border-color: var(--borde-fuerte); box-shadow: 0 2px 0 var(--borde-fuerte), var(--sombra-1); }
.btn-sec:hover, .btn-claro:hover { background: var(--azul-claro); box-shadow: 0 3px 0 var(--borde-fuerte), var(--sombra-1); }
.btn-rojo { --b: #C63C32; --b2: #8E241D; }
.btn-naranja { --b: #F2A007; --b2: #B77800; --t: #13232C; }
.btn-azul { --b: #1E5FA8; --b2: #164a85; }
.btn-peq { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn .onda { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); animation: onda .6s ease-out; pointer-events: none; }
details > summary.btn { list-style: none; }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: var(--superficie); }
table.tabla th, table.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
table.tabla th { background: var(--superficie-2); color: var(--texto-2); font-weight: 800; font-size: 12.5px; white-space: nowrap; border-bottom: 2px solid var(--borde-fuerte); }
table.tabla tbody tr:hover td { background: color-mix(in srgb, var(--azul-claro) 55%, var(--superficie)); }
table.tabla tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--naranja); }
table.tabla td.num, table.tabla th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tabla tfoot td { font-weight: 800; background: var(--superficie-2); }
table.tabla input, table.tabla select { padding: 7px 9px; font-size: 13.5px; }

/* ---------------------------------------------------------------------
   Alertas, avisos flotantes, insignias
   --------------------------------------------------------------------- */
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; border: 1px solid; }
.alerta::before { content: ""; width: 4px; align-self: stretch; border-radius: 4px; background: currentColor; flex-shrink: 0; opacity: .8; }
.alerta-exito { background: var(--exito-claro); border-color: color-mix(in srgb, var(--exito) 35%, transparent); color: var(--exito); }
.alerta-error { background: var(--rojo-claro); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); color: var(--rojo); }
.alerta-info { background: var(--info-claro); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.alerta-aviso { background: var(--amarillo-claro); border-color: color-mix(in srgb, var(--amarillo) 35%, transparent); color: var(--amarillo); }
.zona-avisos { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); box-shadow: var(--sombra-3); animation: entrarAviso .35s cubic-bezier(.2,.9,.3,1.2); border-left: 5px solid var(--azul); }
.aviso.exito { border-left-color: var(--exito); } .aviso.error { border-left-color: var(--rojo); } .aviso.alerta-amarilla { border-left-color: var(--naranja); }
.aviso .aviso-ico { color: var(--azul); } .aviso.exito .aviso-ico { color: var(--exito); } .aviso.error .aviso-ico { color: var(--rojo); }
.aviso p { margin: 0; flex: 1; }
.aviso button { border: 0; background: none; color: var(--texto-3); cursor: pointer; padding: 0; }
.aviso.saliendo { animation: salirAviso .25s ease-in forwards; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.badge[data-ayuda] { cursor: help; }
.badge-verde { background: var(--exito-claro); color: var(--exito); }
.badge-rojo { background: var(--rojo-claro); color: var(--rojo); }
.badge-amarillo { background: var(--amarillo-claro); color: var(--amarillo); }
.badge-azul { background: var(--info-claro); color: var(--info); }
.badge-gris { background: var(--gris-claro); color: var(--texto-2); }

/* Burbuja de ayuda */
.burbuja { position: fixed; z-index: 300; max-width: 320px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  background: #062A3A; color: #E6F1F6; box-shadow: var(--sombra-3); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.burbuja.visible { opacity: 1; transform: none; }
.burbuja strong { display: block; color: #fff; margin-bottom: 3px; font-family: var(--fuente-titulo); font-stretch: 112%; }
[data-tema="oscuro"] .burbuja { background: #1D4357; }

/* ---------------------------------------------------------------------
   Pestañas, filtros, datos
   --------------------------------------------------------------------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1); width: fit-content; max-width: 100%; }
.pestanas a { padding: 8px 14px; border-radius: 10px; color: var(--texto-2); font-weight: 700; font-size: 13.5px; }
.pestanas a:hover { text-decoration: none; background: var(--azul-claro); color: var(--azul); }
.pestanas a.activa { color: #fff; background: linear-gradient(180deg, #0E6489, #0B4F6C); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #083B51; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; padding: 14px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.encabezado-flex > .filtros { margin-bottom: 0; }
.filtros > div { min-width: 150px; }
.filtros label { margin-bottom: 4px; }
.dl-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 22px; margin: 0; }
.dl-datos div { padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.dl-datos dt { font-size: 12px; color: var(--texto-3); font-weight: 700; }
.dl-datos dd { margin: 2px 0 0; font-weight: 600; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { padding: 4px 0 14px 22px; border-left: 2px solid var(--borde); position: relative; margin-left: 6px; }
.linea-tiempo li::before { content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--naranja); }
.texto-der { text-align: right; }
.paginacion { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.paginacion a, .paginacion span { padding: 6px 11px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); font-weight: 700; }
.paginacion span.actual { background: var(--azul); color: #fff; border-color: var(--azul); }
.notif { padding: 12px 14px; border: 1px solid var(--borde); background: var(--superficie); margin-bottom: 10px; border-radius: 12px; }
.notif.no-leida { border-left: 4px solid var(--naranja); background: linear-gradient(90deg, var(--naranja-claro), var(--superficie) 40%); }
.barra-progreso { background: var(--gris-claro); border-radius: 10px; height: 10px; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), var(--naranja)); }
.simulador-resultado { font-family: var(--fuente-titulo); font-stretch: 112%; font-size: 30px; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
pre.datos-json { font-size: 11px; white-space: pre-wrap; word-break: break-all; max-width: 420px; margin: 0; color: var(--texto-2); }
.vacio { text-align: center; padding: 26px 16px; color: var(--texto-2); }
.vacio .ico { width: 40px; height: 40px; color: var(--borde-fuerte); margin-bottom: 8px; }

/* ---------------------------------------------------------------------
   Panel principal: saludo, ruta del crédito, gráficas
   --------------------------------------------------------------------- */
.saludo {
  position: relative; overflow: hidden; border-radius: 22px; padding: 26px 30px; margin-bottom: 26px; color: #E9F4F9;
  background: radial-gradient(90% 140% at 100% 0%, #13729C 0%, transparent 55%), radial-gradient(50% 80% at 0% 120%, rgba(242,160,7,.28), transparent 70%), linear-gradient(135deg, #0B4F6C 0%, #062A3A 100%);
  box-shadow: var(--sombra-3), inset 0 1px 0 rgba(255,255,255,.15);
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.saludo h1 { color: #fff; font-size: 30px; margin-bottom: 6px; }
.saludo p { margin: 0; color: #BFDCE8; max-width: 62ch; }
.saludo .acciones-rapidas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.isotipo-3d { width: 150px; height: 150px; position: relative; transform-style: preserve-3d; animation: flotar 7s ease-in-out infinite; }
.isotipo-3d img { width: 100%; height: 100%; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)) drop-shadow(0 2px 0 rgba(255,255,255,.25)); }
.isotipo-3d::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -18px; height: 16px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.45), transparent 70%); animation: sombra 7s ease-in-out infinite; }
.saludo .isotipo-3d img { filter: brightness(0) invert(1) drop-shadow(0 18px 18px rgba(0,0,0,.45)); }

.seccion-titulo { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.seccion-titulo h2 { margin: 0; font-size: 18px; }
.seccion-titulo .linea { flex: 1; height: 1px; background: var(--borde); }

/* Ruta del crédito: baldosas en relieve */
.ruta { display: grid; grid-template-columns: repeat(var(--pasos, 7), minmax(112px, 1fr)); gap: 16px; padding: 18px 6px 34px; perspective: 1100px; overflow-x: auto; }
.ruta-paso {
  --alto: 10px; --tono: var(--azul); position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 14px 14px 12px;
  border-radius: 16px; color: var(--texto); text-decoration: none; background: linear-gradient(170deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borde); transform: rotateX(16deg); transform-origin: bottom center;
  box-shadow: var(--relieve), 0 var(--alto) 0 -1px color-mix(in srgb, var(--tono) 40%, var(--borde-fuerte)), 0 calc(var(--alto) + 14px) 24px -12px rgba(6,42,58,.45);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.ruta-paso:hover, .ruta-paso:focus-visible { text-decoration: none; transform: rotateX(2deg) translateY(-8px); --alto: 14px; }
.ruta-paso .n { font-family: var(--fuente-titulo); font-stretch: 112%; font-size: 30px; font-weight: 800; color: var(--tono); line-height: 1; font-variant-numeric: tabular-nums; }
.ruta-paso .nombre { font-weight: 800; font-size: 13.5px; }
.ruta-paso .quien { font-size: 12px; color: var(--texto-3); margin-top: auto; }
.ruta-paso .orden { position: absolute; top: 10px; right: 12px; font-size: 11.5px; font-weight: 800; color: var(--texto-3); }
.ruta-paso:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; width: 16px; height: 2px; background: repeating-linear-gradient(90deg, #F2A007 0 4px, transparent 4px 7px); }
.ruta-paso.atencion { --tono: var(--naranja-2); }
.ruta-paso.atencion .orden { color: var(--naranja-2); }

.rejilla-panel { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grafica svg:not(.ico) { width: 100%; height: auto; display: block; overflow: visible; max-height: 260px; }
.grafica text { fill: var(--texto-2); font: 600 11px var(--fuente); }
.grafica .valor-g { fill: var(--texto); font-weight: 800; }
.grafica .barra-g { cursor: help; transition: opacity .15s; }
.grafica .barra-g:hover { opacity: .8; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texto-2); margin-top: 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pendientes { list-style: none; margin: 0; padding: 0; }
.pendientes li a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--texto); border: 1px solid transparent; }
.pendientes li a:hover { text-decoration: none; background: var(--superficie-2); border-color: var(--borde); }
.pendientes .cuenta { margin-left: auto; min-width: 30px; text-align: center; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); }
.pendientes .cuenta.alta { background: #F2A007; color: #13232C; }
.pendientes .ico { color: var(--azul); }
.pendientes small { display: block; color: var(--texto-3); font-size: 12px; }

/* ---------------------------------------------------------------------
   Etapas del crédito en el expediente
   --------------------------------------------------------------------- */
.etapas { display: flex; margin: 6px 0 16px; overflow-x: auto; padding-bottom: 4px; }
.etapa { flex: 1; min-width: 92px; position: relative; text-align: center; font-size: 12px; font-weight: 700; color: var(--texto-3); padding-top: 38px; cursor: help; }
.etapa::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); border: 2px solid var(--borde-fuerte); color: var(--texto-3); font-weight: 800; z-index: 1; }
.etapa::after { content: ""; position: absolute; top: 14px; left: calc(-50% + 15px); right: calc(50% + 15px); height: 3px; background: var(--borde); }
.etapa:first-child::after { display: none; }
.etapa.hecha { color: var(--texto-2); }
.etapa.hecha::before { content: "✓"; background: var(--azul); border-color: var(--azul); color: #fff; }
.etapa.hecha::after, .etapa.actual::after { background: linear-gradient(90deg, var(--azul), #F2A007); }
.etapa.actual { color: var(--texto); }
.etapa.actual::before { background: #F2A007; border-color: #F2A007; color: #13232C; animation: latido 2.2s infinite; }
.etapa.detenida::before { background: var(--rojo); border-color: var(--rojo); color: #fff; content: "!"; }
.siguiente-paso { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--superficie-2); border: 1px dashed color-mix(in srgb, #F2A007 60%, var(--borde)); }
.siguiente-paso p { margin: 0; color: var(--texto-2); }
.siguiente-paso strong { color: var(--texto); }

/* ---------------------------------------------------------------------
   Panel de ayuda, buscador (Ctrl+K), recorrido guiado
   --------------------------------------------------------------------- */
.velo { position: fixed; inset: 0; background: rgba(6,26,36,.45); backdrop-filter: blur(3px); z-index: 150; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.visible { opacity: 1; pointer-events: auto; }
.panel-ayuda { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 160; background: var(--superficie); box-shadow: var(--sombra-3);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.panel-ayuda.abierto { transform: none; }
.panel-ayuda header { padding: 18px 20px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #0B4F6C, #062A3A); color: #fff; }
.panel-ayuda header h2 { color: #fff; margin: 0; flex: 1; }
.panel-ayuda header .boton-icono { color: #fff; }
.panel-ayuda header .boton-icono:hover { background: rgba(255,255,255,.15); color: #fff; }
.panel-ayuda .cuerpo { padding: 18px 20px 30px; overflow-y: auto; }
.panel-ayuda .cuerpo > p { color: var(--texto-2); }
.panel-ayuda h3 { margin-top: 20px; }
.panel-ayuda details { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--superficie-2); }
.panel-ayuda details[open] { background: var(--superficie); box-shadow: var(--sombra-1); }
.panel-ayuda summary { cursor: pointer; font-weight: 700; }
.panel-ayuda details p { color: var(--texto-2); margin: 8px 0 0; }
.panel-ayuda .atajos { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; color: var(--texto-2); }

.paleta { position: fixed; z-index: 170; top: 12vh; left: 50%; width: min(640px, calc(100vw - 24px)); transform: translateX(-50%) scale(.98); opacity: 0; pointer-events: none;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-3); transition: opacity .15s, transform .15s; overflow: hidden; }
.paleta.abierta { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.paleta .entrada { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); color: var(--texto-3); }
.paleta .entrada input { border: 0; box-shadow: none; padding: 8px 0; font-size: 17px; background: transparent; }
.paleta .entrada input:focus { box-shadow: none; }
.paleta ul { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
.paleta li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--texto); }
.paleta li a small { margin-left: auto; color: var(--texto-3); }
.paleta li.sel a, .paleta li a:hover { background: var(--azul-claro); text-decoration: none; }
.paleta .grupo-res { font-size: 12px; font-weight: 800; color: var(--texto-3); padding: 8px 12px 4px; }
.paleta .pie-paleta { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--borde); font-size: 12px; color: var(--texto-3); background: var(--superficie-2); flex-wrap: wrap; }

.tour-foco { position: fixed; z-index: 180; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(6,26,36,.62), 0 0 0 3px #F2A007; transition: all .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.tour-burbuja { position: fixed; z-index: 190; width: min(340px, calc(100vw - 24px)); background: var(--superficie); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra-3); border: 1px solid var(--borde); transition: top .3s, left .3s; }
.tour-burbuja h3 { margin: 0 0 6px; }
.tour-burbuja p { margin: 0 0 12px; color: var(--texto-2); }
.tour-burbuja .tour-pie { display: flex; align-items: center; gap: 8px; }
.tour-burbuja .tour-pie span { margin-right: auto; font-size: 12px; color: var(--texto-3); font-weight: 700; }

/* ---------------------------------------------------------------------
   Inicio de sesión
   --------------------------------------------------------------------- */
.login-escena { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-marca { position: relative; overflow: hidden; padding: 48px 52px; color: #E6F1F6; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  background: radial-gradient(70% 60% at 85% 15%, #1A86B5 0%, transparent 60%), radial-gradient(60% 50% at 10% 100%, rgba(242,160,7,.35) 0%, transparent 60%), linear-gradient(150deg, #0B4F6C 0%, #062A3A 70%); }
.login-marca h2 { color: #fff; font-size: 36px; line-height: 1.12; max-width: 16ch; margin-bottom: 12px; }
.login-marca p { color: #BFDCE8; max-width: 46ch; margin: 0; }
.login-marca ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; max-width: 46ch; }
.login-marca li { display: flex; gap: 12px; align-items: flex-start; color: #D6E9F1; }
.login-marca li .ico { color: #F2A007; margin-top: 1px; }
.login-marca .isotipo-3d { width: 240px; height: 240px; position: absolute; right: 48px; top: 34%; }
.login-marca .isotipo-3d img { filter: brightness(0) invert(1) drop-shadow(0 24px 22px rgba(0,0,0,.5)); }
.login-marca .logo-blanco { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .95; align-self: flex-start; }
.login-marca .pie-marca { font-size: 12.5px; color: #8FB6C8; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 30px 20px; }
.tarjeta-login { width: 100%; max-width: 420px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra-3); padding: 30px 30px 26px; }
.tarjeta-login h1 { font-size: 25px; margin-bottom: 4px; }
.logo-login { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 16px; }
.pie-publico { text-align: center; font-size: 12.5px; color: var(--texto-3); margin-top: 18px; }

/* ---------------------------------------------------------------------
   Animaciones
   --------------------------------------------------------------------- */
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes entrarAviso { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes salirAviso { to { opacity: 0; transform: translateX(30px); } }
@keyframes onda { to { transform: scale(4); opacity: 0; } }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotateY(-16deg) rotateX(6deg); } 50% { transform: translateY(-12px) rotateY(12deg) rotateX(-3deg); } }
@keyframes sombra { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.75); opacity: .5; } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(242,160,7,.6); } 70% { box-shadow: 0 0 0 10px rgba(242,160,7,0); } 100% { box-shadow: 0 0 0 0 rgba(242,160,7,0); } }
@keyframes subirRuta { from { opacity: 0; transform: rotateX(70deg) translateY(40px); } }
.ruta.animar .ruta-paso { animation: subirRuta .7s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   Impresión y adaptable
   --------------------------------------------------------------------- */
@media print {
  .barra-superior, .menu-lateral, .pie, .no-imprimir, .ayuda-pagina, .zona-avisos { display: none !important; }
  .contenido { padding: 0; }
  .tarjeta { box-shadow: none; }
}
@media (max-width: 1100px) {
  .rejilla-panel, .rejilla-3 { grid-template-columns: 1fr; }
  .buscador-disparo { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; flex: 0 0 auto; border-radius: 12px; margin-left: auto; }
  .buscador-disparo span, .buscador-disparo kbd { display: none; }
  .login-escena { grid-template-columns: 1fr; }
  .login-marca { display: none; }
}
@media (max-width: 860px) {
  .btn-menu { display: inline-grid; }
  .menu-lateral { position: fixed; top: var(--barra-alto); left: 0; bottom: 0; height: auto; z-index: 70; width: 270px; transform: translateX(-105%); transition: transform .25s; }
  .menu-lateral.abierto { transform: none; }
  body.menu-colapsado .menu-lateral a span, body.menu-colapsado .menu-grupo { display: initial; }
  .contenido { padding: 16px 14px 30px; }
  .usuario-nombre, #btn-colapsar { display: none; }
  .barra-superior { padding: 0 10px 0 6px; gap: 4px; }
  .barra-superior .marca img { height: 30px; }
  .saludo { grid-template-columns: 1fr; padding: 20px; }
  .saludo h1 { font-size: 24px; }
  .isotipo-3d { display: none; }
  h1.titulo-pagina { font-size: 23px; }
  .ruta { grid-template-columns: repeat(var(--pasos, 7), 132px); }
  .ayuda-pagina { grid-template-columns: auto 1fr; }
  .ayuda-pagina .ayuda-acciones { grid-column: 1 / -1; }
  .fila-tarjetas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}
.contenido-publico.escena-completa { padding: 0; display: block; }
.login-escena .zona-avisos { position: fixed; }
@media (max-width: 480px) {
  .barra-derecha { gap: 0; }
  .barra-superior .boton-icono, .buscador-disparo { width: 36px; height: 36px; }
  .barra-superior .marca { padding: 4px 2px; }
  .barra-superior .marca img { height: 26px; }
  .usuario-chip { padding: 2px; border: 0; background: transparent; box-shadow: none; }
}