html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

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

/* ============================================================
   TurismoIn � Variables de marca
   ============================================================ */
:root {
    /* Primario */
    --color-primario: #0070BA;
    --color-primario-oscuro: #005a96;
    --color-primario-rgb: 0, 112, 186;

    /* Secundarios por categor�a */
    --color-rojo: #C4122F;
    --color-azul-oscuro: #07354F;
    --color-naranja: #F07328;
    --color-rosa: #E94256;
    --color-morado: #662483;
    --color-verde: #197841;
    --color-turquesa: #32AEA7;

    /* Sem�nticos */
    --color-exito: #197841;
    --color-error: #C4122F;
    --color-advertencia: #F07328;
    --color-info: #0070BA;

    /* Neutros */
    --color-texto: #1a202c;
    --color-texto-secundario: #64748b;
    --color-gris: #B2B2B2;
    --color-borde: #e2e8f0;
    --color-fondo: #EAEADF;
    --color-fondo-claro: #f5f7fa;

    /* Tipograf�a */
    --fuente-principal: Helvetica, Arial, sans-serif;

    /* Componentes */
    --radio-borde: 8px;
    --sombra: 0 4px 20px rgba(0, 0, 0, 0.08);
}

body {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    line-height: 1.6;
    background: var(--color-fondo);
    margin-bottom: 60px;
}

/* Jerarqu�a tipogr�fica */
h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 28px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primario);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Utilidades */
.requerido {
    color: var(--color-error);
    font-weight: 700;
    margin-left: 2px;
}

.opcional {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85em;
    color: var(--color-texto-secundario);
    margin-top: 4px;
}

.campo-ayuda {
    display: block;
    font-size: 14px;
    color: var(--color-texto-secundario);
    margin-top: 4px;
    margin-bottom: 8px;
}

.campo-error {
    display: block;
    font-size: 14px;
    color: var(--color-error);
    margin-top: 6px;
}

.separador {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: 32px 0;
}

/* Alertas */
.alert {
    padding: 16px 20px;
    border-radius: var(--radio-borde);
    margin-bottom: 24px;
    border-left: 4px solid;
}

.alert-danger {
    background: #fef2f2;
    border-left-color: var(--color-error);
    color: #991b1b;
}

.alert-info {
    background: #eff6ff;
    border-left-color: var(--color-info);
    color: #1e40af;
}

.alert-warning {
    background: #fff7ed;
    border-left-color: var(--color-advertencia);
    color: #9a3412;
}

.alert ul {
    margin: 8px 0 0 20px;
}

/* Responsive */
@media (max-width: 768px) {
    :root {
        --radio-borde: 6px;
    }

    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}