/*
 * Reset CSS Profesional — Especificidad Zero (v5.0)
 * ==================================================
 * v1-v4: Claude Sonnet 4.5 — 08 Octubre 2025
 * v5.0:  Claude Opus 4.6  — 20 Febrero 2026
 *
 * Que hace:
 *  - Borra los estilos "de fabrica" que cada navegador pone diferente
 *  - Usa :where() para especificidad 0 (facil de sobrescribir)
 *  - Respeta accesibilidad (movimiento reducido, alto contraste, teclado)
 *
 * :where() en 30 segundos:
 *  - Selector con especificidad SIEMPRE 0,0,0
 *  - Cualquier .clase lo gana sin pelear
 *  - :where(h1) { color: red } pierde contra h1 { color: blue }
 *
 * Cuando NO usar :where():
 *  - html, body — unicos, necesitan peso real
 *  - ::selection, :focus-visible — estados criticos que deben ganar
 *  - Utilidades con !important — deben ganar siempre
 *
 * Compatibilidad: Chrome 88+, Firefox 78+, Safari 14+, Edge 88+ (2021+)
 *
 * Flujo de carga: reset-pro > _globales.scss > componentes
 */

/* ==============================================
 * 1. VARIABLES GLOBALES
 * ==============================================
 * Variables CSS accesibles desde cualquier parte (incluso JavaScript).
 * Tu proyecto las sobrescribe con variables Sass en _globales.scss.
 * Estan aqui para que el reset funcione solo si es necesario.
 */
:root {
    --color-texto-principal: #050505;
    --color-fondo-principal: #ffffff;

    --fuente-principal: Helvetica, Arial, sans-serif;
    --fuente-codigo: 'Courier New', monospace;
    --altura-linea-base: 1.5;

    /*
     * NOTA SOBRE BREAKPOINTS:
     * Las CSS custom properties NO funcionan en @media queries.
     * @media (min-width: var(--bp-tablet)) { }  <-- esto NO funciona
     * Para breakpoints usa el mixin Sass: @include mq(t768) { }
     */
}

/* ==============================================
 * 2. PREFERENCIAS DEL USUARIO
 * ==============================================
 * El sistema operativo del usuario le dice al browser sus preferencias.
 * Nosotros escuchamos y nos adaptamos automaticamente.
 */

/* -- 2.1 Modo Oscuro -- */
@media (prefers-color-scheme: dark) {
    /* Solo ajusta seleccion de texto en dark mode.
     * Si implementas dark mode completo, aqui irian
     * los cambios de --color-texto y --color-fondo. */
    ::selection {
        background-color: var(--color-texto-principal);
        color: var(--color-fondo-principal);
    }
}

/* -- 2.2 Alto Contraste -- */
@media (prefers-contrast: more) {
    /* Para personas con baja vision: colores con maximo contraste.
     * OJO: estas variables SOLO existen dentro de este @media.
     * Fuera de aqui, un var(--color-enlace) da vacio. */
    :root {
        --color-texto-principal: #000000;
        --color-fondo-principal: #ffffff;

        --color-enlace: #0000ee;
        --color-alerta: #ee0000;
        --color-exito: #008000;

        --color-fondo-hover: #ffff00;
        --color-fondo-activo: #00ff00;
        --color-fondo-deshabilitado: #808080;

        --borde-enfasis: 2px solid var(--color-texto-principal);
        --outline-enfasis: 3px solid var(--color-enlace);
    }
}

/* -- 2.3 Movimiento Reducido -- */
@media (prefers-reduced-motion: reduce) {
    /*
     * Para personas con vertigo, epilepsia, TDAH o migranas.
     * Las animaciones les causan malestar fisico real.
     *
     * Se activa desde:
     *  Windows: Configuracion > Accesibilidad > Efectos visuales > OFF
     *  Mac: Preferencias > Accesibilidad > Reducir movimiento
     *  iPhone/Android: Ajustes > Accesibilidad > Reducir movimiento
     *
     * Desactiva: animaciones, transiciones, scroll suave
     * NO cambia: colores, tamanos, fuentes, diseno, imagenes
     */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================
 * 3. RESET UNIVERSAL
 * ==============================================
 * Todos los elementos empiezan desde cero.
 * Especificidad 0 con :where() — cualquier .clase gana.
 */
:where(*, *::before, *::after) {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* width/height incluyen padding y border */

    /* Quita el flash azul/gris al tocar en movil.
     * El proyecto usa :active custom para feedback tactil. */
    -webkit-tap-highlight-color: transparent;
}

/* ==============================================
 * 4. ELEMENTOS ESPECIFICOS
 * ==============================================
 */

/* -- 4.1 Multimedia -- */
:where(img, picture, video, iframe, figure) {
    max-width: 100%;  /* Nunca se desborda del contenedor */
    display: block;   /* Quita los ~4px fantasma debajo de imagenes inline */
    height: auto;     /* Mantiene la proporcion original */
    border: 0;
}

/* -- 4.2 Enlaces -- */
:where(a) {
    text-decoration: none; /* _globales.scss aplica underline con estilo custom */
    color: inherit;        /* Hereda color del padre, no el azul default */
}

/* -- 4.3 Listas -- */
:where(ul, ol) {
    padding: 0;
    list-style: none; /* Cada componente agrega sus marcadores custom */
}
  
/* -- 4.4 HTML y BODY -- */
/* Sin :where() — son elementos unicos, necesitan especificidad real */
html {
    font-size: 62.5%;
    /*
     * TRUCO REM: 62.5% de 16px (default del browser) = 10px
     * Ahora 1rem = 10px y los calculos son faciles:
     *   1.4rem = 14px | 1.6rem = 16px | 2.4rem = 24px | 3.2rem = 32px
     * El texto legible se recupera en body con font-size: 1.6rem
     */

    line-height: var(--altura-linea-base);

    /* Scroll suave, solo si el usuario no tiene movimiento reducido */
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

body {
    min-height: 100vh; /* Minimo toda la ventana — util para footers sticky */

    font-size: 1.6rem;
    /* Recupera 16px legibles despues del truco 62.5% en html.
     * Sin esto, todo el texto seria de 10px (ilegible). */

    font-family: var(--fuente-principal);
    color: var(--color-texto-principal);

    /* Suavizado de fuentes — texto mas nitido en Mac/Retina.
     * En Windows no tiene efecto visible. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -- 4.5 Reset Tipografico -- */
/* Todo hereda del papa. _globales.scss reconstruye la jerarquia. */
:where(h1, h2, h3, h4, h5, h6, p, span, a, blockquote, li) {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    color: inherit;
}

/* -- 4.6 Elementos Semanticos Inline -- */
/*
 * strong/b/em/i NO se resetean a "inherit" porque perderian su significado.
 * Un <strong> DEBE ser bold — indica importancia.
 * Un <em> DEBE ser italic — indica enfasis.
 * Si los reseteas, se ven igual que texto normal y eso rompe la semantica.
 */
:where(strong, b) {
    font-weight: bold;
}

:where(em, i) {
    font-style: italic;
}

:where(u) {
    text-decoration: underline;
}

/* -- 4.7 Blockquotes -- */
:where(blockquote, q) {
    quotes: none;
}

:where(blockquote::before, blockquote::after, q::before, q::after) {
    content: none;
}

/* -- 4.8 Seleccion de Texto -- */
/* Sin :where() — necesita prioridad para funcionar bien */
::selection {
    background-color: var(--color-texto-principal);
    color: var(--color-fondo-principal);
    text-shadow: none;
}

/* -- 4.9 Formularios -- */
:where(form, input, textarea, select, button, label) {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    appearance: none; /* Quita estilos nativos (bordes 3D, flechitas, etc).
                       * Checkboxes y radios se recuperan abajo. */
}

:where(textarea) {
    resize: vertical; /* Solo permite cambiar altura, no ancho — protege layouts */
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
    background: transparent;
    border: 0;           /* Quita el borde 3D feo nativo */
    cursor: pointer;
    text-align: inherit;
}

:where(fieldset) {
    min-width: 0; /* Sin esto, fieldset puede desbordar su contenedor */
}

:where(legend) {
    padding: 0;
}

/* -- 4.10 Codigo -- */
:where(code, pre, kbd, samp) {
    font-family: var(--fuente-codigo);
    font-size: 0.9em; /* em (no rem) para que escale relativo al texto donde esta */
}

/* -- 4.11 Focus y Teclado -- */
/* Sin :where() — accesibilidad necesita prioridad alta */
:focus-visible {
    /* Solo aparece con navegacion por teclado (Tab), no con mouse */
    outline: 2px solid var(--color-texto-principal);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    /* Clic con mouse = sin outline */
    outline: none;
}

/* -- 4.12 Tablas -- */
:where(table, tr, td) {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -- 4.13 SVGs -- */
:where(svg) {
    max-width: 100%;
    height: auto;
    fill: currentColor; /* Hereda color del texto — SVG en boton rojo se vuelve rojo solo */
    vertical-align: middle;
}

/* ==============================================
 * 5. UTILIDADES
 * ==============================================
 * Clases para usar directo en HTML.
 * Usan !important porque DEBEN ganar siempre.
 */

/* -- Ocultar Visualmente (Accesibilidad) -- */
.visually-hidden,
.sr-only {
    /* Invisible para los ojos, pero lectores de pantalla SI lo leen.
     * Ej: <span class="sr-only">Abrir menu</span> */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==============================================
 * 6. OVERRIDES — Excepciones al reset
 * ==============================================
 * Elementos que necesitan recuperar comportamiento nativo.
 * Usan especificidad real (no :where()) para ganarle al reset.
 */

/* -- Checkboxes y radios: recuperan apariencia nativa -- */
input[type="checkbox"],
input[type="radio"] {
    appearance: auto; /* Sin esto, appearance: none los deja invisibles */
    cursor: pointer;
}

/* -- Word-break: protege el layout de URLs largas -- */
/* overflow-wrap: break-word corta SOLO cuando la palabra no cabe */
:where(article, p, li, td, blockquote, a) {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* -- File inputs: dimensiones naturales -- */
input[type="file"] {
    height: auto;
    width: auto;
    cursor: pointer;
}

/* -- Elementos ocultos: NUNCA deben mostrarse -- */
[hidden],
template {
    display: none !important;
}

/* -- Progress y meter: apariencia nativa -- */
progress,
meter {
    appearance: auto;
}

/* -- Debugging: revierte todo al default del browser -- */
.reset-override {
    all: revert; /* Usalo cuando sospechas que el reset causa un problema visual */
}

/*
 * FIN DEL RESET CSS PROFESIONAL v5.0
 * ==================================================================
 * v1.0 - v4.0: Claude Sonnet 4.5 — 08 Octubre 2025
 * v5.0:        Claude Opus 4.6  — 20 Febrero 2026
 *
 * Correcciones v5.0:
 *  - <strong>/<b> conservan bold (antes se perdia por font-weight: inherit)
 *  - <em>/<i> conservan italic (antes se perdia por font-style: inherit)
 *  - <u> conserva underline
 *  - body font-size: 100% (=10px) corregido a 1.6rem (=16px)
 *  - font-smooth: always eliminado (propiedad no estandar, nadie la reconoce)
 *  - vertical-align: baseline eliminado (ya es el default de CSS)
 *  - content: '' muerto eliminado (content: none lo pisaba)
 *  - Breakpoints CSS eliminados (no funcionan en @media, usar mixin mq())
 *  - Word-break ahora usa :where() (consistente con la filosofia del reset)
 *  - Clases opinadas eliminadas (.content, .user-generated, .comment, .description)
 *  - .no-reset eliminado (all: initial da valores raros, usar .reset-override)
 *  - Bloque vacio *::before/*::after eliminado
 *  - svg.svg-block/figure svg eliminado (opinion, no pertenece a un reset)
 *  - Seccion 5 vacia eliminada (placeholder de v2.2)
 *  - Comentario duplicado "2.3 Movimiento Reducido" eliminado
 *  - Comentarios simplificados: cortos, claros, explican el por que
 */