/* ============================================================
   Hoguera · asivoy.com
   navegador.css — estilos base para escritorio
   ============================================================ */

/* ------------------------------------------------------------
   Variables — modo claro (default)
   ------------------------------------------------------------ */
:root {
    --color-fondo:        #F4F7F5;
    --color-superficie:   #FFFFFF;
    --color-primario:     #2A7A5A;
    --color-secundario:   #5B8A7A;
    --color-texto:        #111614;
    --color-texto-suave:  #4A6358;
    --color-borde:        #D0DDD8;
    --color-error:        #B91C1C;
    --color-exito:        #2A7A5A;

    --fuente-ui:          'Outfit', system-ui, sans-serif;
    --fuente-titulo:      'Outfit', system-ui, sans-serif;

    --radio:              8px;
    --radio-lg:           16px;
    --sombra:             0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
    --sombra-lg:          0 4px 6px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.10);

    --transicion:         180ms ease;

    --ancho-max:          1200px;
    --espaciado:          1.5rem;
}

/* ------------------------------------------------------------
   Variables — modo oscuro
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-fondo:        #111614;
        --color-superficie:   #1C2420;
        --color-primario:     #3DAA7D;
        --color-secundario:   #7BBAA8;
        --color-texto:        #F4F7F5;
        --color-texto-suave:  #8AADA0;
        --color-borde:        #2A3830;
        --color-error:        #F87171;
        --color-exito:        #3DAA7D;
    }
}

/* ------------------------------------------------------------
   Toggle manual claro/oscuro
   ------------------------------------------------------------ */
[data-tema="claro"] {
    --color-fondo:        #F4F7F5;
    --color-superficie:   #FFFFFF;
    --color-primario:     #2A7A5A;
    --color-secundario:   #5B8A7A;
    --color-texto:        #111614;
    --color-texto-suave:  #4A6358;
    --color-borde:        #D0DDD8;
    --color-error:        #B91C1C;
    --color-exito:        #2A7A5A;
}

[data-tema="oscuro"] {
    --color-fondo:        #111614;
    --color-superficie:   #1C2420;
    --color-primario:     #3DAA7D;
    --color-secundario:   #7BBAA8;
    --color-texto:        #F4F7F5;
    --color-texto-suave:  #8AADA0;
    --color-borde:        #2A3830;
    --color-error:        #F87171;
    --color-exito:        #3DAA7D;
}

/* ------------------------------------------------------------
   Reset y base
   ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

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

body {
    font-family:      var(--fuente-ui);
    background-color: var(--color-fondo);
    color:            var(--color-texto);
    line-height:      1.6;
    min-height:       100vh;
    transition:       background-color var(--transicion),
                      color var(--transicion);
}

/* ------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family:   var(--fuente-titulo);
    line-height:   1.25;
    color:         var(--color-texto);
    margin-bottom: 0.5em;
    font-weight:   600;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p {
    margin-bottom: 1rem;
    color: var(--color-texto);
}

a {
    color:           var(--color-primario);
    text-decoration: none;
    transition:      opacity var(--transicion);
}

a:hover {
    opacity: 0.8;
}

small {
    font-size: 0.875rem;
    color:     var(--color-texto-suave);
}

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.contenedor {
    max-width:      var(--ancho-max);
    margin-inline:  auto;
    padding-inline: var(--espaciado);
}

.contenedor-angosto {
    max-width:      640px;
    margin-inline:  auto;
    padding-inline: var(--espaciado);
}

/* ------------------------------------------------------------
   Superficie / tarjeta
   ------------------------------------------------------------ */
.tarjeta {
    background:    var(--color-superficie);
    border:        1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding:       var(--espaciado);
    box-shadow:    var(--sombra);
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.625rem 1.25rem;
    border-radius:   var(--radio);
    border:          none;
    font-family:     var(--fuente-ui);
    font-size:       0.9375rem;
    font-weight:     500;
    cursor:          pointer;
    transition:      opacity var(--transicion),
                     transform var(--transicion);
    text-decoration: none;
    white-space:     nowrap;
}

.btn:hover {
    opacity:   0.88;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primario {
    background: var(--color-primario);
    color:      #FFFFFF;
}

.btn-secundario {
    background: transparent;
    color:      var(--color-primario);
    border:     1px solid var(--color-primario);
}

.btn-suave {
    background: var(--color-borde);
    color:      var(--color-texto);
}

/* ------------------------------------------------------------
   Toggle claro/oscuro
   ------------------------------------------------------------ */
.btn-tema {
    background:    transparent;
    border:        1px solid var(--color-borde);
    border-radius: var(--radio);
    padding:       0.5rem 0.75rem;
    cursor:        pointer;
    font-size:     1rem;
    color:         var(--color-texto-suave);
    transition:    border-color var(--transicion),
                   color var(--transicion);
    line-height:   1;
}

.btn-tema:hover {
    border-color: var(--color-primario);
    color:        var(--color-primario);
}

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */
.campo {
    display:        flex;
    flex-direction: column;
    gap:            0.375rem;
    margin-bottom:  1rem;
}

.campo label {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--color-texto-suave);
}

.campo input,
.campo textarea,
.campo select {
    background:    var(--color-superficie);
    border:        1px solid var(--color-borde);
    border-radius: var(--radio);
    padding:       0.625rem 0.875rem;
    font-family:   var(--fuente-ui);
    font-size:     0.9375rem;
    color:         var(--color-texto);
    transition:    border-color var(--transicion);
    width:         100%;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    outline:      none;
    border-color: var(--color-primario);
}

/* ------------------------------------------------------------
   Mensajes
   ------------------------------------------------------------ */
.mensaje {
    padding:       0.75rem 1rem;
    border-radius: var(--radio);
    font-size:     0.9375rem;
    margin-bottom: 1rem;
}

.mensaje-error {
    background: color-mix(in srgb, var(--color-error) 12%, transparent);
    border:     1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
    color:      var(--color-error);
}

.mensaje-exito {
    background: color-mix(in srgb, var(--color-exito) 12%, transparent);
    border:     1px solid color-mix(in srgb, var(--color-exito) 30%, transparent);
    color:      var(--color-exito);
}

/* ------------------------------------------------------------
   Separador
   ------------------------------------------------------------ */
hr {
    border:     none;
    border-top: 1px solid var(--color-borde);
    margin:     1.5rem 0;
}

/* ------------------------------------------------------------
   Componente — botón de ayuda
   ------------------------------------------------------------ */
.ayuda-boton {
    position:      fixed;
    top:           1.25rem;
    right:         1.25rem;
    width:         2.5rem;
    height:        2.5rem;
    border-radius: 50%;
    background:    var(--color-primario);
    color:         #FFFFFF;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.25rem;
    box-shadow:    var(--sombra);
    transition:    opacity var(--transicion),
                   transform var(--transicion);
    z-index:       999;
    text-decoration: none;
}

.ayuda-boton:hover {
    opacity:   0.88;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Componente — scroll to top
   ------------------------------------------------------------ */
.scroll-top-boton {
    position:      fixed;
    bottom:        1.25rem;
    right:         1.25rem;
    width:         2.5rem;
    height:        2.5rem;
    border-radius: 50%;
    background:    var(--color-superficie);
    border:        1px solid var(--color-borde);
    color:         var(--color-texto-suave);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.25rem;
    box-shadow:    var(--sombra);
    cursor:        pointer;
    transition:    opacity var(--transicion),
                   transform var(--transicion);
    z-index:       998;
    opacity:       0;
    pointer-events: none;
}

.scroll-top-boton.visible {
    opacity:        1;
    pointer-events: auto;
}

.scroll-top-boton:hover {
    border-color: var(--color-primario);
    color:        var(--color-primario);
    transform:    translateY(-2px);
}

/* ------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------ */
.texto-suave  { color: var(--color-texto-suave); }
.texto-centro { text-align: center; }
.texto-error  { color: var(--color-error); }
.texto-exito  { color: var(--color-exito); }
.oculto       { display: none !important; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }