/* ==========================================================================
   Portal de Convenios Colectivos y Tablas Salariales — sistema de diseño
   Dirección: "ficha de nómina" refinada — seriedad + buena experiencia visual.
   Mobile-first. Sin frameworks, sin fuentes externas (rendimiento).
   ========================================================================== */

:root {
    --bg: #f4f6f8;
    --bg-card: #ffffff;
    --bg-subtle: #eef1f4;
    --ink: #1c2430;
    --ink-muted: #5b6472;
    --primary: #16283f;
    --primary-2: #223b5c;
    --primary-ink-on: #ffffff;
    --accent: #d98a2b;
    --accent-hover: #c37a20;
    --accent-ink: #5c3a10;
    --border: #e2e6ea;
    --ok-bg: #eaf5ee;
    --ok-ink: #205c37;
    --warn-bg: #fdf1e8;
    --warn-ink: #8a3c15;
    --warn-border: #f0c49a;
    --shadow-sm: 0 1px 2px rgba(28, 36, 48, 0.06), 0 1px 1px rgba(28, 36, 48, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 36, 48, 0.08), 0 2px 4px rgba(28, 36, 48, 0.04);
    --radius: 12px;
    --radius-sm: 8px;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-nums: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace;
    --container: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Una URL sin cortes en un texto (notas_vigencia de comercio-murcia) ensanchaba la página en
       móvil hasta 495 px. break-word, no anywhere: no cambia el ancho mínimo de las celdas, así
       que ninguna cifra de una tabla se parte en dos líneas (sesión 61). */
    overflow-wrap: break-word;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--primary-2); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); margin: 0 0 0.5em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 700; }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink); }
.text-muted { color: var(--ink-muted); }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ----------------------------- Cabecera / nav ---------------------------- */

.site-header {
    background: var(--primary);
    color: var(--primary-ink-on);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
}
.brand:hover { color: var(--accent); }
.brand-mark-img {
    height: 38px;
    width: auto;
    flex: none;
    display: block;
}
.site-nav { display: flex; gap: 18px; }
.site-nav a {
    color: #d9e2ee;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}
.site-nav a:hover { color: #fff; }

/* Con cuatro enlaces (s136, "Pregunta a tu convenio") el menú no cabe en una línea por debajo de
   ~1.100 px y ya pisaba el logotipo a 700 px con tres: hasta 1.024 px, menú hamburguesa. */
@media (max-width: 1024px) {
    .site-nav { display: none; }
}

/* --------------------------------- Migas --------------------------------- */

.migas {
    font-size: 0.875rem;
    color: var(--ink-muted);
    margin: 18px 0 10px;
}
.migas a { color: var(--ink-muted); text-decoration: none; }
.migas a:hover { color: var(--primary-2); text-decoration: underline; }
.migas-sep { margin: 0 4px; color: #b7c0cb; }
.migas [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --------------------------------- Tarjetas ------------------------------- */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.card + .card { margin-top: 16px; }

/* Ficha resumen del convenio (sidebar-like en desktop, apilada en móvil) */
.ficha-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 24px;
}
.ficha-resumen dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    margin-bottom: 2px;
}
.ficha-resumen dd { margin: 0; font-weight: 600; }
.ficha-resumen dd.mono { font-family: var(--font-nums); }
.ficha-resumen a { font-weight: 600; }

/* ------------------------------- Aviso honestidad ------------------------- */

.aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-ink);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 20px 0;
    font-size: 0.95rem;
}
.aviso .aviso-icono { font-size: 1.25rem; line-height: 1; flex: none; }
/* Sin min-width: 0 el texto no baja de su palabra más larga (una URL de REGCON en comercio-sevilla
   se salía 12 px a 320 px). */
.aviso > :not(.aviso-icono) { min-width: 0; }

/* -------------------------------- Tabla salarial -------------------------- */

.tabla-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}
table.tabla-salarial {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    min-width: 480px;
}
table.tabla-salarial caption { text-align: left; padding: 14px 16px 0; font-weight: 600; }
table.tabla-salarial th, table.tabla-salarial td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}
table.tabla-salarial thead th {
    background: var(--bg-subtle);
    color: var(--ink-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}
table.tabla-salarial tbody tr:last-child td { border-bottom: none; }
table.tabla-salarial tbody tr:hover { background: var(--bg-subtle); }
table.tabla-salarial td.num, table.tabla-salarial th.num {
    font-family: var(--font-nums);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.tabla-salarial td.num strong { color: var(--primary); }

/* ------------------------------- Listas de permisos ------------------------ */

.lista-permisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-permisos li {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 6px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.lista-permisos li:last-child { border-bottom: none; }
.lista-permisos strong { color: var(--ink); }
@media (max-width: 560px) {
    .lista-permisos li { grid-template-columns: 1fr; }
}

/* --------------------------------- Enlaces internos ------------------------ */

.grid-enlaces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.chip {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-2);
    transition: border-color .15s, transform .15s;
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip.chip-disabled {
    color: var(--ink-muted);
    font-weight: 500;
    cursor: default;
}
.chip.chip-disabled:hover { border-color: var(--border); transform: none; }

/* ---------------------------------- Botones -------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-secondary { background: var(--bg-card); color: var(--primary); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--primary-2); color: var(--primary-2); }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }

/* ---------------------------------- Formularios ----------------------------- */

label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
input, select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-card);
    color: var(--ink);
}
.campo { margin-bottom: 16px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.resultado {
    margin-top: 24px;
    padding: 20px;
    border-radius: var(--radius);
}
.resultado.resultado-ok { background: var(--ok-bg); color: var(--ok-ink); }
.resultado.resultado-alerta { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-border); }
.resultado .cifra {
    font-family: var(--font-nums);
    font-size: 1.75rem;
    font-weight: 700;
    display: block;
    margin: 6px 0;
}

/* -------------------------------- Buscador autocompletado ------------------- */

.buscador { position: relative; max-width: 560px; }
.buscador input { padding-right: 44px; }
.buscador-resultados {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 340px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}
.buscador-resultados.activo { display: block; }
.buscador-resultados a {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}
.buscador-resultados a:last-child { border-bottom: none; }
.buscador-resultados a:hover, .buscador-resultados a.activo-teclado { background: var(--bg-subtle); }
.buscador-resultados small { display: block; color: var(--ink-muted); font-weight: 400; font-size: .8em; }
.buscador-sin-resultados { padding: 14px; text-align: center; }
.buscador-sin-resultados p { margin: 0 0 6px; color: var(--ink-muted); font-size: .9rem; }

/* ------------------------------------ Home ---------------------------------- */

.hero {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
    color: #fff;
    padding: 56px 0 72px;
}
.hero h1 { color: #fff; }
.hero p.lead { color: #cfdaea; font-size: 1.1rem; max-width: 620px; }

.grid-sectores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0 40px;
}
.tarjeta-sector {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
}
.tarjeta-sector:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tarjeta-sector h3 { color: var(--primary); margin-bottom: 4px; }
.tarjeta-sector p { color: var(--ink-muted); font-size: 0.9rem; margin: 0; }

/* ------------------------------------ Cookies -------------------------------- */

.cookie-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    background: var(--primary);
    color: #fff;
    padding: 18px 20px;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    display: none;
}
.cookie-banner.activo { display: block; }
.cookie-banner .container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.cookie-banner p { margin: 0; color: #dbe4f0; font-size: 0.9rem; max-width: 640px; }
.cookie-banner a { color: #fff; }
.cookie-banner .botones { display: flex; gap: 10px; flex: none; }

/* ------------------------------------ Footer ---------------------------------- */

.site-footer {
    background: var(--primary);
    color: #b9c6d8;
    margin-top: 60px;
    padding: 36px 0 28px;
    font-size: 0.9rem;
}
.site-footer a { color: #d9e2ee; }
.site-footer a:hover { color: #fff; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.footer-nota { color: #8ea0b8; font-size: 0.8rem; }

/* ------------------------------------ Utilidades ------------------------------ */

.seccion { padding: 32px 0; }
.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------ FAQ (details/summary nativo) ------------ */

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+ '; color: var(--accent-hover); font-weight: 700; }
.faq-item[open] summary::before { content: '– '; }
.faq-item p { margin: 10px 0 0; color: var(--ink-muted); }

/* ------------------------------------ Slots publicitarios ---------------------- */

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    font-size: 0.75rem;
    margin: 24px auto;
    overflow: hidden;
}
.ad-slot[data-posicion="top"], .ad-slot[data-posicion="bottom"] { min-height: 90px; max-width: 728px; }
.ad-slot[data-posicion="content"], .ad-slot[data-posicion="between"] { min-height: 100px; }
.ad-slot[data-posicion="sidebar"] { min-height: 250px; max-width: 300px; }
@media (max-width: 640px) {
    .ad-slot[data-posicion="top"], .ad-slot[data-posicion="bottom"] { min-height: 50px; }
}

/* ------------------------------- Menú móvil (hamburguesa) --------------------- */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    margin: -8px 0;
    cursor: pointer;
    flex: none;
}
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .15s, opacity .15s;
}
.menu-toggle-icon { position: relative; }
.menu-toggle-icon::before, .menu-toggle-icon::after { content: ''; position: absolute; left: 0; }
.menu-toggle-icon::before { top: -7px; }
.menu-toggle-icon::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { top: 0; transform: rotate(-45deg); }

.menu-movil {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    z-index: 41;
}
.menu-movil a {
    padding: 14px 20px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.menu-movil a:last-child { border-bottom: none; }
.menu-movil a:hover, .menu-movil a:active { background: var(--bg-subtle); }

.menu-movil-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 33, 0.45);
    z-index: 39;
}

@media (max-width: 640px) {
    /* Cabecera fija en móvil, para que el botón de menú esté siempre a mano al hacer scroll. */
    .site-header { position: sticky; top: 0; z-index: 40; }
}
@media (max-width: 1024px) {
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .menu-movil.activo { display: flex; }
    .menu-movil-overlay.activo { display: block; }
}

/* --------------------------- Tablas responsive → tarjetas en móvil ------------ */
/* Usar junto a `tabla-salarial` (clase `tabla-responsive`) con data-label en cada <td> —
   ver la tabla de "Convenios actualizados recientemente" en index.php. Pensada para tablas
   con pocas columnas de texto (no para la tabla salarial principal, que ya se resuelve con
   scroll horizontal propio en .tabla-scroll). */
@media (max-width: 640px) {
    table.tabla-responsive { min-width: 0; }
    table.tabla-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    table.tabla-responsive, table.tabla-responsive tbody, table.tabla-responsive tr, table.tabla-responsive td {
        display: block;
        width: 100%;
    }
    table.tabla-responsive tr {
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }
    table.tabla-responsive tr:last-child { margin-bottom: 0; }
    table.tabla-responsive td {
        border-bottom: 1px solid var(--border);
    }
    table.tabla-responsive td:last-child { border-bottom: none; }
    table.tabla-responsive td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--ink-muted);
        margin-bottom: 2px;
    }
}

/* --- "Pregunta a tu convenio": páginas de permisos (fase 2, sesión 126) --- */
.condicion { margin-top: 16px; }
.condicion h3 { margin: 0 0 8px; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.condicion .lista-permisos { margin: 0 0 8px; }
.condicion-et { font-size: .9rem; margin: 8px 0; }
.condicion-cita summary { cursor: pointer; font-size: .9rem; color: var(--primary-2); }
.condicion-cita blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--border); background: var(--bg-subtle); font-size: .9rem; }
.condicion-comparar { margin: 8px 0 0; font-size: .9rem; }
.cta-asistente { margin-top: 32px; border-left: 4px solid var(--accent); }
.cta-asistente h2 { margin-top: 0; font-size: 1.15rem; }

/* ---------------------- Pregunta a tu convenio (asistente, s136) ---------------------- */
.asistente textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 1rem; font-family: inherit; background: var(--bg-card); color: var(--ink); resize: vertical;
}
.asistente-nota { font-size: .85rem; margin: 8px 0 0; }
.asistente-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.asistente-respuesta { margin-top: 24px; border-left: 4px solid var(--accent); }
.asistente-respuesta h2 { margin-top: 0; font-size: 1.15rem; }
.asistente-respuesta h3 { font-size: 1rem; margin: 20px 0 8px; }
.asistente-mensaje { font-size: 1.02rem; }
.asistente-origen { font-size: .8rem; color: var(--ink-muted); margin: 0 0 8px; }
.asistente-aviso { font-size: .9rem; padding: 8px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); }
.asistente-cita { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--border); background: var(--bg-subtle); font-size: .9rem; overflow-wrap: anywhere; }
.asistente-cita footer { margin-top: 6px; font-size: .85rem; }
.asistente-otra { margin: 16px 0 0; }
.asistente-enlaces { font-size: .9rem; margin: 16px 0 0; }
.asistente-valorar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.asistente-valorar .btn { padding: 6px 14px; }

/* --- Guías (/guias, sesión 157) --- */
.guia { max-width: 760px; }
.guia h2 { margin-top: 32px; }
.guia .entradilla { font-size: 1.1rem; }
.cita-legal { margin: 16px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--bg-subtle); }
.cita-legal p { margin: 0; font-style: italic; }
.cita-legal footer { margin-top: 6px; font-size: .85rem; font-style: normal; }
.guia-meta { font-size: .9rem; }
.guia-aviso { font-size: .9rem; margin-top: 32px; }
.lista-guias { list-style: none; padding: 0; }
.lista-guias li { margin: 0 0 16px; }
.lista-guias a { font-weight: 600; }