/* =============================================================================
   Central Financiera — hoja de estilos
   -----------------------------------------------------------------------------
   Lenguaje de documento técnico, no de web comercial: texto en serif, portada
   como carátula de informe con tabla de datos, secciones numeradas con nota al
   margen y botones como etiquetas monoespaciadas.

   Es deliberadamente distinto de las demás webs del grupo, que usan tipografía
   geométrica, hero grande y rejillas de tarjetas.
   ============================================================================= */

:root{
  --escarlata:#C21F35; --escarlata2:#9C1526; --escarlata-suave:rgba(194,31,53,.13);
  --tinta:#0B0D11; --papel:#0E1116; --panel:#141821;
  --oro:#D9A94A; --linea:rgba(255,255,255,.13); --txt:rgba(255,255,255,.74); --gris:rgba(255,255,255,.44);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --dat:'IBM Plex Mono',ui-monospace,monospace;
  --lateral:268px;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--papel); color:#fff; font-family:var(--serif); font-size:17.5px; line-height:1.7;
      -webkit-font-smoothing:antialiased;
      padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0; line-height:1.2 }
[hidden]{ display:none !important }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.saltar{ position:absolute; left:-999px; background:var(--escarlata); color:#fff; padding:.7rem 1rem; z-index:100 }
.saltar:focus{ left:0 }

/* ---- Armazón ---- */
.marco{ display:grid; grid-template-columns:var(--lateral) 1fr; min-height:100vh }
.lateral{ background:var(--tinta); border-right:1px solid var(--linea); padding:24px 20px; position:sticky; top:0;
          height:100vh; display:flex; flex-direction:column; gap:20px; overflow-y:auto;
          font-family:var(--dat); font-size:13px }
.marca{ display:flex; align-items:flex-start; gap:10px; text-decoration:none;
        border-bottom:1px solid var(--linea); padding-bottom:16px }
.sello{ width:34px; height:34px; flex:0 0 auto }
.nom{ font-family:var(--serif); font-size:17.5px; font-weight:600; display:block; line-height:1.15 }
.bajo{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--oro); display:block; margin-top:5px }
.menu{ display:flex; flex-direction:column }
.menu a{ display:flex; justify-content:space-between; gap:10px; text-decoration:none; color:var(--gris); padding:7px 0 }
.menu a:hover{ color:#fff }
.menu a.activo{ color:#fff }
.menu a.activo::before{ content:"▸ "; color:var(--escarlata) }
.menu .k{ color:rgba(255,255,255,.3) }
.grupo{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.28); margin:16px 0 6px }
.lat-pie{ margin-top:auto; border-top:1px solid var(--linea); padding-top:14px; font-size:12px }
.lat-pie a{ display:block; color:var(--gris); text-decoration:none; padding:3px 0 }
.lat-pie a:hover{ color:#fff }
.lat-datos{ margin:12px 0 0; font-size:10.5px; line-height:1.6; color:rgba(255,255,255,.3) }
.idi{ display:flex; gap:5px; margin-top:12px; font-size:11px }
.idi a{ padding:3px 8px; border:1px solid var(--linea); text-decoration:none; color:var(--gris) }
.idi a.on{ background:var(--oro); color:var(--tinta); border-color:var(--oro) }
.hamb{ display:none; background:none; border:1px solid var(--linea); padding:.45rem .6rem; cursor:pointer }
.hamb span{ display:block; width:22px; height:2px; background:var(--escarlata); margin:4px 0 }

/* ---- Barra de estado ---- */
.barra{ display:flex; gap:22px; flex-wrap:wrap; padding:10px 56px; background:var(--tinta);
        border-bottom:1px solid var(--linea); font-family:var(--dat); font-size:11.5px; color:var(--gris);
        letter-spacing:.04em }
.barra b{ color:var(--oro); font-weight:500 }
.punto{ width:7px; height:7px; border-radius:50%; background:#35C07A; display:inline-block; margin-right:7px; vertical-align:1px }

/* ---- Carátula ---- */
.caratula{ padding:52px 56px; border-bottom:1px solid var(--linea) }
.ante{ font-family:var(--dat); font-size:11px; letter-spacing:.16em; color:var(--oro);
       text-transform:uppercase; margin:0 0 4px }
.ref{ font-family:var(--dat); font-size:11px; letter-spacing:.16em; color:var(--oro); text-transform:uppercase; margin:0 }
.caratula h1{ font-size:clamp(30px,3.6vw,46px); margin:18px 0 0; max-width:20ch; letter-spacing:-.01em }
.caratula h1 em{ font-style:italic; color:var(--escarlata) }
.bajada{ color:var(--txt); max-width:56ch; margin:18px 0 0 }
.tabla{ margin:34px 0 0; border-top:1px solid var(--linea); max-width:680px }
.tabla div{ display:grid; grid-template-columns:190px 1fr; gap:20px; padding:11px 0;
            border-bottom:1px solid var(--linea); font-family:var(--dat); font-size:13px }
.tabla dt{ color:var(--gris); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; padding-top:2px }
.tabla dd{ margin:0; color:#fff }
.tabla dd.no{ color:#FF8A99 }
.acciones{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap }
.b1,.b2{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:15px 24px;
         font-family:var(--dat); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none }
.b1{ background:var(--escarlata); border:1px solid var(--escarlata); color:#fff }
.b1:hover{ background:var(--escarlata2); border-color:var(--escarlata2) }
.b2{ background:transparent; border:1px solid var(--linea); color:var(--txt) }
.b2:hover{ border-color:var(--oro); color:var(--oro) }

/* ---- Secciones numeradas con nota al margen ---- */
/* Dos columnas: nota al margen y contenido. El seguro de abajo evita que una
   sección sin nota caiga dentro de la columna estrecha y salga comprimida. */
.sec{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:34px; padding:42px 56px; border-bottom:1px solid var(--linea) }
.sec.alt{ background:var(--panel) }
.sec > .cont:only-child{ grid-column:1 / -1 }
.marg{ font-family:var(--dat); font-size:11.5px; color:var(--oro); letter-spacing:.1em; padding-top:7px }
.marg small{ display:block; color:var(--gris); margin-top:6px; letter-spacing:0; font-size:11px; line-height:1.5 }
.cont{ max-width:680px }
.sec h1{ font-size:clamp(26px,3.2vw,38px); max-width:20ch }
.sec h2{ font-size:25px; margin-bottom:10px }
.regla{ display:none }               /* el documento se ordena con numeración, no con reglas */
.entrad{ color:var(--txt); margin:0 0 18px }
.estrecho,.texto,.texto-largo{ max-width:680px }
.texto h2,.texto-largo h2{ font-size:20px; margin:1.9rem 0 .4rem }
.texto p,.texto li,.texto-largo p,.texto-largo li{ color:var(--txt) }
.texto ul,.texto-largo ul{ padding-left:1.1rem }
.texto li,.texto-largo li{ margin:.4rem 0 }

/* ---- Listas de expediente ---- */
.dossier,.lista{ margin:18px 0 0; border-top:1px solid var(--linea) }
.exp{ display:grid; grid-template-columns:74px 1fr 26px; gap:18px; padding:15px 0;
      border-bottom:1px solid var(--linea); text-decoration:none; align-items:baseline }
.exp:hover{ background:rgba(255,255,255,.03) }
.exp .cod{ font-family:var(--dat); font-size:11.5px; color:var(--oro) }
.exp h3{ font-size:18px; margin:0 0 3px }
.exp p{ margin:0; color:var(--gris); font-size:15px }
.exp .fl{ font-family:var(--dat); color:var(--escarlata); text-align:right }

/* ---- Tarjetas heredadas: se convierten en filas de tabla ---- */
.tarj{ border-top:1px solid var(--linea); margin-top:8px }
.t{ display:grid; grid-template-columns:74px 1fr; gap:3px 18px; padding:16px 0; border-bottom:1px solid var(--linea) }
.t .cod{ font-family:var(--dat); font-size:11.5px; color:var(--oro) }
.t h3{ font-size:18px; margin:0 0 4px; grid-column:2 }
.t p{ margin:0; color:var(--gris); font-size:15px; grid-column:2 }
.t .cod + h3{ grid-column:2 }

/* ---- Pasos ---- */
.pasos{ margin-top:14px; border-top:1px solid var(--linea); counter-reset:n }
.paso{ counter-increment:n; display:grid; grid-template-columns:74px 1fr; gap:3px 18px; padding:14px 0;
       border-bottom:1px solid var(--linea) }
.paso::before{ content:"0" counter(n); font-family:var(--dat); font-size:11.5px; color:var(--oro) }
/* El número ocupa la primera columna; título y texto van los dos en la
   segunda. Sin esto, el párrafo cae bajo el número y se parte palabra a
   palabra. */
.paso h3{ grid-column:2; font-size:17px; margin:0 0 3px }
.paso p{ grid-column:2; margin:0; color:var(--gris); font-size:15px }

/* ---- Citas y avisos ---- */
.alcance,.aviso{ border-left:2px solid var(--oro); padding-left:18px; color:var(--gris); font-size:16px;
                 font-style:italic; margin:20px 0; background:none }
.llamada{ border:1px solid var(--linea); border-left:2px solid var(--escarlata); padding:22px;
          display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.llamada h3{ font-size:19px; margin-bottom:4px }
.llamada p{ margin:0; color:var(--gris); font-size:16px; max-width:56ch }

/* ---- Verificador de la carátula ---- */
.verificador{ margin-top:26px; max-width:520px }
.verificador h2{ font-size:17px; margin-bottom:6px }
.verificador p{ color:var(--gris); font-size:15px; margin:0 0 14px }
.busca{ display:flex; border:1px solid var(--linea); background:var(--tinta) }
.busca input{ flex:1; border:0; background:transparent; color:#fff; font-family:var(--dat); font-size:14px;
              padding:14px 16px; min-height:52px }
.busca input:focus{ outline:none }
.busca button{ border:0; background:var(--escarlata); color:#fff; font-family:var(--dat); font-size:12.5px;
               letter-spacing:.08em; text-transform:uppercase; padding:0 22px; cursor:pointer; min-height:52px }
.busca button:hover{ background:var(--escarlata2) }

/* ---- Registro ---- */
.consola{ border:1px solid var(--linea); background:var(--panel); padding:18px; margin-bottom:18px }
.consola-fila{ display:grid; grid-template-columns:1.6fr 1fr auto; gap:12px; align-items:end }
.campo-busca{ position:relative }
.campo-busca label,.campo-sel label{ display:block; font-family:var(--dat); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oro); margin-bottom:7px }
.campo-busca input{ width:100%; min-height:50px; padding:12px 14px 12px 42px; font-family:var(--dat); font-size:14px;
  background:var(--tinta); border:1px solid var(--linea); color:#fff }
.campo-busca svg{ position:absolute; left:13px; bottom:15px; width:18px; height:18px; color:var(--gris) }
.campo-sel select{ width:100%; min-height:50px; padding:12px 14px; font-family:var(--dat); font-size:13.5px;
  background:var(--tinta); border:1px solid var(--linea); color:#fff }
.campo-busca input:focus,.campo-sel select:focus{ outline:none; border-color:var(--escarlata) }
.limpiar{ min-height:50px; padding:0 18px; background:transparent; border:1px solid var(--linea); color:var(--txt);
  font-family:var(--dat); font-size:12px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer }
.limpiar:hover{ border-color:var(--oro); color:var(--oro) }
.conteo{ font-family:var(--dat); color:var(--gris); font-size:12px; margin:0 0 12px; letter-spacing:.06em }
.rej{ display:block; border-top:1px solid var(--linea) }
.ficha{ display:grid; grid-template-columns:54px 1fr auto auto; gap:14px; align-items:baseline; width:100%;
        padding:13px 0; border:0; border-bottom:1px solid var(--linea); background:transparent; color:#fff;
        font:inherit; text-align:left; cursor:pointer }
.ficha:hover{ background:rgba(255,255,255,.03) }
.ficha .num{ font-family:var(--dat); font-size:11.5px; color:var(--gris) }
.ficha b{ display:block; font-size:17px; font-weight:600 }
.ficha .dom{ display:block; font-family:var(--dat); font-size:11.5px; color:var(--gris); word-break:break-all; margin-top:2px }
.ficha .reg{ font-family:var(--dat); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#FF8A99;
             border:1px solid rgba(194,31,53,.35); padding:3px 9px; white-space:nowrap }
.ficha .reg.propio{ color:var(--oro); border-color:rgba(217,169,74,.35) }
.ficha .fec{ font-family:var(--dat); font-size:11.5px; color:var(--gris); min-width:82px; text-align:right }
.vacio{ color:var(--gris); padding:20px 0 }
#mas{ height:1px }

/* ---- Ficha ampliada ---- */
.fondo{ position:fixed; inset:0; background:rgba(4,5,8,.82); display:flex; align-items:center; justify-content:center;
        padding:18px; z-index:80; opacity:0; transition:opacity .22s ease }
.fondo.abierto{ opacity:1 }
.panel{ background:var(--panel); border:1px solid var(--linea); border-top:2px solid var(--escarlata); max-width:660px;
        width:100%; max-height:86vh; overflow:auto; padding:28px;
        transform:translate(var(--dx,0),var(--dy,0)) scale(.72); opacity:0;
        transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .24s ease }
.fondo.abierto .panel{ transform:translate(0,0) scale(1); opacity:1 }
.panel .et{ font-family:var(--dat); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--oro); margin:0 0 6px }
.panel h3{ font-size:24px; margin-bottom:4px }
.panel .dom{ font-family:var(--dat); color:var(--gris); font-size:12.5px; margin:0 0 16px; word-break:break-all }
.reg-fila{ display:grid; grid-template-columns:1fr auto; gap:12px; border-bottom:1px solid var(--linea);
           padding:11px 0; font-family:var(--dat); font-size:12.5px }
.reg-fila span:last-child{ color:var(--oro) }
.pie-panel{ display:flex; gap:12px; justify-content:flex-end; align-items:center; margin-top:22px; padding-top:16px;
            border-top:1px solid var(--linea); flex-wrap:wrap }
.cerrar{ margin-right:auto; background:none; border:0; color:var(--gris); font-family:var(--dat); font-size:12px;
         cursor:pointer; text-transform:uppercase; letter-spacing:.06em; min-height:44px }

/* ---- Formulario ---- */
.form-caja{ border:1px solid var(--linea); border-top:2px solid var(--escarlata); padding:26px; max-width:680px; background:var(--panel) }
.campos{ display:grid; gap:1rem; grid-template-columns:1fr 1fr }
.campo{ display:flex; flex-direction:column; gap:.35rem }
.campo-ancho{ grid-column:1 / -1 }
.campo label{ font-family:var(--dat); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris) }
.campo input,.campo select,.campo textarea{ font-family:var(--serif); font-size:16px; min-height:48px; padding:.6rem .8rem;
  border:1px solid var(--linea); background:var(--tinta); color:#fff; width:100% }
.campo textarea{ min-height:130px; line-height:1.6; resize:vertical }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--escarlata) }
.consentimiento{ display:flex; gap:.6rem; align-items:flex-start; font-size:15px; color:var(--gris); text-transform:none;
  font-family:var(--serif); letter-spacing:0 }
.consentimiento input{ width:18px; height:18px; min-height:0; margin-top:.3rem; accent-color:var(--escarlata) }
.trampa{ position:absolute; left:-9999px; opacity:0 }

.zpie{ padding:24px 56px; color:rgba(255,255,255,.34); font-size:11.5px; font-family:var(--dat); background:var(--tinta);
       line-height:1.7 }

/* ---- Cambio de página ---- */
.cortina{ display:none }
.con-js .cortina{ display:block; position:fixed; inset:0; z-index:9000;
  background:linear-gradient(120deg,var(--escarlata2) 0%,var(--escarlata) 60%,var(--escarlata2) 100%);
  transform:scaleY(1); transform-origin:top; pointer-events:none; transition:transform .34s cubic-bezier(.76,0,.24,1) }
body.entrando .cortina{ transform:scaleY(0); transform-origin:top }
body.saliendo .cortina{ transform:scaleY(1); transform-origin:bottom }
.zona{ transition:opacity .24s ease }
body.saliendo .zona{ opacity:0 }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .cortina{ display:none !important }
  .zona{ transition:none; opacity:1 !important }
  .panel{ transition:none; transform:none !important; opacity:1 !important }
}
@media (max-width:1000px){
  .marco{ grid-template-columns:1fr }
  .lateral{ position:sticky; top:0; height:auto; flex-direction:row; align-items:center; justify-content:space-between;
            gap:12px; padding:14px 20px; flex-wrap:wrap; z-index:40 }
  .marca{ border-bottom:0; padding-bottom:0 }
  .menu{ display:none; width:100%; order:3 }
  .menu.abierto{ display:flex }
  .lat-pie{ display:none }
  .hamb{ display:block }
  .caratula,.sec,.barra,.zpie{ padding-left:20px; padding-right:20px }
  .sec{ grid-template-columns:1fr; gap:12px; padding-top:30px; padding-bottom:30px }
  .caratula{ padding-top:32px; padding-bottom:32px }
  .tabla div{ grid-template-columns:1fr; gap:3px; padding:12px 0 }
  .campos{ grid-template-columns:1fr }
  .ficha{ grid-template-columns:36px 1fr; gap:10px }
  .ficha .reg,.ficha .fec{ grid-column:2; justify-self:start; text-align:left; min-width:0; margin-top:5px }
  .exp{ grid-template-columns:62px 1fr 20px; gap:12px }
}

/* ---- Barras de desplazamiento ------------------------------------------
   Por defecto el navegador las pinta en gris claro, y sobre fondo negro
   parecen pegadas encima de la página. Aquí son finas, translúcidas y sin
   flechas; se ven al usarlas y desaparecen visualmente al leer.

   Se aplican a la página, a la barra lateral y al panel de la ficha, que son
   los tres sitios con desplazamiento propio. */
html{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.lateral, .panel{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border: 3px solid transparent;      /* deja aire a los lados: parece más fina */
  background-clip: padding-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); background-clip: padding-box; }
::-webkit-scrollbar-corner{ background: transparent; }

/* Los campos de texto y el desplegable de supervisores, más discretos aún */
textarea::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.1); background-clip: padding-box; }

/* ---- Selector de idioma ------------------------------------------------
   Va en la esquina superior derecha, separado del menú: es una preferencia
   del visitante, no una sección del sitio. Muestra la bandera del idioma
   activo y despliega las otras dos. Las banderas son SVG, no emoji, porque
   los emoji de bandera no se ven en Windows. */
.idioma{ margin-left:auto; position:relative }
.idioma-btn{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--linea);
  color:var(--txt); font-family:var(--dat); font-size:11.5px; letter-spacing:.08em; padding:6px 11px;
  cursor:pointer; min-height:34px }
.idioma-btn:hover{ border-color:var(--oro); color:#fff }
.idioma svg{ width:20px; height:13.5px; display:block; border:1px solid rgba(0,0,0,.35) }
.idioma-lista{ display:none; position:absolute; top:calc(100% + 6px); right:0; background:var(--tinta);
  border:1px solid var(--linea); min-width:172px; z-index:60; box-shadow:0 14px 34px rgba(0,0,0,.5) }
.idioma-lista.abierta{ display:block }
.idioma-lista a{ display:flex; align-items:center; gap:10px; padding:10px 13px; text-decoration:none;
  color:var(--txt); font-family:var(--dat); font-size:12px; border-bottom:1px solid var(--linea) }
.idioma-lista a:last-child{ border-bottom:0 }
.idioma-lista a:hover{ background:rgba(255,255,255,.05); color:#fff }
@media(max-width:1000px){ .idioma{ margin-left:0 } }