/* ==========================================================================
   0. TAILWIND IMPORTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Exo:wght@400;600&family=Roboto:wght@300;400;500;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/*! Tailwind CSS v3.x.x | MIT License | https://tailwindcss.com */

/* ==========================================================================
   1. TAILWIND BASE
   ========================================================================== */

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

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



/* Modo oscuro con degradado */
@media (prefers-color-scheme: dark) {
    .btn-hypra {
        background: linear-gradient(90deg, var(--color-hypra-blue), var(--color-hypra-green));
    }

    .btn-hypra:hover {
        background: linear-gradient(90deg, var(--color-hypra-dark-blue), var(--color-hypra-accent-green));
    }
}

/* ==========================================================================
   2. TAILWIND COMPONENTS
   ========================================================================== */

.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm;
}

.btn-primary {
    @apply bg-blue-600 text-white hover: bg-blue-700;
}

input[type="text"],
input[type="email"],
textarea,
select {
    @apply appearance-none w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus: outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
}

.prose {
    color: #333;
    max-width: 65ch;
}

.prose h1 {
    @apply text-3xl font-semibold;
}

.prose h2 {
    @apply text-2xl font-semibold;
}

.prose p {
    @apply mt-2 mb-4;
}

/* ==========================================================================
   3. TAILWIND UTILITIES 
   ========================================================================== */

.text-white {
    color: #FFFFFF !important;
}

.text-black {
    color: #000000 !important;
}

.bg-white {
    background-color: #FFFFFF !important;
}

.bg-black {
    background-color: #000000 !important;
}

.hover\:text-primary:hover {
    color: var(--color-primary) !important;
}


/* ==========================================================================
   4. VARIABLES PERSONALIZADAS (LIGHT MODE)
   ========================================================================== */

:root {
    /* Colores oficiales Hypra */
    --color-hypra-blue: #3399FF;
    --color-hypra-green: #33CC66;
    --color-hypra-accent-green: #00FF7F;
    --color-hypra-dark-blue: #00008B;
    --color-hypra-gradient-mid: #0044AA;
    --color-hypra-cyan: #00CED1;
    --color-hypra-turquoise: #17A2B8;

    /* Colores de piel/avatar */
    --color-hypra-skin: #F7B073;
    --color-hypra-skin-light: #FDE0BE;

    /* Textos del logo (modo claro) */
    --text-hy: #000000;
    --text-pra: #007AFF;

    /* Neutros */
    --hypra-white: #FFFFFF;
    --hypra-dark: #333333;
    --hypra-black: #000000;

    /* Fondos */
    --bg-dark: #0B0B14;
    --bg-soft: #0A1F3C;

    /* Estados */
    --color-success: #28A745;
    --color-warning: #FFC107;
    --color-error: #DC3545;
    --color-info: #17A2B8;

    /* Principales */
    --color-primary: #007AFF;
    --color-black: #000000;
    --color-graydark: #333333;
    --color-graymid: #767676;
    --color-grayspace: #1C1C1E;

    /* Categorías Hypra */
    --color-hypraDigitalId: #6A00F4;
    --color-hypraEducation: #00D4FF;
    --color-hypraCollaboration: #1A73E8;
    --color-hypraHealth: #00A86B;
    --color-hypraSecurity: #D50000;
    --color-hypraInfra: #5F6368;
    --color-hypraEntertaiment: #FF6D00;
}

/* ==========================================================================
   5. DARK MODE AUTOMÁTICO (prefers-color-scheme)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --text-hy: #FFFFFF;
        --text-pra: #3399FF;
        --color-grayspace: #000000;
        --color-primary: #3399FF;
        --bg-dark: #000000;
        --bg-soft: #0B0B14;
    }

    body {
        background-color: var(--color-grayspace);
        color: var(--hypra-white);
    }
}

/* ==========================================================================
   5B. DARK MODE MANUAL (.dark)
   ========================================================================== */

:root.dark {
    color-scheme: dark;
    --text-hy: #FFFFFF;
    --text-pra: #3399FF;
    --color-grayspace: #000000;
    --color-primary: #3399FF;
    --bg-dark: #000000;
    --bg-soft: #0B0B14;
}

.dark body {
    background-color: var(--color-grayspace);
    color: var(--hypra-white);
}

/* Soporte manual para utilidades dark: */
.dark .dark\:bg-gray-800 {
    background-color: #1f2937 !important;
}

.dark .dark\:bg-gray-900 {
    background-color: #111827 !important;
}

.dark .dark\:bg-grayspace {
    background-color: #1C1C1E !important;
}

.dark .dark\:bg-gray-700 {
    background-color: #374151 !important;
}

.dark .dark\:text-white {
    color: #FFFFFF !important;
}

.dark .dark\:text-gray-300 {
    color: #D1D5DB !important;
}

.dark .dark\:border-gray-600 {
    border-color: #4B5563 !important;
}

/* ==========================================================================
   6. TIPOGRAFÍAS
   ========================================================================== */



.font-logo {
    font-family: 'Black Ops One', cursive, sans-serif !important;
}

.font-titles {
    font-family: 'Exo', sans-serif !important;
}

.font-body {
    font-family: 'Roboto', sans-serif !important;
}

/* ==========================================================================
   7. ACCESIBILIDAD Y EXTRA
   ========================================================================== */

.hc * {
    outline: 2px dotted #FFFFFF !important;
    outline-offset: 2px;
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

.headerBar {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #F8F8F8;
}

/* ==========================================================================
   8. Formulario de contacto con soporte light/dark manual + AA contrast
   ========================================================================== */

/* ===== Contenedor formulario ===== */
form#contact-form {
    width: 100%;
    max-width: 42rem; /* 2xl Tailwind = 672px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ===== Espaciado entre campos ===== */
#contact-form > div {
    margin-bottom: 1.5rem; /* 24px */
}

#contact-form > div:last-of-type {
    margin-bottom: 0; /* Evitar espacio extra antes del botón */
}

/* ==========================================================================
   BOTÓN HYPRA ACCESIBLE
   ========================================================================== */

.btn-hypra {
    display: inline-block;
    padding: 0.75rem 1.25rem; /* px-5 py-3 */
    border-radius: 0.5rem;    /* rounded-lg */
    font-weight: 700;
    font-size: 1rem;
    color: #fff !important;
    background: var(--color-hypra-blue) !important;
    min-height: 44px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Hover/Focus accesibles */
.btn-hypra:hover {
    background: var(--color-hypra-dark-blue) !important;
}

.btn-hypra:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-hypra-green);
}

/* ===== Variante oscura ===== */
.dark .btn-hypra,
.btn-hypra-dark {
    background: linear-gradient(90deg, var(--color-hypra-blue), var(--color-hypra-green)) !important;
}

.dark .btn-hypra:hover,
.btn-hypra-dark:hover {
    background: linear-gradient(90deg, var(--color-hypra-dark-blue), var(--color-hypra-accent-green)) !important;
}

/* ==========================================================================
   INPUTS HYPRA ACCESIBLES
   ========================================================================== */

.input-hypra {
    width: 100%;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem;   /* rounded */
    padding: 1.25rem 0.75rem 0.5rem; /* pt-5 pb-2 px-3 */
    background: #fff;
    color: #000;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

/* Foco accesible */
.input-hypra:focus {
    outline: none;
    border-color: var(--color-hypra-blue);
    box-shadow: 0 0 0 2px var(--color-hypra-blue);
}

/* Solo marcar inválidos tras interacción */
.input-hypra:user-invalid {
    border-color: var(--color-error);
}

.input-hypra:user-invalid:focus {
    box-shadow: 0 0 0 2px var(--color-error);
}

/* Fallback para navegadores sin :user-invalid */
form.was-validated .input-hypra:invalid {
    border-color: var(--color-error);
}

form.was-validated .input-hypra:invalid:focus {
    box-shadow: 0 0 0 2px var(--color-error);
}

/* Modo oscuro */
.dark .input-hypra {
    background: var(--bg-soft);
    border-color: #4B5563; /* border-gray-600 */
    color: #fff;
}

.light .input-hypra {
    background: #fff;
    border-color: #d1d5db;
    color: #000;
}

/* ==========================================================================
   LABELS FLOTANTES
   ========================================================================== */

.label-hypra {
    position: absolute;
    left: 0.75rem; /* left-3 */
    top: 0.625rem; /* top-2.5 */
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
    pointer-events: none;
    transition: all 0.2s ease;
}

.peer-placeholder-shown ~ .label-hypra {
    top: 0.875rem; /* top-3.5 */
    color: #9ca3af; /* text-gray-400 */
    font-size: 1rem; /* text-base */
}

.peer:focus ~ .label-hypra {
    top: 0.25rem; /* top-1 */
    font-size: 0.75rem; /* text-xs */
    color: var(--color-hypra-blue);
}

/* ==========================================================================
   COLORES ACCESIBLES (AA)
   ========================================================================== */

:root {
    --color-hypra-blue: #005FCC;        /* Azul Hypra con contraste AA */
    --color-hypra-dark-blue: #004199;   /* Hover más oscuro */
    --color-hypra-green: #33CC66;
    --color-hypra-accent-green: #00FF7F;
    --bg-soft: #0A1F3C;
    --color-error: #DC3545;
}