/* assets/css/design-tokens.css
   Fuente única de la paleta, tipografía y componentes básicos del sistema SSETEC.
   Se enlaza ANTES de dashboard.css/login.css en cada vista; esas hojas ya no
   redeclaran su propio :root, solo consumen estas variables. Los valores no
   cambian frente a lo que ya existía (dashboard.css tenía el set más completo);
   este archivo solo evita que se declaren tres veces en archivos distintos. */

:root {
    /* Paleta de marca (coincide con el navy institucional del TEC) */
    --primary:       #1a3a52;
    --primary-light: #2c5f7d;
    --primary-dark:  #0f2537;
    --accent:        #3b82f6;
    --accent-light:  #60a5fa;
    --success:       #10b981;
    --warning:       #f59e0b;
    --danger:        #ef4444;
    --purple:        #8b5cf6;

    /* Fondos */
    --bg-body:       #f0f4f8;
    --bg-card:       #ffffff;
    --bg-sidebar:    #0f2537;
    --bg-header:     #1a3a52;

    /* Texto */
    --text-dark:     #1e293b;
    --text-muted:    #64748b;
    --text-light:    #94a3b8;

    /* Bordes */
    --border:        #e2e8f0;
    --border-light:  #f1f5f9;

    /* Sombras */
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:     0 20px 40px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);

    /* Transiciones y radios */
    --transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     16px;
    --radius-xl:     20px;

    /* Alias usados por el componente de alertas y formularios (mismos valores,
       nombres semánticos por estado) */
    --color-text-dark: var(--text-dark);
    --color-text-muted: var(--text-muted);
    --color-primary: var(--accent);
    --color-primary-dark: var(--primary);

    --color-success-bg: #d1fae5;
    --color-success-border: #6ee7b7;
    --color-success-accent: var(--success);
    --color-success-text: #065f46;

    --color-error-bg: #fee2e2;
    --color-error-border: #fca5a5;
    --color-error-accent: var(--danger);
    --color-error-text: #991b1b;

    --color-warning-bg: #fef3c7;
    --color-warning-border: #fde68a;
    --color-warning-accent: var(--warning);
    --color-warning-text: #92400e;

    --color-info-bg: #dbeafe;
    --color-info-border: #bfdbfe;
    --color-info-accent: var(--accent);
    --color-info-text: #1e40af;
}

/* Componente de alerta reutilizable (reemplaza los bloques de estilo inline
   repetidos en cada vista para mensajes de éxito/error/advertencia). */
.alert-mensaje {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert-mensaje i {
    font-size: 18px;
}

.alert-mensaje--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    border-left: 4px solid var(--color-success-accent);
    color: var(--color-success-text);
}

.alert-mensaje--error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    border-left: 4px solid var(--color-error-accent);
    color: var(--color-error-text);
}

.alert-mensaje--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    border-left: 4px solid var(--color-warning-accent);
    color: var(--color-warning-text);
}

.alert-mensaje--info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    border-left: 4px solid var(--color-info-accent);
    color: var(--color-info-text);
}

/* Formularios y botón de envío reutilizables (módulo Talleres y futuras vistas) */
.form-grp { margin-bottom: 16px; }
.form-grp label {
    display: block; font-size: 12px; font-weight: 700; color: var(--color-text-dark);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.form-grp input,
.form-grp select,
.form-grp textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--color-text-dark);
    background: #fff;
    transition: var(--transition, 0.2s ease);
}
.form-grp input:focus,
.form-grp select:focus,
.form-grp textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.form-grp small.hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--color-text-muted); font-weight: 400; text-transform: none; letter-spacing: normal; }

/* Oculta visualmente pero mantiene accesible a lectores de pantalla (labels de
   buscadores que ya comunican su propósito con un ícono + placeholder). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Botón icon-only accesible: siempre debe llevar aria-label en el marcado.
   Tamaño mínimo 36px (con el padding del contexto llega a los 44px táctiles). */
.icon-btn {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.icon-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-submit {
    background: linear-gradient(135deg, var(--color-primary-dark), #2c5f7d);
    color: white; border: none; border-radius: 9px; padding: 11px 24px;
    font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s;
}
.btn-submit:hover { opacity: .88; }