/* Layout styles that lived inline in admin.html.twig until 15-sep-2026:
 * 16 KB re-sent and re-parsed on every page. Now served once, cached
 * immutable by AssetMapper. Imported from app.js AFTER app.css. */

    :root { --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    body { font-feature-settings: "cv03","cv04","cv11"; }
    /* Tabler hace crecer .nav-link-title y empuja el contador al borde.
       En Tareas y Agenda, texto y contador forman un grupo compacto. */
    #sidebar-nav .nav-tasks-link,
    #sidebar-nav .nav-agenda-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    #sidebar-nav .nav-tasks-link .nav-task-title,
    #sidebar-nav .nav-agenda-link .nav-agenda-title {
        flex: 0 1 auto;
        min-width: 0;
    }
    .ts-wrapper { width: 100%; }
    .ts-control input { flex: 1; min-width: 80px; }
    .ts-dropdown { z-index: 9999 !important; }

    /* Global search — overlay dropdown mode (embedded in Hoy):
       results float below the input instead of pushing the layout down.
       Opt-in via data-overlay="1" on the [data-global-search] container;
       /admin/buscar keeps the default inline (non-overlay) rendering. */
    .global-search-overlay { display: none; }
    .global-search-overlay.show {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        margin-top: .25rem;
        width: 100%;
        background: var(--tblr-bg-surface, #fff);
        border: 1px solid var(--tblr-border-color, rgba(0,0,0,.08));
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,.15);
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Photon address autocomplete */
    .photon-ac { position:fixed; z-index:10000; background:#fff; border:1px solid #dee2e6; border-radius:0 0 4px 4px; box-shadow:0 4px 12px rgba(0,0,0,.15); max-height:240px; overflow-y:auto; list-style:none; margin:0; padding:0; }
    [data-bs-theme="dark"] .photon-ac { background:#1e293b; border-color:rgba(255,255,255,.12); }
    .photon-ac-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid #f0f0f0; }
    .photon-ac-item:last-child { border-bottom:none; }
    .photon-ac-item:hover, .photon-ac-item.is-active { background:#e8f4fc; }
    [data-bs-theme="dark"] .photon-ac-item:hover,
    [data-bs-theme="dark"] .photon-ac-item.is-active { background:#1e3a5f; }
    .photon-ac-main { font-size:.875rem; font-weight:500; }
    .photon-ac-secondary { font-size:.75rem; color:#626976; margin-top:1px; }
    [data-bs-theme="dark"] .photon-ac-secondary { color:#94a3b8; }

    /* Tom Select – light theme */
    .ts-dropdown,
    .ts-dropdown .ts-dropdown-content { background-color: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; color: #1d2939; }
    .ts-dropdown .option { padding: 6px 12px; cursor: pointer; }
    .ts-dropdown .option:hover,
    .ts-dropdown .option.active { background-color: #e7f0ff; color: #1d2939; }
    .ts-dropdown .option .highlight { background: transparent; font-weight: 600; color: #206bc4; }

    /* Tom Select – dark theme */
    [data-bs-theme="dark"] .ts-dropdown,
    [data-bs-theme="dark"] .ts-dropdown .ts-dropdown-content { background-color: #1e293b; border-color: rgba(255,255,255,.12); color: #e2e8f0; }
    [data-bs-theme="dark"] .ts-dropdown .option:hover,
    [data-bs-theme="dark"] .ts-dropdown .option.active { background-color: #1e3a5f; color: #e2e8f0; }
    [data-bs-theme="dark"] .ts-dropdown .option .highlight { color: #5b9cf6; }

    /* Flatpickr – align with Tabler inputs */
    .flatpickr-calendar { border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.08); font-family: inherit; }
    .flatpickr-day.selected,
    .flatpickr-day.selected:hover { background: #206bc4; border-color: #206bc4; }
    .flatpickr-day.today { border-color: #206bc4; }
    .flatpickr-day.today:hover { background: #e7f0ff; color: #1d2939; }
    input.flatpickr-input[readonly] { background-color: var(--tblr-bg-forms, #fff); }

    /* Flatpickr – dark theme */
    [data-bs-theme="dark"] .flatpickr-calendar { background: #1e293b; border-color: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
    [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
    [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: #1e293b; }
    [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
    [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: #1e293b; }
    [data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
    [data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
    [data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
    [data-bs-theme="dark"] .flatpickr-weekday,
    [data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month,
    [data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month { color: #e2e8f0; fill: #e2e8f0; }
    [data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #1e293b; }
    [data-bs-theme="dark"] .flatpickr-day { color: #e2e8f0; }
    [data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
    [data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
    [data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: #64748b; }
    [data-bs-theme="dark"] .flatpickr-day:hover,
    [data-bs-theme="dark"] .flatpickr-day.today:hover { background: #1e3a5f; border-color: #1e3a5f; color: #e2e8f0; }
    [data-bs-theme="dark"] .flatpickr-day.selected,
    [data-bs-theme="dark"] .flatpickr-day.selected:hover { background: #206bc4; border-color: #206bc4; color: #fff; }
    [data-bs-theme="dark"] .flatpickr-day.today { border-color: #5b9cf6; }
    [data-bs-theme="dark"] .flatpickr-time,
    [data-bs-theme="dark"] .flatpickr-time input,
    [data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator,
    [data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm { background: #1e293b; color: #e2e8f0; }
    [data-bs-theme="dark"] .flatpickr-time input:hover,
    [data-bs-theme="dark"] .flatpickr-time input:focus { background: #1e3a5f; }
    [data-bs-theme="dark"] .numInputWrapper span.arrowUp:after { border-bottom-color: #94a3b8; }
    [data-bs-theme="dark"] .numInputWrapper span.arrowDown:after { border-top-color: #94a3b8; }
    [data-bs-theme="dark"] .flatpickr-calendar.hasTime .flatpickr-time { border-top-color: rgba(255,255,255,.12); }

    /* Flatpickr – iOS-style wheel time picker (replaces the default spinners) */
    .fp-has-wheel .flatpickr-time { display: none !important; }
    .fp-wheel { position: relative; display: flex; justify-content: center; align-items: stretch; gap: .125rem; padding: .4375rem 0; border-top: 1px solid rgba(0,0,0,.08); }
    .fp-wheel-col { position: relative; z-index: 1; height: 160px; width: 56px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .fp-wheel-col::-webkit-scrollbar { display: none; }
    .fp-wheel-pad { height: 64px; }
    .fp-wheel-item { height: 32px; line-height: 32px; text-align: center; scroll-snap-align: center; cursor: pointer; color: #667382; font-size: .9rem; font-variant-numeric: tabular-nums; transition: color .1s ease, font-size .1s ease; }
    .fp-wheel-item.active { color: #1d2939; font-weight: 600; font-size: 1.05rem; }
    .fp-wheel-sep { z-index: 1; line-height: 160px; font-weight: 600; color: #667382; }
    .fp-wheel-highlight { position: absolute; left: 14%; right: 14%; top: 50%; height: 32px; transform: translateY(-50%); border-radius: 6px; background: rgba(32,107,196,.08); pointer-events: none; }
    [data-bs-theme="dark"] .fp-wheel { border-top-color: rgba(255,255,255,.12); }
    [data-bs-theme="dark"] .fp-wheel-item { color: #94a3b8; }
    [data-bs-theme="dark"] .fp-wheel-item.active { color: #e2e8f0; }
    [data-bs-theme="dark"] .fp-wheel-sep { color: #94a3b8; }
    [data-bs-theme="dark"] .fp-wheel-highlight { background: rgba(91,156,246,.15); }

    /* Full-page cards reuse the modal partials: give them roomier spacing
       than inside a modal so nothing sits glued to the card edge */
    .page-body .card > .modal-header,
    .page-body .card > form > .modal-header { padding: 1.25rem 1.75rem; }
    .page-body .card > .modal-body,
    .page-body .card > form > .modal-body { padding: 1.5rem 1.75rem; }
    .page-body .card > .modal-footer,
    .page-body .card > form > .modal-footer { padding: .875rem 1.75rem; }
    .page-body .card > .border-bottom.px-3 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }

    /* ── Operation section collapse (Fase B) ────────────────────────────────
       Each section card header doubles as its collapse toggle; the chevron
       reflects aria-expanded (set by Bootstrap on the header). Done sections
       start collapsed with a one-line summary. */
    .op-section-head { cursor: pointer; }
    .op-section-head .op-section-chevron::before { content: '▾'; }
    .op-section-head[aria-expanded="false"] .op-section-chevron::before { content: '▸'; }
    .op-section-done > .op-section-head { background: var(--tblr-success-lt, rgba(47,179,68,.1)); }

    /* ── Assistant mode (Fase C) ─────────────────────────────────────────────
       Overlay on the Datos tab: only the current phase is shown big; done
       phases lock to their one-line summary; future phases hide (they are
       listed by name in the "Luego" line). "Ver todo" removes the overlay
       class → the view is byte-for-byte the Fase B experience. */
    .op-assistant-only { display: none; }
    #op-tab-data.op-mode-assistant .op-assistant-only { display: block; }
    #op-tab-data.op-mode-assistant [data-op-phase="future"] { display: none; }
    #op-tab-data.op-mode-assistant [data-op-phase="past"] > .collapse { display: none !important; }
    #op-tab-data.op-mode-assistant [data-op-phase="past"] .op-section-chevron { display: none; }
    #op-tab-data.op-mode-assistant [data-op-phase="past"] > .op-section-head { cursor: default; }
    #op-tab-data.op-mode-assistant [data-op-phase="current"] { border-left: 3px solid var(--tblr-blue, #4299e1); }
    #op-tab-data.op-mode-assistant [data-op-phase="current"] > .collapse { display: block !important; height: auto !important; }
    /* a #sec-* redirect always surfaces its target, even in assistant mode */
    #op-tab-data.op-mode-assistant [data-op-phase].op-force-show { display: block !important; }
    #op-tab-data.op-mode-assistant [data-op-phase].op-force-show > .collapse { display: block !important; height: auto !important; }

    /* ── ERP buttons — «Un solo dorado» (Pedro, 20-sep-2026, opción A) ────────
       One rule for the whole ERP, written here so no template decides colour:
         .btn-primary            gold, solid — THE action of the screen, one per view
         neutral, filled (gray)  every other action: row actions, «Filtros», dismiss
         neutral, outlined       secondary page actions («Exportar», «Volver»)
         success / danger        same outlined neutral, only the TEXT is green / red
         .btn-success            stays gold: it is the «Guardar» of the forms (app.css §13)
       Every historical variant (soft-accent, soft-muted, ghost-*, outline-*,
       secondary, warning, azure…) maps onto one of those, so a stray class in an
       old template still lands inside the system. Layered on Tabler .btn: size,
       radius, focus and disabled come for free, and the tints follow
       data-bs-theme on their own. Brand buttons (.btn-wa, .btn-catastro) keep
       their colour: they name a third party. */
    .btn-soft-accent, .btn-soft-muted, .btn-soft-secondary, .btn-soft-primary,
    .btn-soft-warning, .btn-soft-pro, .btn-ghost-secondary, .btn-secondary,
    .btn-warning, .btn-azure, .btn-purple, .btn-dark {
        --tblr-btn-color: var(--tblr-body-color); --tblr-btn-bg: var(--tblr-secondary-lt); --tblr-btn-border-color: transparent;
        --tblr-btn-hover-color: var(--tblr-body-color); --tblr-btn-hover-bg: var(--tblr-border-color); --tblr-btn-hover-border-color: var(--tblr-border-color);
        --tblr-btn-active-color: var(--tblr-body-color); --tblr-btn-active-bg: var(--tblr-border-color); --tblr-btn-active-border-color: var(--tblr-border-color);
        box-shadow: none;
    }
    .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark,
    .btn-soft-success, .btn-outline-success,
    .btn-danger, .btn-soft-danger, .btn-outline-danger, .btn-ghost-danger {
        --tblr-btn-color: var(--tblr-body-color); --tblr-btn-bg: var(--tblr-bg-surface); --tblr-btn-border-color: var(--tblr-border-color);
        --tblr-btn-hover-color: var(--tblr-body-color); --tblr-btn-hover-bg: var(--tblr-secondary-lt); --tblr-btn-hover-border-color: var(--tblr-border-color);
        --tblr-btn-active-color: var(--tblr-body-color); --tblr-btn-active-bg: var(--tblr-secondary-lt); --tblr-btn-active-border-color: var(--tblr-border-color);
        box-shadow: none;
    }
    .btn-soft-success, .btn-outline-success {
        --tblr-btn-color: var(--tblr-success); --tblr-btn-hover-color: var(--tblr-success); --tblr-btn-active-color: var(--tblr-success);
        --tblr-btn-hover-bg: var(--tblr-success-lt); --tblr-btn-active-bg: var(--tblr-success-lt);
    }
    .btn-danger, .btn-soft-danger, .btn-outline-danger, .btn-ghost-danger {
        --tblr-btn-color: var(--tblr-danger); --tblr-btn-hover-color: var(--tblr-danger); --tblr-btn-active-color: var(--tblr-danger);
        --tblr-btn-hover-bg: var(--tblr-danger-lt); --tblr-btn-active-bg: var(--tblr-danger-lt);
    }
    /* Where you are is state, not the action: dark fill, like a chosen filter chip. */
    .btn.is-current, .btn.is-current:hover {
        --tblr-btn-color: var(--tblr-body-bg); --tblr-btn-bg: var(--tblr-body-color); --tblr-btn-border-color: var(--tblr-body-color);
        --tblr-btn-hover-color: var(--tblr-body-bg); --tblr-btn-hover-bg: var(--tblr-body-color); --tblr-btn-hover-border-color: var(--tblr-body-color);
    }

/* Hoy inline menus (moved from the bottom of the layout) */
/* Inline menus (⏰ Posponer, ✚ Tarea, Mover a...) use an inline <details> instead of a
   floating dropdown so the list's overflow never clips them. Style <summary> as a plain
   button (no marker). */
.hoy-imenu > summary { list-style: none; cursor: pointer; }
.hoy-imenu > summary::-webkit-details-marker { display: none; }
.hoy-imenu > summary::marker { content: ''; }
/* Collapse caption swaps text purely on Bootstrap's .collapsed toggler state. */
.hoy-collapse-cap::after { content: attr(data-closed); }
a:not(.collapsed) .hoy-collapse-cap::after { content: attr(data-open); }

/* ── Navegación sin parpadeo (15-sep-2026) ───────────────────────────────
   Cada botón del ERP acaba en POST → redirect → página nueva. Con esto el
   navegador funde la página vieja con la nueva en vez de pintar en blanco y
   volver a dibujar (Chrome 126+, Safari 18.2+; los demás lo ignoran). El
   scroll lo conserva el script del <head>. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}


/* ── Ficha de contacto reordenada (Trabajo 1, 17-sep-2026) ─────────────────
   Colores pastel por familia de suceso. Tarjeta blanca; el color va en el
   círculo del icono, el filo izquierdo (4px) y el chip de filtro. Las
   variables las reutilizan Hoy y el Foco. Dark mode: mismos tonos apagados. */
:root {
    --hist-call-bg: #e6f0fb; --hist-call-fg: #2b6cb0;
    --hist-wa-bg:   #e3f5ea; --hist-wa-fg:   #23874b;
    --hist-mail-bg: #efe9fb; --hist-mail-fg: #6b46c1;
    --hist-meet-bg: #fdeee2; --hist-meet-fg: #c05621;
    --hist-note-bg: #fdf6d8; --hist-note-fg: #a07900; --hist-note-card: #fffdf3;
    --hist-task-bg: #e8f5f5; --hist-task-fg: #2c7a7b;
    --hist-sys-bg:  #f1f2f4; --hist-sys-fg:  #667382;
    --hist-danger-bg: var(--tblr-danger-lt); --hist-danger-fg: var(--tblr-danger);
    --hist-all-bg:  #1d273b; --hist-all-fg:  #ffffff;
    --hist-mark:    #fff1a8;
}
[data-bs-theme="dark"] {
    --hist-call-bg: #1e3a5f; --hist-call-fg: #8ab4f8;
    --hist-wa-bg:   #1b3d2a; --hist-wa-fg:   #6fcf97;
    --hist-mail-bg: #2f2550; --hist-mail-fg: #c4b5fd;
    --hist-meet-bg: #4a2a17; --hist-meet-fg: #f6ad55;
    --hist-note-bg: #4a3d10; --hist-note-fg: #f6e05e; --hist-note-card: #24221a;
    --hist-task-bg: #173a3a; --hist-task-fg: #81e6d9;
    --hist-sys-bg:  #2a3140; --hist-sys-fg:  #a0aec0;
    --hist-all-bg:  #e2e8f0; --hist-all-fg:  #1d273b;
    --hist-mark:    #7a6a1a;
}
.hist-call { --hist-bg: var(--hist-call-bg); --hist-fg: var(--hist-call-fg); }
.hist-wa   { --hist-bg: var(--hist-wa-bg);   --hist-fg: var(--hist-wa-fg); }
.hist-mail { --hist-bg: var(--hist-mail-bg); --hist-fg: var(--hist-mail-fg); }
.hist-meet { --hist-bg: var(--hist-meet-bg); --hist-fg: var(--hist-meet-fg); }
.hist-note { --hist-bg: var(--hist-note-bg); --hist-fg: var(--hist-note-fg); }
.hist-task { --hist-bg: var(--hist-task-bg); --hist-fg: var(--hist-task-fg); }
.hist-sys  { --hist-bg: var(--hist-sys-bg);  --hist-fg: var(--hist-sys-fg); }
.hist-danger { --hist-bg: var(--hist-danger-bg); --hist-fg: var(--hist-danger-fg); }
.hist-all  { --hist-bg: var(--hist-all-bg);  --hist-fg: var(--hist-all-fg); }

.hist-ico { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
            background: var(--hist-bg); color: var(--hist-fg); flex: none; font-weight: 600; }
.timeline-event-icon.hist-ico { width: 2rem; height: 2rem; border-radius: 50%; background: var(--hist-bg); color: var(--hist-fg); }
.hist-ico-sm { width: 1.75rem; height: 1.75rem; font-size: .8rem; }
.hist-lista { --tblr-timeline-icon-size: 2rem; }
.hist-lista .timeline-event-card { margin-left: calc(2rem + .75rem); }
.hist-card { border-left: 4px solid var(--hist-fg); }
.hist-card.hist-note { background: var(--hist-note-card); }
.hist-ev.d-none { display: none !important; }
.hist-wa > summary { cursor: pointer; list-style: none; }
.hist-wa > summary::-webkit-details-marker { display: none; }
.hist-wa > summary::before { content: "\25B8  "; color: var(--tblr-secondary); }
.hist-wa[open] > summary::before { content: "\25BE  "; }
.hist-wa-msgs { white-space: pre-wrap; background: var(--tblr-bg-surface-secondary); border-radius: 6px; padding: .5rem .6rem; color: var(--tblr-body-color); }
.hist-lista mark { background: var(--hist-mark); color: inherit; padding: 0 2px; border-radius: 2px; }

.hist-chips { display: flex; gap: .25rem; flex-wrap: wrap; }
.hist-chip { border: 0; border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 500; line-height: 1.3;
             display: inline-flex; gap: .3rem; align-items: center; cursor: pointer;
             background: var(--tblr-bg-surface); color: var(--tblr-secondary); box-shadow: inset 0 0 0 1px var(--tblr-border-color); }
.hist-chip.is-on { background: var(--hist-bg); color: var(--hist-fg); box-shadow: none; }
.hist-chip.badge { cursor: default; }
.hist-lupa { position: relative; display: block; width: 100%; max-width: 20rem; margin: 0; }
.hist-lupa > svg { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--tblr-secondary); pointer-events: none; }
.hist-lupa > input { padding-left: 1.8rem; }
@media (max-width: 767.98px) {
    .hist-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
    .hist-chips .hist-chip { flex: none; }
}

/* Rejilla de la ficha: un DOM, tres colocaciones. */
.ficha-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ficha-cuerpo.ficha-fullpage { padding-top: 0 !important; }
@media (min-width: 992px) {
    .ficha-fullpage .ficha-grid { grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.25rem; }
    .ficha-fullpage .ficha-quien { grid-column: 1; grid-row: 1 / span 2; border-right: 1px solid var(--tblr-border-color); padding-right: 1rem; }
    .ficha-fullpage .ficha-derecha { grid-column: 2; grid-row: 1 / span 2; align-self: start; min-width: 0; }
    /* En escritorio los bloques son secciones fijas: el título no parece un botón */
    .ficha-fullpage .ficha-blk > summary { pointer-events: none; }
    .ficha-fullpage .ficha-blk > summary::after { display: none; }
}
.ficha-blk { border-bottom: 1px solid var(--tblr-border-color); padding: .6rem 0; }
.ficha-blk:last-child, .ficha-pie { border-bottom: 0; }
.ficha-blk > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.ficha-blk > summary::-webkit-details-marker { display: none; }
.ficha-blk > summary::after { content: "\203A"; margin-left: auto; color: var(--tblr-secondary); font-size: 1.1rem; line-height: 1; transition: transform .15s; }
.ficha-blk[open] > summary::after { transform: rotate(90deg); }
.ficha-blk-t { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); }
.ficha-blk-in { padding-top: .5rem; font-size: .85rem; }
.ficha-dato { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; min-width: 0; }
.ficha-dato > :last-child { min-width: 0; overflow-wrap: anywhere; }
.ficha-dato-k { font-size: .72rem; color: var(--tblr-secondary); flex: none; min-width: 5.5rem; }
.ficha-pie { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .6rem; }
.ficha-editar > summary { list-style: none; display: inline-block; }
.ficha-editar > summary::-webkit-details-marker { display: none; }
.ficha-quien-plegado { border: 1px solid var(--tblr-border-color); border-radius: 8px; }
.ficha-quien-plegado > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; font-weight: 600; }
.ficha-quien-plegado > summary::-webkit-details-marker { display: none; }
.ficha-quien-plegado > summary::after { content: "\203A"; margin-left: auto; color: var(--tblr-secondary); font-size: 1.2rem; line-height: 1; transition: transform .15s; }
.ficha-quien-plegado[open] > summary::after { transform: rotate(90deg); }
.ficha-quien-plegado > .ficha-quien { padding: 0 .9rem .5rem; }

/* Inside the tabbed card the tab is the title and the card is the box. */
.ficha-derecha .ficha-foco { background: none !important; border: 0 !important; padding: 0 !important; }
.ficha-derecha .ficha-foco > .d-flex:first-child { display: none !important; }
.ficha-foco { background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: 8px; padding: .65rem .8rem; }
[data-bs-theme="light"] .ficha-foco, :root:not([data-bs-theme="dark"]) .ficha-foco { background: #fbfbf4; border-color: #efe8c6; }
.foco-item { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 8px; padding: .5rem .65rem;
             display: flex; gap: .6rem; align-items: flex-start; margin-top: .5rem; font-size: .85rem; }
.foco-item.is-overdue { border-color: var(--tblr-danger); }
.foco-acciones { display: flex; gap: .25rem; align-items: center; flex: none; }
@media (max-width: 767.98px) {
    .foco-item { flex-wrap: wrap; }
    .foco-acciones { width: 100%; justify-content: stretch; }
    .foco-acciones > *, .foco-acciones form { flex: 1; }
    .foco-acciones .btn { width: 100%; padding-top: .35rem; padding-bottom: .35rem; }
    .ficha-fullpage.ficha-cuerpo { padding-bottom: 5.5rem !important; }
}
.btn-wa { --tblr-btn-color: #1f9d55; --tblr-btn-bg: transparent; --tblr-btn-border-color: #25D366;
          --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: #25D366; --tblr-btn-hover-border-color: #25D366;
          --tblr-btn-active-color: #fff; --tblr-btn-active-bg: #1f9d55; --tblr-btn-active-border-color: #1f9d55; }
.ficha-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--tblr-bg-surface);
               border-top: 1px solid var(--tblr-border-color); display: flex; gap: .4rem; padding: .5rem .6rem calc(.6rem + env(safe-area-inset-bottom)); }
.ficha-barra .btn { flex: 1; flex-direction: column; font-size: .68rem; padding: .35rem 0; gap: .15rem; display: inline-flex; align-items: center; }

/* ── Fases de una operación (17-sep-2026) ────────────────────────────────
   Un galón por fase, siempre las ocho: verde lo cerrado, azul oscuro donde
   está, gris lo que queda. Sustituye a la barra fina + el stepper de
   círculos, que contaban cosas distintas. En móvil se desliza en
   horizontal, sin encoger los nombres hasta lo ilegible. */
.op-fases { display: flex; gap: 3px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }
.op-fase { flex: 1 1 0; min-width: 116px; text-decoration: none; color: inherit;
           padding: .45rem .5rem .45rem .95rem; display: flex; flex-direction: column; justify-content: center; gap: .1rem;
           clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
           background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); }
.op-fase:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.op-fase:last-child  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.op-fase:hover { color: inherit; }
.op-fase:hover .op-fase-titulo { text-decoration: underline; }
.op-fase-titulo { font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-fase-sub { font-size: .6875rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-fase.past { background: var(--tblr-success-lt); color: var(--tblr-success); }
.op-fase.current { background: #1d273b; color: #fff; }
[data-bs-theme="dark"] .op-fase.current { background: #e2e8f0; color: #1d273b; }
.op-fase.current .op-fase-titulo { font-weight: 700; }
@media (max-width: 767.98px) { .op-fase { min-width: 104px; } }
/* Mini-recorrido en la tarjeta del contacto: ocho tramos, sin texto. */
.op-fases-mini { display: flex; gap: 2px; }
.op-fase-mini { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--tblr-border-color); }
.op-fase-mini.past { background: var(--tblr-success); }
.op-fase-mini.current { background: #1d273b; }
[data-bs-theme="dark"] .op-fase-mini.current { background: #e2e8f0; }

/* Ficha de operación: «Qué es» fijo a la izquierda y el resto a la derecha,
   igual que la ficha de contacto. Por debajo de lg vuelve a una columna. */
.op-cuerpo { display: block; }
@media (min-width: 992px) {
    .op-cuerpo { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1rem 0 1rem; }
    .op-cuerpo > .op-quees { width: 300px; flex: 0 0 300px; position: sticky; top: 1rem; }
    .op-cuerpo > .op-panel { flex: 1 1 auto; min-width: 0; }
}
/* In full page the card-body already pads the panes. */
.op-cuerpo .op-panel.card .tab-pane.p-3 { padding: 0 !important; }
@media (max-width: 991.98px) { .op-cuerpo > .op-panel.card { margin: 1rem; } }

/* Formato A on a phone: the tabs stay on ONE line and scroll sideways instead of
   piling up in rows, and the operation's header buttons wrap under the title. */
@media (max-width: 767.98px) {
    [data-tab-en-url], #op-view-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    [data-tab-en-url]::-webkit-scrollbar, #op-view-tabs::-webkit-scrollbar { display: none; }
    [data-tab-en-url] .nav-link, #op-view-tabs .nav-link { white-space: nowrap; }
    .modal-header:has(> .op-acciones) { flex-wrap: wrap; row-gap: .5rem; }
    .op-acciones { flex-wrap: wrap; margin-left: 0 !important; width: 100%; }
}

/* On a phone what asks for action goes first; «qué es / quién es» follows. */
@media (max-width: 991.98px) {
    .op-cuerpo { display: flex; flex-direction: column; }
    .op-cuerpo > .op-quees { order: 2; margin: 0 1rem 1rem; }
    .ficha-fullpage .ficha-derecha { order: -1; }
}

/* ── Móvil tipo app (Pedro, 21-sep-2026) ─────────────────────────────────
   1. Arriba: el documento toma el color de la barra y el claro se queda en
      .page, para que la franja de la hora no quede clara. (No quitó el
      difuminado de iOS 26; Pedro, 21-sep: «déjalo».)
   2. Cápsula de atajos flotante (opción C), despegada de los bordes y por
      encima de la franja de Siri / rayita de inicio (safe-area-inset-bottom).
      Las barras fijas de las fichas suben por encima de ella. */
.barra-app { display: none; }

@media (max-width: 991.98px) {
    html, body { background-color: var(--prodex-noche); }
    .page { background-color: var(--tblr-body-bg); min-height: 100vh; }

    :root { --barra-app-alto: calc(74px + env(safe-area-inset-bottom, 0px)); }

    .barra-app {
        display: flex;
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        height: 60px;
        z-index: 1035;
        align-items: center;
        justify-content: space-around;
        padding: 0 8px;
        border-radius: 30px;
        background: var(--prodex-noche);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    }
    .barra-app a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 24px;
    }
    .barra-app a { color: #8a8a8f; }
    .barra-app a.active { color: var(--prodex-oro-noche); background: rgba(201, 165, 74, .14); }

    .page-wrapper { padding-bottom: var(--barra-app-alto); }

    /* App instalada en el iPhone (black-translucent + viewport-fit=cover):
       la página empieza bajo la franja de la hora y el botón «Menú» quedaba
       debajo del reloj, sin poder pulsarse. La barra reserva ese hueco; en
       Safari normal el inset es 0 y no cambia nada. */
    .navbar-vertical.navbar { padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 767.98px) {
    .franja-accion { bottom: var(--barra-app-alto); padding-bottom: 10px; }
    .page-header .col-auto.ms-auto:has(.btn) { bottom: var(--barra-app-alto); }
    body:has(.franja-accion) .page-header .col-auto.ms-auto:has(.btn) { bottom: calc(64px + var(--barra-app-alto)); }
    .ficha-barra { bottom: var(--barra-app-alto); padding-bottom: .6rem; }
    .tostadas { bottom: calc(4.25rem + var(--barra-app-alto)); }
}