/* ===========================================================================
   AYUDA — COMPONENTES COMPARTIDOS
   Lo inyecta _menu_ayuda.php junto con _ayuda_navy.css.

   ¿Por qué existe? Al partir los manuales apilados en «un archivo por submódulo»,
   el HTML se mudó al archivo nuevo pero el <style> se quedó en la página madre.
   Resultado: 107 manuales usaban clases que NINGÚN CSS define — y eso no da error,
   simplemente no pinta: el elemento sale como texto crudo. Acá viven esos
   componentes, una sola vez, para toda la carpeta.

   🔑 TODO va dentro de :where(...), que tiene especificidad CERO: si una página
   define la misma clase en su propio <style>, la suya gana aunque este archivo
   se cargue después. Así se tapa el hueco sin cambiarle el aspecto a nadie.
   =========================================================================== */

/* ---- Pastillas de código (módulo, modal, permiso, etiquetas) ---- */
:where([class^="modulo-codigo"], [class*=" modulo-codigo"], .modal-codigo, .chip-code,
       .badge-codigo, .badge-cod, .badge-inline, .perm-badge, .lic-tag, .badge,
       [class^="badge-co"], .badge-tarifa, .chip){
    display:inline-block; background:var(--ay-head-row,#dde8f5); color:var(--ay-navy1,#1a4d80);
    border:1px solid var(--ay-border,#cbd9ea); border-radius:5px;
    padding:1px 7px; font-size:11px; font-weight:700; line-height:1.6;
    vertical-align:middle; white-space:nowrap;
}
:where(.badge-nuevo){
    display:inline-block; background:#dcfce7; color:#15803d; border:1px solid #86efac;
    border-radius:5px; padding:1px 7px; font-size:10.5px; font-weight:700; white-space:nowrap;
}
:where(.col-chip){
    display:inline-block; background:var(--ay-hover,#f0f6ff); color:var(--ay-ink,#0f2438);
    border:1px solid var(--ay-border,#cbd9ea); border-radius:5px;
    padding:2px 8px; margin:2px 3px 2px 0; font-size:12px; font-weight:600;
}
:where(.col-chip.destacado, .destacado){
    background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; font-weight:700;
}
:where(.cols-ejemplo){ display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }

/* ---- Estados con punto o pastilla de color ---- */
:where(.chip-estado-pendiente, .chip-estado-confirmada, .chip-estado-checkin,
       .chip-estado-checkout, .chip-estado-cancelada, .estado-mesa,
       .estado-D, .estado-O, .estado-R){
    display:inline-block; border-radius:11px; padding:1px 9px;
    font-size:11px; font-weight:700; white-space:nowrap;
}
:where(.chip-estado-pendiente){ background:#fef3c7; color:#b45309; }
:where(.chip-estado-confirmada){ background:#dbeafe; color:#1d4ed8; }
:where(.chip-estado-checkin){ background:#dcfce7; color:#15803d; }
:where(.chip-estado-checkout){ background:#e2e8f0; color:#475569; }
:where(.chip-estado-cancelada){ background:#fee2e2; color:#b91c1c; }
:where(.estado-D){ background:#dcfce7; color:#15803d; }   /* Disponible */
:where(.estado-O){ background:#fee2e2; color:#b91c1c; }   /* Ocupada */
:where(.estado-R){ background:#fef3c7; color:#b45309; }   /* Reservada */
:where(.estado-dot-inline){
    display:inline-block; width:9px; height:9px; border-radius:50%;
    margin-right:6px; vertical-align:middle;
}
:where(.cuenta-nivel){ display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:700; }
:where(.nivel-1){ background:#1e3a8a; color:#fff; }
:where(.nivel-2){ background:#2563eb; color:#fff; }
:where(.nivel-3){ background:#60a5fa; color:#0f2438; }
:where(.nivel-4){ background:#dbeafe; color:#1d4ed8; }

/* ---- Cajas de aviso (mismo molde que .box de _ayuda_navy.css) ---- */
:where(.nota, .nota-info, .nota-caja, .nota-pie, .nota-warning, .nota-advertencia,
       .contenedor-nota, .alerta-caja, .callout-info, .callout-warn,
       .info-box, .info-box-success, .tip, .ayuda-tip,
       .val-ok, .val-info, .val-warn, .val-err){
    display:block; border:1px solid var(--ay-border,#cbd9ea); border-left-width:4px;
    border-radius:9px; padding:11px 14px; margin:12px 0; font-size:13px; line-height:1.6;
    background:#eff6ff; border-left-color:#2563eb;
}
:where(.tip, .ayuda-tip, .info-box-success, .val-ok){ background:#ecfdf5; border-left-color:#10b981; }
:where(.nota-warning, .nota-advertencia, .alerta-caja, .callout-warn, .val-warn){
    background:#fffbeb; border-left-color:#f59e0b;
}
:where(.val-err){ background:#fef2f2; border-left-color:#ef4444; }
:where(.nota-pie){ background:transparent; border:0; border-left:3px solid var(--ay-border,#cbd9ea);
    border-radius:0; padding:2px 0 2px 10px; font-size:12px; color:var(--ay-muted,#5a7088); }

/* Colores de texto sueltos (se usan dentro de las tablas de licencias) */
:where(.green){ color:#15803d; font-weight:700; }
:where(.red){ color:#b91c1c; font-weight:700; }
:where(.amber, .warning){ color:#b45309; font-weight:700; }

/* ---- Tablas (mismo aire que .tabla-comp) ---- */
:where(.ayuda-tabla, .tabla, .tabla-ejemplo, .tabla-ayuda, .tabla-modulos){
    width:100%; border-collapse:collapse; margin:10px 0;
    background:var(--ay-card,#fff); border:1px solid var(--ay-border,#cbd9ea);
    border-radius:8px; overflow:hidden; font-size:13px;
}
:where(.ayuda-tabla th, .tabla th, .tabla-ejemplo th, .tabla-ayuda th, .tabla-modulos th){
    background:var(--ay-head-row,#dde8f5); color:var(--ay-navy1,#1a4d80);
    text-align:left; font-weight:700; padding:7px 10px;
    border-bottom:1px solid var(--ay-border,#cbd9ea);
}
:where(.ayuda-tabla td, .tabla td, .tabla-ejemplo td, .tabla-ayuda td, .tabla-modulos td){
    padding:6px 10px; border-bottom:1px solid var(--ay-border,#cbd9ea); vertical-align:top;
}
:where(.ayuda-tabla tr:hover td, .tabla tr:hover td){ background:var(--ay-hover,#f0f6ff); }
/* 🪤 El contenedor con scroll propio: sin esto una tabla ancha empuja la página entera. */
:where(.ayuda-tabla-wrap, .tabla-comp-wrap){ overflow-x:auto; margin:10px 0; }

/* ---- Flujo (los pasos con flechitas de «cómo se entra») ---- */
:where(.flujo, .lic-flow){
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0;
}
:where(.flujo-paso){
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ay-hover,#f0f6ff); border:1px solid var(--ay-border,#cbd9ea);
    border-radius:8px; padding:6px 11px; font-size:12.5px; color:var(--ay-ink,#0f2438);
}
:where(.flujo-paso i){ color:var(--ay-accent,#2563eb); }
:where(.flujo-flecha, .arrow){ color:var(--ay-muted,#5a7088); font-size:14px; }

/* ---- Pasos numerados ---- */
:where(.ayuda-pasos){ display:flex; flex-direction:column; gap:10px; margin:12px 0; }
:where(.ayuda-paso){
    background:var(--ay-card,#fff); border:1px solid var(--ay-border,#cbd9ea);
    border-left:4px solid var(--ay-accent,#2563eb); border-radius:9px; padding:11px 14px;
}
:where(.paso-contenido, .paso-body){ font-size:13px; line-height:1.6; }

/* ---- Preguntas frecuentes ---- */
:where(.faq-item){
    background:var(--ay-card,#fff); border:1px solid var(--ay-border,#cbd9ea);
    border-radius:9px; padding:10px 13px; margin:8px 0;
}
:where(.faq-q){ font-weight:700; color:var(--ay-navy1,#1a4d80); font-size:13px; margin-bottom:4px; }
:where(.faq-a){ font-size:13px; line-height:1.6; color:var(--ay-ink,#0f2438); }

/* ---- Tarjetas de recursos (descargas, enlaces) ---- */
:where(.recursos-grid){ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin:12px 0; }
:where(.recurso-card){
    background:var(--ay-card,#fff); border:1px solid var(--ay-border,#cbd9ea);
    border-top:3px solid var(--ay-accent,#2563eb); border-radius:9px; padding:12px 14px;
}
:where(.recurso-card-top){ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
:where(.recurso-info h3){ margin:0 0 4px; font-size:14px; }
:where(.recurso-info p){ margin:0; font-size:12.5px; color:var(--ay-muted,#5a7088); }
:where(.btn-recurso){
    display:inline-block; background:var(--ay-navy1,#1a4d80); color:#fff;
    border-radius:6px; padding:5px 11px; font-size:12px; font-weight:600; text-decoration:none;
}

/* ---- Listas ---- */
:where(.ayuda-lista, .lista-basica){ margin:8px 0 8px 18px; font-size:13px; line-height:1.7; }
:where(.lista-check){ list-style:none; margin:8px 0; padding:0; font-size:13px; line-height:1.8; }
:where(.lista-check li::before){ content:"✓ "; color:#15803d; font-weight:700; }

/* ---- Sub-índice ---- */
:where(.toc-sub){ padding-left:16px; font-size:12px; opacity:.9; }
:where(.toc-sep){ border-top:1px solid var(--ay-border,#cbd9ea); margin:7px 0; }
:where(.toc-group-label){
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ay-muted,#5a7088); margin:10px 0 3px;
}

/* ---- Contenedor de contenido con otro nombre ---- */
:where(.ayuda-body){ flex:1; min-width:0; padding:14px 18px; }

/* ---- Utilitarias sueltas ---- */
:where(.text-center){ text-align:center; }
:where(.bg-success){ background:#dcfce7; color:#15803d; }

/* ---- Cola de clases sueltas de una o dos páginas ---- */
:where(.box-aviso){ background:#fffbeb; border-left-color:#f59e0b; }
:where(.recurso-tipo-icon){
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:8px; flex:0 0 auto;
    background:var(--ay-head-row,#dde8f5); color:var(--ay-navy1,#1a4d80); font-size:16px;
}
/* Las tarifas de IVA: la pastilla ya la pone .badge-tarifa, esto solo le da el color. */
:where(.tarifa-0){ background:#e2e8f0; color:#475569; }
:where(.tarifa-1){ background:#e0f2fe; color:#0369a1; }
:where(.tarifa-2){ background:#dbeafe; color:#1d4ed8; }
:where(.tarifa-4){ background:#ede9fe; color:#6d28d9; }
:where(.tarifa-8){ background:#fef3c7; color:#b45309; }
:where(.tarifa-13){ background:#dcfce7; color:#15803d; }