/* public/assets/css/base.css
   Fundamentos compartidos por toda la app: fuente, variables de diseño
   (design tokens), reset, tipografia base y utilidades genericas. Cada
   pantalla/componente (cabecera, footer, paneles de formulario, toasts,
   nav de secciones...) tiene su propio archivo en css/components/ o
   css/pages/ y solo depende de las variables definidas aqui. */


/*FUENTES*/  

@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-ExtraLightItalic.ttf') format('truetype');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family:'titillium';
	src:url('../fonts/titillium/TitilliumWeb-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}


:root {
    /* Distancias áureas basadas en una unidad base de 8px */
    --app-space-xs: 5px;   /* 8 / 1.618 */
    --app-space-sm: 8px;   /* Unidad base */
    --app-space-md: 13px;  /* 8 * 1.618 */
    --app-space-lg: 21px;  /* 13 * 1.618 */
    --app-space-xl: 34px;  /* 21 * 1.618 */
    --app-space-xxl: 55px; /* 34 * 1.618 */

    /* Escala tipografica fluida (ver _docs_ia/06_ESTILO_FRONT.md): SIEMPRE
       clamp(), nunca un font-size en px suelto en ningun componente/pagina.
       Cada paso interpola entre ~360px de viewport (movil) y los ~1600px
       de --app-container-max (escritorio de referencia): el valor MAXIMO
       de cada clamp() reproduce el px que ya se usaba en escritorio antes
       de esta escala, asi que en monitores normales el tamaño no cambia,
       solo se añade una transicion suave por debajo. Equivalencia
       aproximada con los px sueltos que sustituye en el resto de la app:
         2xs ~11-12px | xs ~11-13px | sm ~12-14px | md ~13-15px
         lg  ~16-19px | xl ~17-22px | 2xl ~20-26px (h1) */
    --app-text-2xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
    --app-text-xs: clamp(0.6875rem, 0.65rem + 0.16vw, 0.8125rem);
    --app-text-sm: clamp(0.75rem, 0.71rem + 0.16vw, 0.875rem);
    --app-text-md: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
    --app-text-lg: clamp(1rem, 0.95rem + 0.24vw, 1.1875rem);
    --app-text-xl: clamp(1.0625rem, 0.97rem + 0.4vw, 1.375rem);
    --app-text-2xl: clamp(1.25rem, 1.14rem + 0.48vw, 1.625rem);

    /* Texto sobre fondos de marca (degradados/botones): unico punto para
       no volver a hardcodear "#fff"/"color:#fff" sueltos por los
       componentes (ver 06_ESTILO_FRONT.md: "si el token no existe, no
       existe el estilo"). */
    --app-on-primary: #ffffff;
    --app-on-primary-rgb: 255, 255, 255;

    --app-bg: #f4f7fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-border: #dbe3ef;
    --app-border-soft: rgba(148, 163, 184, 0.24);

    --app-text: #0f172a;
    --app-text-soft: #64748b;
    --app-text-muted: #94a3b8;

    /* Azul corporativo por defecto. Se sobrescribe en el
       <head> del layout con la gama calculada a partir del color_principal
       elegido por el usuario (ver App\src\Utils\Color::paleta()). */
    --app-primary: #0076A5;
    --app-primary-rgb: 0, 118, 165;
    --app-primary-dark: #004d6b;
    --app-primary-dark-rgb: 0, 77, 107;
    --app-tono-20: #3391b7;
    --app-tono-50: #80bbd2;
    --app-tono-75: #bfdde9;
    --app-tono-75-rgb: 191, 221, 233;

    /* ===== Colores de alertas/toasts (unico punto para cambiarlos en toda la app) =====
       --app-info esta ligado a la personalizacion (var(--app-primary)) a proposito:
       los avisos "informativos" deben verse del color de marca de cada usuario.
       success/danger/warning son semanticos y se mantienen fijos independientemente
       del color_principal elegido. */
    --app-success: #9bd4b0;
    --app-success-soft: #ecfdf5;
    --app-danger: #dc3545;
    --app-danger-soft: #fff1f2;
    --app-warning: #ebb87e;
    --app-warning-soft: #fffbeb;
    --app-info: var(--app-primary);
    --app-info-soft: rgba(var(--app-primary-rgb), 0.12);

    --app-radius-xs: 8px;
    --app-radius-sm: 12px;
    --app-radius-md: 16px;
    --app-radius-lg: 22px;
    --app-radius-xl: 28px;
    --app-radius-xxl: 55px;

    --app-shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
    --app-shadow-card: 0 24px 70px rgba(15, 23, 42, 0.12);
    --app-gradient: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 55%, var(--app-tono-50) 100%);

    --app-header-height: 64px;
    --app-container-max: 1600px;

    --app-escala-compacta: 1;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

/* Cualquier .app-button (u otro elemento) que fije su propio "display"
   (p.ej. .app-button { display: inline-flex }, panel-form.css) gana en
   cascada al [hidden] { display: none } del navegador: mismo origen
   "author" que el resto de estilos de la app, pero declarado despues, asi
   que un boton con el atributo hidden seguia viendose (p.ej. "Eliminar"
   en el modal de Nuevo evento del Calendario). Esta regla reafirma
   [hidden] con la misma especificidad pero al final de base.css, que es
   lo primero que carga toda pantalla (ver 02_ARQUITECTURA.md), asi que
   siempre gana sobre cualquier display fijado despues por un componente. */
[hidden] { display: none !important; }

html {
    height: 100%;
    font-family: 'titillium', Arial, sans-serif;
    line-height: 1.2;
    color: var(--app-text);
}

/* El fondo de toda la app (paneles, Mi perfil, etc.) sigue la personalizacion:
   un resplandor suave del color_principal del usuario en vez de un gris fijo
   igual para todos. background-attachment:fixed ancla el degradado al
   viewport (no al alto real de la pagina), para que no se vea un corte/seam
   segun cuanto contenido haya en cada pantalla. */
body {
    /* calc(100vh / var(--app-escala-compacta)): fuera del rango compactado
       la variable vale 1 y esto equivale a 100vh de toda la vida; dentro
       del rango, compensa el "zoom" de mas abajo para que el body siga
       ocupando exactamente el alto visible real (ver la variable en :root). */
    min-height: calc(100vh / var(--app-escala-compacta));
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 0%, rgba(var(--app-primary-rgb), 0.10), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(var(--app-tono-75-rgb), 0.16), transparent 40%),
        var(--app-bg);
    background-attachment: fixed;
    color: var(--app-text);
    font-family: 'titillium', Arial, sans-serif;
    overflow-x: hidden;
    /* "Modo copiar" (ver App\src\Controllers\ModoCopiarController y
       public/assets/js/components/modo-copiar.js): bloqueo de seleccion de
       texto por defecto, revertido durante la sesion con el gesto oculto
       sobre el logo. No hace falta ninguna excepcion para input/textarea:
       el navegador ya excluye su contenido interno de esta herencia. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a { color: inherit; text-decoration: none; }
input, button, select, textarea { font-family: 'titillium', Arial, sans-serif; }
button { appearance: none; }

/* Foco en el color de marca (deriva de color_principal, personalizado por
   usuario via Color::paleta()) en vez del contorno negro/azul por defecto
   del navegador - mismo criterio en todos los campos de toda la app, sin
   tener que repetirlo por componente. Los botones ya tienen su propio
   estado :hover/:focus-visible con fondo propio (panel-form.css), asi que
   solo se excluyen aqui para no duplicar/chocar con ese estilo. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 0;
    border-color: var(--app-primary);
}

/* Requisito de accesibilidad de iOS (no configurable, no es un capricho de
   diseño): Safari hace zoom automático de todo el viewport al enfocar
   cualquier campo cuyo font-size calculado sea menor de 16px, y no hay
   forma de desactivar ese zoom sin bloquear el pellizco para ampliar de
   quien lo necesite (maximum-scale=1 en el meta viewport, que sí sería un
   problema real de accesibilidad). Los tokens --app-text-* son fluidos a
   propósito y caen por debajo de 16px en pantallas de móvil -así debe
   quedarse el resto del texto, con más densidad en pantallas pequeñas-,
   así que aquí se fuerza el mínimo SOLO en campos de formulario y SOLO en
   el rango de ancho de móvil (mismo breakpoint ya usado en todo este
   archivo, ver @media (min-width: 761px) más abajo), sin tocar los tokens
   compartidos con el resto de la interfaz ni el tamaño en tablet/escritorio.
   !important a propósito: cada componente (.app-chat-texto, .app-form-group
   input, .app-chat-filtro-input, .auth-form input...) fija su propio
   font-size con selector de clase, que gana en especificidad a un simple
   "input"/"textarea" aunque esta regla vaya después en cascada — esta
   garantía de accesibilidad no puede depender de perseguir la especificidad
   de cada componente por separado, uno a uno, con riesgo de dejarse alguno. */
@media (max-width: 760px) {
    input, select, textarea { font-size: 16px !important; }
}

.app-main { width: 100%; max-width: var(--app-container-max); margin: 0 auto; padding: var(--app-space-md) clamp(var(--app-space-lg), 2vw, var(--app-space-xl)); flex: 1; }
.app-section { display: grid; gap: var(--app-space-lg); }
/* "gap" de .app-section solo separa lo que hay DENTRO de una misma section
   (p.ej. .app-profile-grid y sus tarjetas); si una pantalla apila varias
   <section class="app-section"> como hermanas directas de .app-main (p.ej.
   chat/ajustes.php: la tarjeta principal + el bloque "Solo alpha" a pantalla
   completa debajo), no habia ningun margen entre ellas y quedaban pegadas.
   Mismo espaciado que ya usa "gap" para que se vea como una unica columna
   ritmica, no como un remiendo aparte. */
.app-main > .app-section + .app-section { margin-top: var(--app-space-lg); }
/* Mobile-first (06_ESTILO_FRONT.md): la base es una sola columna (movil);
   a partir de 761px se pasa a las dos columnas de escritorio. Mismo
   resultado visual que antes en cada ancho, solo cambia cual de las dos
   reglas es la base y cual vive dentro del @media. */
.app-hero { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 761px) {
    .app-hero { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); }
}
.app-kicker { margin: 0 0 var(--app-space-sm); color: var(--app-primary); font-size: var(--app-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Escala tipografica unica para toda la app: cualquier pantalla nueva debe
   usar h1/h2/h3 "a pelo" (sin font-size propio) para heredar este mismo
   tamaño, en vez de definir tamaños de titulo sueltos por pantalla. Los
   textos "hero" con un tamaño deliberadamente mayor (login, saludo del
   dashboard) usan su propia clase y no se ven afectados por esta regla.
   h1 ya usa --app-text-2xl (clamp fluido): ya no hace falta un ajuste de
   font-size aparte en el breakpoint movil, el propio token lo cubre. */
h1 { margin: 0 0 var(--app-space-sm); font-size: var(--app-text-2xl); line-height: 1.2; font-weight: 700; }
h2 { margin: 0 0 var(--app-space-sm); font-size: var(--app-text-xl); font-weight: 700; }
p { color: var(--app-text-soft); line-height: 1.55; }
.app-muted { color: var(--app-text-soft); }

.app-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--app-space-xs) var(--app-space-sm);
    border-radius: 999px;
    color: var(--app-primary-dark);
    font-size: var(--app-text-sm);
    font-weight: 700;
    background: rgba(var(--app-primary-rgb), 0.1);
    border: 1px solid rgba(var(--app-primary-rgb), 0.2);
    width: fit-content;
}

/* Alertas de sesion (base compartida; los toasts de components/toast.css
   reutilizan estos mismos colores para el borde/icono). */
.alert { border-radius: var(--app-radius-md); padding: var(--app-space-md) var(--app-space-md); margin-bottom: var(--app-space-md); font-weight: 700; text-align: left; }
.alert-error, .alert-danger { background: var(--app-danger-soft); color: #be123c; border: 1px solid #fecdd3; }
.alert-success { background: var(--app-success-soft); color: #047857; border: 1px solid #bbf7d0; }
.alert-warning { background: var(--app-warning-soft); color: #92400e; border: 1px solid #fde68a; }
.alert-info { background: var(--app-info-soft); color: var(--app-primary-dark); border: 1px solid rgba(var(--app-primary-rgb), 0.28); }

/* Monitores de sobremesa "pequeños" (por debajo de 1600px, por encima de
   tablet): toda la app se ve mas compacta, como si el navegador estuviera
   al 85% de zoom, pero SIN tocar el zoom real del navegador (se queda al
   100% para el usuario) ni tener que reescribir cada componente a mano.
   "zoom" (soportado en Chrome/Edge/Safari y Firefox recientes) escala el
   render completo -tipografia, paddings, iconos, la app entera- desde un
   unico punto, en vez de duplicar breakpoints por componente. Por debajo
   de los 900px ya entran los layouts moviles/tablet propios de cada
   componente (menus, tarjetas apiladas...), pensados para su tamaño real
   de pantalla, no para verse encogidos, asi que ahi no se aplica. */

/* Escritorio grande / 2K-4K: contenedor mas ancho para no dejar la app
   descentrada en pantallas muy grandes (incluidas TV inteligentes de
   8K/16K, que a nivel de CSS reportan un viewport equivalente a 4K por el
   escalado del sistema operativo/navegador). */
@media (min-width: 1921px) {
    :root { --app-container-max: 1800px; }
    html { font-size: 17px; }
}

@media (min-width: 2561px) {
    :root { --app-container-max: 2200px; }
    html { font-size: 18px; }
}

@media (min-width: 3841px) {
    :root { --app-container-max: 2600px; }
    html { font-size: 20px; }
}