/* ==========================================================================
   Sistema de Crédito — Venezuela
   Hoja de estilos única.

   Todo el aspecto del sistema sale de acá: el panel interno y el portal del
   cliente comparten los mismos colores, la misma tipografía y los mismos
   botones. Un archivo y no dos, a propósito: si fueran dos, en tres meses el
   botón de guardar sería de un azul distinto en cada lado.

   La tipografía es la del propio teléfono o computadora del cliente. No se
   descarga ninguna fuente, y eso no es un ahorro cosmético: media Venezuela
   abre esto con datos móviles, y una fuente son 200 KB y un segundo de texto
   invisible antes de que aparezca nada.
   ========================================================================== */

:root{
  /* --- Grises. Con una pizca de azul, no neutros puros: un gris puro se ve
         apagado al lado de un acento frío. --- */
  --fondo:      #F6F8F9;
  --papel:      #FFFFFF;
  --papel2:     #F1F4F6;
  --linea:      #E2E8EC;
  --linea2:     #EDF1F4;
  --tinta:      #0F1B24;
  --tinta2:     #46596A;
  --tenue:      #7A8B99;

  /* --- El acento. Uno solo, y profundo. Los sistemas que se ven baratos son
         los que tienen cinco colores compitiendo. --- */
  --azul:       #0F3D56;
  --azul-vivo:  #17567A;
  --azul-suave: #E4EDF2;

  /* --- Semáforo. Estos NO son decoración: dicen en qué estado está algo. --- */
  --verde:      #1F6B4A;  --verde-f:  #E4F1EA;
  --ambar:      #8A5B06;  --ambar-f:  #FBF0DC;
  --rojo:       #9C3A31;  --rojo-f:   #F8E7E4;
  --gris-f:     #EDF1F4;

  --radio:      10px;
  --radio-s:    7px;
  --sombra:     0 1px 2px rgba(15,27,36,.04), 0 6px 18px rgba(15,27,36,.05);
  --letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--letra);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{margin:0;letter-spacing:-.018em;line-height:1.25;text-wrap:balance}
h1{font-size:23px;font-weight:650}
h2{font-size:18px;font-weight:650}
h3{font-size:15px;font-weight:650}
p{margin:0 0 12px}
a{color:var(--azul-vivo)}

/* Los números de plata se alinean en columna. Sin esto, una tabla de montos
   se ve torcida y cuesta comparar dos cifras. */
.num,.dinero,table td.num{font-variant-numeric:tabular-nums}

/* ==========================================================================
   1) Entrar al sistema
   ========================================================================== */
.centro{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:var(--fondo);
}
.caja{width:100%;max-width:400px}
.marca{
  display:flex;align-items:center;gap:12px;justify-content:center;
  margin-bottom:26px;
}
.marca .ico{
  width:42px;height:42px;border-radius:11px;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;
  letter-spacing:.02em;
}
.marca b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.marca span{
  display:block;font-size:10.5px;color:var(--tenue);letter-spacing:.14em;
  font-weight:600;text-transform:uppercase;
}

/* ==========================================================================
   2) Superficies
   ========================================================================== */
.tarjeta{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:22px 24px;
}
.tarjeta.apretada{padding:16px 18px}
.tarjeta + .tarjeta{margin-top:16px}
.tarjeta h2{margin-bottom:4px}
.tarjeta .sub{color:var(--tenue);font-size:13.5px;margin-bottom:18px}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rejilla .ancho{grid-column:1/-1}

/* ==========================================================================
   3) Formularios
   ========================================================================== */
.campo{margin-bottom:16px}
.campo label{
  display:block;font-size:12.5px;font-weight:600;color:var(--tinta2);
  margin-bottom:6px;
}
.campo label .req{color:var(--rojo);margin-left:2px}
.campo .pista{font-size:12.5px;color:var(--tenue);margin-top:6px;line-height:1.45}

.campo input[type=text],.campo input[type=email],.campo input[type=tel],
.campo input[type=password],.campo input[type=date],.campo input[type=number],
.campo select,.campo textarea{
  width:100%;padding:11px 13px;
  border:1px solid var(--linea);border-radius:var(--radio-s);
  font-size:15px;font-family:inherit;color:var(--tinta);background:var(--papel);
  transition:border-color .12s, box-shadow .12s;
}
.campo textarea{min-height:88px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave);
}
.campo input::placeholder,.campo textarea::placeholder{color:#A9B7C2}

/* El campo que quedó mal. El color no basta: quien no distingue rojo y verde
   necesita el texto de abajo, y por eso siempre va acompañado. */
.campo.mal input,.campo.mal select,.campo.mal textarea{border-color:var(--rojo)}
.campo.mal input:focus{box-shadow:0 0 0 3px var(--rojo-f)}
.campo .error{
  font-size:12.5px;color:var(--rojo);margin-top:6px;font-weight:500;
  display:flex;gap:5px;align-items:flex-start;
}

/* Montos: el símbolo va pegado dentro del campo, como en un banco. */
.con-simbolo{position:relative}
.con-simbolo span{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--tenue);font-size:15px;pointer-events:none;
}
.con-simbolo input{padding-left:30px;font-variant-numeric:tabular-nums}

/* Sí / No */
.par{display:flex;gap:10px;flex-wrap:wrap}
.par label{
  flex:1 1 130px;display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--linea);border-radius:var(--radio-s);
  padding:12px 14px;font-size:14.5px;font-weight:500;color:var(--tinta2);
  background:var(--papel);margin:0;transition:border-color .12s, background .12s;
}
.par label:hover{border-color:#C8D4DC}
.par input{accent-color:var(--azul);width:17px;height:17px;margin:0}
.par input:checked + span{color:var(--tinta);font-weight:600}
.par label:has(input:checked){border-color:var(--azul);background:var(--azul-suave)}

/* Las declaraciones del paso 8 */
.declara{
  display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--linea2);
  align-items:flex-start;cursor:pointer;
}
.declara:last-child{border-bottom:0}
.declara input{
  accent-color:var(--azul);width:18px;height:18px;margin:2px 0 0;flex:none;
}
.declara span{font-size:14.5px;line-height:1.55;color:var(--tinta2)}
.declara:has(input:checked) span{color:var(--tinta)}

/* ==========================================================================
   4) Botones
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:var(--radio-s);border:1px solid transparent;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s, border-color .12s, opacity .12s;
}
.btn.principal{background:var(--azul);color:#fff}
.btn.principal:hover{background:var(--azul-vivo)}
.btn.suave{background:var(--papel);color:var(--tinta2);border-color:var(--linea)}
.btn.suave:hover{border-color:#C8D4DC;color:var(--tinta)}
.btn.peligro{background:var(--papel);color:var(--rojo);border-color:#E8CFCB}
.btn.peligro:hover{background:var(--rojo-f)}
.btn.ancho{width:100%;padding:12px}
.btn.chico{padding:7px 12px;font-size:13px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

.botonera{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.botonera .empuja{margin-left:auto}

/* ==========================================================================
   5) Estados — badges
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
  background:var(--gris-f);color:var(--tinta2);
}
.badge.espera  {background:var(--gris-f); color:var(--tinta2)}
.badge.proceso {background:var(--azul-suave); color:var(--azul)}
.badge.atencion{background:var(--ambar-f); color:var(--ambar)}
.badge.bien    {background:var(--verde-f); color:var(--verde)}
.badge.mal     {background:var(--rojo-f); color:var(--rojo)}
.badge .punto{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ==========================================================================
   6) Tablas — livianas, sin rayas ni bordes gruesos
   ========================================================================== */
.envuelve-tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabla{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.tabla th{
  text-align:left;padding:10px 14px;
  font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tenue);border-bottom:1px solid var(--linea);white-space:nowrap;
}
table.tabla td{padding:13px 14px;border-bottom:1px solid var(--linea2);vertical-align:middle}
table.tabla tbody tr:last-child td{border-bottom:0}
table.tabla tbody tr:hover{background:var(--papel2)}
table.tabla td.num{text-align:right}
table.tabla a.fila{color:inherit;text-decoration:none;font-weight:600}
table.tabla a.fila:hover{color:var(--azul-vivo)}
.secundario{color:var(--tenue);font-size:12.5px;display:block;font-weight:400}

/* En el teléfono la tabla se convierte en tarjetas. Sin esto habría que
   arrastrar de lado para leer una fila, que es como nadie mira una lista. */
@media(max-width:820px){
  table.tabla{min-width:0}
  table.tabla thead{display:none}
  table.tabla tr{
    display:block;padding:14px 0;border-bottom:1px solid var(--linea);
  }
  table.tabla td{display:flex;justify-content:space-between;gap:16px;
                 border:0;padding:4px 0;text-align:left}
  table.tabla td.num{text-align:right}
  table.tabla td::before{
    content:attr(data-rot);color:var(--tenue);font-size:12.5px;font-weight:600;
    flex:none;
  }
}

/* ==========================================================================
   7) El portal del cliente
   ========================================================================== */
.portal{max-width:660px;margin:0 auto;padding:0 20px 80px}
.portal-cabecera{
  background:var(--papel);border-bottom:1px solid var(--linea);
  padding:26px 20px 22px;margin-bottom:26px;
}
.portal-cabecera .adentro{max-width:660px;margin:0 auto}
.portal-cabecera h1{font-size:20px;margin-bottom:5px}
.portal-cabecera .pais{
  font-size:11px;font-weight:650;letter-spacing:.16em;color:var(--azul);
  text-transform:uppercase;margin-bottom:12px;
}
.portal-cabecera .dice{color:var(--tinta2);font-size:14.5px;margin:0}
.portal-datos{
  display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--linea2);
}
.portal-datos div{font-size:13px;color:var(--tenue)}
.portal-datos b{display:block;color:var(--tinta);font-weight:650;font-size:14px}

/* La barra de avance. Los pasos ya hechos se pueden tocar para volver. */
.avance{margin-bottom:24px}
.avance .barra{
  height:4px;background:var(--linea);border-radius:4px;overflow:hidden;
  margin-bottom:12px;
}
.avance .barra i{
  display:block;height:100%;background:var(--azul);border-radius:4px;
  transition:width .35s ease;
}
.avance .cuenta{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;color:var(--tenue);
}
.avance .cuenta b{color:var(--tinta);font-weight:650;font-size:14px}

.pasos{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pasos a,.pasos span{
  font-size:12px;padding:4px 10px;border-radius:20px;text-decoration:none;
  color:var(--tenue);background:var(--papel2);white-space:nowrap;
}
.pasos a:hover{background:var(--azul-suave);color:var(--azul)}
.pasos .aqui{background:var(--azul);color:#fff;font-weight:600}
.pasos .hecho{color:var(--verde);background:var(--verde-f)}

/* «Guardado hace unos segundos» */
.guardado{
  font-size:12.5px;color:var(--tenue);display:flex;align-items:center;gap:7px;
  min-height:20px;
}
.guardado.activo{color:var(--verde)}
.guardado .punto{
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}

/* ==========================================================================
   8) Documentos — la lista con estado
   ========================================================================== */
.doc{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--linea2);
}
.doc:last-child{border-bottom:0}
.doc .marca-doc{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;
  place-items:center;background:var(--papel2);color:var(--tenue);
  font-size:11px;font-weight:700;
}
.doc.cargado .marca-doc{background:var(--verde-f);color:var(--verde)}
.doc .quees{flex:1;min-width:0}
.doc .quees b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
/* El «>» no sobra: sin él esta regla también agarra el asterisco de
   «obligatorio» que va DENTRO del nombre, y lo manda a su propio renglón. */
.doc .quees > span{
  display:block;font-size:12.5px;color:var(--tenue);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.doc .quees b .req{color:var(--rojo);font-weight:600}
/* El punto del documento pendiente se dibuja, no se escribe: el carácter «·»
   se apoya en la línea base y queda pegado al fondo del círculo. */
.doc .marca-doc.pendiente{font-size:0}
.doc .marca-doc.pendiente::after{
  content:'';width:7px;height:7px;border-radius:50%;background:#C2CED7;display:block;
}
.doc .acciones{display:flex;gap:6px;flex:none}
@media(max-width:560px){
  .doc{flex-wrap:wrap}
  .doc .acciones{width:100%;padding-left:48px}
}

/* ==========================================================================
   9) Avisos
   ========================================================================== */
.aviso{
  border-radius:var(--radio);padding:15px 18px;margin-bottom:18px;
  font-size:14px;line-height:1.5;border:1px solid;
}
.aviso b{display:block;margin-bottom:4px;font-weight:650}
.aviso.info    {background:var(--azul-suave);border-color:#CDDFE9;color:var(--azul)}
.aviso.atencion{background:var(--ambar-f); border-color:#EBD7AE;color:var(--ambar)}
.aviso.bien    {background:var(--verde-f);  border-color:#C6E2D3;color:var(--verde)}
.aviso.mal     {background:var(--rojo-f);   border-color:#EBCCC7;color:var(--rojo)}
.aviso ul{margin:8px 0 0;padding-left:20px}
.aviso li{margin-bottom:4px}

/* ==========================================================================
   10) Cuando no hay nada, y cuando está cargando
   ========================================================================== */
.vacio{
  text-align:center;padding:56px 24px;color:var(--tenue);
}
.vacio .dibujo{
  width:44px;height:44px;border-radius:12px;background:var(--papel2);
  margin:0 auto 16px;display:grid;place-items:center;color:#B4C2CC;
}
.vacio b{display:block;color:var(--tinta);font-size:15.5px;margin-bottom:6px;font-weight:650}
.vacio p{max-width:34ch;margin:0 auto 18px;font-size:14px}

.cargando{
  display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:gira .7s linear infinite;vertical-align:-2px;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* Quien tiene mareo con el movimiento apaga las animaciones en su sistema, y
   el sistema tiene que respetarlo. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ==========================================================================
   11) El panel interno
   ========================================================================== */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100dvh}
.lateral{
  background:#0C1A24;color:#93A6B4;padding:18px 12px;
  display:flex;flex-direction:column;gap:22px;
}
.lateral .marca{justify-content:flex-start;margin:0 0 0 6px}
.lateral .marca b{color:#fff}
.lateral .marca span{color:#6E8494}
.menu{display:flex;flex-direction:column;gap:2px}
.menu a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--radio-s);color:#93A6B4;text-decoration:none;
  font-size:14px;font-weight:500;
}
.menu a:hover{background:rgba(255,255,255,.06);color:#DCE6EC}
.menu a.aqui{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.menu .pastilla{
  margin-left:auto;background:rgba(255,255,255,.12);color:#DCE6EC;
  font-size:11.5px;font-weight:650;padding:1px 8px;border-radius:20px;
}
.lateral .abajo{margin-top:auto;font-size:12.5px;padding:0 12px}
.lateral .abajo b{color:#DCE6EC;display:block;font-size:13.5px;font-weight:600}
.lateral .abajo a{color:#7A8FA0}

main{padding:26px 28px 80px;max-width:1180px}
.encabezado{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:22px;
}
.encabezado .dice{color:var(--tenue);font-size:14px;margin:5px 0 0}

.filtros{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
}
.filtros select,.filtros input{
  padding:8px 12px;border:1px solid var(--linea);border-radius:var(--radio-s);
  font-size:13.5px;font-family:inherit;background:var(--papel);color:var(--tinta);
}
.filtros input[type=search]{min-width:230px}
.filtros select:focus,.filtros input:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave);
}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{
    flex-direction:row;align-items:center;gap:14px;padding:12px 14px;
    overflow-x:auto;
  }
  .lateral .marca{margin:0}
  .menu{flex-direction:row;gap:4px}
  .lateral .abajo{display:none}
  main{padding:18px 16px 90px}
}