/* =====================================================================
   Navegación única «Bandeja clara» (15/10/2026): la barra lateral oscura de marca es el único mapa de lugares
   (maquetas m1-m4 de docs/ux/2026-10-15-bandeja-clara). Solo presentación: qué entradas se ven lo siguen decidiendo
   portal-session.js y cada módulo; cuál está marcada, portal-workspace.js (una sola, con aria-current="page").
   Colores y medidas de ui/tokens.css (--m-*): ningún color nuevo aquí. Los selectores llevan body.mosal-portal
   #portal-sidebar para ganar a portal.css y portal-unified.css, que siguen cargándose antes.
   ===================================================================== */

/* ---------- Estructura de escritorio ---------- */
body.mosal-portal.portal-unified { grid-template-columns: var(--m-sidebar-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
body.mosal-portal #portal-sidebar {
    --m-ring: var(--m-focus-on-dark);
    grid-row: 1 / 3; grid-column: 1;
    display: flex; flex-direction: column;
    width: var(--m-sidebar-w); height: 100dvh; max-height: 100dvh; position: sticky; top: 0;
    padding: 0; overflow: hidden; border: 0 !important; box-shadow: none;
    background: var(--m-chrome) !important; color: var(--m-on-chrome);
    font-family: var(--m-font); font-size: var(--m-fs-16);
    scrollbar-color: var(--m-chrome-control) var(--m-chrome);
}
body.mosal-portal #portal-sidebar .portal-navigation {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: var(--m-sp-4) var(--m-sp-3) var(--m-sp-3); border: 0; text-align: left;
}
body.mosal-portal #portal-sidebar :is(a, button, input, summary):focus-visible {
    outline: var(--m-focus-width) solid var(--m-focus-on-dark); outline-offset: -3px; box-shadow: none;
}

/* ---------- Marca y búsqueda ---------- */
body.mosal-portal #portal-sidebar .portal-brand { color: var(--m-brand-name); }
body.mosal-portal #portal-sidebar .m-brand__logo { width: 36px; height: 36px; object-fit: cover; margin: 0; border: 0; }
/* style.css pone 1rem !important a los botones en el móvil; la búsqueda conserva su tamaño de la maqueta. */
body.mosal-portal #portal-sidebar .portal-search-open { min-width: 0; line-height: 1.25; font-size: var(--m-fs-14) !important; }
body.mosal-portal #portal-sidebar .portal-search-open[hidden] { display: none; }
body.mosal-portal #portal-sidebar .portal-search-open .m-search__label { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Entradas ---------- */
body.mosal-portal #portal-sidebar .tool-switch { display: flex; flex-direction: column; gap: 2px; width: 100% !important; padding: 0; border: 0; background: none; flex: none; }
body.mosal-portal #portal-sidebar .tool-switch-option {
    position: relative; display: flex; align-items: center; gap: var(--m-sp-3);
    width: 100%; min-width: 0; min-height: var(--m-target); margin: 0;
    padding: 6px var(--m-sp-3); border: 0; border-radius: var(--m-r-md); box-shadow: none; transform: none;
    background: none; color: var(--m-on-chrome); cursor: pointer;
    font-size: var(--m-fs-16); font-weight: var(--m-fw-medium); line-height: 1.25; text-align: left; text-decoration: none;
}
body.mosal-portal #portal-sidebar .tool-switch-option:is(.hidden, [hidden]) { display: none !important; }
body.mosal-portal #portal-sidebar .tool-switch-option.m-nav__item--sub { font-size: var(--m-fs-15); gap: 10px; padding: 6px 10px; }
body.mosal-portal #portal-sidebar .tool-switch-option:hover { background: var(--m-chrome-2); color: var(--m-on-chrome); }
/* «active» lo ponen los módulos al cambiar de herramienta; lo que se ve marcado es solo aria-current (una entrada). */
body.mosal-portal #portal-sidebar .tool-switch-option.active { background: none; color: var(--m-on-chrome); box-shadow: none; border-left-color: transparent; }
body.mosal-portal #portal-sidebar .tool-switch-option[aria-current="page"] { background: var(--m-chrome-3); color: var(--m-on-dark); }
body.mosal-portal #portal-sidebar .tool-switch-option[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--m-brand-accent);
}
body.mosal-portal #portal-sidebar .tool-switch-option__code {
    display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; color: var(--m-on-chrome-2);
    font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); line-height: 1;
}
body.mosal-portal #portal-sidebar .tool-switch-option__code svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.mosal-portal #portal-sidebar .tool-switch-option[aria-current="page"] .tool-switch-option__code { color: var(--m-brand-accent); }
body.mosal-portal #portal-sidebar .tool-switch-option__copy { display: block; flex: 1 1 auto; min-width: 0; gap: 0; }
body.mosal-portal #portal-sidebar .tool-switch-option__copy strong {
    display: block; overflow: visible; color: inherit; font: inherit; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
}
body.mosal-portal #portal-sidebar .tool-switch-option__copy small { display: none; }
body.mosal-portal #portal-sidebar .m-nav__count[hidden] { display: none; }
/* El cuadro de fase lleva su número: con daltonismo, el número es la señal y el color el refuerzo. */
body.mosal-portal #portal-sidebar .tool-switch-option .m-sq { width: 20px; height: 20px; }

/* ---------- Grupos plegables ---------- */
body.mosal-portal #portal-sidebar .tool-group { display: flex; flex-direction: column; gap: 2px; margin-top: var(--m-sp-2); }
body.mosal-portal #portal-sidebar :is(.tool-group[hidden], .tool-group__items[hidden]) { display: none; }
body.mosal-portal #portal-sidebar .tool-group__items { display: flex; flex-direction: column; gap: 2px; }
body.mosal-portal #portal-sidebar .tool-group--single { margin-top: var(--m-sp-3); padding-top: var(--m-sp-2); border-top: 1px solid var(--m-chrome-line); }
body.mosal-portal #portal-sidebar .tool-group__toggle {
    display: flex; align-items: center; justify-content: flex-start; gap: var(--m-sp-2);
    width: 100%; min-width: 0; min-height: var(--m-target); margin: 0; padding: 0 var(--m-sp-3);
    border: 0; border-radius: var(--m-r-md); background: none; cursor: pointer; color: var(--m-on-chrome-2);
    font-family: var(--m-font); font-size: var(--m-fs-12) !important; font-weight: var(--m-fw-semibold); line-height: 1.25;
    letter-spacing: .07em; text-transform: uppercase; text-align: left; white-space: normal;
}
body.mosal-portal #portal-sidebar .tool-group__toggle:hover { background: none; color: var(--m-on-chrome); }
body.mosal-portal #portal-sidebar .tool-group__chevron {
    width: 16px; height: 16px; margin-left: auto; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--m-dur);
}
body.mosal-portal #portal-sidebar .tool-group__toggle[aria-expanded="false"] .tool-group__chevron { transform: rotate(-90deg); }
body.mosal-portal #portal-sidebar .tool-group__dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--m-brand-accent); }
body.mosal-portal #portal-sidebar .tool-group--has-active .tool-group__toggle[aria-expanded="false"] .tool-group__dot { display: block; }

/* ---------- Resumen del presupuesto (solo en Vehículo eléctrico y Fotovoltaica) ---------- */
body.mosal-portal #portal-sidebar #portal-summary { flex: 0 1 auto; max-height: 38vh; overflow-y: auto; padding: var(--m-sp-2) var(--m-sp-6) var(--m-sp-3); border-top: 1px solid var(--m-chrome-line); }

/* ---------- Pie: WhatsApp, contraer y la persona ---------- */
body.mosal-portal #portal-sidebar .portal-sidebar-footer {
    display: flex; flex-direction: column; gap: 2px; flex: none; margin: 0;
    padding: var(--m-sp-2) var(--m-sp-3) var(--m-sp-3); border-top: 1px solid var(--m-chrome-line);
    color: var(--m-on-chrome-2); font-size: var(--m-fs-14);
}
body.mosal-portal #portal-sidebar :is(#whatsapp-link-access, .portal-nav-collapse) {
    display: flex; align-items: center; gap: var(--m-sp-3); width: 100%; min-height: var(--m-target); margin: 0;
    padding: 6px var(--m-sp-3); border: 0; border-radius: var(--m-r-md); background: none; box-shadow: none;
    color: var(--m-on-chrome-2); font-family: var(--m-font); font-size: var(--m-fs-15) !important; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer;
}
body.mosal-portal #portal-sidebar #whatsapp-link-access.hidden { display: none; }
body.mosal-portal #portal-sidebar :is(#whatsapp-link-access, .portal-nav-collapse):hover { background: var(--m-chrome-2); color: var(--m-on-dark); }
body.mosal-portal #portal-sidebar #whatsapp-link-access strong { font-size: inherit; font-weight: var(--m-fw-medium); line-height: inherit; }
body.mosal-portal #portal-sidebar .whatsapp-link-access__copy small { display: none; }
body.mosal-portal #portal-sidebar .whatsapp-link-access__icon { display: grid; place-items: center; width: 20px; flex: none; color: var(--m-on-chrome-2); background: none; }
body.mosal-portal #portal-sidebar :is(.whatsapp-link-access__icon, .portal-nav-collapse) svg {
    width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Fila 1: la persona y «Contraer menú» (botón de icono; su nombre lo dicen aria-label y title). Fila 2: «Cerrar sesión»
   y «Mi seguridad» (portal-session.js lo añade al final). */
body.mosal-portal #portal-sidebar .portal-account {
    display: grid; grid-template-columns: auto minmax(0, 1fr) var(--m-target); align-items: center; justify-items: start;
    gap: 2px var(--m-sp-2); margin: 0; padding-top: var(--m-sp-1); border-top: 0;
}
body.mosal-portal #portal-sidebar .portal-identity { grid-column: 1 / 3; min-width: 0; padding-left: var(--m-sp-2); }
body.mosal-portal #portal-sidebar .portal-account .portal-nav-collapse { grid-column: 3; width: var(--m-target); min-width: var(--m-target); justify-content: center; padding: 0; }
body.mosal-portal #portal-sidebar .portal-account #portal-session-error { grid-column: 1 / -1; }
body.mosal-portal #portal-sidebar .portal-account .portal-nav-collapse span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.mosal-portal #portal-sidebar #portal-commercial-avatar {
    display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
    background: var(--m-chrome-4); color: var(--m-brand-accent); font-size: var(--m-fs-14); font-weight: var(--m-fw-bold);
}
body.mosal-portal #portal-sidebar .portal-identity__copy { display: block; min-width: 0; }
body.mosal-portal #portal-sidebar .portal-identity strong { display: block; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m-on-dark); font-size: var(--m-fs-15); font-weight: var(--m-fw-semibold); line-height: 1.25; }
body.mosal-portal #portal-sidebar .portal-identity small { display: block; margin: 0; color: var(--m-on-chrome-2); font-size: var(--m-fs-14); line-height: 1.25; }
body.mosal-portal #portal-sidebar .portal-account .portal-topbar-logout {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--m-sp-2); flex: 0 1 auto;
    min-height: var(--m-target); margin: 0; padding: 0 var(--m-sp-2); border: 0; border-radius: var(--m-r-md); background: none;
    color: var(--m-on-chrome-2); font-family: var(--m-font); font-size: var(--m-fs-14) !important; font-weight: var(--m-fw-medium); line-height: 1.25;
    text-decoration: underline; text-decoration-color: var(--m-chrome-control); text-underline-offset: 3px; white-space: nowrap; cursor: pointer;
}
body.mosal-portal #portal-sidebar .portal-account .portal-topbar-logout:hover { background: var(--m-chrome-2); color: var(--m-on-dark); }
body.mosal-portal #portal-sidebar .portal-account #portal-logout { text-decoration: none; }
body.mosal-portal #portal-sidebar #portal-session-error { flex: 1 1 100%; margin: var(--m-sp-1) 0 0; color: var(--m-on-dark); font-size: var(--m-fs-14); }

/* ---------- Cabecera: dónde estás y cuándo se leyó ---------- */
body.mosal-portal.portal-unified .portal-topbar {
    grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: var(--m-sp-4); flex-wrap: nowrap;
    min-height: 3.5rem; height: auto; padding: var(--m-sp-2) var(--m-sp-8);
    background: var(--m-bg); border-bottom: 1px solid var(--m-line);
}
body.mosal-portal .portal-topbar .portal-breadcrumb { display: block; flex: 1 1 auto; min-width: 0; margin: 0; gap: 0; letter-spacing: 0; white-space: normal; }
body.mosal-portal .portal-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; color: var(--m-muted); font-size: var(--m-fs-14); line-height: 1.4; }
body.mosal-portal .portal-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
body.mosal-portal .portal-crumbs li + li::before { content: "›"; content: "›" / ""; color: var(--m-muted); }
body.mosal-portal .portal-crumbs li:last-child { color: var(--m-text); font-weight: var(--m-fw-semibold); }
body.mosal-portal .portal-crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--m-muted); text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; }
body.mosal-portal .portal-crumbs a:hover { color: var(--m-text); }
body.mosal-portal .portal-updated { flex: none; margin: 0; color: var(--m-muted); font-size: var(--m-fs-14); white-space: nowrap; }
body.mosal-portal .portal-updated[hidden] { display: none; }
body.mosal-portal .portal-topbar :is(.portal-menu, .portal-search-mobile) { display: none; }

/* ---------- Búsqueda (Ctrl K) ---------- */
body.mosal-portal .portal-search.m-dialog {
    top: 10vh; transform: translateX(-50%); display: flex; flex-direction: column;
    width: min(640px, calc(100vw - 32px)); max-height: min(80dvh, 720px); padding: 0; overflow: hidden;
}
body.mosal-portal .portal-search.m-dialog:not([open]) { display: none; }
body.mosal-portal .portal-search__bar { display: flex; align-items: center; gap: var(--m-sp-2); padding: var(--m-sp-2) var(--m-sp-2) var(--m-sp-2) var(--m-sp-4); border-bottom: 1px solid var(--m-line); color: var(--m-muted); }
body.mosal-portal .portal-search__input {
    flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0; padding: 0 var(--m-sp-2);
    border: 0; border-radius: var(--m-r-sm); background: none; box-shadow: none;
    color: var(--m-text); font-family: var(--m-font); font-size: var(--m-fs-18); line-height: 1.3;
}
body.mosal-portal .portal-search__input::placeholder { color: var(--m-muted); opacity: 1; }
/* La «×» del navegador en un campo de búsqueda duplicaría el botón «Cerrar la búsqueda». */
body.mosal-portal .portal-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
body.mosal-portal .portal-search__input:focus-visible { outline: var(--m-focus-width) solid var(--m-focus); outline-offset: 0; }
body.mosal-portal .portal-search__help { margin: var(--m-sp-3) var(--m-sp-4) 0; color: var(--m-muted); font-size: var(--m-fs-14); }
body.mosal-portal .portal-search__status { margin: var(--m-sp-1) var(--m-sp-4) var(--m-sp-2); color: var(--m-text-2); font-size: var(--m-fs-14); }
body.mosal-portal .portal-search__status:empty { display: none; }
body.mosal-portal .portal-search__results { display: grid; gap: 2px; margin: 0; padding: 0 var(--m-sp-2) var(--m-sp-3); overflow-y: auto; list-style: none; }
body.mosal-portal .portal-search__results[hidden] { display: none; }
body.mosal-portal .portal-search__opt {
    display: grid; gap: 2px; min-height: var(--m-target); padding: var(--m-sp-2) var(--m-sp-3); border-radius: var(--m-r-md); cursor: pointer;
}
body.mosal-portal .portal-search__opt[aria-selected="true"] { background: var(--m-selected); box-shadow: inset 4px 0 0 var(--m-action); }
body.mosal-portal .portal-search__name { color: var(--m-text); font-weight: var(--m-fw-semibold); }
body.mosal-portal .portal-search__meta { color: var(--m-muted); font-size: var(--m-fs-14); }
body.mosal-portal .portal-search__meta:empty { display: none; }
body.mosal-portal .portal-search__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); color: var(--m-text-2); font-size: var(--m-fs-14); }

/* ---------- Móvil y tableta: la barra es un menú ---------- */
@media (max-width: 900px) {
    body.mosal-portal.portal-unified { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    body.mosal-portal #portal-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
        width: min(var(--m-sidebar-w), calc(100vw - 3rem)); height: 100dvh; max-height: none;
        transform: translateX(-100%); visibility: hidden; transition: transform var(--m-dur) var(--m-ease), visibility var(--m-dur);
    }
    body.mosal-portal.portal-menu-open #portal-sidebar { transform: none; visibility: visible; }
    body.mosal-portal .portal-scrim:not([hidden]) { position: fixed; inset: 0; z-index: 60; display: block; border: 0; background: var(--m-scrim); }
    body.mosal-portal #portal-sidebar .portal-nav-collapse { display: none; }
    body.mosal-portal.portal-unified .portal-topbar {
        grid-column: 1; position: sticky; top: 0; z-index: var(--m-z-sticky);
        gap: var(--m-sp-2); min-height: 3.5rem; padding: 6px var(--m-sp-2);
    }
    body.mosal-portal .portal-topbar .portal-menu { display: inline-grid; color: var(--m-text); }
    body.mosal-portal .portal-topbar .portal-search-mobile:not([hidden]) { display: inline-grid; color: var(--m-text); }
    body.mosal-portal .portal-topbar .portal-crumbs { flex-wrap: nowrap; overflow: hidden; }
    /* En el móvil, solo el sitio actual: el resto de la miga está en el menú. */
    body.mosal-portal .portal-topbar .portal-crumbs li:not(:last-child) { display: none; }
    body.mosal-portal .portal-topbar .portal-crumbs li:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--m-fs-16); }
    body.mosal-portal .portal-topbar .portal-crumbs li:last-child::before { content: none; }
    /* Integración (15/10): con un expediente abierto, la vuelta a su lista sigue a la vista («Mi día › Rocío…»). */
    body.mosal-portal .portal-topbar .portal-crumbs li:not(:last-child):has(> a[data-crumb-back]) { display: inline-flex; flex: none; }
    body.mosal-portal .portal-topbar .portal-crumbs a[data-crumb-back] { min-height: 44px; font-size: var(--m-fs-16); }
    body.mosal-portal .portal-topbar .portal-crumbs li:has(> a[data-crumb-back]) + li:last-child::before { content: "›"; content: "›" / ""; margin-right: 6px; }
    body.mosal-portal .portal-search.m-dialog { top: var(--m-sp-2); max-height: calc(100dvh - 16px); }
}
@media (max-width: 600px) {
    body.mosal-portal .portal-updated { display: none; }
}

/* ---------- Barra contraída (escritorio): iconos, con el nombre para el lector y en title ---------- */
@media (min-width: 901px) {
    body.mosal-portal.portal-unified.portal-nav-collapsed { grid-template-columns: 4.5rem minmax(0, 1fr); }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar { width: 4.5rem; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar .portal-navigation { padding: var(--m-sp-3) var(--m-sp-2); align-items: stretch; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar :is(.tool-switch-option__copy, .m-brand__name, .m-search__label, .whatsapp-link-access__copy, .portal-nav-collapse span, .portal-identity__copy, #portal-logout span) {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar :is(.tool-group__toggle, .m-kbd, #portal-security),
    body.mosal-portal.portal-nav-collapsed #portal-summary { display: none !important; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar :is(.tool-switch-option, .portal-search-open, #whatsapp-link-access, .portal-nav-collapse, .portal-account .portal-topbar-logout) { justify-content: center; padding: 6px; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar .m-brand { justify-content: center; padding: 0; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar .tool-group { margin-top: var(--m-sp-2); padding-top: var(--m-sp-2); border-top: 1px solid var(--m-chrome-line); }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar .m-nav__count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar .portal-account { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar :is(.portal-identity, .portal-account .portal-nav-collapse, .portal-account .portal-topbar-logout) { grid-column: 1; }
    body.mosal-portal.portal-nav-collapsed #portal-sidebar .portal-identity { padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    body.mosal-portal #portal-sidebar .tool-group__chevron, body.mosal-portal #portal-sidebar { transition: none; }
}