/*
 * Plataforma STEAM - capa de consistencia visual
 *
 * Jerarquia cromatica:
 * - superficies: blanco / grises muy claros
 * - texto: slate / azul muy oscuro
 * - turquesa STEAM: identidad, foco y pequeños acentos
 * - acciones principales: azul muy oscuro
 * - verde: reservado para estados exitosos
 */

:root {
    --steam-ui-text: #0f172a;
    --steam-ui-text-secondary: #334155;
    --steam-ui-muted: #64748b;
    --steam-ui-border: #e2e8f0;
    --steam-ui-border-strong: #cbd5e1;
    --steam-ui-surface: #ffffff;
    --steam-ui-surface-subtle: #f8fafc;
    --steam-ui-accent: #159ca2;
    --steam-ui-accent-dark: #0f7f84;
    --steam-ui-action: #0f172a;
    --steam-ui-action-hover: #334155;
    --steam-ui-radius: 14px;
    --steam-ui-control-radius: 9px;
    --steam-ui-shadow: 0 6px 20px rgba(15, 23, 42, .05);
    --steam-ui-focus: 0 0 0 3px rgba(21, 156, 162, .16);
}

/* --------------------------------------------------------------------------
   Controles y foco
   -------------------------------------------------------------------------- */
.auth-card,
.profile-card,
.profile-header-card,
.recommend-form,
.recommend-card,
.capsule-card,
.event-card,
.calendar-modal-content,
.member-card,
.faq-item {
    border-color: var(--steam-ui-border) !important;
}

.auth-card,
.profile-card,
.profile-header-card,
.recommend-form,
.recommend-card,
.calendar-modal-content {
    border-radius: var(--steam-ui-radius) !important;
    box-shadow: var(--steam-ui-shadow) !important;
}

.form-group input,
.form-group select,
.profile-form-group input,
.profile-email-confirm-form input,
.recommend-field input,
.recommend-field select,
.recommend-feedback select,
.participation-form input,
.participation-form textarea {
    border-color: var(--steam-ui-border-strong) !important;
    border-radius: var(--steam-ui-control-radius) !important;
    background: var(--steam-ui-surface) !important;
    color: #1e293b !important;
}

.form-group input:focus,
.form-group select:focus,
.profile-form-group input:focus,
.profile-email-confirm-form input:focus,
.recommend-field input:focus,
.recommend-field select:focus,
.recommend-feedback select:focus,
.participation-form input:focus,
.participation-form textarea:focus {
    outline: none !important;
    border-color: var(--steam-ui-accent) !important;
    box-shadow: var(--steam-ui-focus) !important;
}

/* --------------------------------------------------------------------------
   Autenticacion
   -------------------------------------------------------------------------- */
.auth-tab-btn.active {
    color: var(--steam-ui-accent-dark) !important;
    border-bottom-color: var(--steam-ui-accent) !important;
    background: var(--steam-ui-surface) !important;
}

.btn-auth-submit {
    background: var(--steam-ui-action) !important;
    color: #fff !important;
    border-radius: var(--steam-ui-control-radius) !important;
}

.btn-auth-submit:hover {
    background: var(--steam-ui-action-hover) !important;
}

/* --------------------------------------------------------------------------
   Perfil
   -------------------------------------------------------------------------- */
.profile-btn.primary,
.profile-btn.secondary {
    background: var(--steam-ui-action) !important;
    color: #fff !important;
    border-radius: var(--steam-ui-control-radius) !important;
}

.profile-btn.primary:hover,
.profile-btn.secondary:hover {
    background: var(--steam-ui-action-hover) !important;
}

.profile-avatar {
    background: #eefafa !important;
    color: var(--steam-ui-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   Calendario
   -------------------------------------------------------------------------- */
.calendar-search-button {
    background: var(--steam-ui-action) !important;
    color: #fff !important;
    border-radius: var(--steam-ui-control-radius) !important;
}

.calendar-search-button:hover {
    background: var(--steam-ui-action-hover) !important;
}

.calendar-page .day-cell:focus-visible {
    outline-color: var(--steam-ui-accent) !important;
}

.calendar-page .day-cell.is-today .day-number {
    background: var(--steam-ui-action) !important;
}

.calendar-page .event-badge {
    background: #eaf8f8 !important;
    color: #315e61 !important;
    border: 1px solid #d4eded !important;
}

.calendar-status,
.calendar-empty {
    background: var(--steam-ui-surface-subtle) !important;
    border: 1px solid var(--steam-ui-border) !important;
    color: var(--steam-ui-muted) !important;
}

/* --------------------------------------------------------------------------
   Capsulas y recomendador
   -------------------------------------------------------------------------- */
.participation-open,
.participation-submit,
.recommend-submit,
.recommend-feedback button {
    background: var(--steam-ui-action) !important;
    color: #fff !important;
    border-radius: var(--steam-ui-control-radius) !important;
}

.participation-open:hover,
.participation-submit:hover,
.recommend-submit:hover,
.recommend-feedback button:hover {
    background: var(--steam-ui-action-hover) !important;
}

.capsule-toggle {
    border-color: var(--steam-ui-border-strong) !important;
    color: var(--steam-ui-text-secondary) !important;
}

.capsule-toggle:hover {
    background: var(--steam-ui-surface-subtle) !important;
}

.capsule-id,
.capsule-stats span,
.capsule-resource-list span,
.recommend-count {
    background: #eefafa !important;
    color: #416669 !important;
}

/* --------------------------------------------------------------------------
   Inicio y navegacion de acciones
   -------------------------------------------------------------------------- */
.home-admin-link {
    background: var(--steam-ui-action) !important;
    color: #fff !important;
}

.home-admin-link:hover {
    background: var(--steam-ui-action-hover) !important;
}

/* El turquesa queda como acento, no como gran superficie de accion. */
.contact-kicker,
.member-role,
.faq-eyebrow,
.recomendador-eyebrow,
.capsules-kicker,
.participation-kicker,
.home-dashboard-eyebrow {
    color: var(--steam-ui-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   Mensajes: semantica consistente
   -------------------------------------------------------------------------- */
.auth-alert.success,
.profile-alert.success,
.recommend-alert-success,
.student-alert.ok,
.teacher-alert.ok,
.entidad-alert.success,
.capsula-alert.success {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}

.auth-alert.error,
.profile-alert.error,
.recommend-alert-error,
.student-alert.error,
.teacher-alert.error,
.entidad-alert.error,
.capsula-alert.error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

/* --------------------------------------------------------------------------
   Accesibilidad de teclado
   -------------------------------------------------------------------------- */
.btn-auth-submit:focus-visible,
.profile-btn:focus-visible,
.calendar-search-button:focus-visible,
.participation-open:focus-visible,
.participation-submit:focus-visible,
.recommend-submit:focus-visible,
.recommend-feedback button:focus-visible,
.home-admin-link:focus-visible {
    outline: 3px solid rgba(21, 156, 162, .32) !important;
    outline-offset: 2px !important;
}