/* =========================================================
   FORMULARIO BRIEFING WEB — Estilos principales
   Mobile-first · Variables CSS · 3 temas
   ========================================================= */

/* ---------------------------------------------------------
   FUENTES
   --------------------------------------------------------- */
/* DM Serif Display: títulos elegantes */
/* DM Sans: cuerpo limpio y legible */

/* ---------------------------------------------------------
   TEMA CLARO (por defecto)
   --------------------------------------------------------- */
:root,
[data-tema="claro"] {
    /* Fondo y superficies */
    --color-fondo:          #F7F5F2;
    --color-superficie:     #FFFFFF;
    --color-superficie-alt: #EFEDE9;
    --color-borde:          #DDD9D3;

    /* Texto */
    --color-texto:          #1C1917;
    --color-texto-suave:    #6B6560;
    --color-texto-muy-suave:#A09B96;

    /* Acento principal */
    --color-acento:         #1D4ED8;
    --color-acento-hover:   #1E40AF;
    --color-acento-suave:   #DBEAFE;

    /* Estados */
    --color-error:          #DC2626;
    --color-error-fondo:    #FEF2F2;
    --color-exito:          #16A34A;
    --color-exito-fondo:    #F0FDF4;
    --color-texto-secundario: #666;
    --color-fondo-hover:      rgba(0,0,0,0.03);

    /* Sombras */
    --sombra-sm:  0 1px 3px rgba(0,0,0,0.08);
    --sombra-md:  0 4px 16px rgba(0,0,0,0.10);
    --sombra-lg:  0 8px 32px rgba(0,0,0,0.12);

    /* Progreso */
    --color-progreso-fondo: #E5E7EB;
    --color-progreso-relleno: #1D4ED8;
}

/* ---------------------------------------------------------
   TEMA INTERMEDIO (azul grisáceo cálido)
   --------------------------------------------------------- */
[data-tema="intermedio"] {
    --color-fondo:          #1E2A3A;
    --color-superficie:     #263547;
    --color-superficie-alt: #2D3F54;
    --color-borde:          #374F66;

    --color-texto:          #E8EEF4;
    --color-texto-suave:    #94A9BE;
    --color-texto-muy-suave:#5C7A96;

    --color-acento:         #60A5FA;
    --color-acento-hover:   #93C5FD;
    --color-acento-suave:   #1E3A5F;

    --color-error:          #F87171;
    --color-error-fondo:    #2D1B1B;
    --color-exito:          #4ADE80;
    --color-exito-fondo:    #1B2D1B;
    --color-texto-secundario: #aaa;
    --color-fondo-hover:      rgba(255,255,255,0.04);

    --sombra-sm:  0 1px 3px rgba(0,0,0,0.25);
    --sombra-md:  0 4px 16px rgba(0,0,0,0.30);
    --sombra-lg:  0 8px 32px rgba(0,0,0,0.40);

    --color-progreso-fondo:    #374F66;
    --color-progreso-relleno:  #60A5FA;
}

/* ---------------------------------------------------------
   TEMA OSCURO (carbón profundo)
   --------------------------------------------------------- */
[data-tema="oscuro"] {
    --color-fondo:          #0D0F14;
    --color-superficie:     #161B24;
    --color-superficie-alt: #1E2530;
    --color-borde:          #2A3340;

    --color-texto:          #F0F4F8;
    --color-texto-suave:    #8899AA;
    --color-texto-muy-suave:#4A5568;

    --color-acento:         #7C3AED;
    --color-acento-hover:   #6D28D9;
    --color-acento-suave:   #2D1B69;

    --color-error:          #FC8181;
    --color-error-fondo:    #2D1515;
    --color-exito:          #68D391;
    --color-exito-fondo:    #1A2D1A;
    --color-texto-secundario: #999;
    --color-fondo-hover:      rgba(255,255,255,0.04);

    --sombra-sm:  0 1px 3px rgba(0,0,0,0.40);
    --sombra-md:  0 4px 16px rgba(0,0,0,0.50);
    --sombra-lg:  0 8px 32px rgba(0,0,0,0.60);

    --color-progreso-fondo:   #2A3340;
    --color-progreso-relleno: #7C3AED;
}

/* ---------------------------------------------------------
   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: 'DM Sans', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    min-height: 100vh;
    /* Transición suave al cambiar de tema */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Eliminar estilos de lista cuando se use como UI */
ul, ol {
    list-style: none;
}

/* Enlaces base */
a {
    color: var(--color-acento);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--color-acento-hover);
}

/* Mejorar legibilidad de inputs en iOS */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
}

/* ---------------------------------------------------------
   CABECERA
   --------------------------------------------------------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;        /* permite que los elementos salten de línea en móvil */
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cabecera__titulo {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.1rem;      /* un poco más pequeño en móvil */
    font-weight: 400;
    color: var(--color-texto);
    letter-spacing: -0.01em;
    flex-shrink: 1;         /* puede encogerse si hay poco espacio */
    min-width: 0;           /* permite que el texto se corte en lugar de desbordar */
}

/* ---------------------------------------------------------
   SELECTOR DE TEMA
   --------------------------------------------------------- */
.selector-tema {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--color-superficie-alt);
    border: 1px solid var(--color-borde);
    border-radius: 2rem;
    padding: 0.25rem;
    max-width: fit-content;
}

.selector-tema__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-texto-suave);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.selector-tema__btn:hover {
    background-color: var(--color-borde);
    color: var(--color-texto);
    transform: scale(1.1);
}

/* Estado activo: el botón del tema actual */
.selector-tema__btn[aria-pressed="true"] {
    background-color: var(--color-acento);
    color: #FFFFFF;
}

.selector-tema__btn:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   SELECTOR DE IDIOMA
   --------------------------------------------------------- */
.selector-idioma {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background-color: var(--color-superficie-alt);
    border: 1px solid var(--color-borde);
    border-radius: 2rem;
    padding: 0.25rem;
}

.selector-idioma__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-texto-suave);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1.6;
}

.selector-idioma__btn:hover {
    background-color: var(--color-borde);
    color: var(--color-texto);
}

/* Botón del idioma activo */
.selector-idioma__btn--activo {
    background-color: var(--color-acento);
    color: #FFFFFF;
}

.selector-idioma__btn--activo:hover {
    background-color: var(--color-acento-hover);
    color: #FFFFFF;
}

.selector-idioma__btn:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   BARRA DE PROGRESO
   --------------------------------------------------------- */
.progreso {
    padding: 1.5rem 1.5rem 0;
    max-width: 760px;
    margin: 0 auto;
}

.progreso__barra {
    height: 4px;
    background-color: var(--color-progreso-fondo);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    transition: background-color 0.3s ease;
}

.progreso__relleno {
    height: 100%;
    background-color: var(--color-progreso-relleno);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    width: 16.66%; /* 1/6 al inicio */
}

/* Indicadores de paso (puntos) */
.progreso__pasos {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.progreso__paso {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-borde);
    background-color: var(--color-superficie);
    color: var(--color-texto-muy-suave);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: default;
}

.progreso__paso--activo {
    border-color: var(--color-acento);
    background-color: var(--color-acento);
    color: #FFFFFF;
}

.progreso__paso--completado {
    border-color: var(--color-acento);
    background-color: var(--color-acento-suave);
    color: var(--color-acento);
}

.progreso__texto {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    text-align: right;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------
   CONTENEDOR PRINCIPAL
   --------------------------------------------------------- */
.contenedor {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

/* ---------------------------------------------------------
   PASOS DEL WIZARD (fieldsets)
   --------------------------------------------------------- */
.paso {
    border: none;
    padding: 0;
    margin: 0;
    animation: entradaPaso 0.3s ease;
}

.paso--oculto {
    display: none;
}

@keyframes entradaPaso {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.paso__titulo {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding: 1.5rem 0 0;
}
/* Oculta el outline de foco en elementos que lo reciben por JS,
   pero lo mantiene visible si el usuario navega por teclado */
.paso__titulo:focus {
    outline: none;
}

.paso__titulo:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}
.paso__numero {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-acento);
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.paso__descripcion {
    color: var(--color-texto-suave);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   CAMPOS DEL FORMULARIO
   --------------------------------------------------------- */
.campo {
    margin-bottom: 1.5rem;
}

.campo__etiqueta {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-texto);
    margin-bottom: 0.4rem;
}

.campo__requerido {
    color: var(--color-error);
    margin-left: 0.2rem;
}

.campo__opcional {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--color-texto-muy-suave);
    margin-left: 0.3rem;
}

.campo__ayuda {
    display: block;
    font-size: 0.78rem;
    color: var(--color-texto-muy-suave);
    margin-top: 0.35rem;
}

/* Input y textarea base */
.campo__input,
.campo__select,
.campo__textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--color-superficie);
    border: 1.5px solid var(--color-borde);
    border-radius: 8px;
    color: var(--color-texto);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
}

.campo__input::placeholder,
.campo__textarea::placeholder {
    color: var(--color-texto-muy-suave);
}

.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-suave);
}

/* Estado de error */
.campo__input--error,
.campo__select--error,
.campo__textarea--error {
    border-color: var(--color-error);
}

.campo__input--error:focus,
.campo__select--error:focus,
.campo__textarea--error:focus {
    box-shadow: 0 0 0 3px var(--color-error-fondo);
}

/* Select: flecha personalizada */
.campo__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.campo__textarea {
    resize: vertical;
    min-height: 100px;
}

/* Mensaje de error inline */
.campo__error {
    display: block;
    font-size: 0.8rem;
    color: var(--color-error);
    margin-top: 0.3rem;
    min-height: 1.2em; /* Reserva espacio para evitar saltos */
}

/* Campo que aparece/desaparece condicionalmente */
.campo--oculto {
    display: none;
}

/* ---------------------------------------------------------
   CHECKBOXES PERSONALIZADOS
   --------------------------------------------------------- */
.campo__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Grid para los adjetivos (muchas opciones) */
.campo__checkboxes--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.campo__checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-texto);
    cursor: pointer;
    padding: 0.4rem 0;
}

.campo__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-acento);
    cursor: pointer;
}

/* Checkbox de RGPD: distinto para destacarlo */
.campo--rgpd {
    margin-top: 2rem;
    padding: 1.25rem;
    background-color: var(--color-superficie-alt);
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
}

.campo__checkbox--rgpd {
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   GRUPO DE FIELDSET INTERNO (checkboxes agrupados)
   --------------------------------------------------------- */
.campo__grupo {
    border: none;
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------------
   FUNCIONALIDADES (checkboxes con descripción)
   --------------------------------------------------------- */
.campo__funcionalidades {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.campo__funcionalidad {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background-color: var(--color-superficie);
    border: 1.5px solid var(--color-borde);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.campo__funcionalidad:hover {
    border-color: var(--color-acento);
    background-color: var(--color-acento-suave);
}

.campo__funcionalidad input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    accent-color: var(--color-acento);
    cursor: pointer;
}

/* Cuando está marcado, destacar la tarjeta */
.campo__funcionalidad:has(input:checked) {
    border-color: var(--color-acento);
    background-color: var(--color-acento-suave);
}

.campo__funcionalidad-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.campo__funcionalidad-nombre {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-texto);
}

.campo__funcionalidad-desc {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}

/* ---------------------------------------------------------
   SUBIDA DE ARCHIVOS
   --------------------------------------------------------- */
.campo__upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Ocultamos el input nativo */
.campo__input-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Botón personalizado de upload */
.campo__upload-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background-color: var(--color-superficie);
    border: 1.5px solid var(--color-borde);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-texto);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.campo__upload-label:hover {
    border-color: var(--color-acento);
    background-color: var(--color-acento-suave);
    color: var(--color-acento);
}

.campo__upload-nombre {
    font-size: 0.82rem;
    color: var(--color-texto-suave);
    font-style: italic;
}

/* ---------------------------------------------------------
   RESUMEN FINAL (Sección 6)
   --------------------------------------------------------- */
.resumen {
    background-color: var(--color-superficie-alt);
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.resumen__titulo {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-texto);
    margin-bottom: 1rem;
}

.resumen__item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.resumen__clave {
    color: var(--color-texto-suave);
    min-width: 140px;
    flex-shrink: 0;
}

.resumen__valor {
    color: var(--color-texto);
    font-weight: 500;
}

/* ---------------------------------------------------------
   NAVEGACIÓN DEL WIZARD (botones)
   --------------------------------------------------------- */
.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-borde);
    flex-wrap: wrap;        /* en móvil muy pequeño los botones pueden bajar */
}
.contenedor-btn-enviar {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
/* Base de botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;    /* padding reducido para que quepan en móvil */
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;          /* fuente ligeramente menor en móvil */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;             /* no se comprimen por debajo de su contenido */
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 3px;
}

/* Botón principal (Siguiente) */
.btn--primario {
    background-color: var(--color-acento);
    color: #FFFFFF;
    margin-left: auto; /* Empuja a la derecha si no hay botón anterior */
}

.btn--primario:hover {
    background-color: var(--color-acento-hover);
    box-shadow: var(--sombra-md);
}

/* Botón secundario (Anterior) */
.btn--secundario {
    background-color: transparent;
    color: var(--color-texto-suave);
    border: 1.5px solid var(--color-borde);
}

.btn--secundario:hover {
    background-color: var(--color-superficie-alt);
    color: var(--color-texto);
    border-color: var(--color-texto-suave);
}

/* Botón de envío */
.btn--enviar {
    background-color: var(--color-exito);
    color: #FFFFFF;
    /* margin-left: auto; */
    padding: 0.75rem 1.5rem;    /* padding ajustado, el grande solo en desktop */
    font-size: 0.95rem;
}

.btn--enviar:hover {
    filter: brightness(1.05);
    box-shadow: var(--sombra-md);
}

/* ---------------------------------------------------------
   PIE DE PÁGINA
   --------------------------------------------------------- */
.pie {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: var(--color-texto-muy-suave);
    border-top: 1px solid var(--color-borde);
    margin-top: 2rem;
    transition: border-color 0.3s ease;
}
.pie div {
    display: flex;
    margin: 1rem 0;
    justify-content: center;
}
/* ---------------------------------------------------------
   RESPONSIVE — tablet y escritorio
   --------------------------------------------------------- */
@media (min-width: 640px) {
    .cabecera {
        padding: 1rem 2rem;
        flex-wrap: nowrap;      /* en tablet/desktop todo cabe en una línea */
    }

    .cabecera__titulo {
        font-size: 1.25rem;     /* tamaño original en desktop */
    }

    .btn {
        padding: 0.75rem 1.75rem;
        font-size: 0.95rem;
    }

    .btn--enviar {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }

    .progreso {
        padding: 2rem 2rem 0;
    }

    .contenedor {
        padding: 0 2rem 3rem;
    }

    .paso__titulo {
        font-size: 2rem;
        padding-top: 2rem;
    }

    .campo__checkboxes--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    /* En pantallas grandes, algunos campos van en fila */
    .campo__fila {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .campo__funcionalidades {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------------------------------------------------
   ACCESIBILIDAD: preferencia de movimiento reducido
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * ─── Fase 4: Validación inline ───────────────────────────────────────────────
 *
 * INSTRUCCIÓN: Añadir este bloque al final de public/assets/css/styles.css,
 * antes del cierre del archivo.
 *
 * Las variables CSS (--color-error, --color-exito, etc.) ya deben estar
 * definidas en los bloques [data-tema] del archivo de estilos.
 * Si no existen, añadir a cada tema:
 *   --color-error:       #c0392b;   (rojo)
 *   --color-exito:       #27ae60;   (verde)
 *   --color-error-fondo: #fdf0ef;   (rojo muy claro para el fondo del campo)
 */

/* ── Mensaje de error bajo el campo ─────────────────────────────────────────── */

.campo-error {
    display: block;             /* Ocupa su propia línea */
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-error);
    line-height: 1.3;
}

/* Cuando está oculto (hidden attribute) no ocupa espacio */
.campo-error[hidden] {
    display: none;
}

/* ── Campo con error ─────────────────────────────────────────────────────────── */

/* Aplica a input, textarea, select cuando tienen la clase campo--error */
.campo--error {
    border-color: var(--color-error) !important;
    background-color: var(--color-error-fondo, #fdf0ef);
    /* Sombra sutil para reforzar el estado de error */
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2);
    outline: none; /* Evitar doble contorno con el outline de focus */
}

/* Cuando el campo con error recibe foco, mantener el color de error */
.campo--error:focus {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3);
}

/* ── Indicador de campo obligatorio ─────────────────────────────────────────── */
/*
 * El asterisco se muestra via CSS en los labels de campos obligatorios.
 * En el HTML, los campos obligatorios tienen aria-required="true" o required.
 * El label correspondiente debe tener la clase .label--obligatorio
 * (añadir en index.php a los labels de campos required).
 *
 * Alternativa: usar el selector de atributo para no tocar el HTML:
 *   :is(input, select, textarea)[required] + ... (limitado por estructura DOM)
 *
 * Recomendación: añadir clase .label--obligatorio en Fase 9 (pulido UX).
 * Por ahora el asterisco va directamente en el texto del label (ya en el HTML).
 */

/* ── Resumen del paso 6 ──────────────────────────────────────────────────────── */

.resumen-titulo {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--color-titulo);
    border-bottom: 2px solid var(--color-acento);
    padding-bottom: 0.5rem;
}

.resumen-seccion {
    margin-bottom: 2rem;
}

.resumen-seccion h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-acento);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.resumen-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.resumen-tabla th,
.resumen-tabla td {
    padding: 0.45rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: top;
}

.resumen-tabla th {
    width: 38%;                   /* Columna de etiquetas */
    font-weight: 600;
    color: var(--color-texto-secundario);
    white-space: nowrap;
}

.resumen-tabla td {
    color: var(--color-texto);
    word-break: break-word;
}

/* Fila de la tabla al pasar el ratón (UX sutil) */
.resumen-tabla tr:hover td,
.resumen-tabla tr:hover th {
    background-color: var(--color-fondo-hover, rgba(0,0,0,0.03));
}

/* Variables de color de error que pueden faltar en algunos temas.
   Añadir a CADA bloque [data-tema="..."] si no existen: */
/*
[data-tema="claro"] {
    --color-error:            #c0392b;
    --color-error-fondo:      #fdf0ef;
    --color-texto-secundario: #666;
    --color-fondo-hover:      rgba(0,0,0,0.03);
}

[data-tema="intermedio"] {
    --color-error:            #e74c3c;
    --color-error-fondo:      #2d1a19;
    --color-texto-secundario: #aaa;
    --color-fondo-hover:      rgba(255,255,255,0.04);
}

[data-tema="oscuro"] {
    --color-error:            #ff6b6b;
    --color-error-fondo:      #2d1a19;
    --color-texto-secundario: #999;
    --color-fondo-hover:      rgba(255,255,255,0.04);
}
*/



/* =========================================================
   FASE 9 — AÑADIR AL FINAL DE styles.css
   =========================================================
   Copiar este bloque completo al final de styles.css,
   justo después de las últimas líneas existentes.
   ========================================================= */


/* ---------------------------------------------------------
   LABEL OBLIGATORIO (Fase 9)
   ---------------------------------------------------------
   Sustituye el asterisco hardcodeado en el HTML por una
   clase CSS. Más limpio y fácil de cambiar globalmente.

   Uso en HTML:
   <label class="label--obligatorio" for="nombre_comercial">
       Nombre comercial
   </label>

   El ::after inserta el asterisco automáticamente.
   El aria-hidden en el span del HTML (si existe) ya oculta
   el asterisco antiguo; con esta clase no es necesario span.
   --------------------------------------------------------- */
.label--obligatorio::after {
    content: ' *';
    color: var(--color-error);      /* rojo del tema activo */
    font-weight: 700;
    aria-hidden: true;              /* el asterisco es decorativo */
}


/* ---------------------------------------------------------
   BANNER DE RECUPERACIÓN DE PROGRESO (Fase 9)
   ---------------------------------------------------------
   Aparece discretamente en la parte superior del formulario
   cuando se restauran datos guardados en localStorage.
   Se anima al entrar y al salir.
   --------------------------------------------------------- */
.banner-recuperacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--color-acento-suave);
    border: 1px solid var(--color-acento);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-texto);

    /* Animación de entrada: desliza desde arriba */
    animation: banner-entrar 0.3s ease-out both;
}

/* Estado de salida: añadido por JS con .banner-recuperacion--saliendo */
.banner-recuperacion--saliendo {
    animation: banner-salir 0.3s ease-in both;
}

.banner-recuperacion__icono {
    font-size: 1rem;
    flex-shrink: 0;         /* el icono nunca se comprime */
}

.banner-recuperacion__texto {
    flex: 1;                /* ocupa el espacio disponible */
    line-height: 1.4;
}

.banner-recuperacion__cerrar {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-texto-suave);
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
}

.banner-recuperacion__cerrar:hover {
    color: var(--color-texto);
    background: var(--color-fondo-hover);
}

/* Animaciones del banner */
@keyframes banner-entrar {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes banner-salir {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}


/* ---------------------------------------------------------
   PÁGINA DE CONFIRMACIÓN (gracias.php) — Fase 9
   ---------------------------------------------------------
   Movido desde el <style> inline de gracias.php a styles.css
   para centralizar todos los estilos del proyecto.
   --------------------------------------------------------- */
.confirmacion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-xl, 2rem);
}

.confirmacion__tarjeta {
    background: var(--color-superficie);
    border-radius: 1rem;
    padding: var(--espacio-xl, 2rem) var(--espacio-2xl, 3rem);
    max-width: 640px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra-md);
}

.confirmacion__icono {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.confirmacion__titulo {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--color-texto);
}

.confirmacion__subtitulo {
    color: var(--color-texto-suave);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.confirmacion__pasos {
    text-align: left;
    background: var(--color-superficie-alt);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.confirmacion__pasos h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--color-texto);
}

.confirmacion__pasos ol {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-texto-suave);
    line-height: 1.8;
}

.confirmacion__referencia {
    font-size: 0.875rem;
    color: var(--color-texto-suave);
    margin-bottom: 2rem;
}

.confirmacion__referencia strong {
    color: var(--color-texto);
}

.confirmacion__volver {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--color-acento);
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.confirmacion__volver:hover {
    background: var(--color-acento-hover);
}


/* ---------------------------------------------------------
   PÁGINA DE ERROR (error.php) — Fase 9
   ---------------------------------------------------------
   Movido desde el <style> inline de error.php a styles.css.
   --------------------------------------------------------- */
.pagina-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-xl, 2rem);
}

.pagina-error__tarjeta {
    background: var(--color-superficie);
    border-radius: 1rem;
    padding: var(--espacio-xl, 2rem) var(--espacio-2xl, 3rem);
    max-width: 560px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra-md);
}

.pagina-error__icono {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
}

.pagina-error__titulo {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-texto);
}

.pagina-error__descripcion {
    color: var(--color-texto-suave);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.pagina-error__volver {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--color-acento);
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.pagina-error__volver:hover {
    background: var(--color-acento-hover);
}


/* ---------------------------------------------------------
   PÁGINA 404 (404.php) — Fase 9
   --------------------------------------------------------- */
.pagina-404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-xl, 2rem);
}

.pagina-404__tarjeta {
    background: var(--color-superficie);
    border-radius: 1rem;
    padding: var(--espacio-xl, 2rem) var(--espacio-2xl, 3rem);
    max-width: 560px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra-md);
}

.pagina-404__numero {
    font-size: 5rem;
    font-weight: 900;
    color: var(--color-acento);
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.pagina-404__titulo {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-texto);
}

.pagina-404__descripcion {
    color: var(--color-texto-suave);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.pagina-404__volver {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--color-acento);
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.pagina-404__volver:hover {
    background: var(--color-acento-hover);
}

/* ---------------------------------------------------------
   BOTÓN LIMPIAR FORMULARIO — header (Fase 9)
   ---------------------------------------------------------
   Añadir dentro del bloque de styles_fase9_addon.css,
   junto al resto de estilos de Fase 9.

   El botón está hidden por defecto en el HTML.
   JS lo muestra solo cuando hay datos guardados en localStorage.
   --------------------------------------------------------- */
.btn-limpiar {
    /* Estilo discreto: texto pequeño, sin relleno llamativo */
    background: none;
    border: 1px solid var(--color-borde);
    border-radius: 0.375rem;
    color: var(--color-texto-suave);
    cursor: pointer;
    font-size: 0.75rem;     /* ligeramente más pequeño en móvil */
    padding: 0.25rem 0.6rem;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;         /* no se comprime, pero tampoco empuja a otros */
}

.btn-limpiar:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-fondo);
}

/* El botón se muestra en el header junto al selector de idioma/tema */
/* Cuando está hidden (atributo HTML), el navegador lo oculta;
   JS lo muestra con btnLimpiar.hidden = false cuando hay progreso guardado */