/* ============================================================================
   estilos-base.css
   Sistema de diseño compartido por las 4 interfaces (mostrador, reparador,
   admin, público). Define SOLO variables y reseteo - cada interfaz arma su
   propio layout encima de estas variables, nunca las redefine localmente.
   ============================================================================ */

/* --- Tipografía: una sans utilitaria para UI + monoespaciada para códigos --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    --fuente-ui: 'Manrope', system-ui, sans-serif;
    --fuente-mono: 'JetBrains Mono', ui-monospace, monospace;

    --radio: 12px;
    --radio-chico: 8px;
    --sombra: 0 4px 14px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.08);

    /* Colores de estado (iguales en ambos temas, son "semáforos") */
    --estado-nuevo-bg: #E1EBFC;      --estado-nuevo-fg: #2952CC;
    --estado-espera-bg: #FDECC8;     --estado-espera-fg: #B4740E;
    --estado-aprobado-bg: #D8F5E9;   --estado-aprobado-fg: #0E9F6E;
    --estado-listo-bg: #E4F7D9;      --estado-listo-fg: #4C9A0F;
    --estado-alerta-bg: #FBE0E5;     --estado-alerta-fg: #D6335C;

    /* Acentos de color extra, para íconos, chips y variedad visual */
    --acento-indigo: #6C5DD3;
    --acento-azul: #3E8FF5;
    --acento-turquesa: #17C3B2;
    --acento-rosa: #F45B9E;
    --acento-naranja: #FF9F45;
}

/* --- Tema claro (default) --- */
:root, [data-tema="claro"] {
    --color-fondo: #F3F4FB;
    --color-superficie: #FFFFFF;
    --color-superficie-alt: #EDEFFA;
    --color-borde: #E2E4F1;

    --color-texto: #1B1D2A;
    --color-texto-secundario: #6E7191;

    --color-primario: #6C5DD3;      /* índigo vivo - identidad por defecto,
                                        se sobreescribe en runtime con el color del taller */
    --color-primario-fg: #FFFFFF;
    --color-acento-suave: #EDE9FC;
}

/* --- Tema oscuro --- */
[data-tema="oscuro"] {
    --color-fondo: #0D1224;
    --color-superficie: #161B33;
    --color-superficie-alt: #1E2444;
    --color-borde: #2B3260;

    --color-texto: #F1F1F9;
    --color-texto-secundario: #9295B8;

    --color-primario: #8B7CF0;
    --color-primario-fg: #10122A;
    --color-acento-suave: #2A2560;
}

/* --- Reseteo mínimo --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--fuente-ui);
    background: var(--color-fondo);
    color: var(--color-texto);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }

button {
    cursor: pointer;
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    border-radius: var(--radio-chico);
    padding: 8px 14px;
    transition: background .15s ease, border-color .15s ease;
}
button:hover { border-color: var(--color-primario); }
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}
/* Android/Chrome muestra por defecto un destello celeste al tocar cualquier
   elemento - no tiene que ver con el color del taller ni con ningún estado
   de la app, así que lo sacamos para que no se confunda con el resaltado
   real (que sí usa el color del taller). */
button, a { -webkit-tap-highlight-color: transparent; }

.btn-primario {
    background: var(--color-primario);
    color: var(--color-primario-fg);
    border-color: var(--color-primario);
    font-weight: 600;
}

input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radio-chico);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
}

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.codigo { font-family: var(--fuente-mono); letter-spacing: .02em; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radio-chico);
    font-size: 12px;
    font-weight: 600;
}
.badge-nuevo    { background: var(--estado-nuevo-bg);    color: var(--estado-nuevo-fg); }
.badge-espera   { background: var(--estado-espera-bg);   color: var(--estado-espera-fg); }
.badge-aprobado { background: var(--estado-aprobado-bg); color: var(--estado-aprobado-fg); }
.badge-listo    { background: var(--estado-listo-bg);    color: var(--estado-listo-fg); }
.badge-alerta   { background: var(--estado-alerta-bg);   color: var(--estado-alerta-fg); }
.badge-violeta  { background: var(--color-acento-suave); color: var(--acento-indigo); }
.badge-turquesa { background: #D7F5F2;                   color: var(--acento-turquesa); }

/* Respeta si el usuario pidió reducir animaciones en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}