/* ============================================================
   BASE — reset, tipografia y componentes compartidos
   Todos los colores vienen de tema.css. No agregar #hex aqui.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: var(--texto-base);
    font-weight: var(--peso-normal);
    line-height: 1.6;
    color: var(--color-texto);
    background: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-weight: var(--peso-medio);
    line-height: 1.2;
    color: var(--color-primario);
}

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

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

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

/* Etiqueta pequena en mayusculas con espaciado: recurso visual
   recurrente en hoteleria de lujo. */
.eyebrow {
    font-family: var(--fuente-texto);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-acento-oscuro);
}

/* Filete dorado decorativo */
.filete {
    width: 48px;
    height: 1px;
    background: var(--color-acento);
    border: 0;
    margin: var(--esp-4) 0;
}
.filete--centro { margin-left: auto; margin-right: auto; }

/* Texto que sigue ahi para buscadores y lectores de pantalla, pero no
   se dibuja: se usa cuando el logotipo ya dice lo mismo en imagen. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-5);
    font-family: var(--fuente-texto);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    letter-spacing: 0.04em;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

.btn--primario {
    background: var(--color-primario);
    color: var(--color-texto-invertido);
}
.btn--primario:hover {
    background: var(--color-primario-claro);
    color: var(--color-texto-invertido);
}

.btn--acento {
    background: var(--color-acento);
    color: var(--color-primario-oscuro);
}
.btn--acento:hover { background: var(--color-acento-oscuro); color: var(--color-texto-invertido); }

.btn--contorno {
    background: transparent;
    border-color: var(--color-borde-fuerte);
    color: var(--color-texto);
}
.btn--contorno:hover { border-color: var(--color-acento); color: var(--color-acento-oscuro); }

.btn--claro {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--color-texto-invertido);
}
.btn--claro:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-texto-invertido);
    color: var(--color-texto-invertido);
}

.btn--bloque { width: 100%; }

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */
.campo { margin-bottom: var(--esp-4); }

.campo label {
    display: block;
    margin-bottom: var(--esp-2);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--color-texto);
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="number"],
.campo select,
.campo textarea {
    width: 100%;
    padding: var(--esp-3);
    font-family: var(--fuente-texto);
    font-size: var(--texto-base);
    color: var(--color-texto);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-md);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-tenue);
}

.campo .error-message {
    display: block;
    margin-top: var(--esp-2);
    font-size: var(--texto-sm);
    color: var(--color-error);
}

/* ------------------------------------------------------------
   Mensajes (Flash)
   ------------------------------------------------------------ */
.mensaje {
    padding: var(--esp-3) var(--esp-4);
    margin-bottom: var(--esp-4);
    font-size: var(--texto-sm);
    border: 1px solid transparent;
    border-radius: var(--radio-md);
}
.mensaje--exito  { background: var(--color-exito-tenue);       border-color: var(--color-exito);       color: var(--color-exito); }
.mensaje--error  { background: var(--color-error-tenue);       border-color: var(--color-error);       color: var(--color-error); }
.mensaje--aviso  { background: var(--color-advertencia-tenue); border-color: var(--color-advertencia); color: var(--color-advertencia); }
.mensaje--info   { background: var(--color-info-tenue);        border-color: var(--color-info);        color: var(--color-info); }

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