/*
 * tema.css - Estilos unificados del sitio TransmisionOK.
 *
 * Las variables --tok-* las inyecta includes/Theme.php en el <head>.
 * Este archivo NO define colores fijos: solo consume las variables,
 * asi que cuando el admin cambia el tema, todo el sitio cambia a la vez.
 */

:root {
    --tok-primary: #6d28d9;
    --tok-secondary: #06b6d4;
    --tok-bg: #0b1020;
    --tok-surface: #151b2e;
    --tok-text: #f3f4f6;
    --tok-accent: #f59e0b;
    --tok-radius: 14px;
    --tok-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- Base ---------- */
html, body {
    background: var(--tok-bg);
    color: var(--tok-text);
}

body {
    font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--tok-secondary);
}

a:hover {
    color: var(--tok-primary);
}

/* ---------- Contenedores ---------- */
.tok-card {
    background: var(--tok-surface);
    color: var(--tok-text);
    border-radius: var(--tok-radius);
    box-shadow: var(--tok-shadow);
    border: 1px solid color-mix(in srgb, var(--tok-text) 8%, transparent);
    padding: 1.25rem;
}

.tok-panel {
    background: color-mix(in srgb, var(--tok-surface) 88%, var(--tok-bg));
    border: 1px solid color-mix(in srgb, var(--tok-text) 10%, transparent);
    border-radius: var(--tok-radius);
}

/* ---------- Botones ---------- */
.tok-btn,
.btn-primary,
.sh-btn.register {
    background: linear-gradient(135deg, var(--tok-primary), var(--tok-secondary));
    color: #fff;
    border: 0;
    border-radius: var(--tok-radius);
    padding: .65rem 1.25rem;
    font-weight: 600;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tok-primary) 40%, transparent);
}

.tok-btn:hover,
.btn-primary:hover,
.sh-btn.register:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.tok-btn-ghost,
.btn-secondary,
.sh-btn.login {
    background: transparent;
    color: var(--tok-text);
    border: 1px solid color-mix(in srgb, var(--tok-text) 25%, transparent);
    border-radius: var(--tok-radius);
    padding: .65rem 1.25rem;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
}

.tok-btn-ghost:hover,
.btn-secondary:hover,
.sh-btn.login:hover {
    border-color: var(--tok-secondary);
    color: var(--tok-secondary);
}

/* ---------- Acentos ---------- */
.tok-badge,
.badge {
    background: color-mix(in srgb, var(--tok-accent) 20%, transparent);
    color: var(--tok-accent);
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 600;
}

.tok-title,
h1, h2, h3 {
    color: var(--tok-text);
    letter-spacing: -.01em;
}

.tok-subtitle,
.text-muted {
    color: color-mix(in srgb, var(--tok-text) 65%, transparent);
}

/* ---------- Tablas ---------- */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    color: var(--tok-secondary);
    font-weight: 600;
    text-align: left;
}

th, td {
    border-bottom: 1px solid color-mix(in srgb, var(--tok-text) 10%, transparent);
    padding: .6rem .5rem;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--tok-primary) 10%, transparent);
}

/* ---------- Formularios ---------- */
input, select, textarea {
    background: color-mix(in srgb, var(--tok-surface) 80%, var(--tok-bg));
    color: var(--tok-text);
    border: 1px solid color-mix(in srgb, var(--tok-text) 18%, transparent);
    border-radius: 10px;
    padding: .6rem .8rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--tok-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tok-primary) 25%, transparent);
}

/* ---------- Header / nav ---------- */
.sh-header {
    background: color-mix(in srgb, var(--tok-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--tok-text) 10%, transparent);
}

/* ---------- Utilidades ---------- */
.tok-divider {
    height: 1px;
    background: color-mix(in srgb, var(--tok-text) 12%, transparent);
    margin: 1rem 0;
}

.tok-gradient-text {
    background: linear-gradient(135deg, var(--tok-primary), var(--tok-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}