/* ==========================================================================
   PACK DE MARCA - KARTING MINILANDIA (GALIENO SL)
   --------------------------------------------------------------------------
   Fuente unica de estilos para TODAS las herramientas internas y publicas
   del karting. Los colores son los mismos de la web nueva
   (recursos/tailwind.config.ts y recursos/app/globals.css) para que nada se
   desincronice.

   Se despliega en https://staff.kartingminilandia.com/marca.css y cada
   herramienta lo enlaza asi, ANTES de sus propios estilos:

       <link rel="stylesheet" href="/marca.css">

   Regla: una herramienta nunca redefine un color a mano. Usa las variables.
   Si falta un color o un componente, se añade AQUI y lo heredan todas.
   ========================================================================== */

:root {
    /* ---- Colores de marca (identicos a la web) ---- */
    --km-primario: #2563eb;
    --km-primario-oscuro: #1d4ed8;
    --km-primario-claro: #dbeafe;
    --km-secundario: #10b981;
    --km-secundario-claro: #d1fae5;
    --km-naranja: #f97316;
    --km-naranja-claro: #ffedd5;
    --km-amarillo: #fbbf24;
    --km-amarillo-claro: #fef3c7;
    --km-morado: #a855f7;
    --km-rosa: #ec4899;

    /* ---- Neutros ---- */
    --km-fondo: #f8fafc;
    --km-superficie: #ffffff;
    --km-superficie-2: #f1f5f9;
    --km-texto: #0f172a;
    --km-texto-suave: #64748b;
    --km-borde: #e2e8f0;
    --km-borde-fuerte: #cbd5e1;

    /* ---- Estados ---- */
    --km-ok: #059669;
    --km-ok-oscuro: #047857;      /* texto y relleno sobre claro: 5,48:1 AA */
    --km-aviso-oscuro: #92400e;
    --km-error-oscuro: #b91c1c;
    --km-ok-fondo: #ecfdf5;
    --km-aviso: #b45309;
    --km-aviso-fondo: #fffbeb;
    --km-error: #dc2626;
    --km-error-fondo: #fef2f2;

    /* ---- Tipografia ---- */
    --km-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --km-texto-xs: 0.75rem;
    --km-texto-sm: 0.875rem;
    --km-texto-base: 1rem;
    --km-texto-lg: 1.125rem;
    --km-texto-xl: 1.375rem;
    --km-texto-2xl: 1.75rem;

    /* ---- Medidas ---- */
    --km-radio: 10px;
    --km-radio-sm: 8px;
    --km-radio-lg: 16px;
    --km-esp-1: 0.25rem;
    --km-esp-2: 0.5rem;
    --km-esp-3: 0.75rem;
    --km-esp-4: 1rem;
    --km-esp-5: 1.5rem;
    --km-esp-6: 2rem;
    --km-tactil: 48px;          /* altura minima de cualquier control tactil */
    --km-ancho: 900px;          /* ancho maximo de contenido */

    /* ---- Elevacion (sutil, nunca dramatica) ---- */
    --km-sombra: 0 1px 2px rgba(15, 23, 42, 0.06);
    --km-sombra-media: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--km-fondo);
    color: var(--km-texto);
    font-family: var(--km-fuente);
    font-size: var(--km-texto-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--km-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: var(--km-texto-2xl); font-weight: 700; }
h2 { font-size: var(--km-texto-lg); font-weight: 650; }
h3 { font-size: var(--km-texto-base); font-weight: 650; }

.km-wrap {
    width: 100%;
    max-width: var(--km-ancho);
    margin: 0 auto;
    padding: 0 var(--km-esp-4) var(--km-esp-6);
}

.km-suave { color: var(--km-texto-suave); font-size: var(--km-texto-sm); }
.km-centro { text-align: center; }
.km-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   CABECERA DE APLICACION
   ========================================================================== */

.km-cabecera {
    background: var(--km-superficie);
    border-bottom: 1px solid var(--km-borde);
    position: sticky;
    top: 0;
    z-index: 20;
}
.km-cabecera-inner {
    max-width: var(--km-ancho);
    margin: 0 auto;
    padding: var(--km-esp-3) var(--km-esp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-esp-3);
}
.km-cabecera h1 { font-size: var(--km-texto-xl); }
.km-cabecera-marca {
    font-size: var(--km-texto-xs);
    color: var(--km-texto-suave);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Pestañas */
.km-tabs {
    display: flex;
    gap: var(--km-esp-1);
    overflow-x: auto;
    scrollbar-width: none;
    max-width: var(--km-ancho);
    margin: 0 auto;
    padding: 0 var(--km-esp-4);
}
.km-tabs::-webkit-scrollbar { display: none; }
.km-tabs a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--km-esp-3);
    font-size: var(--km-texto-sm);
    font-weight: 600;
    color: var(--km-texto-suave);
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.km-tabs a:hover { color: var(--km-texto); text-decoration: none; }
.km-tabs a.km-on { color: var(--km-primario); border-bottom-color: var(--km-primario); }

/* ==========================================================================
   TARJETAS
   ========================================================================== */

.km-card {
    background: var(--km-superficie);
    border: 1px solid var(--km-borde);
    border-radius: var(--km-radio);
    padding: var(--km-esp-4);
    margin-bottom: var(--km-esp-4);
    box-shadow: var(--km-sombra);
}
.km-card > h2 {
    margin-bottom: var(--km-esp-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-esp-2);
}
.km-card-plana { box-shadow: none; }

/* ==========================================================================
   BOTONES
   ========================================================================== */

.km-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--km-esp-2);
    min-height: var(--km-tactil);
    padding: 0 var(--km-esp-4);
    border-radius: var(--km-radio-sm);
    border: 1px solid var(--km-borde-fuerte);
    background: var(--km-superficie);
    color: var(--km-texto);
    font-family: inherit;
    font-size: var(--km-texto-base);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.km-btn:hover { background: var(--km-superficie-2); text-decoration: none; }
.km-btn:active { transform: translateY(1px); }
.km-btn:focus-visible { outline: 2px solid var(--km-primario); outline-offset: 2px; }
.km-btn:disabled { opacity: 0.5; cursor: default; }

.km-btn-primario { background: var(--km-primario); border-color: var(--km-primario); color: #fff; }
.km-btn-primario:hover { background: var(--km-primario-oscuro); border-color: var(--km-primario-oscuro); }
.km-btn-ok { background: var(--km-ok); border-color: var(--km-ok); color: #fff; }
.km-btn-ok:hover { background: #047857; border-color: #047857; }
.km-btn-error { background: var(--km-error); border-color: var(--km-error); color: #fff; }
.km-btn-error:hover { background: #b91c1c; border-color: #b91c1c; }
.km-btn-whatsapp { background: #25d366; border-color: #25d366; color: #06371a; }
.km-btn-whatsapp:hover { background: #1eb85a; border-color: #1eb85a; }
.km-btn-bloque { width: 100%; }
.km-btn-grande { min-height: 60px; font-size: var(--km-texto-lg); }

.km-acciones { display: flex; gap: var(--km-esp-2); flex-wrap: wrap; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.km-campo { display: block; margin-bottom: var(--km-esp-3); }
.km-campo > label,
label.km-label {
    display: block;
    font-size: var(--km-texto-sm);
    font-weight: 600;
    color: var(--km-texto-suave);
    margin-bottom: var(--km-esp-1);
}

input[type="text"], input[type="number"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="search"], input[type="tel"],
input[type="email"], input[type="file"], select, textarea {
    width: 100%;
    min-height: var(--km-tactil);
    padding: var(--km-esp-2) var(--km-esp-3);
    border: 1px solid var(--km-borde-fuerte);
    border-radius: var(--km-radio-sm);
    background: var(--km-superficie);
    color: var(--km-texto);
    font-family: inherit;
    font-size: var(--km-texto-base);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--km-primario);
    box-shadow: 0 0 0 3px var(--km-primario-claro);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

.km-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--km-esp-3); }
@media (max-width: 600px) { .km-grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   ETIQUETAS DE ESTADO
   ========================================================================== */

.km-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--km-esp-1);
    padding: 2px var(--km-esp-2);
    border-radius: 999px;
    font-size: var(--km-texto-xs);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.km-tag-ok { background: var(--km-ok-fondo); color: var(--km-ok); border-color: #a7f3d0; }
.km-tag-aviso { background: var(--km-aviso-fondo); color: var(--km-aviso); border-color: #fde68a; }
.km-tag-error { background: var(--km-error-fondo); color: var(--km-error); border-color: #fecaca; }
.km-tag-info { background: var(--km-primario-claro); color: var(--km-primario-oscuro); border-color: #bfdbfe; }
.km-tag-neutro { background: var(--km-superficie-2); color: var(--km-texto-suave); border-color: var(--km-borde); }

/* ==========================================================================
   LISTAS DE FILAS
   ========================================================================== */

.km-lista {
    border: 1px solid var(--km-borde);
    border-radius: var(--km-radio);
    overflow: hidden;
    background: var(--km-superficie);
}
.km-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-esp-3);
    padding: var(--km-esp-3) var(--km-esp-4);
    min-height: 56px;
    border-bottom: 1px solid var(--km-borde);
    text-decoration: none;
    color: inherit;
}
.km-fila:last-child { border-bottom: none; }
a.km-fila:hover { background: var(--km-superficie-2); text-decoration: none; }
.km-fila-info { min-width: 0; flex: 1; }
.km-fila-info strong { display: block; font-weight: 600; font-size: var(--km-texto-base); }
.km-fila-info span { display: block; color: var(--km-texto-suave); font-size: var(--km-texto-sm); }

/* ==========================================================================
   AVISOS
   ========================================================================== */

.km-aviso {
    display: flex;
    gap: var(--km-esp-3);
    align-items: flex-start;
    padding: var(--km-esp-3) var(--km-esp-4);
    border-radius: var(--km-radio-sm);
    border: 1px solid var(--km-borde);
    border-left: 4px solid var(--km-texto-suave);
    background: var(--km-superficie);
    font-size: var(--km-texto-sm);
    margin-bottom: var(--km-esp-4);
    color: var(--km-texto);
    text-decoration: none;
}
.km-aviso-ok { background: var(--km-ok-fondo); border-color: #a7f3d0; border-left-color: var(--km-ok); }
.km-aviso-atencion { background: var(--km-aviso-fondo); border-color: #fde68a; border-left-color: var(--km-amarillo); }
.km-aviso-error { background: var(--km-error-fondo); border-color: #fecaca; border-left-color: var(--km-error); }
.km-aviso-info { background: var(--km-primario-claro); border-color: #bfdbfe; border-left-color: var(--km-primario); }

/* ==========================================================================
   TABLAS
   ========================================================================== */

.km-tabla { width: 100%; border-collapse: collapse; font-size: var(--km-texto-sm); }
.km-tabla th, .km-tabla td {
    text-align: left;
    padding: var(--km-esp-2) var(--km-esp-3);
    border-bottom: 1px solid var(--km-borde);
    vertical-align: top;
}
.km-tabla th {
    font-size: var(--km-texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--km-texto-suave);
    font-weight: 700;
    background: var(--km-superficie-2);
    white-space: nowrap;
}
.km-tabla tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   CIFRAS DESTACADAS
   ========================================================================== */

.km-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--km-esp-3);
}
.km-kpi {
    text-align: center;
    padding: var(--km-esp-3);
    border: 1px solid var(--km-borde);
    border-radius: var(--km-radio-sm);
    background: var(--km-superficie);
}
.km-kpi-valor { font-size: var(--km-texto-2xl); font-weight: 700; line-height: 1.1; }
.km-kpi-etiqueta { font-size: var(--km-texto-xs); color: var(--km-texto-suave); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

/* ==========================================================================
   ESTADO VACIO
   ========================================================================== */

.km-vacio {
    text-align: center;
    padding: var(--km-esp-6) var(--km-esp-4);
    color: var(--km-texto-suave);
}
.km-vacio strong { display: block; color: var(--km-texto); font-size: var(--km-texto-lg); margin-bottom: var(--km-esp-1); }

/* ==========================================================================
   DETAILS / ACORDEON
   ========================================================================== */

details.km-desplegable { border-top: 1px solid var(--km-borde); padding-top: var(--km-esp-2); }
details.km-desplegable > summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--km-primario);
    font-size: var(--km-texto-sm);
    list-style: none;
}
details.km-desplegable > summary::-webkit-details-marker { display: none; }
details.km-desplegable > summary::before { content: "+"; margin-right: var(--km-esp-2); font-weight: 700; }
details.km-desplegable[open] > summary::before { content: "\2212"; }

/* ==========================================================================
   AVISO FLOTANTE (toast)
   ========================================================================== */

.km-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--km-esp-5) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(200%);
    opacity: 0;
    visibility: hidden;
    background: var(--km-texto);
    color: #fff;
    padding: var(--km-esp-3) var(--km-esp-4);
    border-radius: var(--km-radio);
    font-size: var(--km-texto-sm);
    font-weight: 600;
    box-shadow: var(--km-sombra-media);
    z-index: 100;
    max-width: min(90vw, 420px);
    text-align: center;
    /* visibility NO se interpola: si se mete en la transicion el aviso se
       queda oculto para siempre. Se cambia de golpe, con retardo solo al
       esconderse para que la animacion de salida se vea entera. */
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
    pointer-events: none;
}
.km-toast.km-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
}

/* ==========================================================================
   ESCRITORIO
   --------------------------------------------------------------------------
   El movil manda en el diseño base, pero en un ordenador hay que aprovechar
   el ancho y bajar la densidad: filas mas bajas, botones normales y menos
   scroll. Con raton no hacen falta 48px de altura tactil.
   ========================================================================== */

@media (min-width: 900px) {
    :root {
        --km-ancho: 1240px;
        --km-tactil: 40px;
        --km-texto-base: 0.95rem;
        --km-texto-2xl: 1.5rem;
    }

    body { font-size: 0.95rem; }

    .km-wrap { padding: 0 var(--km-esp-5) var(--km-esp-6); }
    .km-cabecera-inner, .km-tabs { padding-left: var(--km-esp-5); padding-right: var(--km-esp-5); }

    .km-card { padding: var(--km-esp-4) var(--km-esp-5); margin-bottom: var(--km-esp-3); }

    .km-fila { min-height: 44px; padding: var(--km-esp-2) var(--km-esp-4); }
    .km-fila-info strong { font-size: 0.95rem; }

    .km-btn { min-height: 40px; padding: 0 var(--km-esp-3); font-size: 0.9rem; }
    .km-btn-grande { min-height: 48px; font-size: var(--km-texto-base); }
    /* Un boton a lo ancho de la pantalla en un monitor queda ridiculo. */
    .km-btn-bloque { width: auto; min-width: 220px; }
    .km-btn-bloque.km-btn-full { width: 100%; }

    input[type="text"], input[type="number"], input[type="password"], input[type="date"],
    input[type="datetime-local"], input[type="month"], input[type="search"], input[type="tel"],
    input[type="email"], select, textarea { min-height: 40px; padding: var(--km-esp-1) var(--km-esp-3); }
    textarea { min-height: 72px; }

    .km-tabla th, .km-tabla td { padding: var(--km-esp-1) var(--km-esp-3); }

    .km-kpi { padding: var(--km-esp-2) var(--km-esp-3); }
    .km-kpi-valor { font-size: 1.5rem; }

    /* Formularios y bloques en dos o tres columnas cuando hay sitio. */
    /* minmax(0, 1fr) y no 1fr: si no, una fila ancha ensancha su columna y
       saca la pagina de la pantalla. */
    .km-cols { display: grid; gap: var(--km-esp-4); align-items: start; }
    .km-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .km-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .km-cols-lateral { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* En movil cualquier rejilla de columnas cae a una sola. */
@media (max-width: 899px) {
    .km-cols-2, .km-cols-3, .km-cols-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--km-esp-3); }
}

@media (min-width: 1400px) {
    :root { --km-ancho: 1360px; }
}

/* ==========================================================================
   IMPRESION
   ========================================================================== */

@media print {
    body { background: #fff; }
    .km-cabecera, .km-tabs, .km-no-print, .km-toast { display: none !important; }
    .km-wrap { max-width: none; padding: 0; }
    .km-card { border-color: #ccc; box-shadow: none; break-inside: avoid; }
    .km-tabla th { background: #f2f2f2; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Un iPad apaisado mide 1024px y no es un raton. No debe recibir los 48->40px
   ni los 16->15.2px del bloque de escritorio: 15.2px hace que iOS Safari haga
   zoom al enfocar un campo y descoloque la pagina. */
@media (min-width: 900px) and (pointer: coarse) {
    :root { --km-tactil: 48px; --km-texto-base: 1rem; }
    body { font-size: 1rem; }
    .km-btn, .btn { min-height: 48px; }
    input[type="text"], input[type="number"], input[type="password"], input[type="date"],
    input[type="datetime-local"], input[type="month"], input[type="search"], input[type="tel"],
    input[type="email"], select, textarea { min-height: 48px; font-size: 1rem; }
}