/*
 * Base de la interfaz: fuente, normalización, tipografía, foco y primitivas de maquetación (change ui-brand-theme).
 * Solo tokens: ningún color ni tamaño suelto (lo verifica la prueba de uso de tokens).
 */

/* Mukta, alojada en la aplicación (wwwroot/fonts/mukta, licencia SIL OFL 1.1). Subconjunto latino. */
@font-face {
    font-family: Mukta;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/mukta/mukta-latin-300-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Mukta;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mukta/mukta-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Mukta;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/mukta/mukta-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Mukta;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/mukta/mukta-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Mukta;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/mukta/mukta-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Normalización ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--abhi-font-family);
    font-size: var(--abhi-font-size-body);
    line-height: var(--abhi-line-height-body);
    font-weight: var(--abhi-font-weight-regular);
    color: var(--abhi-color-text);
    background-color: var(--abhi-color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

img,
svg {
    vertical-align: middle;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* ---- Tipografía ---- */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--abhi-space-3);
    font-weight: var(--abhi-font-weight-semibold);
    color: var(--abhi-color-text);
}

h1 {
    font-size: var(--abhi-font-size-h1);
    line-height: var(--abhi-line-height-h1);
}

h2 {
    font-size: var(--abhi-font-size-h2);
    line-height: var(--abhi-line-height-h2);
}

h3,
h4 {
    font-size: var(--abhi-font-size-h3);
    line-height: var(--abhi-line-height-h3);
}

/* El título recibe el foco al navegar (FocusOnNavigate); no necesita anillo visible. */
h1:focus {
    outline: none;
}

p {
    margin: 0 0 var(--abhi-space-4);
}

small,
.text-small {
    font-size: var(--abhi-font-size-table);
    line-height: var(--abhi-line-height-table);
}

.text-muted {
    color: var(--abhi-color-text-muted);
}

.text-caption {
    font-size: var(--abhi-font-size-caption);
    line-height: var(--abhi-line-height-caption);
    color: var(--abhi-color-text-muted);
}

code {
    font-family: var(--abhi-font-family-mono);
    font-size: var(--abhi-font-size-table);
}

a {
    color: var(--abhi-color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

ul.plain,
ol.plain {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- Foco visible ---- */
:focus-visible {
    outline: var(--abhi-size-focus-ring) solid var(--abhi-color-focus);
    outline-offset: var(--abhi-size-focus-ring);
}

/* Solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Primer elemento enfocable de cada página */
.skip-link {
    position: absolute;
    top: var(--abhi-space-2);
    left: var(--abhi-space-2);
    z-index: 100;
    padding: var(--abhi-space-2) var(--abhi-space-4);
    border-radius: var(--abhi-radius-md);
    background-color: var(--abhi-color-accent);
    color: var(--abhi-color-on-accent);
    font-weight: var(--abhi-font-weight-semibold);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* ---- Primitivas de maquetación ---- */

/* Bloques apilados con separación uniforme */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--abhi-space-4);
}

.stack-sm {
    gap: var(--abhi-space-2);
}

.stack-lg {
    gap: var(--abhi-space-5);
}

/* Elementos en línea que se envuelven */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abhi-space-2);
}

/* Columnas que se acomodan solas al ancho disponible */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--abhi-space-4);
}

/* Tarjeta: superficie con borde, radio y sombra suave */
.card {
    background-color: var(--abhi-color-surface);
    border: 1px solid var(--abhi-color-border);
    border-radius: var(--abhi-radius-lg);
    box-shadow: var(--abhi-shadow-sm);
    padding: var(--abhi-space-5);
}

.card-flush {
    padding: 0;
    overflow: hidden;
}

/* Contenedor con desplazamiento horizontal propio (tablas anchas) */
.scroll-x {
    max-width: 100%;
    overflow-x: auto;
}

/* Cabecera de página: título, descripción y acciones */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--abhi-space-3);
    margin-bottom: var(--abhi-space-5);
}

.page-header h1 {
    margin: 0;
}

.page-header p {
    margin: var(--abhi-space-1) 0 0;
    color: var(--abhi-color-text-muted);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abhi-space-2);
}

/* ---- Campos nativos con el aspecto de Telerik (formularios estáticos: login, empresa, rol) ---- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--abhi-space-1);
}

.field-label {
    font-size: var(--abhi-font-size-label);
    line-height: var(--abhi-line-height-label);
    font-weight: var(--abhi-font-weight-semibold);
    color: var(--abhi-color-text);
}

.input {
    width: 100%;
    min-height: var(--abhi-size-touch);
    padding: var(--abhi-space-2) var(--abhi-space-3);
    border: 1px solid var(--abhi-color-border-strong);
    border-radius: var(--abhi-radius-md);
    background-color: var(--abhi-color-surface);
    color: var(--abhi-color-text);
    transition: border-color var(--abhi-duration-fast) var(--abhi-easing);
}

.input:hover {
    border-color: var(--abhi-color-text-muted);
}

.input:focus-visible {
    outline-offset: 0;
    border-color: var(--abhi-color-focus);
}

.input-sm {
    min-height: var(--abhi-size-control-sm);
    padding: var(--abhi-space-1) var(--abhi-space-2);
    font-size: var(--abhi-font-size-table);
}

select.input {
    width: auto;
    max-width: 100%;
}

/* ---- Formularios (docs/ui-guidelines.md, sección "Formularios") ---- */

/* Columna de campos con ancho de lectura cómodo */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--abhi-space-4);
    max-width: var(--abhi-size-form-max);
}

/* Campos cortos lado a lado en pantallas anchas; una columna en celular */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--abhi-space-4) var(--abhi-space-5);
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: var(--abhi-space-4);
    padding-top: var(--abhi-space-4);
    border-top: 1px solid var(--abhi-color-border);
}

.form-section > h2 {
    margin: 0;
    font-size: var(--abhi-font-size-h3);
    line-height: var(--abhi-line-height-h3);
}

/* Marca de obligatorio junto a la etiqueta; el campo lleva además aria-required="true" */
.field-required::after {
    content: " *";
    color: var(--abhi-color-danger);
}

.field-hint {
    font-size: var(--abhi-font-size-caption);
    line-height: var(--abhi-line-height-caption);
    color: var(--abhi-color-text-muted);
}

.form-legend {
    font-size: var(--abhi-font-size-caption);
    color: var(--abhi-color-text-muted);
}

/* Acciones al final: secundaria a la izquierda, primaria a la derecha; en celular ocupan todo el ancho */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abhi-space-2);
    justify-content: flex-end;
    padding-top: var(--abhi-space-4);
    border-top: 1px solid var(--abhi-color-border);
}

.form-actions > * {
    flex: 1 1 auto;
}

@media (min-width: 600px) {
    .form-actions > * {
        flex: none;
    }
}

.validation-message {
    color: var(--abhi-color-danger);
    font-size: var(--abhi-font-size-table);
}

.invalid {
    border-color: var(--abhi-color-danger);
}

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}