/* 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=Manrope:wght@400;500;600;700&family=Poppins:wght@600;700;800&family=JetBrains+Mono:wght@500&display=swap";
@import url("Tokens.css");                 /* tokens del estilo (colores y fuentes) */

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

* { margin: 0; padding: 0; }

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

body {
    background: var(--color-fondo);
    color: var(--color-texto);
    font: 400 var(--letra-ui)/19px var(--fuente-ui);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-enlace); text-decoration: none; }
a:hover { color: var(--color-enlace-hover); 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(--color-titulo); }
h2 { font: 600 30px/38px var(--fuente-titulo); color: var(--color-titulo); }
h3 { font: 600 var(--letra-titulo)/30px var(--fuente-titulo); color: var(--color-titulo); }
.textoL { font: 500 var(--letra-amplia)/26px var(--fuente-ui); }
.textoM { font: 400 var(--letra-media)/23px var(--fuente-ui); }
.textoS { font: 400 var(--letra-ui)/19px var(--fuente-ui); }
.caption, .codigo {
    font: 500 var(--letra-chica)/16px var(--fuente-mono);
    text-transform: uppercase;
    color: var(--color-texto-suave);
}
.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(--color-superficie);
    color: var(--color-texto);
    border: 1.5px solid var(--color-borde-campo);
    border-radius: var(--radio);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-primario);
    box-shadow: var(--foco);
}
input.error, select.error, textarea.error { border-color: var(--color-error); }

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

/* Mensajes: vacio = oculto; .Error = error */
.Mensaje { display: none; padding: 8px 12px; border-radius: var(--radio-chico); font: 500 var(--letra-ui)/19px var(--fuente-ui); text-align: start; }
.Mensaje:not(:empty) { display: block; background: var(--color-fondo); color: var(--color-titulo); }
.Mensaje.Error:not(:empty) { background: var(--color-error-fondo); color: var(--color-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; }
}

/* El atributo hidden siempre oculta, aunque una regla de la vista ponga display (04/10/2026) */
[hidden] { display: none !important; }