/* ============================================================
   CRÉDITO2 · SISTEMA DE DISEÑO
   c2.css — v1.0 · agosto 2026
   ------------------------------------------------------------
   Archivo único compartido por todas las apps de Crédito2.
   Se enlaza así:
     <link rel="stylesheet" href="https://credito2-ui.netlify.app/v1/c2.css">
   Cambiar este archivo actualiza TODAS las apps a la vez.
   La carpeta /v1/ queda congelada. Los cambios que rompan
   compatibilidad salen en /v2/.
   ============================================================ */

@import url('c2-tokens.css');

/* Los tokens (colores, tipografías, espacios) viven en c2-tokens.css,
   que se importa arriba. Ese archivo es la única fuente de la identidad. */

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:var(--c2-texto);
  font-size:var(--c2-t-base);
  line-height:1.55;
  color:var(--c2-tinta);
  background:var(--c2-fondo);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--c2-display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 var(--c2-e3);
  text-transform:uppercase;
}
h1{ font-size:var(--c2-t-xl); }
h2{ font-size:var(--c2-t-lg); }
h3{ font-size:var(--c2-t-md); }
h4{ font-size:var(--c2-t-base); letter-spacing:.02em; }

p{ margin:0 0 var(--c2-e3); }
a{ color:var(--c2-rojo); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Cifras, cédulas, radicados y folios siempre alineados */
.c2-dato,.c2-tabla td,.c2-monto{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
.c2-dato{ font-family:var(--c2-dato); font-size:var(--c2-t-sm); letter-spacing:-.02em; }
.c2-monto{ font-weight:600; }

:focus-visible{
  outline:2px solid var(--c2-rojo);
  outline-offset:2px;
  border-radius:var(--c2-radio-s);
}

/* ============================================================
   3. ENCABEZADO Y LOGO
   ============================================================ */
.c2-header{
  background:var(--c2-negro);
  color:var(--c2-blanco);
  border-bottom:3px solid var(--c2-rojo);
  position:sticky; top:0; z-index:40;
}
.c2-header__int{
  width:var(--c2-max); max-width:var(--c2-max-px); margin:0 auto;
  display:flex; align-items:center; gap:var(--c2-e4);
  min-height:56px; padding:var(--c2-e2) 0;
}

/* Logo: tres variantes según el fondo.
   .c2-logo--claro  → fondo claro  (CREDITO negro + 2 rojo)
   .c2-logo--oscuro → fondo oscuro (CREDITO blanco + 2 rojo)
   .c2-logo--mixto  → fondo con imagen (CREDIT blanco, O negro, 2 rojo) */
.c2-logo{ display:block; height:26px; width:auto; }
.c2-logo--oscuro,.c2-logo--claro,.c2-logo--mixto{ height:26px; }

/* Respaldo tipográfico mientras se cargan los SVG definitivos */
.c2-marca{
  font-family:var(--c2-display); font-weight:700; font-size:1.3rem;
  letter-spacing:-.02em; text-transform:uppercase; line-height:1;
  display:inline-flex; align-items:baseline;
}
.c2-marca__2{ color:var(--c2-rojo); }
.c2-header .c2-marca{ color:var(--c2-blanco); }

.c2-header__app{
  font-family:var(--c2-display); font-size:var(--c2-t-sm);
  text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.62);
  padding-left:var(--c2-e4);
  border-left:1px solid rgba(255,255,255,.18);
}
.c2-header__fin{ margin-left:auto; display:flex; align-items:center; gap:var(--c2-e3); }
.c2-header__user{ font-size:var(--c2-t-sm); color:rgba(255,255,255,.72); }

/* ============================================================
   4. MENÚ — tira deslizable en celular
   ============================================================ */
.c2-nav{
  background:var(--c2-superficie);
  border-bottom:1px solid var(--c2-linea);
  position:sticky; top:56px; z-index:30;
}
.c2-nav__int{
  width:var(--c2-max); max-width:var(--c2-max-px); margin:0 auto;
  display:flex; gap:var(--c2-e1);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.c2-nav__int::-webkit-scrollbar{ display:none; }
.c2-nav__i{
  flex:0 0 auto;
  font-family:var(--c2-display); font-size:var(--c2-t-sm); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--c2-tinta-2); background:none; border:0; cursor:pointer;
  padding:0 var(--c2-e4); min-height:var(--c2-toque);
  border-bottom:3px solid transparent;
  white-space:nowrap; transition:color .15s, border-color .15s;
}
.c2-nav__i:hover{ color:var(--c2-tinta); text-decoration:none; }
.c2-nav__i[aria-current="page"],.c2-nav__i.activo{
  color:var(--c2-rojo); border-bottom-color:var(--c2-rojo);
}

/* ============================================================
   5. ESTRUCTURA
   ============================================================ */
.c2-main{
  width:var(--c2-max); max-width:var(--c2-max-px);
  margin:0 auto; padding:var(--c2-e5) 0 var(--c2-e7);
}
.c2-titulo{ display:flex; align-items:flex-start; gap:var(--c2-e4); flex-wrap:wrap; margin-bottom:var(--c2-e5); }
.c2-titulo h1{ margin:0; }
.c2-titulo__sub{ color:var(--c2-tinta-2); font-size:var(--c2-t-sm); margin:var(--c2-e1) 0 0; }
.c2-titulo__acc{ margin-left:auto; }

.c2-card{
  background:var(--c2-superficie);
  border:1px solid var(--c2-linea);
  border-radius:var(--c2-radio);
  box-shadow:var(--c2-sombra);
  padding:var(--c2-e5);
  margin-bottom:var(--c2-e4);
}
.c2-card__cab{
  display:flex; align-items:center; gap:var(--c2-e3);
  padding-bottom:var(--c2-e3); margin-bottom:var(--c2-e4);
  border-bottom:1px solid var(--c2-linea-2);
}
.c2-card__cab h3{ margin:0; }
.c2-card__cab .c2-acciones{ margin-left:auto; }

.c2-grid{ display:grid; gap:var(--c2-e4); }
.c2-grid--2{ grid-template-columns:repeat(2,1fr); }
.c2-grid--3{ grid-template-columns:repeat(3,1fr); }
.c2-grid--4{ grid-template-columns:repeat(4,1fr); }

/* ============================================================
   6. BOTONES — una sola línea, tonos claros, color por significado
   ============================================================ */
.c2-acciones{
  display:flex; gap:var(--c2-e2); flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none;
}
.c2-acciones::-webkit-scrollbar{ display:none; }

.c2-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--c2-e2);
  font-family:var(--c2-texto); font-size:var(--c2-t-sm); font-weight:600;
  min-height:var(--c2-toque); padding:0 var(--c2-e4);
  border-radius:var(--c2-radio-s); border:1px solid var(--c2-neutro-borde);
  background:var(--c2-neutro-bg); color:var(--c2-neutro);
  cursor:pointer; white-space:nowrap;
  transition:filter .15s, box-shadow .15s;
}
.c2-btn:hover{ filter:brightness(.97); text-decoration:none; }
.c2-btn:active{ filter:brightness(.94); }
.c2-btn[disabled]{ opacity:.45; cursor:not-allowed; }

.c2-btn--ok{  background:var(--c2-ok-bg);  color:var(--c2-ok);  border-color:var(--c2-ok-borde); }
.c2-btn--no{  background:var(--c2-no-bg);  color:var(--c2-no);  border-color:var(--c2-no-borde); }
.c2-btn--pen{ background:var(--c2-pendiente-bg); color:var(--c2-pendiente); border-color:var(--c2-pendiente-borde); }
.c2-btn--info{background:var(--c2-info-bg);color:var(--c2-info);border-color:var(--c2-info-borde); }

/* Acción principal: única con relleno sólido en toda la pantalla */
.c2-btn--marca{ background:var(--c2-rojo); color:#fff; border-color:var(--c2-rojo); }
.c2-btn--marca:hover{ background:var(--c2-rojo-hover); filter:none; }

.c2-btn--s{ min-height:34px; padding:0 var(--c2-e3); font-size:var(--c2-t-xs); }

/* ============================================================
   7. ESTADOS
   ============================================================ */
.c2-chip{
  display:inline-flex; align-items:center; gap:var(--c2-e1);
  font-size:var(--c2-t-xs); font-weight:600;
  padding:3px var(--c2-e2); border-radius:999px;
  border:1px solid var(--c2-neutro-borde);
  background:var(--c2-neutro-bg); color:var(--c2-neutro);
  white-space:nowrap;
}
.c2-chip--ok{  background:var(--c2-ok-bg);  color:var(--c2-ok);  border-color:var(--c2-ok-borde); }
.c2-chip--no{  background:var(--c2-no-bg);  color:var(--c2-no);  border-color:var(--c2-no-borde); }
.c2-chip--pen{ background:var(--c2-pendiente-bg); color:var(--c2-pendiente); border-color:var(--c2-pendiente-borde); }
.c2-chip--info{background:var(--c2-info-bg);color:var(--c2-info);border-color:var(--c2-info-borde); }

/* ============================================================
   8. FORMULARIOS — 16px para que iOS no haga zoom
   ============================================================ */
.c2-campo{ margin-bottom:var(--c2-e4); }
.c2-label{
  display:block; font-size:var(--c2-t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--c2-tinta-2); margin-bottom:var(--c2-e1);
}
.c2-input,.c2-select,.c2-textarea{
  width:100%; font-family:inherit;
  font-size:16px;                 /* NO bajar: iOS hace zoom bajo 16px */
  min-height:var(--c2-toque); padding:var(--c2-e2) var(--c2-e3);
  color:var(--c2-tinta); background:var(--c2-superficie);
  border:1px solid var(--c2-linea); border-radius:var(--c2-radio-s);
  transition:border-color .15s, box-shadow .15s;
}
.c2-input:focus,.c2-select:focus,.c2-textarea:focus{
  outline:none; border-color:var(--c2-rojo);
  box-shadow:0 0 0 3px rgba(196,12,12,.12);
}
.c2-textarea{ min-height:96px; resize:vertical; }
.c2-ayuda{ font-size:var(--c2-t-xs); color:var(--c2-tinta-3); margin-top:var(--c2-e1); }
.c2-campo--error .c2-input{ border-color:var(--c2-no); }
.c2-campo--error .c2-ayuda{ color:var(--c2-no); }

/* ============================================================
   9. TABLAS — se convierten en tarjetas en celular
   ============================================================ */
.c2-tabla-cont{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.c2-tabla{ width:100%; border-collapse:collapse; font-size:var(--c2-t-sm); }
.c2-tabla th{
  font-family:var(--c2-display); font-size:var(--c2-t-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--c2-tinta-2); text-align:left;
  padding:var(--c2-e2) var(--c2-e3);
  border-bottom:2px solid var(--c2-linea);
  white-space:nowrap;
}
.c2-tabla td{
  padding:var(--c2-e3); border-bottom:1px solid var(--c2-linea-2);
  vertical-align:middle;
}
.c2-tabla tbody tr:hover{ background:var(--c2-fondo); }
.c2-tabla .num{ text-align:right; }

/* ============================================================
   10. AVISOS
   ============================================================ */
.c2-aviso{
  display:flex; gap:var(--c2-e3);
  padding:var(--c2-e3) var(--c2-e4);
  border:1px solid var(--c2-info-borde); border-left-width:4px;
  border-radius:var(--c2-radio-s);
  background:var(--c2-info-bg); color:var(--c2-info);
  font-size:var(--c2-t-sm); margin-bottom:var(--c2-e4);
}
.c2-aviso--ok{  background:var(--c2-ok-bg);  color:var(--c2-ok);  border-color:var(--c2-ok-borde); }
.c2-aviso--no{  background:var(--c2-no-bg);  color:var(--c2-no);  border-color:var(--c2-no-borde); }
.c2-aviso--pen{ background:var(--c2-pendiente-bg); color:var(--c2-pendiente); border-color:var(--c2-pendiente-borde); }

.c2-toast{
  position:fixed; left:50%; bottom:var(--c2-e5); transform:translateX(-50%);
  z-index:100; max-width:min(92vw,420px);
  padding:var(--c2-e3) var(--c2-e4);
  background:var(--c2-negro); color:#fff;
  border-radius:var(--c2-radio); box-shadow:var(--c2-sombra-2);
  font-size:var(--c2-t-sm);
}

/* ============================================================
   11. MODAL
   ============================================================ */
.c2-modal{
  position:fixed; inset:0; z-index:90;
  background:rgba(20,20,20,.55);
  display:flex; align-items:center; justify-content:center;
  padding:var(--c2-e4);
}
.c2-modal__caja{
  background:var(--c2-superficie); border-radius:var(--c2-radio-l);
  box-shadow:var(--c2-sombra-2);
  width:100%; max-width:560px; max-height:88vh; overflow:auto;
  padding:var(--c2-e5);
}

/* ============================================================
   12. INDICADORES
   ============================================================ */
.c2-kpi{
  background:var(--c2-superficie); border:1px solid var(--c2-linea);
  border-radius:var(--c2-radio); padding:var(--c2-e4);
  border-top:3px solid var(--c2-linea);
}
.c2-kpi__rot{
  font-family:var(--c2-display); font-size:var(--c2-t-xs);
  text-transform:uppercase; letter-spacing:.08em; color:var(--c2-tinta-2);
  margin-bottom:var(--c2-e1);
}
.c2-kpi__val{
  font-family:var(--c2-display); font-size:var(--c2-t-xl); font-weight:700;
  line-height:1; font-variant-numeric:tabular-nums;
}
.c2-kpi__pie{ font-size:var(--c2-t-xs); color:var(--c2-tinta-3); margin-top:var(--c2-e1); }
.c2-kpi--ok{    border-top-color:var(--c2-ok); }
.c2-kpi--no{    border-top-color:var(--c2-no); }
.c2-kpi--pen{   border-top-color:var(--c2-pendiente); }
.c2-kpi--info{  border-top-color:var(--c2-info); }
.c2-kpi--marca{ border-top-color:var(--c2-rojo); }

/* Rejilla de indicadores: se mantiene en 2 columnas en celular
   para que no empujen el contenido fuera de la pantalla. */
.c2-grid--kpi{ grid-template-columns:repeat(4,1fr); }
.c2-grid--kpi .c2-kpi{ padding:var(--c2-e3); }

/* ============================================================
   13. VACÍO Y CARGA
   ============================================================ */
.c2-vacio{ text-align:center; padding:var(--c2-e7) var(--c2-e4); color:var(--c2-tinta-2); }
.c2-vacio h3{ color:var(--c2-tinta); }
.c2-carga{
  width:18px; height:18px; border:2px solid var(--c2-linea);
  border-top-color:var(--c2-rojo); border-radius:50%;
  animation:c2gira .7s linear infinite; display:inline-block;
}
@keyframes c2gira{ to{ transform:rotate(360deg); } }

/* ============================================================
   14. UTILIDADES
   ============================================================ */
.c2-fila{ display:flex; align-items:center; gap:var(--c2-e3); }
.c2-fin{ margin-left:auto; }
.c2-sm{ font-size:var(--c2-t-sm); }
.c2-xs{ font-size:var(--c2-t-xs); }
.c2-tenue{ color:var(--c2-tinta-2); }
.c2-oculto{ display:none !important; }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{ --c2-max:92%; }
  .c2-grid--4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  :root{ --c2-max:100%; }
  .c2-header__int,.c2-nav__int,.c2-main{ padding-left:var(--c2-e4); padding-right:var(--c2-e4); }
  .c2-header__app{ display:none; }
  .c2-main{ padding-top:var(--c2-e4); }

  /* Todo a una columna, salvo los indicadores */
  .c2-grid--2,.c2-grid--3,.c2-grid--4{ grid-template-columns:1fr; }
  .c2-grid--kpi{ grid-template-columns:repeat(2,1fr); gap:var(--c2-e2); }
  .c2-grid--kpi .c2-kpi__val{ font-size:1.5rem; }
  .c2-grid--kpi .c2-kpi__pie{ display:none; }

  .c2-card{ padding:var(--c2-e4); border-radius:var(--c2-radio-s); }
  h1{ font-size:1.5rem; }

  .c2-titulo__acc{ margin-left:0; width:100%; }

  /* Tabla → tarjetas apiladas. Cada td lleva data-rot="Encabezado" */
  .c2-tabla--movil thead{ display:none; }
  .c2-tabla--movil tr{
    display:block; border:1px solid var(--c2-linea);
    border-radius:var(--c2-radio-s); padding:var(--c2-e3);
    margin-bottom:var(--c2-e3); background:var(--c2-superficie);
  }
  .c2-tabla--movil td{
    display:flex; justify-content:space-between; gap:var(--c2-e3);
    padding:var(--c2-e1) 0; border:0; text-align:left;
  }
  .c2-tabla--movil td::before{
    content:attr(data-rot);
    font-size:var(--c2-t-xs); font-weight:600; text-transform:uppercase;
    letter-spacing:.05em; color:var(--c2-tinta-3); flex:0 0 auto;
  }
  .c2-tabla--movil .num{ text-align:right; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .c2-nav,.c2-acciones,.c2-toast{ display:none !important; }
  body{ background:#fff; }
  .c2-card{ box-shadow:none; break-inside:avoid; }
}