/* =====================================================================
   fw-zona.css — ZONA CENTRAL ESTABLE DEL FRAMEWORK (#7812, 08-10-2026)
   ---------------------------------------------------------------------
   Todo lo que pinta el framework (login, recuperar contraseña, contacto
   generico, 404, paneles admin/webmaster, datagrids, mensajes) va dentro
   de <main class="fw-zona">. Esta hoja se carga la ULTIMA y fija un
   aspecto NEUTRO UNICO para esa zona, sea cual sea el tema de la web:
   la cabecera y el pie siguen siendo del cliente; el centro, del framework.
   Decision de Joel 08-10-2026: aspecto neutro unico, sin variables del tema.

   Alcance: SOLO selectores con prefijo .fw-zona. Nada aqui afecta a la
   cabecera, al pie ni a las paginas propias de cada app.
   Base: Bootstrap 5.3.8 (lo cargan las 21 apps); aqui se re-fijan sus
   variables y los componentes que los temas suelen pisar.
   ===================================================================== */

/* ---------- 1. Variables de Bootstrap re-fijadas en neutro ---------- */
.fw-zona.fw-zona {
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger: #dc3545;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-hover-color: #0a58ca;
    --bs-border-color: #dee2e6;
    --bs-border-radius: .375rem;
    --bs-heading-color: inherit;

    /* contenedor: ancho de pagina, fondo claro, aire arriba y abajo */
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 0 2.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    text-align: left;
    overflow-x: hidden;           /* nada de la zona puede desbordar la pantalla */
}

/* ---------- 2. Reset acotado: anula lo que los temas suelen pisar ---------- */
.fw-zona.fw-zona *,
.fw-zona.fw-zona *::before,
.fw-zona.fw-zona *::after {
    box-sizing: border-box;
}
.fw-zona.fw-zona h1, .fw-zona.fw-zona h2, .fw-zona.fw-zona h3, .fw-zona.fw-zona h4, .fw-zona.fw-zona h5, .fw-zona.fw-zona h6 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    margin: 0 0 .75rem;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    text-align: inherit;
}
.fw-zona.fw-zona h1 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.25rem); }
.fw-zona.fw-zona h2 { font-size: clamp(1.4rem, 2vw + .9rem, 1.9rem); }
.fw-zona.fw-zona h3 { font-size: clamp(1.25rem, 1.5vw + .8rem, 1.6rem); }
.fw-zona.fw-zona p  { margin: 0 0 1rem; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.fw-zona.fw-zona a:not(.btn) { color: var(--bs-link-color); text-decoration: underline; }
.fw-zona.fw-zona a:not(.btn):hover { color: var(--bs-link-hover-color); }
.fw-zona.fw-zona label, .fw-zona.fw-zona .form-label {
    display: inline-block; margin-bottom: .5rem; font-weight: 600; font-size: inherit; color: inherit;
    text-transform: none; letter-spacing: normal;
}
.fw-zona.fw-zona input, .fw-zona.fw-zona select, .fw-zona.fw-zona textarea, .fw-zona.fw-zona button {
    font-family: inherit; font-size: inherit; line-height: inherit; margin: 0;
}
.fw-zona.fw-zona img { max-width: 100%; height: auto; }

/* ---------- 3. Componentes de Bootstrap que los temas redefinen ---------- */
/* !important solo aqui: algunos temas (modal.css de mymasesor) fijan el fondo y el relleno de .card con !important */
.fw-zona.fw-zona .card, .fw-zona.fw-zona .card:hover {
    background: #fff !important; color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color) !important; border-radius: .5rem !important;
    padding: 0 !important; margin: 0 0 1.5rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}
.fw-zona.fw-zona .card-header { background: #f8f9fa; border-bottom: 1px solid var(--bs-border-color); padding: .75rem 1rem; }
.fw-zona.fw-zona .card-header.text-white { background: #4578ad; color: #fff; }
.fw-zona.fw-zona .card-body { padding: 1.25rem !important; background: transparent !important; margin: 0 !important; }
.fw-zona.fw-zona .row { margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem)); margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem)); }
.fw-zona.fw-zona [class*="col-"] { padding-left: calc(.5 * var(--bs-gutter-x, 1.5rem)); padding-right: calc(.5 * var(--bs-gutter-x, 1.5rem)); }
.fw-zona.fw-zona .container, .fw-zona.fw-zona .container-fluid { padding-left: .75rem; padding-right: .75rem; margin-left: auto; margin-right: auto; max-width: 100%; }
.fw-zona.fw-zona .mb-3 { margin-bottom: 1rem !important; } .fw-zona.fw-zona .mt-3 { margin-top: 1rem !important; }
.fw-zona.fw-zona .mt-4 { margin-top: 1.5rem !important; } .fw-zona.fw-zona .mb-5 { margin-bottom: 3rem !important; } .fw-zona.fw-zona .pt-3 { padding-top: 1rem !important; }
@media (max-width: 575.98px) {
    .fw-zona.fw-zona .card-body { padding: 1rem .875rem !important; }
}
.fw-zona.fw-zona .form-control, .fw-zona.fw-zona .form-select {
    display: block; width: 100%; min-height: 2.75rem;
    padding: .5rem .75rem; font-size: 1rem;
    color: var(--bs-body-color); background: #fff;
    border: 1px solid #ced4da; border-radius: var(--bs-border-radius);
    box-shadow: none;
}
.fw-zona.fw-zona .form-control:focus, .fw-zona.fw-zona .form-select:focus {
    border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.fw-zona.fw-zona .form-control::placeholder { color: #6c757d; opacity: 1; }
.fw-zona.fw-zona .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
.fw-zona.fw-zona .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
.fw-zona.fw-zona .btn {
    display: inline-block; min-height: 2.75rem; padding: .5rem 1.25rem;
    font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: center;
    text-transform: none; letter-spacing: normal; text-decoration: none;
    border: 1px solid transparent; border-radius: var(--bs-border-radius);
    box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.fw-zona.fw-zona .btn-primary, .fw-zona.fw-zona .btn-success {
    background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
.fw-zona.fw-zona .btn-primary:hover, .fw-zona.fw-zona .btn-success:hover { background: #0b5ed7; border-color: #0a58ca; color: #fff; }
.fw-zona.fw-zona .btn-secondary { background: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.fw-zona.fw-zona .btn-outline-secondary { background: #fff; border-color: #ced4da; color: #495057; }
.fw-zona.fw-zona .btn-outline-secondary:hover { background: #e9ecef; color: #212529; }
.fw-zona.fw-zona .btn-danger, .fw-zona.fw-zona .btn-warning, .fw-zona.fw-zona .btn-outline-danger, .fw-zona.fw-zona .btn-outline-primary { text-transform: none; }
.fw-zona.fw-zona .btn-sm { min-height: 2.25rem; padding: .25rem .75rem; font-size: .875rem; }
.fw-zona.fw-zona .alert { border-radius: var(--bs-border-radius); margin-bottom: 1rem; }
.fw-zona.fw-zona .table { color: var(--bs-body-color); font-size: .95rem; }
.fw-zona.fw-zona .table-responsive { overflow-x: auto; }

/* ---------- 4. Formularios del framework en movil: una sola columna, botones a lo ancho ---------- */
@media (max-width: 575.98px) {
    .fw-zona.fw-zona form .btn[type="submit"], .fw-zona.fw-zona form button[type="submit"] { width: 100%; }
    .fw-zona.fw-zona .text-center .btn { width: 100%; }
}

/* ---------- 5. Widget antibot (Turnstile): 300 px fijos, centrado y nunca fuera de la tarjeta ---------- */
.fw-zona.fw-zona .cf-turnstile-ajuste { max-width: 100%; margin: 0 auto 1rem; }
.fw-zona.fw-zona .mb-3.text-center > .cf-turnstile-ajuste { display: inline-block; text-align: left; }

/* ---------- 6. Pagina 404 del framework ---------- */
.fw-zona.fw-zona .error404-container { text-align: center; padding: 2rem 1rem 3rem; max-width: 40rem; margin: 0 auto; }
.fw-zona.fw-zona .error404-icon { font-size: clamp(4rem, 15vw, 7rem); color: var(--bs-danger); line-height: 1; margin-bottom: 1rem; }
.fw-zona.fw-zona .error404-title { font-size: clamp(3rem, 12vw, 5rem); font-weight: 800; line-height: 1; margin: 0 0 .5rem; }
.fw-zona.fw-zona .error404-subtitle { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; margin: 0 0 1rem; }
.fw-zona.fw-zona .error404-text { color: #495057; margin-bottom: 1.5rem; }
.fw-zona.fw-zona .error404-button, .fw-zona.fw-zona a.error404-button:link, .fw-zona.fw-zona a.error404-button:visited {
    display: inline-block; padding: .75rem 1.5rem; background: var(--bs-primary); color: #fff;
    border-radius: var(--bs-border-radius); text-decoration: none; font-weight: 600;
}
.fw-zona.fw-zona .error404-button:hover { background: #0b5ed7; color: #fff; }

/* ---------- 7. Titulos sueltos que el framework emite fuera de tarjeta (p.ej. h3 de recuperar) ---------- */
.fw-zona.fw-zona > h1, .fw-zona.fw-zona > h2, .fw-zona.fw-zona > h3 { text-align: center; padding: 0 1rem; }

/* ---------- 8. Menus de opciones (generar_menu_opciones, 08-10-2026, como el panel de profesional) ---------- */
.fw-zona.fw-menu { padding-top: 2rem; }
.fw-zona.fw-menu > .container { max-width: 1040px; }
.fw-zona.fw-menu h1 { text-align: center; color: #1e293b; }
.fw-zona.fw-menu .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.fw-zona.fw-menu .card.fw-menu-tarjeta { margin: 0 !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.fw-zona.fw-menu .card.fw-menu-tarjeta:hover { transform: translateY(-2px); border-color: #86b7fe !important; box-shadow: 0 .5rem 1.25rem rgba(13, 110, 253, .12); }
.fw-zona.fw-menu .card-title { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: .5rem; display: flex; align-items: center; }
.fw-zona.fw-menu .card-title .bi { color: #0d6efd; font-size: 1.35rem; line-height: 1; }
.fw-zona.fw-menu .card-text { color: #64748b; }
.fw-zona.fw-menu .btn-outline-primary { color: #0d6efd; border-color: #0d6efd; background: transparent; min-height: 2.25rem; padding: .25rem .9rem; font-size: .9rem; }
.fw-zona.fw-menu .card.fw-menu-tarjeta:hover .btn-outline-primary { background: #0d6efd; color: #fff; }

/* ---------- 9. Titulos h1 con aspecto de subtitulo (08-10-2026, #7804: cada pagina con su h1) ---------- */
/* !important en el tamaño: algunos temas (buscatucamping) fijan h1 con mas fuerza */
.fw-zona.fw-zona .card-header h1.fw-titulo-tarjeta { font-size: 1rem !important; font-weight: 500; line-height: 1.5; margin: 0 !important; color: inherit; text-align: inherit; }
.fw-zona.fw-zona h1.fw-titulo-seccion { font-size: clamp(1.25rem, 1.5vw + .8rem, 1.6rem); text-align: center; padding: 0 1rem; }