/* =====================================================================
   fw-md.css — DISEÑO BASE DE LAS APLICACIONES (#7837, 08-10-2026)
   ---------------------------------------------------------------------
   Criterios de Material Design sobre el Bootstrap 5.3.8 que ya cargan
   todas las apps (decision de Joel: principios Material, no una
   libreria Material). Se carga DESPUES de fw-zona.css y SOLO en las apps
   que lo activan con define('FW_DISENO', 'material'):
     - <main class="fw-zona fw-md"> envuelve los programas del framework
       y las pantallas privadas de la app (rutas con rol);
     - fw_md_pagina() da a esas pantallas su propio marco (barra superior
       de aplicacion + pie minimo) en lugar de la cabecera/pie publicos.
   Criterios:
     · superficies planas; sombra solo en lo pulsable o lo que flota;
     · espaciado en multiplos de 8 px; escala tipografica fija;
     · estados claros (foco, error, desactivado) en botones, campos y tablas;
     · un color de acento por app: --md-acento (FW_COLOR_ACENTO);
     · nada heredado del tema publico (prefijo .fw-zona.fw-md.fw-md).
   ===================================================================== */

/* ---------- 1. Fichas de diseño (tokens) ---------- */
.fw-md {
    --md-acento: #1a73e8;
    --md-acento-rgb: 26, 115, 232;
    --md-acento-hover: color-mix(in srgb, var(--md-acento) 86%, #000);
    --md-acento-suave: rgba(var(--md-acento-rgb), .10);
    --md-acento-suave-2: rgba(var(--md-acento-rgb), .18);
    --md-fondo: #f3f5f7;
    --md-superficie: #ffffff;
    --md-superficie-2: #f7f9fa;
    --md-borde: #e0e5e9;
    --md-borde-fuerte: #c4cdd4;
    --md-texto: #1c2630;
    --md-texto-2: #52606b;
    --md-texto-3: #7a8690;
    --md-error: #c62828;
    --md-error-rgb: 198, 40, 40;
    --md-exito: #2e7d32;
    --md-aviso: #a15c00;
    --md-radio: 12px;
    --md-radio-sm: 8px;
    --md-e1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --md-e2: 0 4px 12px rgba(16, 24, 40, .10);
    --md-e3: 0 12px 32px rgba(16, 24, 40, .18);
    --md-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. La zona ---------- */
.fw-zona.fw-md.fw-md {
    --bs-body-color: var(--md-texto);
    --bs-body-bg: var(--md-fondo);
    --bs-border-color: var(--md-borde);
    --bs-primary: var(--md-acento);
    --bs-primary-rgb: var(--md-acento-rgb);
    --bs-link-color: var(--md-acento);
    --bs-link-color-rgb: var(--md-acento-rgb);
    --bs-link-hover-color: var(--md-acento-hover);
    --bs-border-radius: var(--md-radio-sm);
    --bs-body-font-family: var(--md-fuente);
    --bs-gutter-x: 1.5rem;
    background: var(--md-fondo);
    color: var(--md-texto);
    font-family: var(--md-fuente);
    font-size: .9375rem;            /* 15 px */
    line-height: 1.5;
    padding: 24px 0 40px;
    min-height: 60vh;
}
/* Contenido con ancho maximo y aire a los lados (lo pone fw_zona_envolver) */
.fw-zona.fw-md.fw-md > .fw-md-contenido { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
/* Ancho de la zona, centrado, con la barra y el pie alineados (Joel 08-10-2026):
   ordenador 80 % (10 % a cada lado), tablet 90 % (5 %), movil 98 % (1 %) */
.fw-zona.fw-md.fw-md > .fw-md-contenido,
.fw-md-barra .fw-md-barra-in,
.fw-md-pie .fw-md-pie-in { max-width: none; width: 98%; padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
    .fw-zona.fw-md.fw-md > .fw-md-contenido,
    .fw-md-barra .fw-md-barra-in,
    .fw-md-pie .fw-md-pie-in { width: 90%; }
}
@media (min-width: 992px) {
    .fw-zona.fw-md.fw-md > .fw-md-contenido,
    .fw-md-barra .fw-md-barra-in,
    .fw-md-pie .fw-md-pie-in { width: 80%; }
}
/* Una zona dentro de otra (el menu de opciones trae la suya): sin fondo ni relleno propios */
.fw-zona.fw-md.fw-md .fw-zona { background: transparent; padding: 0; min-height: 0; }
/* Los temas quitan el relleno de .container y los margenes negativos de .row: aqui vuelven los de Bootstrap */
.fw-zona.fw-md.fw-md .container,
.fw-zona.fw-md.fw-md .container-fluid { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
.fw-zona.fw-md.fw-md .container { max-width: 1200px; }
.fw-zona.fw-md.fw-md .row { margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); }

/* ---------- 3. Tipografía (escala fija) ---------- */
.fw-zona.fw-md.fw-md h1, .fw-zona.fw-md.fw-md h2, .fw-zona.fw-md.fw-md h3,
.fw-zona.fw-md.fw-md h4, .fw-zona.fw-md.fw-md h5, .fw-zona.fw-md.fw-md h6 {
    font-family: var(--md-fuente); color: var(--md-texto); font-weight: 600; line-height: 1.3; margin: 0 0 16px; letter-spacing: 0;
}
.fw-zona.fw-md.fw-md h1 { font-size: 1.625rem; }   /* 26 */
.fw-zona.fw-md.fw-md h2 { font-size: 1.375rem; }   /* 22 */
.fw-zona.fw-md.fw-md h3 { font-size: 1.25rem; }    /* 20 */
.fw-zona.fw-md.fw-md h4 { font-size: 1.125rem; }   /* 18 */
.fw-zona.fw-md.fw-md h5, .fw-zona.fw-md.fw-md h6 { font-size: 1rem; }
.fw-zona.fw-md.fw-md p { color: inherit; font-size: inherit; line-height: inherit; margin: 0 0 16px; }
.fw-zona.fw-md.fw-md small, .fw-zona.fw-md.fw-md .small { font-size: .8125rem; }
.fw-zona.fw-md.fw-md .text-muted, .fw-zona.fw-md.fw-md .text-secondary { color: var(--md-texto-2) !important; }
.fw-zona.fw-md.fw-md .text-primary { color: var(--md-acento) !important; }
.fw-zona.fw-md.fw-md a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) { color: var(--md-acento); text-decoration: none; }
.fw-zona.fw-md.fw-md a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link):hover { color: var(--md-acento-hover); text-decoration: underline; }

/* ---------- 4. Superficies: tarjetas y paneles (planas, sin "levantarse") ---------- */
.fw-zona.fw-md.fw-md .card,
.fw-zona.fw-md.fw-md .card:hover {
    background: var(--md-superficie) !important;
    border: 1px solid var(--md-borde) !important;
    border-radius: var(--md-radio) !important;
    box-shadow: var(--md-e1) !important;
    transform: none !important;
    color: var(--md-texto);
    overflow: hidden;
}
.fw-zona.fw-md.fw-md .card-header {
    background: var(--md-superficie) !important; color: var(--md-texto) !important;
    border-bottom: 1px solid var(--md-borde) !important; padding: 16px 20px; font-weight: 600;
}
.fw-zona.fw-md.fw-md .card-header.text-white,
.fw-zona.fw-md.fw-md .card-header.bg-primary { background: var(--md-acento) !important; color: #fff !important; border-bottom-color: transparent !important; }
.fw-zona.fw-md.fw-md .card-header :is(h1, h2, h3, h4, h5) { margin: 0; color: inherit; }
.fw-zona.fw-md.fw-md .card-body { padding: 20px; }
.fw-zona.fw-md.fw-md .card-footer { background: var(--md-superficie-2); border-top: 1px solid var(--md-borde); padding: 12px 20px; }
/* Paneles grises que pintan algunas pantallas: pasan a superficie */
.fw-zona.fw-md.fw-md .bg-secondary-subtle,
.fw-zona.fw-md.fw-md .bg-body-secondary,
.fw-zona.fw-md.fw-md .bg-body-tertiary {
    background: var(--md-superficie) !important; border: 1px solid var(--md-borde); border-radius: var(--md-radio) !important; color: var(--md-texto) !important;
}
.fw-zona.fw-md.fw-md .bg-light { background: var(--md-superficie-2) !important; }
.fw-zona.fw-md.fw-md .shadow, .fw-zona.fw-md.fw-md .shadow-sm { box-shadow: var(--md-e1) !important; }
.fw-zona.fw-md.fw-md .shadow-lg { box-shadow: var(--md-e2) !important; }

/* ---------- 5. Botones (relleno = accion principal; tonal = secundaria) ----------
   Propiedades directas: fw-zona.css fija fondo/relleno de .btn y las variables de Bootstrap no bastan. */
.fw-zona.fw-md.fw-md .btn {
    min-height: 40px; padding: 8px 16px; font-size: .9375rem; font-weight: 500; line-height: 1.4;
    border-radius: var(--md-radio-sm); border: 1px solid transparent; letter-spacing: .01em;
    font-family: var(--md-fuente); box-shadow: none; text-transform: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.fw-zona.fw-md.fw-md .btn-sm { min-height: 32px; padding: 4px 12px; font-size: .8125rem; }
.fw-zona.fw-md.fw-md .btn-lg { min-height: 48px; padding: 12px 24px; font-size: 1rem; }
.fw-zona.fw-md.fw-md .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--md-acento-rgb), .30); }
.fw-zona.fw-md.fw-md .btn:disabled, .fw-zona.fw-md.fw-md .btn.disabled { opacity: .55; box-shadow: none; }
/* principal: relleno con el acento */
.fw-zona.fw-md.fw-md .btn-primary { background: var(--md-acento); border-color: var(--md-acento); color: #fff; }
.fw-zona.fw-md.fw-md .btn-primary:hover, .fw-zona.fw-md.fw-md .btn-primary:active { background: var(--md-acento-hover); border-color: var(--md-acento-hover); color: #fff; box-shadow: var(--md-e1); }
/* secundaria: tonal (fondo suave del acento) */
.fw-zona.fw-md.fw-md .btn-secondary,
.fw-zona.fw-md.fw-md .btn-light { background: var(--md-acento-suave); border-color: transparent; color: var(--md-acento); }
.fw-zona.fw-md.fw-md .btn-secondary:hover, .fw-zona.fw-md.fw-md .btn-secondary:active,
.fw-zona.fw-md.fw-md .btn-light:hover, .fw-zona.fw-md.fw-md .btn-light:active,
.fw-zona.fw-md.fw-md .btn-secondary.active, .fw-zona.fw-md.fw-md .show > .btn-secondary.dropdown-toggle { background: var(--md-acento-suave-2); border-color: transparent; color: var(--md-acento-hover); }
/* contorno */
.fw-zona.fw-md.fw-md .btn-outline-primary { background: var(--md-superficie); border-color: var(--md-borde-fuerte); color: var(--md-acento); }
.fw-zona.fw-md.fw-md .btn-outline-primary:hover, .fw-zona.fw-md.fw-md .btn-outline-primary:active { background: var(--md-acento-suave); border-color: var(--md-acento); color: var(--md-acento); }
.fw-zona.fw-md.fw-md .btn-outline-secondary,
.fw-zona.fw-md.fw-md .btn-outline-dark,
.fw-zona.fw-md.fw-md .btn-outline-info { background: var(--md-superficie); border-color: var(--md-borde-fuerte); color: var(--md-texto-2); }
.fw-zona.fw-md.fw-md .btn-outline-secondary:hover, .fw-zona.fw-md.fw-md .btn-outline-dark:hover,
.fw-zona.fw-md.fw-md .btn-outline-info:hover { background: var(--md-superficie-2); border-color: var(--md-texto-3); color: var(--md-texto); }
/* semanticos */
/* El framework usa btn-success para la accion principal (Entrar, Buscar): con un solo color principal, va con el acento */
.fw-zona.fw-md.fw-md .btn-success { background: var(--md-acento); border-color: var(--md-acento); color: #fff; }
.fw-zona.fw-md.fw-md .btn-success:hover, .fw-zona.fw-md.fw-md .btn-success:active { background: var(--md-acento-hover); border-color: var(--md-acento-hover); color: #fff; box-shadow: var(--md-e1); }
.fw-zona.fw-md.fw-md .btn-danger { background: var(--md-error); border-color: var(--md-error); color: #fff; }
.fw-zona.fw-md.fw-md .btn-danger:hover { background: color-mix(in srgb, var(--md-error) 86%, #000); border-color: color-mix(in srgb, var(--md-error) 86%, #000); color: #fff; }
.fw-zona.fw-md.fw-md .btn-outline-success { background: var(--md-superficie); border-color: rgba(46, 125, 50, .5); color: var(--md-exito); }
.fw-zona.fw-md.fw-md .btn-outline-success:hover { background: rgba(46, 125, 50, .08); border-color: var(--md-exito); color: var(--md-exito); }
.fw-zona.fw-md.fw-md .btn-outline-warning { background: var(--md-superficie); border-color: rgba(161, 92, 0, .5); color: var(--md-aviso); }
.fw-zona.fw-md.fw-md .btn-outline-warning:hover { background: rgba(161, 92, 0, .08); border-color: var(--md-aviso); color: var(--md-aviso); }
.fw-zona.fw-md.fw-md .btn-outline-danger { background: var(--md-superficie); border-color: rgba(var(--md-error-rgb), .45); color: var(--md-error); }
.fw-zona.fw-md.fw-md .btn-outline-danger:hover { background: rgba(var(--md-error-rgb), .08); border-color: var(--md-error); color: var(--md-error); }
.fw-zona.fw-md.fw-md .btn-link { background: transparent; border-color: transparent; color: var(--md-acento); text-decoration: none; }
.fw-zona.fw-md.fw-md .btn-link:hover { background: var(--md-acento-suave); color: var(--md-acento-hover); }
/* botones de icono en las filas de las tablas */
.fw-zona.fw-md.fw-md td .btn-sm { min-height: 30px; min-width: 30px; padding: 4px 8px; }

/* ---------- 6. Campos de formulario ---------- */
.fw-zona.fw-md.fw-md .form-label,
.fw-zona.fw-md.fw-md label { color: var(--md-texto-2); font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.fw-zona.fw-md.fw-md .form-check-label { color: var(--md-texto); font-weight: 400; font-size: .9375rem; }
.fw-zona.fw-md.fw-md .form-control,
.fw-zona.fw-md.fw-md .form-select {
    background-color: var(--md-superficie) !important;
    border: 1px solid var(--md-borde-fuerte);
    border-radius: var(--md-radio-sm);
    color: var(--md-texto);
    font-size: .9375rem;
    padding: 9px 12px;
    min-height: 40px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fw-zona.fw-md.fw-md .form-select { padding-right: 36px; }
.fw-zona.fw-md.fw-md .form-control-sm, .fw-zona.fw-md.fw-md .form-select-sm { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: .8125rem; }
.fw-zona.fw-md.fw-md .form-control:hover:not(:disabled):not(:focus),
.fw-zona.fw-md.fw-md .form-select:hover:not(:disabled):not(:focus) { border-color: var(--md-texto-3); }
.fw-zona.fw-md.fw-md .form-control:focus,
.fw-zona.fw-md.fw-md .form-select:focus { border-color: var(--md-acento); box-shadow: 0 0 0 3px rgba(var(--md-acento-rgb), .18); outline: 0; }
.fw-zona.fw-md.fw-md .form-control::placeholder { color: var(--md-texto-3); opacity: 1; }
.fw-zona.fw-md.fw-md .form-control:disabled, .fw-zona.fw-md.fw-md .form-select:disabled,
.fw-zona.fw-md.fw-md .form-control[readonly] { background-color: var(--md-superficie-2) !important; color: var(--md-texto-2); }
.fw-zona.fw-md.fw-md .form-control.is-invalid, .fw-zona.fw-md.fw-md .form-select.is-invalid { border-color: var(--md-error); }
.fw-zona.fw-md.fw-md .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--md-error-rgb), .18); }
.fw-zona.fw-md.fw-md .invalid-feedback { color: var(--md-error); font-size: .8125rem; }
.fw-zona.fw-md.fw-md .form-text { color: var(--md-texto-3); font-size: .8125rem; }
.fw-zona.fw-md.fw-md .form-check-input:checked { background-color: var(--md-acento); border-color: var(--md-acento); }
.fw-zona.fw-md.fw-md .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--md-acento-rgb), .25); border-color: var(--md-acento); }
.fw-zona.fw-md.fw-md .input-group-text { background: var(--md-superficie-2); border-color: var(--md-borde-fuerte); color: var(--md-texto-2); }
.fw-zona.fw-md.fw-md .input-group > .btn { min-height: 40px; }

/* ---------- 7. Tablas (divisores horizontales, cabecera tenue) ---------- */
.fw-zona.fw-md.fw-md .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--md-texto);
    --bs-table-striped-bg: rgba(16, 24, 40, .025);
    --bs-table-striped-color: var(--md-texto);
    --bs-table-hover-bg: rgba(var(--md-acento-rgb), .06);
    --bs-table-hover-color: var(--md-texto);
    --bs-table-border-color: var(--md-borde);
    margin-bottom: 0;
    font-size: .9rem;
}
.fw-zona.fw-md.fw-md .table > :not(caption) > * > * { padding: 12px 10px; border-left-width: 0; border-right-width: 0; vertical-align: middle; }
/* Los anchos del datagrid son una referencia: el navegador respeta la palabra mas larga de cada columna
   ("Acciones", "Adjuntos", las fechas no se parten); solo si no cabe todo aparece el desplazamiento */
.fw-zona.fw-md.fw-md .gdg-table { table-layout: auto; }
.fw-zona.fw-md.fw-md .gdg-table th, .fw-zona.fw-md.fw-md .gdg-table td { word-break: normal; overflow-wrap: normal; hyphens: none; }
.fw-zona.fw-md.fw-md .gdg-table td[data-col*="fecha" i] { white-space: nowrap !important; }  /* 05-12-2025 en una linea (el datagrid pone normal !important en movil) */
.fw-zona.fw-md.fw-md .table-bordered > :not(caption) > * { border-width: 0; }
.fw-zona.fw-md.fw-md .table thead th,
.fw-zona.fw-md.fw-md .gdg-table thead th {
    background: var(--md-superficie-2) !important;
    color: var(--md-texto-2) !important;
    font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
    border-bottom: 1px solid var(--md-borde-fuerte) !important;
}
/* El datagrid centra los datos (td.text-center): la cabecera, igual, para que cada titulo quede sobre su columna */
.fw-zona.fw-md.fw-md .gdg-table thead th { text-align: center; }
/* Listado sin registros: mensaje con aire, centrado y en tono secundario */
.fw-zona.fw-md.fw-md .gdg-vacio { margin: 0 !important; padding: 40px 16px; text-align: center; color: var(--md-texto-2); font-weight: 500 !important; }
.fw-zona.fw-md.fw-md .table thead th a,
.fw-zona.fw-md.fw-md .table thead th a.link-light { color: var(--md-texto-2) !important; text-decoration: none; }
.fw-zona.fw-md.fw-md .table thead th a:hover { color: var(--md-acento) !important; }
/* El datagrid del framework en una superficie propia */
.fw-zona.fw-md.fw-md .gdg-responsive {
    background: var(--md-superficie); border: 1px solid var(--md-borde); border-radius: var(--md-radio);
    box-shadow: var(--md-e1); padding: 0 !important;
}
.fw-zona.fw-md.fw-md .card .gdg-responsive { border: 0; border-radius: 0; box-shadow: none; }
.fw-zona.fw-md.fw-md .gdg-table tbody tr:last-child > * { border-bottom-width: 0; }
.fw-zona.fw-md.fw-md .card > .d-flex.justify-content-between { padding: 12px 16px; margin: 0 !important; border-top: 1px solid var(--md-borde); gap: 8px 16px; flex-wrap: wrap; }

/* Buscador del datagrid (venía dentro de un alert-danger rosa) */
.fw-zona.fw-md.fw-md .alert:has(> form[role="search"]) {
    background: var(--md-superficie); border: 1px solid var(--md-borde); border-radius: var(--md-radio);
    color: var(--md-texto); padding: 12px; box-shadow: var(--md-e1);
}
.fw-zona.fw-md.fw-md .alert:has(> form[role="search"]) .btn-success { background: var(--md-acento); border-color: var(--md-acento); color: #fff; }
.fw-zona.fw-md.fw-md .alert:has(> form[role="search"]) .btn-success:hover { background: var(--md-acento-hover); border-color: var(--md-acento-hover); }
/* En movil la tabla conserva su anchura y se desliza en horizontal (antes se partia letra a letra) */
@media (max-width: 767.98px) {
    .fw-zona.fw-md.fw-md .gdg-table { table-layout: auto; min-width: 680px; }
    .fw-zona.fw-md.fw-md .gdg-table th, .fw-zona.fw-md.fw-md .gdg-table td { word-break: normal; overflow-wrap: normal; }
    .fw-zona.fw-md.fw-md .gdg-table thead th { white-space: nowrap; }
    .fw-zona.fw-md.fw-md .table > :not(caption) > * > * { padding: 8px 10px; }
    .fw-zona.fw-md.fw-md .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 8. Avisos, chapas, paginación, pestañas ---------- */
.fw-zona.fw-md.fw-md .alert-secondary,
.fw-zona.fw-md.fw-md .alert-light { background: var(--md-superficie); border: 1px solid var(--md-borde); color: var(--md-texto); box-shadow: var(--md-e1); }
.fw-zona.fw-md.fw-md .alert { border-radius: var(--md-radio-sm); border-width: 0 0 0 4px; font-size: .9375rem; }
.fw-zona.fw-md.fw-md .badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; letter-spacing: .01em; }
.fw-zona.fw-md.fw-md .pagination { --bs-pagination-color: var(--md-acento); --bs-pagination-active-bg: var(--md-acento); --bs-pagination-active-border-color: var(--md-acento); --bs-pagination-border-color: var(--md-borde); --bs-pagination-hover-bg: var(--md-acento-suave); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--md-acento-rgb), .25); }
.fw-zona.fw-md.fw-md .nav-pills .nav-link.active { background: var(--md-acento); }
.fw-zona.fw-md.fw-md .nav-tabs .nav-link.active { color: var(--md-acento); border-bottom: 2px solid var(--md-acento); }
.fw-zona.fw-md.fw-md .list-group { border-radius: var(--md-radio); }
.fw-zona.fw-md.fw-md .list-group-item.active { background: var(--md-acento); border-color: var(--md-acento); }

/* ---------- 9. Lo que flota: menús desplegables y ventanas ---------- */
.fw-zona.fw-md.fw-md .dropdown-menu {
    border: 0; border-radius: var(--md-radio-sm); box-shadow: var(--md-e3); padding: 8px 0; font-size: .9375rem;
    --bs-dropdown-link-active-bg: var(--md-acento-suave-2); --bs-dropdown-link-active-color: var(--md-texto);
}
.fw-zona.fw-md.fw-md .dropdown-item { padding: 8px 16px; color: var(--md-texto); }
.fw-zona.fw-md.fw-md .dropdown-item:hover, .fw-zona.fw-md.fw-md .dropdown-item:focus { background: var(--md-acento-suave); }
.fw-zona.fw-md.fw-md .modal-content { border: 0; border-radius: 16px; box-shadow: var(--md-e3); }
.fw-zona.fw-md.fw-md .modal-header, .fw-zona.fw-md.fw-md .modal-footer { border-color: var(--md-borde); }
/* Cabecera de las ventanas: titulo a la izquierda y la X a la derecha (algunos temas rompen el flex de Bootstrap) */
.fw-zona.fw-md.fw-md .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.fw-zona.fw-md.fw-md .modal-header .modal-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.fw-zona.fw-md.fw-md .modal-header .btn-close { margin: 0 0 0 auto; flex-shrink: 0; }
.fw-zona.fw-md.fw-md .modal-header.bg-primary { background: var(--md-acento) !important; color: #fff; border-bottom-color: transparent; }
.fw-zona.fw-md.fw-md .modal-body { padding: 20px; }
.fw-zona.fw-md.fw-md .modal-footer { padding: 12px 20px; gap: 8px; }

/* ---------- 10. Menú de opciones del framework con el acento de la app ---------- */
.fw-zona.fw-md.fw-md .fw-menu .card.fw-menu-tarjeta { box-shadow: var(--md-e1) !important; }
.fw-zona.fw-md.fw-md .fw-menu .card.fw-menu-tarjeta:hover { transform: translateY(-2px) !important; box-shadow: var(--md-e2) !important; border-color: rgba(var(--md-acento-rgb), .55) !important; }
.fw-zona.fw-md.fw-md .fw-menu .fw-menu-tarjeta .bi,
.fw-zona.fw-md.fw-md .fw-menu .fw-menu-tarjeta i { color: var(--md-acento) !important; }

/* ---------- 11. Marco propio de las pantallas privadas (fw_md_pagina) ---------- */
body.fw-md-cuerpo { margin: 0; background: var(--md-fondo); font-family: var(--md-fuente); color: var(--md-texto); display: flex; flex-direction: column; min-height: 100vh; }
body.fw-md-cuerpo > main { flex: 1 0 auto; }
.fw-md-barra { position: sticky; top: 0; z-index: 1030; background: var(--md-barra-fondo, #1c2630); color: var(--md-barra-texto, #fff); box-shadow: var(--md-e2); }
.fw-md-barra-in { max-width: 1200px; margin: 0 auto; padding: 0 16px; min-height: 56px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.fw-md-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; margin-right: auto; padding: 8px 0; }
.fw-md-marca:hover { color: inherit; }
.fw-md-marca img { height: 32px; width: auto; display: block; }
.fw-md-marca-textos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fw-md-marca-nombre { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.fw-md-marca-dominio { font-size: .75rem; opacity: .75; white-space: nowrap; }
.fw-md-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.fw-md-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--md-radio-sm); color: inherit; text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.fw-md-nav a:hover, .fw-md-nav a:focus-visible { background: var(--md-barra-hover, rgba(255, 255, 255, .14)); color: inherit; outline: 0; }
.fw-md-nav a.activo { background: var(--md-barra-activo, rgba(255, 255, 255, .22)); }
.fw-md-nav .bi { font-size: 1.05rem; }
.fw-md-usuario { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; font-size: .85rem; opacity: .85; white-space: nowrap; }
.fw-md-separador { width: 1px; align-self: stretch; margin: 12px 4px; background: currentColor; opacity: .25; }
.fw-md-pie { border-top: 1px solid var(--md-borde); background: var(--md-superficie); color: var(--md-texto-3); font-size: .8125rem; }
.fw-md-pie-in { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
.fw-md-pie a { color: var(--md-texto-2); text-decoration: none; }
.fw-md-pie a:hover { color: var(--md-acento); text-decoration: underline; }
.fw-md-corto { display: none; }
@media (max-width: 767.98px) {
    .fw-md-barra-in { gap: 0 4px; }
    .fw-md-marca img { height: 28px; }
    .fw-md-marca-dominio { display: none; }
    .fw-md-nav a { padding: 8px; }
    .fw-md-nav .fw-md-largo { display: none; }
    .fw-md-nav .fw-md-corto { display: inline; }
    .fw-md-usuario, .fw-md-separador { display: none; }
    .fw-zona.fw-md.fw-md { padding-top: 16px; }
}
@media (max-width: 399.98px) {
    .fw-md-nav a span { display: none !important; }   /* solo iconos en pantallas muy estrechas */
    .fw-md-nav a { padding: 8px 10px; }
}