/* JFG Cloud ERP - estilo general.
   Tokens de paleta y tipografia, reset, escala tipografica y componentes comunes.
   Proporcion de color: 70% paleta principal - 20% neutros - hasta 10% Indigo ERP.
   Verde y Ambar son SOLO colores de estado. */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&family=JetBrains+Mono:wght@500&display=swap";

:root {
    /* Principal (heredada JFG Cloud Computing) */
    --jfg-azul-profundo: #1078d0;
    --jfg-azul-medio: #20a0d8;
    --jfg-celeste: #30b0e0;
    --jfg-azul-marino: #314f85;
    /* Acento de producto */
    --jfg-indigo: #5b5fee;
    --jfg-indigo-claro: #8b8dff;
    --jfg-lila: #edeafb;
    /* Neutros */
    --jfg-espacial: #0b1526;
    --jfg-pizarra: #5b6b85;
    --jfg-niebla: #eef3fa;
    --jfg-blanco: #fff;
    /* Estados */
    --jfg-verde: #22c55e;
    --jfg-ambar: #f5a623;
    --jfg-error: #c53030;
    --jfg-error-fondo: #ffe8e8;
    /* Tipografia */
    --fuente-titulo: "Poppins", sans-serif;
    --fuente-ui: "Inter", sans-serif;
    --fuente-mono: "JetBrains Mono", monospace;
    /* Forma */
    --radio: 8px;
    --foco: 0 0 0 3px rgb(16 120 208 / .25);
}

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

* { margin: 0; padding: 0; }

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

body {
    background: var(--jfg-niebla);
    color: var(--jfg-espacial);
    font: 400 13px/19px var(--fuente-ui);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--jfg-azul-profundo); text-decoration: none; }
a:hover { color: var(--jfg-azul-marino); text-decoration: underline; }
li, ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea, button { font: inherit; color: inherit; }

/* Escala tipografica */
h1 { font: 700 40px/48px var(--fuente-titulo); color: var(--jfg-azul-marino); }
h2 { font: 600 30px/38px var(--fuente-titulo); color: var(--jfg-azul-marino); }
h3 { font: 600 22px/30px var(--fuente-titulo); color: var(--jfg-azul-marino); }
.textoL { font: 500 17px/26px var(--fuente-ui); }
.textoM { font: 400 15px/23px var(--fuente-ui); }
.textoS { font: 400 13px/19px var(--fuente-ui); }
.caption, .codigo {
    font: 500 12px/16px var(--fuente-mono);
    text-transform: uppercase;
    color: var(--jfg-pizarra);
}
.codigo { text-transform: none; color: inherit; }

/* Campos de formulario */
/* :where() deja la especificidad en 0 para que cada vista pueda ajustar padding/alto sin pelear */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not([type=file]), select, textarea) {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: var(--jfg-blanco);
    color: var(--jfg-espacial);
    border: 1.5px solid var(--jfg-pizarra);
    border-radius: var(--radio);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--jfg-azul-profundo);
    box-shadow: var(--foco);
}
input.error, select.error, textarea.error { border-color: var(--jfg-error); }

/* Botones */
.boton, button[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--jfg-azul-profundo);
    color: var(--jfg-blanco);
    border: 1.5px solid var(--jfg-azul-profundo);
    border-radius: var(--radio);
    font: 600 15px/23px var(--fuente-ui);
    transition: background .15s, border-color .15s;
}
.boton:hover, button[type=submit]:hover { background: var(--jfg-azul-marino); border-color: var(--jfg-azul-marino); }
.boton:focus-visible, button:focus-visible { outline: none; box-shadow: var(--foco); }
.boton:disabled, button:disabled { opacity: .6; cursor: not-allowed; }
.botonSecundario {
    background: var(--jfg-blanco);
    color: var(--jfg-azul-marino);
    border-color: var(--jfg-azul-marino);
}
.botonSecundario:hover { background: var(--jfg-niebla); color: var(--jfg-azul-marino); }

/* Mensajes: vacio = oculto; .Error = error */
.Mensaje { display: none; padding: 8px 12px; border-radius: 6px; font: 500 13px/19px var(--fuente-ui); text-align: start; }
.Mensaje:not(:empty) { display: block; background: var(--jfg-niebla); color: var(--jfg-azul-marino); }
.Mensaje.Error:not(:empty) { background: var(--jfg-error-fondo); color: var(--jfg-error); }

/* Spinner de carga */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: jfg-giro .8s linear infinite;
}
@keyframes jfg-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .spinner { animation-duration: 2s; }
}