/* ═══════════════════════════════════════════════════════════════════════════
   kyros-tokens.css — Identidad de marca KYROS aplicada a GymOne
   Fuente: KYROS_Documento_Maestro_Identidad_Marca_Consolidado.docx
           (versión consolidada 31-oct-2026, actualizada 03-nov-2026)
   Creado: 03-nov-2026 (Adrián)

   PALETA OFICIAL (cinco colores aprobados):
     Marfil        #F9F6F0   RGB 249·246·240
     Carbón        #292A28   RGB  41· 42· 40
     Verde salvia  #8FA18B   RGB 143·161·139   (secundario; acentos y apoyo)
     Beige/arena   #ECE5D7   RGB 236·229·215
     Terracota     #B36B4D   RGB 179·107· 77

   TIPOGRAFÍA:
     Red Hat Display Medium 500  → logotipo
     Red Hat Display             → titulares
     Inter                       → texto corrido

   REGLAS DEL MANUAL (respetadas):
     · No convertir los cinco colores en cinco bloques de igual peso.
     · No utilizar terracota (arcilla) como color dominante.
     · Probar siempre el color en pantalla y en impresión.
     · El logotipo NO se toca: proporciones, geometría, colores y espaciado
       de cada archivo se mantienen intactos.

   Este fichero SOLO define variables y una capa de adaptación ligera.
   No reescribe las hojas existentes: redefine sus tokens en un punto único.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta oficial ── */
  --ky-marfil:    #F9F6F0;
  --ky-carbons:   #292A28;
  --ky-salvia:    #8FA18B;
  --ky-beige:     #ECE5D7;
  --ky-terracota: #B36B4D;

  /* ── Derivados (permitidos: sombras y estados, no colores nuevos de marca) ── */
  --ky-salvia-dark:  #7A8C76;   /* hover del acento */
  --ky-salvia-soft:  #E4EAE1;   /* fondo tenue del acento */
  --ky-terra-soft:   #F3E4DC;   /* fondo tenue del terracota */
  --ky-linea:        #E2DCD1;   /* bordes: beige oscurecido, no gris genérico */
  --ky-linea-fuerte: #D3CABB;

  /* ── Roles semánticos ── */
  --ky-fondo:       var(--ky-marfil);
  --ky-superficie:  #FFFFFF;            /* tarjetas sobre marfil */
  --ky-superficie2: var(--ky-beige);    /* paneles y cabeceras de tabla */
  --ky-texto:       var(--ky-carbons);
  --ky-texto-suave: #5C5F5A;            /* gris cálido derivado del carbón */
  --ky-texto-tenue: #8A8D87;
  --ky-acento:      var(--ky-salvia);
  --ky-acento-txt:  #FFFFFF;
  --ky-aviso:       var(--ky-terracota);

  /* ── Tipografía ── */
  --ky-font-titulo: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ky-font-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ky-font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ═══ 1. Tokens de gm_ui.css (las vistas clonadas ya usan variables) ═══ */
.gmui {
  --card:       var(--ky-superficie);
  --cardb:      var(--ky-linea);
  --cardb2:     var(--ky-linea-fuerte);
  --text:       var(--ky-texto);
  --muted:      var(--ky-texto-suave);
  --faint:      var(--ky-texto-tenue);
  --accent:     var(--ky-salvia);
  --seg:        var(--ky-beige);
  --segA:       var(--ky-superficie);
  --input:      var(--ky-marfil);
  /* Estados: se conservan legibles sobre la paleta cálida. El terracota
     sustituye al rojo genérico; ámbar y verde se acercan a la salvia. */
  --red:        var(--ky-terracota);
  --green:      #5F7A5B;
  --amber:      #B08A4A;
  --blue:       #5B7B8C;
  --purple:     #7C6B7F;
  color: var(--ky-texto);
  font-family: var(--ky-font-titulo);
}

/* El cuerpo de texto usa Inter; los titulares se quedan en Red Hat Display. */
.gmui .page-title,
.gmui h1, .gmui h2, .gmui h3, .gmui h4, .gmui h5 {
  font-family: var(--ky-font-titulo);
  color: var(--ky-texto);
}
.gmui body, .gmui p, .gmui td, .gmui th, .gmui label, .gmui input,
.gmui select, .gmui textarea, .gmui .page-sub, .gmui .muted {
  font-family: var(--ky-font-texto);
}
/* Los números y contadores mantienen la monoespaciada (alineación de tablas). */
.gmui .cnt, .gmui code, .gmui .mono, .gmui pre {
  font-family: var(--ky-font-mono);
}

/* Fondo de la aplicación: marfil en lugar del gris frío. */
.gmui, .gmui .app, .gmui .main { background: var(--ky-fondo); }

/* Cabeceras de tabla sobre beige (superficie suave, no gris). */
.gmui thead th, .gmui .table th { background: var(--ky-superficie2); }

/* Botón de acción primario: verde salvia. */
.gmui .btn-primary, .gmui .btn-accent {
  background: var(--ky-acento);
  border-color: var(--ky-acento);
  color: var(--ky-acento-txt);
}
.gmui .btn-primary:hover, .gmui .btn-accent:hover {
  background: var(--ky-salvia-dark);
  border-color: var(--ky-salvia-dark);
}

/* ═══ 2. Tokens del panel clásico (dashboard.css / gm_shell / style) ═══ */
.gm-body, body.gm-body {
  background: var(--ky-fondo);
  color: var(--ky-texto);
  font-family: var(--ky-font-texto);
}

/* ═══ 3. Web pública (login y registro) ═══
   El body de estas páginas no lleva clase temática: se aplica a body liso. */
body {
  background: var(--ky-fondo);
  color: var(--ky-texto);
  font-family: var(--ky-font-texto);
}
.ky-public, body.ky-public {
  background: var(--ky-fondo);
  color: var(--ky-texto);
  font-family: var(--ky-font-texto);
}
.ky-public h1, .ky-public h2, .ky-public h3, .ky-public .login-title {
  font-family: var(--ky-font-titulo);
  color: var(--ky-texto);
}

/* ═══ 4. Nota de la dirección de diseño ═══
   La jerarquía visual sigue el manual: el marfil domina el fondo, el carbón
   lleva el texto, la salvia marca la acción y el beige separa superficies.
   El terracota queda para avisos puntuales — nunca como color dominante. */

/* ═══ 3b. Fondos de las pantallas de entrada (prioridad sobre login-register.css) ═══ */
#login, #register {
  background-color: var(--ky-fondo);
}
#login .card, #register .card,
#login .card-body, #register .card-body {
  background-color: var(--ky-superficie);
  color: var(--ky-texto);
}

/* ═══ 5. Panel clásico: Bootstrap 3 sobreescrito por la marca ═══
   dashboard.css declara body con !important; el botón azul de Bootstrap 3
   (btn-primary) y los enlaces grises se sustituyen por la salvia oficial. */
.btn-primary, .btn-primary:visited,
a.btn-primary, .btn-primary:active, .btn-primary.active {
  background-color: var(--ky-acento) !important;
  border-color: var(--ky-salvia-dark) !important;
  color: var(--ky-acento-txt) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ky-salvia-dark) !important;
  border-color: var(--ky-salvia-dark) !important;
  color: var(--ky-acento-txt) !important;
}
/* Enlaces: carbón con subrayado salvia al hover (legible sobre marfil) */
a { color: var(--ky-texto-suave); }
a:hover, a:focus { color: var(--ky-acento); }
.nav > li > a:hover, .nav > li > a:focus { background-color: var(--ky-beige); }
/* Tablas clásicas: cabecera beige, no gris */
.table > thead > tr > th { background-color: var(--ky-superficie2); color: var(--ky-texto); }
/* Badges/labels de éxito en verde cálido coherente con la paleta */
.label-success, .badge-success { background-color: #5F7A5B !important; }
.label-danger, .badge-danger { background-color: var(--ky-terracota) !important; }