/* ==============================================================================
   TOTALISYS COLLEGE — assets/css/style.css
   ------------------------------------------------------------------------------
   Sistema de diseño compartido por el sitio público y el panel admin.
   Paleta derivada directamente del logo (azul -> verde con nodo central de
   verificación): esto no es una paleta genérica, es la identidad ya existente
   de la marca, formalizada en variables.
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* --- Color: extraído del logo (azul profundo -> verde menta) --- */
    --tc-navy:      #0f2848;   /* base oscura, hero, footer */
    --tc-blue:       #1a437c;   /* azul de marca, primario */
    --tc-blue-soft:  #2b5a9e;
    --tc-teal:       #258c88;   /* punto medio del degradado del logo */
    --tc-mint:       #5bbf9c;   /* acento, CTA, "verificado" */
    --tc-mint-soft:  #dff3ea;
    --tc-ink:        #101820;   /* texto principal */
    --tc-ink-soft:   #4a5568;   /* texto secundario */
    --tc-paper:      #f6f9f8;   /* fondo general, blanco frío (no crema) */
    --tc-paper-alt:  #eef4f2;
    --tc-line:       #dbe6e3;
    --tc-white:      #ffffff;

    --tc-gradient: linear-gradient(135deg, var(--tc-blue) 0%, var(--tc-teal) 55%, var(--tc-mint) 100%);

    /* --- Tipografía --- */
    --tc-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --tc-font-body:    'IBM Plex Sans', 'Segoe UI', sans-serif;
    --tc-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* --- Espaciado / radios --- */
    --tc-radius: 14px;
    --tc-radius-sm: 8px;
    --tc-shadow: 0 12px 32px -12px rgba(15, 40, 72, 0.18);
    --tc-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
    margin: 0;
    font-family: var(--tc-font-body);
    color: var(--tc-ink);
    background: var(--tc-paper);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--tc-font-display);
    color: var(--tc-navy);
    line-height: 1.15;
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; color: var(--tc-ink-soft); }

a { color: var(--tc-blue); }

code, .tc-mono { font-family: var(--tc-font-mono); }

img { max-width: 100%; display: block; }

.tc-container { max-width: var(--tc-max); margin: 0 auto; padding: 0 24px; }

/* Foco visible para navegación por teclado — nunca lo quitamos, solo lo estilizamos. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--tc-mint);
    outline-offset: 2px;
}

/* --- Botones --- */
.tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tc-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tc-btn-primary { background: var(--tc-gradient); color: var(--tc-white); box-shadow: 0 8px 20px -8px rgba(37, 140, 136, 0.55); }
.tc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(37, 140, 136, 0.6); }
.tc-btn-ghost { background: transparent; border-color: var(--tc-line); color: var(--tc-navy); }
.tc-btn-ghost:hover { border-color: var(--tc-blue); }
.tc-btn-block { width: 100%; justify-content: center; }

/* --- Badges de estado (compartidos con el panel admin) --- */
.tc-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; font-family: var(--tc-font-mono); }
.tc-badge-ok     { background: var(--tc-mint-soft); color: #146c4f; }
.tc-badge-warn   { background: #fdf1d8; color: #8a5a00; }
.tc-badge-danger { background: #fde3e1; color: #a3271b; }

.tc-muted { color: var(--tc-ink-soft); }