/* Mayoral — tokens de marca v2.0
   Un producto de Valen Tech */

:root {
  /* Paleta */
  --tinta:      #10161D;
  --tinta-2:    #1C2530;
  --maiz:       #FFC933;
  --maiz-hondo: #8A6100;
  --nube:       #F3F4F6;
  --haber:      #14804F;
  --debe:       #D43B2F;
  --grafito:    #5E6875;

  /* Roles */
  --bg:           var(--nube);
  --superficie:   #FFFFFF;
  --superficie-2: #EBEDF0;
  --texto:        var(--tinta);
  --texto-2:      var(--grafito);
  --borde:        #E3E6EA;
  --acento:       var(--maiz);        /* superficies: la plancha, chips activos */
  --acento-texto: var(--maiz-hondo);  /* texto y enlaces sobre fondo claro */
  --sobre-acento: var(--tinta);
  --sobre-tinta:  #F5F6F8;
  --boton-bg:     var(--tinta);
  --boton-hover:  var(--tinta-2);
  --boton-texto:  #FFFFFF;
  --nav-bg:       var(--tinta);

  /* Forma */
  --radio-s:     10px;
  --radio:       14px;
  --radio-card:  22px;
  --linea:       1px;
  --sombra-flotante: 0 12px 32px -12px rgba(16, 22, 29, 0.45);

  /* Tipografía: una familia, tres anchos */
  --fuente:        'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-ui:     var(--fuente);
  --ancho-titulo:  115%;
  --ancho-cifra:   72%;

  /* Escala */
  --t-cifra:     56px;
  --t-titulo:    30px;
  --t-subtitulo: 18px;
  --t-cuerpo:    16px;
  --t-nota:      13px;
  --t-etiqueta:  13px;

  color-scheme: light;
}

[data-tema="oscuro"] {
  --bg:           #0B0F14;
  --superficie:   #151B22;
  --superficie-2: #1F2730;
  --texto:        #F1F3F5;
  --texto-2:      #98A2AE;
  --borde:        #252E38;
  --haber:        #3FCB8B;
  --debe:         #FF6E61;
  --acento-texto: var(--maiz);
  --boton-bg:     #F1F3F5;
  --boton-hover:  #FFFFFF;
  --boton-texto:  var(--tinta);
  --nav-bg:       #1E2731;
  --sombra-flotante: 0 12px 32px -12px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
}

/* Títulos de pantalla: anchos y pesados */
h1, h2, .titulo-ancho {
  font-family: var(--fuente);
  font-stretch: var(--ancho-titulo);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* La cifra de plata: condensada, alta, pesada — se lee como un marcador */
.cifra-principal {
  font-family: var(--fuente);
  font-stretch: var(--ancho-cifra);
  font-weight: 800;
  font-size: var(--t-cifra);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: 500;
  color: var(--texto-2);
}

/* Todo monto lleva cifras tabulares: sin esto las cifras bailan al actualizarse */
.monto, .cifra-principal, td.monto {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.monto {
  font-weight: 600;
}

.monto--entra { color: var(--haber); }
.monto--sale  { color: var(--texto); }   /* salir es normal: el signo basta */
.monto--debe  { color: var(--debe); }    /* en contra: pasado de lo separado, saldo negativo */

/* El renglón: una fila de lista, separada por una línea fina */
.renglon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: var(--linea) solid var(--borde);
}

/* La plancha: la placa Maíz que lleva la cifra principal de la pantalla.
   Una por pantalla como máximo. */
.plancha {
  background: var(--maiz);
  color: var(--sobre-acento);
  border-radius: var(--radio-card);
}