/* ===============================
   VARIABLES GLOBALES
   =============================== */

/* Required field indicator */
.form-label.required::after {
  content: " *";
  color: #d63939;
  font-weight: bold;
}

:root {
    --brand-primary: #023047;
    --brand-secondary: #f59e0b;
    --brand-accent: #38bdf8;

    --brand-sidebar-bg: #023047;
    /*--brand-sidebar-text: rgba(255, 255, 255, 0.75);*/
    --brand-sidebar-text:var(--brand-sidebar-text);
    --brand-sidebar-text-hover:var(--brand-sidebar-text)-hover;

    --tblr-primary: var(--brand-primary);
    --tblr-primary-rgb: 2, 48, 71;

    --tblr-navbar-bg: var(--brand-primary);
    --tblr-active-color: var(--brand-secondary);

    --tblr-sidebar-width: 240px;
    --tblr-sidebar-collapsed-width: 72px;
}

/* ===============================
   LAYOUT BASE
   =============================== */

.page {
    display: flex !important;
    background-color: #FAFAF7 !important;
}

.page-wrapper {
    margin-left: 0 !important;
    transition: margin-left 0.2s ease;
}

/* ===============================
   SIDEBAR BASE
   =============================== */

.navbar.navbar-vertical {
    width: var(--tblr-sidebar-width);
    height: 100vh;
    background-color: var(--brand-sidebar-bg);
    display: flex;
    flex-direction: column;
}

.navbar.navbar-vertical > .container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
}

/* ===============================
   SIDEBAR · LINKS
   =============================== */

.navbar-vertical .nav-link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    color: var(--brand-sidebar-text);
    background: transparent !important;
    transition: color 0.15s ease;
}

.navbar-vertical .nav-link i {
    width: 1.5rem;
    margin-right: 0.5rem;
    text-align: center;
}

.navbar-vertical .nav-link span {
    white-space: nowrap;
}

/* Algunas entradas envuelven el icono en `.nav-link-icon` de Tabler, que le
   pone su propio gris y menos opacidad: así los primeros iconos del menú no
   seguían el color del branding como el resto. Que hereden el del enlace. */
.navbar-vertical .nav-link .nav-link-icon {
    color: inherit;
    opacity: 1;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active {
    color: var(--brand-sidebar-text-hover);
}

.navbar-vertical .nav-link.active {
    font-weight: 500;
    background-color: var(--brand-secondary) !important;
    border-radius: 6px;
    margin: 2px 8px;
    padding-left: 12px;
}

/* ===============================
   SIDEBAR · LOGO
   =============================== */

.sidebar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.sidebar-logo-full {
    display: block;
    max-width: 120px;
    max-height: 38px;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.sidebar-logo-collapsed {
    display: none;
}

/* ===============================
   SIDEBAR · ACCOUNT / AVATAR
   =============================== */

.sidebar-account {
    display: flex;
    justify-content: center;
}

.sidebar-account-btn {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
}

.sidebar-account-btn:hover {
    background-color: var(--brand-sidebar-bg) !important;
}

.sidebar-user-name {
    color: var(--brand-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-account img {
    object-fit: cover;
}

.sidebar-account-btn:hover .sidebar-user-name,
.sidebar-account-btn:hover i {
    color: var(--brand-sidebar-text-hover);
    background-color: transparent !important;
}

.btn-link:hover {
    background-color: transparent;
    text-decoration: none;
}

/* ===============================
   SIDEBAR · LANGUAGE SWITCHER
   =============================== */

.sidebar-language-switcher {
    width: 100%;
    padding-bottom: 12vh;
}

.language-select-wrapper {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.language-select-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.language-icon {
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.language-select {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* ===============================
   SIDEBAR · TOGGLE
   =============================== */

.sidebar-toggle-container {
    font-weight: bolder ;
    position: absolute;
    bottom: 5%;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.sidebar-toggle-btn {
    pointer-events: all;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--brand-sidebar-bg);
    background-color: #F3F2EC;
    color: var(--brand-sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
}

/* ===============================
   SIDEBAR · COLAPSADA
   =============================== */

body.navbar-vertical-collapsed {
    --tblr-sidebar-width: var(--tblr-sidebar-collapsed-width);
}

body.navbar-vertical-collapsed .navbar-vertical {
    width: var(--tblr-sidebar-collapsed-width);
}

body.navbar-vertical-collapsed .page-wrapper {
    margin-left: var(--tblr-sidebar-collapsed-width);
}

body.navbar-vertical-collapsed .navbar-vertical .nav-link {
    justify-content: center;
    padding: 0.6rem 0;
}

body.navbar-vertical-collapsed .navbar-vertical .nav-link span {
    display: none;
}

body.navbar-vertical-collapsed .navbar-vertical .nav-link i {
    margin-right: 0;
    font-size: 1.2rem;
}

body.navbar-vertical-collapsed .sidebar-logo {
    justify-content: center;
}

body.navbar-vertical-collapsed .sidebar-logo-full {
    display: none;
}

body.navbar-vertical-collapsed .sidebar-logo-collapsed {
    display: block;
    max-width: 32px;
    margin: 0 auto;
}

body.navbar-vertical-collapsed .sidebar-account-btn {
    justify-content: center;
    padding: 0.5rem 0;
}

body.navbar-vertical-collapsed .sidebar-user-name {
    display: none;
}

body.navbar-vertical-collapsed .sidebar-language-switcher {
    display: none;
}

/* ===============================
   DARK THEME · LOGO BLANCO
   =============================== */

[data-bs-theme="dark"] .sidebar-logo img {
    filter: brightness(0) invert(1);
}

/* ===============================
   SIDEBAR · ESTADO EXPANDIDO (FIX)
   =============================== */

.navbar-vertical .nav-link {
    justify-content: flex-start;
    padding-left: 1rem;
}

.navbar-vertical .nav-link i {
    margin-right: 0.6rem;
}

.sidebar-account {
    justify-content: flex-start;
}

.sidebar-account-btn {
    justify-content: flex-start;
    padding: 0.65rem 1rem;
}

.sidebar-account-btn img,
.sidebar-account-btn i {
    margin-right: 0.6rem;
}

/* ===============================
   SIDEBAR · EXPANDIDA (ALINEACIÓN)
   =============================== */

body:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link {
    justify-content: flex-start;
    text-align: left;
    padding-left: 1rem;
}

body:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link i {
    margin-right: 0.6rem;
}

/* ===============================
   LAYOUT TABLER CORRECTO
   =============================== */

.page {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.card {
    background-color: #F3F2EC;
}
.card-footer {
    background-color: #F3F2EC ;
}
    /* ===============================
       PHASE CARDS · DEPTH & HOVER
       =============================== */

.phase-card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #F3F2EC;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.phase-card:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.08);
    border-color: var(--brand-primary);
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(32, 107, 196, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

.phase-card .card-title {
    font-weight: 600;
}

.phase-card:hover .card-title {
    color: var(--brand-primary);
}

/* ===============================
   CLICKABLE CARD LINK
   =============================== */

.phase-card-link {
    text-decoration: none;
    color: inherit;
}

/* ===============================
   OPTIONAL · BUTTON MICRO-ANIMATION
   =============================== */

.phase-card .btn {
    transition: transform 0.2s ease;
}

.phase-card:hover .btn {
    transform: translateX(2px);
}

/* ===============================
   ADMIN MENU FIX
   =============================== */

.admin-toggle {
    padding-right: 1rem;
    display: flex;
    align-items: center;
}

.admin-chevron {
    width: 16px;
    min-width: 16px;
    transition: transform 0.2s ease;
}

.admin-toggle[aria-expanded="true"] .admin-chevron {
    transform: rotate(180deg);
}

body.navbar-vertical-collapsed .admin-toggle span span,
body.navbar-vertical-collapsed .admin-chevron {
    display: none;
}

body.navbar-vertical-collapsed #adminMenu {
    display: none !important;
}

/* ===============================
   ADMIN · VISIBILIDAD SEGÚN ESTADO
   =============================== */

.admin-collapsed {
    display: none;
}

body.navbar-vertical-collapsed .admin-expanded {
    display: none;
}

body.navbar-vertical-collapsed .admin-collapsed {
    display: flex;
}

/* ===============================
   Tom Select + Tabler
   Dropdown fondo blanco
   =============================== */

.ts-dropdown {
    background-color: #ffffff;
    border: 1px solid var(--tblr-border-color, #d9dbde);
    border-radius: var(--tblr-border-radius, 4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1055; /* por encima de cards, modals, etc */
}

.ts-dropdown .ts-dropdown-content {
    background-color: #ffffff;
}

.ts-dropdown .option {
    background-color: #ffffff;
    color: var(--tblr-body-color, #1f2937);
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.08);
    color: var(--tblr-body-color, #1f2937);
}

.ts-control {
    min-height: calc(1.5em + .75rem + 5px);
    padding: .375rem .75rem;
}

[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown .ts-dropdown-content,
[data-bs-theme="dark"] .ts-dropdown .option {
    background-color: #1f2937;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .ts-dropdown .option.active,
[data-bs-theme="dark"] .ts-dropdown .option:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ===============================
   Tom Select · Focus igual que Tabler
   =============================== */

.ts-control {
    background-color: #ffffff;
    border: 1px solid var(--tblr-border-color, #d9dbde);
    border-radius: var(--tblr-border-radius, 4px);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ts-control.focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}

[data-bs-theme="dark"] .ts-control {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .ts-control.focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .4);
}

/* ===============================
   Tom Select · Focus EXACTO como Tabler
   (override definitivo)
   =============================== */

.ts-wrapper.focus .ts-control {
    border-color: var(--tblr-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25) !important;
}

/* Asegurar que no haya overlays más claros */
.ts-wrapper.focus {
    outline: none !important;
}

.sidebar-footer {
    font-size: 0.75rem;
    line-height: 1.2;
    color: lightgrey !important;
}

.sidebar-manual-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.15s;
}

.sidebar-manual-link:hover {
    color: #fff;
}

.navbar-vertical-collapsed .sidebar-manual-text {
    display: none;
}

.accordion-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--tblr-primary);
    opacity: 0.4;
}

.accordion-button.collapsed::before {
    opacity: 0.2;
}

/* Header del acordeón "Datos de la acción" con el mismo look&feel que
   las cabeceras de las cards (.card-header > .card-title): mismo fondo
   blanco que las cabeceras de Notes/Owners/Status en este tema (Bootstrap
   tiñe el botón expandido de azul claro, lo neutralizamos) y la misma
   tipografía que el título de card. */
#changeActionAccordion .accordion-button,
#changeActionAccordion .accordion-button:not(.collapsed) {
    --tblr-accordion-active-bg: #fff;
    --tblr-accordion-btn-bg: #fff;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-btn-bg: #fff;
    background-color: #fff !important;
    box-shadow: none;
    color: var(--tblr-body-color, inherit);
}

#changeActionAccordion .accordion-button:focus {
    box-shadow: none;
}

#changeActionAccordion .accordion-button > span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}


mark {
    background-color: rgba(255, 193, 7, 0.35);
    padding: 0 2px;
    border-radius: 2px;
}

.facet-values-box {
    border: 1px solid rgba(98, 105, 118, 0.2);
    border-radius: 6px;
    padding: 0.75rem;
    background-color: var(--tblr-bg-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.facet-value-row {
    display: flex;
    align-items: center;
}

.facet-value-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: 0.5rem;
}

.facet-value-text {
    flex: 1;
}

.facet-value-count {
    min-width: 2rem;
    text-align: right;
    color: #6c757d; /* text-muted */
    font-size: 0.85em;
}

.search-preview {
    max-height: 100px;
    overflow: hidden;
    position: relative;
    line-height: 1.5;
    transition: max-height 0.3s ease;
}

/* Estado expandido */
.search-preview[data-expanded=”true”] {
    max-height: 2000px;
    overflow: auto;
}

/* Degradado solo cuando está colapsado */
.search-preview[data-expanded="false"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
    );
}

.search-doc-title {
    color: var(--brand-primary)
}

.card-link-pop {
    color: var(--brand-primary);
    transition: transform .15s ease, box-shadow .15s ease;
}

.card-link-pop:hover {
    color: var(--brand-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.card-link-wrapper {
    text-decoration: none;
    color: inherit;
}

.card-link-wrapper:hover {
    text-decoration: none;
    color: inherit;
}

.hidden_button {
    border-style: none;
    background-color: transparent;
}

.collapse {
    transition: all .25s ease;
}

a[data-bs-toggle="collapse"]:hover {
    color: var(--tblr-primary);
}

.layout {
    display: flex;
    align-items: flex-start; /* MUY importante */
}

.sidebar {
    position: sticky;
    top: 0rem; /* referencia obligatoria */
    width: 280px;
    height: fit-content;
}

.content {
    flex: 1;
}

.card-doc-title {
    color: var(--brand-primary);
}

.sidebar-notifications-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #cbd5e1 !important; /* gris claro */
    text-decoration: none;

    position: relative;
}

.sidebar-notifications-toggle i {
    font-size: 20px;
    line-height: 1;
}

.sidebar-notifications-toggle:hover {
    color: #ffffff !important;
}

/* Badge rojo */
.sidebar-notifications-badge {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 8px;
    height: 8px;

    background: #ef4444;
    border-radius: 50%;
}

.sidebar-notifications-badge {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 8px;
    height: 8px;

    background-color: #ef4444;
    border-radius: 50%;
}

/* ===== Notifications panel (Tabler white) ===== */

.notifications-panel {
    position: fixed;
    top: 72px;
    left: 260px;
/ / ancho sidebar width: 360 px;
    max-height: 70vh;

    background: #ffffff;
    border: 1px solid #e6e7e9;
    border-radius: 6px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 2000;

    display: flex;
    flex-direction: column;
}

.notifications-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;

    border-bottom: 1px solid #e6e7e9;
    background: #f8fafc;

    display: flex;
    align-items: center;
}

.notifications-body {
    overflow-y: auto;
    padding: 0.5rem 0;
}

/* ===== Notification item ===== */

.notification-item {
    padding: 0.75rem 1rem;
    cursor: pointer;

    border-bottom: 1px solid #f1f3f5;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: #f8fafc;
}

/* Unread highlight */
.notification-unread {
    background: #f1f5f9;
}

.notification-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
}

.notification-message {
    font-size: 0.8rem;
    color: #4b5563;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.notification-time {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
}

/* ===== Empty ===== */

.notification-empty {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

.notification-unread {
    background: #f1f5f9;
}

.sidebar-avatar-wrapper {
    position: relative;
    width: 45px;
    height: 45px;
}

.sidebar-avatar {
    width: 45px;
    height: 45px;
    object-fit: cover;
}

.sidebar-avatar-icon {
    font-size: 45px;
    color: white;
}

.sidebar-notification-bell {
    position: absolute;
    bottom: -17px; /* ⬇️ más abajo */
    left: -6px; /* ⬅️ menos encima */
    background: var(--brand-sidebar-bg);
    border-radius: 50%;
    padding: 5px;
    font-size: 17px;
    color: white;
    line-height: 1;
}

.sidebar-notifications-badge {
    position: absolute;
    top: -3px;
    right: 8px;
    width: 15px;
    height: 15px;
    background: red;
    border-radius: 50%;
}

.not_hover {
    color: white !important;
}

.not_hover:hover {
    color: orange !important;
}

.btn-left {
    text-align: left !important;
}

.card-link-wrapper {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
}

/* Contenedor principal de Quill */
#observaciones-action-editor .ql-container {
    min-height: 200px !important;
}

/* Área editable */
#observaciones-action-editor .ql-editor {
    min-height: 200px !important;
}

.ql-container {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    min-height: 200px;
    margin: 0px;
    position: relative;
    background-color: #fff;
}

.ql-toolbar {
    background-color: #fff;
}

/* Esquinas redondeadas para el editor de notas (Quill snow).
   La toolbar es el hermano previo del contenedor: redondeamos su
   borde superior y el inferior del contenedor + área editable para
   que el fondo blanco respete la curva. */
.ql-toolbar.ql-snow:has(+ #observaciones-action-editor) {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

#observaciones-action-editor.ql-container,
#observaciones-action-editor .ql-editor {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.quill-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1055;
    background: #fff;
    padding: 1rem;
}

.quill-fullscreen .ql-container {
    height: calc(100vh - 80px) !important;
}

.quill-fullscreen .ql-toolbar {
    position: sticky;
    top: 0;
    z-index: 1060;
}

.ql-toolbar .ql-fullscreen {
    font-size: 18px;
    padding: 5px 8px;
    cursor: pointer;
}

.ql-toolbar .ql-fullscreen:hover {
    background: #e5e7eb;
}

/* Galería de producto – controles visibles */
.gallery-control {
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}

.gallery-control .carousel-control-prev-icon,
.gallery-control .carousel-control-next-icon {
    background-size: 70% 70%;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    padding: 12px;
}

.gallery-control:hover .carousel-control-prev-icon,
.gallery-control:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.65);
}

.modal-dialog-scrollable .modal-content {
    min-height: 75vh;
}

/* Modal con altura fija y scroll interno (Bootstrap / Tabler) */
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.badge-wide {
    min-width: 90px;
    text-align: center;
    display: inline-block;
}

.sec-analisis {
    width: 100%;
    height: 100vh;
}

/* ===== Columna de instrucciones ===== */
.instructions-column {
    position: sticky;
    top: 1rem;
    height: calc(80vh - 120px);
    overflow-y: auto;
}

/* Card ocupa todo */
.instructions-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Scroll interno REAL */
.instructions-body {
    flex: 1;
    overflow-y: auto;
}
.btn-sm:hover {
    background-color: var(--brand-secondary);
}

 .img-circle-kpi {
     width: 100%;
     height: 75px;
     border-radius: 0% 0% 0% 0%;
     object-fit: cover;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
.chevron {
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .chevron {
    transform: rotate(180deg);
}
/* ============================= */
/* CATALOG VISUAL TABS PREMIUM  */
/* ============================= */

.catalog-tab-card {
    position: relative;
    height: 150px;                 /* ↓ menos alto */
    border-radius: 8px;           /* ↓ menos redondeado */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.catalog-tab-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Fondo imagen */
.catalog-tab-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Oscurecer cuando NO está activa */
.catalog-tab-card:not(.active) .catalog-tab-bg {
    filter: brightness(0.55);
}

/* Activa más luminosa */
.catalog-tab-card.active .catalog-tab-bg {
    filter: brightness(0.85);
}

/* Hover ligero zoom */
.catalog-tab-card:hover .catalog-tab-bg {
    transform: scale(1.03);
}

/* Overlay */
.catalog-tab-overlay {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;

    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.6) 20%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0.05) 100%
    );
}

.catalog-tab-overlay h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.catalog-tab-overlay p {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Hover suave */
.catalog-tab-card:hover {
    transform: translateY(-3px);
}

/* 🔶 ACTIVO — NARANJA FUERTE */
.catalog-tab-card.active {
    border: 3px solid #feb62c; /* naranja fuerte */
    box-shadow: 0 0 0 4px rgba(255, 166, 0, 0.25);
}

/* Fondo imagen */
.catalog-tab-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* No activo más oscuro */
.catalog-tab-card:not(.active) .catalog-tab-bg {
    filter: brightness(0.45);
}

/* Activo más claro */
.catalog-tab-card.active .catalog-tab-bg {
    filter: brightness(0.95);
}

/* Zoom suave */
.catalog-tab-card:hover .catalog-tab-bg {
    transform: scale(1.03);
}
/* ============================= */
/* Aletheia Marketplace Header   */
/* ============================= */

.aletheia-header {
    padding-top: 10px;
}

.marketplace-subtitle {
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #777;
    font-weight: 500;
}

.marketplace-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 6px 0 0 0;
    color: #111;
}

.marketplace-divider {
    height: 1px;
    background: linear-gradient(
            to right,
            transparent,
            #ddd,
            transparent
    );
}
.search-context-link:hover {
    color: var(--brand-secondary) !important;
}

.aletheia-logo {
    height: 34px;
    width: auto;
    max-height: 34px;
    object-fit: contain;
}

/* ===================================================================
   SIDEBAR · REDISEÑO FLOTANTE ("wow")
   Todo se deriva de las variables de marca (--brand-sidebar-bg /
   --brand-sidebar-text) con color-mix, así funciona con cualquier
   paleta de cliente. Degradado, glow, panel flotante, píldora activa
   y microinteracciones.
   =================================================================== */

.navbar.navbar-vertical {
    /* Panel flotante despegado del borde. */
    margin: 12px 0 12px 12px;
    height: calc(100vh - 24px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;                 /* clip glow + esquinas */
    /* Sticky: el sidebar mantiene su posición aunque la página haga scroll.
       `align-self: flex-start` evita que el flex-item se estire a la altura
       total del contenido (rompería el sticky). */
    position: sticky;
    top: 12px;
    align-self: flex-start;
    /* Toque glass: desenfoca lo que quede detrás en los bordes. */
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Degradado de marca (claro arriba → oscuro abajo). Solo si el
   navegador soporta color-mix; si no, se queda el color plano base. */
/* Degradado de marca + glow, como CAPAS DE FONDO (sin pseudo-elemento ni
   z-index → no interfiere con la clicabilidad del toggle). */
@supports (background: color-mix(in srgb, red, blue)) {
    .navbar.navbar-vertical {
        --sb: var(--brand-sidebar-bg);
        --sb-light: color-mix(in srgb, var(--sb) 80%, white);
        --sb-dark:  color-mix(in srgb, var(--sb) 84%, black);
        background-image:
            radial-gradient(220px 200px at 34px 24px,
                color-mix(in srgb, var(--brand-sidebar-text) 34%, transparent),
                transparent 68%),
            linear-gradient(180deg,
                var(--sb-light) 0%, var(--sb) 50%, var(--sb-dark) 100%);
    }
}

/* Scroll interno propio del contenido (sin z-index, para no tapar el toggle). */
.navbar.navbar-vertical > .container-fluid {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

/* Enlaces como chips redondeados con microinteracción al pasar. */
.navbar-vertical .nav-link {
    margin: 3px 10px;
    border-radius: 12px;
    padding: 0.58rem 0.8rem;
    position: relative;
    z-index: 1;                       /* por encima del indicador deslizante */
    transition: color 0.18s ease;
}

/* Ítem activo: tipografía, color de icono y barra de acento. El fondo
   (resaltado) lo pone el INDICADOR DESLIZANTE, que descansa sobre el
   activo y sigue al ratón. */
/* `body ...` sube la especificidad (0,3,1) para ganar a la regla roja
   `--brand-secondary !important` que existe DUPLICADA en application.css y
   branding.css (misma especificidad 0,3,0), independientemente del orden de
   carga. El resaltado del activo lo pone el indicador deslizante (neutro). */
body .navbar-vertical .nav-link.active {
    font-weight: 500;
    border-radius: 12px !important;
    margin: 3px 10px !important;
    padding-left: 0.9rem !important;
    background: transparent !important;
}
@supports (background: color-mix(in srgb, red, blue)) {
    .navbar-vertical .nav-link.active i {
        color: var(--brand-sidebar-text);
    }
}
.navbar-vertical .nav-link.active::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-sidebar-text);
    box-shadow: 0 0 10px var(--brand-sidebar-text);
}

/* ---- INDICADOR DESLIZANTE ---- */
.navbar-vertical .navbar-nav {
    position: relative;              /* contenedor de referencia del slider */
}
.sidebar-nav-slider {
    position: absolute;
    z-index: 0;                      /* detrás del texto/iconos de los links */
    pointer-events: none;
    border-radius: 12px;
    opacity: 0;
    /* Resaltado NEUTRO (blanco translúcido): limpio sobre cualquier color de
       sidebar. El toque de marca lo da la barra de acento del ítem activo. */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.22s ease, width 0.22s ease,
                height 0.22s ease, opacity 0.18s ease;
}

/* La cuenta como tarjeta translúcida. */
.sidebar-account-btn {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 0.5rem 0.6rem !important;
    transition: background 0.18s ease;
}
.sidebar-account-btn:hover {
    background: rgba(255, 255, 255, 0.13) !important;
}

/* Colapsado: mantiene el look flotante, más estrecho. */
body.navbar-vertical-collapsed .navbar.navbar-vertical {
    border-radius: 16px;
}

/* Colapsado · CENTRADO. Los márgenes/padding horizontales del modo expandido
   (chips, tarjeta de cuenta, container) desplazaban todo ~18px a la derecha.
   En rail los anulamos y centramos logo, foto de cuenta e iconos. */
body.navbar-vertical-collapsed .navbar.navbar-vertical > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
body.navbar-vertical-collapsed .navbar-vertical .nav-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
}
body.navbar-vertical-collapsed .navbar-vertical .nav-link i {
    margin: 0 !important;
}
body.navbar-vertical-collapsed .sidebar-account-btn {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}
body.navbar-vertical-collapsed .sidebar-avatar-wrapper {
    margin-right: 0 !important;
}
body.navbar-vertical-collapsed .sidebar-logo {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Un poco de aire entre la tarjeta "Mi cuenta" y el primer ítem del menú
   (antes el ítem activo quedaba pegado a la cuenta). */
.sidebar-account {
    margin-bottom: 12px;
}

/* =========================================================
   Panel de anotaciones del diseñador de procesos
   ========================================================= */

/* El popup de anotaciones se repinta por Turbo Stream sobre `.notes-panel`,
   que vive DENTRO de `.modal-body`. El aire lateral se define aquí y no se
   confía solo al padding del modal, para que el contenido no quede pegado a
   los bordes en ningún estado del panel. */
.notes-panel {
    padding-inline: .25rem;
}

/* Un hilo largo no debe empujar el popup: la cabecera y el formulario de
   abajo se quedan fijos y solo hace scroll la conversación. */
.notes-panel .notes-thread {
    max-height: 45vh;
    overflow-y: auto;
    padding-right: .35rem;
}

/* El texto de una anotación puede venir de un pegado con palabras larguísimas
   (una URL, una clave): sin esto desbordaría el ancho del popup. */
.notes-panel .notes-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Encabezado de bloque en la estructura del diseñador.
   Un poco de aire arriba y abajo para que separe de verdad: pegado a las
   fases, el encabezado se leía como una fila más de la lista. */
.design-block-header {
    margin-block: .85rem;
}

/* Sin hueco sobrante en el primero: ahí ya separa la cabecera de la tarjeta. */
.design-block-header:first-child {
    margin-top: .25rem;
}

/* Parpadeo del elemento al que salta una anotación. En una estructura larga,
   sin esto el usuario aterriza sin saber cuál de las tarjetas era. */
.note-jump-target {
    animation: note-jump-flash 2.2s ease-out 1;
}

@keyframes note-jump-flash {
    0%   { box-shadow: 0 0 0 3px rgba(245, 159, 0, .85); }
    70%  { box-shadow: 0 0 0 3px rgba(245, 159, 0, .45); }
    100% { box-shadow: 0 0 0 3px rgba(245, 159, 0, 0); }
}

/* Filtro "solo abiertas" del centro de anotaciones.
   La clase la lleva el modal, que el Turbo Stream no sustituye; por eso el
   filtro sobrevive a los repintados sin que el JS tenga que reponerlo. */
.solo-abiertas .nota-cerrada,
.solo-abiertas .grupo-cerrado {
    display: none;
}

/* Aviso de "no queda ninguna abierta": solo se ve con el filtro puesto. */
.solo-abiertas-vacio {
    display: none;
}

.solo-abiertas .solo-abiertas-vacio {
    display: block;
}
/* =========================================
   Help Chat Floating Widget
   ========================================= */

.help-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary, #0054a6);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.help-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.help-chat-fab-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

/* Panel */
.help-chat-panel {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 1050;
  width: 540px;
  max-width: calc(100vw - 48px);
  max-height: min(860px, calc(100vh - 96px));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: helpChatSlideUp 0.2s ease-out;
}

@keyframes helpChatSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.help-chat-header {
  padding: 12px 16px;
  background: var(--brand-primary, #0054a6);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.help-chat-header strong {
  font-size: 0.9rem;
}

.help-chat-header-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 2px;
  font-size: 1rem;
  line-height: 1;
  transition: color 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.help-chat-header-btn:hover {
  color: #fff;
}

/* Messages */
.help-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  max-height: none;
  min-height: 120px;
}

.help-chat-bubble {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 85%;
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-word;
}

.help-chat-bubble p {
  margin: 0 0 4px;
}

.help-chat-bubble p:last-child {
  margin-bottom: 0;
}

.help-chat-bubble-user {
  background: var(--brand-primary, #0054a6);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.help-chat-bubble-assistant {
  background: #f1f3f5;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.help-chat-typing {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: #f1f3f5;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  max-width: 60px;
  margin-bottom: 8px;
}

.help-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  animation: helpChatTyping 1.2s infinite;
}

.help-chat-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.help-chat-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes helpChatTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Starters */
.help-chat-starters {
  padding: 8px 0;
}

.help-chat-starter-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  font-size: 0.825rem;
  color: #333;
  cursor: pointer;
  transition: background 0.15s;
}

.help-chat-starter-btn:hover {
  background: #f0f0f0;
  border-color: var(--brand-primary, #0054a6);
}

/* Input area */
.help-chat-input-area {
  padding: 8px 12px;
  border-top: 1px solid #e9ecef;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.help-chat-input-area textarea {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 6px 12px;
  resize: none;
  max-height: 80px;
  font-size: 0.875rem;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}

.help-chat-input-area textarea:focus {
  border-color: var(--brand-primary, #0054a6);
  box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.15);
}

.help-chat-send-btn {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .help-chat-panel {
    width: calc(100vw - 32px);
    right: 16px;
    bottom: 80px;
    max-height: 70vh;
  }

  .help-chat-messages {
    max-height: calc(70vh - 120px);
  }
}

/* Markdown in assistant messages */
.help-chat-bubble-assistant code {
  background: #e2e6ea;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.8rem;
}

.help-chat-bubble-assistant pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 4px 0;
}

.help-chat-bubble-assistant ul,
.help-chat-bubble-assistant ol {
  margin: 4px 0;
  padding-left: 20px;
}
/* ===========================================================================
   KANBAN DE BLOQUES → FASES → ACCIONES
   ---------------------------------------------------------------------------
   Se usa en la ficha del modelo de proceso (admin) y en la del proceso en
   curso. Los tres niveles se pintan a la vez y el controlador Stimulus
   `kanban` enseña uno cada vez, así que aquí solo hay estilos de tarjeta.
   =========================================================================== */

/* El cuerpo de la tarjeta va en blanco: `.card` de Tabler la pinta con el
   crema corporativo (#f3f2ec) y el cuerpo, que es transparente, lo heredaba.
   Hace falta un selector más específico que `.card` para ganarle la cascada;
   la cabecera se pinta encima con el color de su bloque. */
.kanban-grid .kanban-card,
.kanban-grid .kanban-card .kanban-card__body,
.kanban-grid .kanban-card .kanban-card__footer {
    background-color: #fff;
}

.kanban-card {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kanban-card--clickable {
    cursor: pointer;
}

.kanban-card--clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Cabecera coloreada: el color lo pone el bloque (inline style). */
.kanban-card__header {
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.kanban-card__header .kanban-card__count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

/* Número grande de orden de ejecución. En las fases es su posición dentro del
   proceso/modelo completo (se ejecutan por `position`, no por bloque); en las
   acciones, su posición dentro de la fase. */
.kanban-card__order {
    flex-shrink: 0;
    min-width: 2rem;
    padding: 0 0.35rem;
    border-radius: 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Cabeceras claras: el badge y el número necesitan contraste inverso. */
.kanban-card__header--light .kanban-card__count,
.kanban-card__header--light .kanban-card__order {
    background-color: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

/* El cuerpo es una columna flex para que el listado de fases pueda estirarse
   y todas las tarjetas de la fila acaben con las cajas a la misma altura. */
.kanban-card__body {
    padding: 0.85rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* La descripción reserva siempre el mismo alto (4 líneas, con recorte visual),
   de forma que lo que va debajo arranca a la misma altura en todas las
   tarjetas, tenga la descripción que tenga. */
.kanban-card__desc {
    color: var(--tblr-secondary, #6c757d);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: calc(4 * 1.4em);
}

.kanban-card__footer {
    padding: 0.5rem 0.85rem 0.85rem;
    margin-top: auto;
}

/* Listado de fases dentro de la tarjeta de bloque: recuadro redondeado, fondo
   blanco y borde del color del bloque. Cada línea enlaza con su fase. */
.kanban-phase-list {
    margin-top: 0.75rem;
    background-color: #fff;
    border: 1px solid var(--kanban-block-color, #adb5bd);
    border-radius: 0.75rem;
    /* Crece hasta llenar el hueco disponible: como las columnas de una fila
       comparten altura, todos los recuadros quedan igualados arriba y abajo.
       Con muchas fases el listado hace scroll dentro del recuadro. */
    flex: 1 1 auto;
    min-height: 5.5rem;
    max-height: 13rem;
    overflow-y: auto;
}

.kanban-phase-list__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.8125rem;
    color: inherit;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.kanban-phase-list__item:first-child {
    border-top: 0;
}

/* `a:hover { text-decoration: underline }` es global en la app: aquí el
   subrayado ensucia la lista, así que lo anulamos y marcamos el hover con
   un fondo tintado del color del bloque. */
.kanban-phase-list__item,
.kanban-phase-list__item:hover {
    text-decoration: none;
}

.kanban-phase-list__item:hover {
    background-color: color-mix(in srgb, var(--kanban-block-color, #adb5bd) 12%, #fff);
}

.kanban-phase-list__item--muted {
    opacity: 0.55;
}

.kanban-phase-list__order {
    flex-shrink: 0;
    min-width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--kanban-block-color, #adb5bd);
    color: var(--kanban-block-text, #fff);
}

.kanban-phase-list__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kanban-phase-list__pct,
.kanban-phase-list__status {
    margin-left: auto;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--tblr-secondary, #6c757d);
}

/* El badge de estado va dentro de una línea estrecha: se compacta un poco. */
.kanban-phase-list__status {
    font-size: 0.6875rem;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

/* Franja lateral con el color del bloque en las tarjetas de fase. */
.kanban-card--striped {
    border-left: 5px solid var(--kanban-stripe, #adb5bd);
}

/* Rejilla de 4 tarjetas por línea en pantallas grandes (col-xl-3). Como son
   más estrechas, se deja que el contenido crezca a lo alto: Bootstrap estira
   las columnas de una misma fila, así que todas las tarjetas de la fila
   acaban con la misma altura. */
.kanban-grid > [class*="col-"] {
    display: flex;
}

.kanban-grid .kanban-card {
    width: 100%;
}

/* La cabecera se mantiene SIEMPRE en una línea: el nombre encoge de tamaño
   hasta caber (lo ajusta el controlador Stimulus `kanban`, que mide el texto)
   y, si aun al mínimo no cupiera, se recorta con puntos suspensivos. */
.kanban-card__header {
    flex-wrap: nowrap;
}

.kanban-card__title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Sin transición en `font-size`: el ajuste mide el texto justo después de
       cambiar el tamaño, y una transición devolvería el valor animado (el
       anterior), falseando el cálculo. */
}

/* Barra de navegación entre niveles. */
.kanban-crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.kanban-crumbs__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.kanban-empty {
    padding: 1.25rem;
    text-align: center;
    color: var(--tblr-secondary, #6c757d);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 12px;
}

/* Fase/acción omitida: se atenúa igual que en la vista de tarjetas previa. */
.kanban-card--muted {
    opacity: 0.55;
}

/* Los badges de tipología/estado pueden ser largos: que envuelvan en vez de
   desbordar la tarjeta. */
.kanban-card .badge {
    white-space: normal;
    text-align: left;
    max-width: 100%;
}

/* En columnas estrechas los dos botones del pie no caben en una línea. */
.kanban-card__footer .btn {
    white-space: nowrap;
}

/* ===========================================================================
   TARJETA DE DOCUMENTACIÓN DEL MODELO
   ---------------------------------------------------------------------------
   Vive en la columna estrecha de la ficha del modelo. El input de fichero trae
   un ancho intrínseco grande que empujaba la tarjeta (y con ella la fila
   entera) más allá del viewport, y los títulos largos no partían.
   =========================================================================== */
.help-docs-card,
.help-docs-card .card-footer,
.help-docs-card .list-group-item {
    min-width: 0;
}

.help-docs-card input[type="file"],
.help-docs-card input[type="text"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Nombres de documento y de fichero largos: que partan en vez de desbordar. */
.help-docs-card__name,
.help-docs-card .list-group-item .small span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* El tag de nivel (PROCESO / FASE / ACCIÓN) solo acompaña al flujograma: en el
   Kanban la tarjeta y la miga de pan ya sitúan al usuario. Ver
   `shared/_level_badge`, que fija `data-view-mode` cuando la página no lo
   hace por su cuenta. */
html[data-view-mode="cards"] .aleph-level-badge {
    display: none !important;
}
/* ==========================================================================
   Demo pública del diseñador de procesos (layout lead_demo, /demo).
   Página comercial: mucho aire, mensajes grandes, color de la instancia
   (--ld-brand / --ld-brand-rgb, del branding por defecto).
   ========================================================================== */

.ld-body {
  --ld-brand: #1f6f5c;
  --ld-brand-rgb: 31, 111, 92;
  --ld-ink: #0f172a;
  --ld-muted: #5b6678;
  --ld-line: #e2e6ee;
  --ld-card: #ffffff;
  --ld-radius: 18px;
  --ld-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 40px -12px rgba(15, 23, 42, .18);

  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ld-ink);
  background: #f4f6fa;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.ld-body *, .ld-body *::before, .ld-body *::after { box-sizing: border-box; }
.ld-body.ld-noscroll { overflow: hidden; }
.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ld-body [hidden] { display: none !important; }

.ld-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 55% at 0% 0%, rgba(var(--ld-brand-rgb), .16), transparent 70%),
    radial-gradient(45% 50% at 100% 100%, rgba(var(--ld-brand-rgb), .12), transparent 70%),
    linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
}

/* ---- Cabecera ---------------------------------------------------------- */
.ld-header {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 32px;
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 248, 251, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, .05);
}
.ld-logo img { height: 34px; width: auto; display: block; }

.ld-progress {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; gap: 6px; align-items: center;
}
.ld-progress li {
  display: flex; align-items: center; gap: 8px;
  color: var(--ld-muted); font-size: 13px; font-weight: 600;
}
.ld-progress li + li::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: var(--ld-line); margin-right: 6px;
}
.ld-progress li.is-done + li::before,
.ld-progress li.is-current::before { background: rgba(var(--ld-brand-rgb), .5); }
.ld-progress-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: #fff; border: 2px solid var(--ld-line);
}
.ld-progress li.is-done .ld-progress-dot { background: rgba(var(--ld-brand-rgb), .12); border-color: transparent; color: var(--ld-brand); }
.ld-progress li.is-current { color: var(--ld-ink); }
.ld-progress li.is-current .ld-progress-dot { background: var(--ld-brand); border-color: var(--ld-brand); color: #fff; }

/* Selector de idioma: el mismo de la pantalla de login (.lg-lang). */
.ld-lang {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 42px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ld-line);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35);
  color: var(--ld-ink); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ld-lang:hover { border-color: rgba(var(--ld-brand-rgb), .5); }
.ld-lang:focus-within { border-color: rgb(var(--ld-brand-rgb)); box-shadow: 0 0 0 4px rgba(var(--ld-brand-rgb), .15); }
.ld-lang > svg { width: 18px; height: 18px; flex: 0 0 18px; color: rgb(var(--ld-brand-rgb)); }
.ld-lang select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent;
  padding: 0 22px 0 0; margin-right: -20px;
  font: inherit; font-size: .92rem; font-weight: 700; color: var(--ld-ink); cursor: pointer;
}
.ld-lang select:focus { outline: none; }
.ld-lang .ld-lang-caret { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ld-muted); pointer-events: none; }

/* ---- Cuerpo ------------------------------------------------------------ */
.ld-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px; }
.ld-footer {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  padding: 20px; font-size: 12px; color: var(--ld-muted);
}
.ld-inline { display: inline; margin: 0; }
.ld-link { background: none; border: 0; padding: 0; font: inherit; color: var(--ld-muted); text-decoration: underline; cursor: pointer; }

.ld-kicker {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ld-brand);
}
.ld-title { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.ld-text { font-size: 17px; color: #334155; }
.ld-text p { margin: 0 0 10px; }
.ld-muted { color: var(--ld-muted); margin: 0 0 18px; }
.ld-center { text-align: center; }

/* ---- Botones ----------------------------------------------------------- */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none;
  padding: 11px 20px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ld-btn svg { width: 18px; height: 18px; }
.ld-btn:hover { transform: translateY(-1px); }
.ld-btn--primary { background: var(--ld-brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(var(--ld-brand-rgb), .8); }
.ld-btn--primary:hover { box-shadow: 0 14px 30px -10px rgba(var(--ld-brand-rgb), .9); }
.ld-btn--ghost { background: #fff; color: var(--ld-ink); border-color: var(--ld-line); }
.ld-btn--light { background: #fff; color: var(--ld-brand); }
.ld-btn--subtle { background: transparent; color: var(--ld-muted); border-color: transparent; }
.ld-btn--subtle:hover { color: #b91c1c; background: #fef2f2; }
.ld-btn--danger { background: #dc2626; color: #fff; box-shadow: 0 10px 24px -10px rgba(220, 38, 38, .7); }
.ld-btn--lg { padding: 15px 28px; font-size: 16px; border-radius: 14px; }
.ld-btn.is-busy { opacity: .7; pointer-events: none; }
.ld-btn.is-busy::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: ld-spin .8s linear infinite;
}
.ld-body form.button_to { display: inline; margin: 0; }

/* ---- Mensaje comercial (stage) ---------------------------------------- */
.ld-stage {
  background: var(--ld-card); border-radius: 24px; box-shadow: var(--ld-shadow);
  padding: 28px; margin-bottom: 28px; animation: ld-in .45s ease both;
}
.ld-slides { position: relative; }
.ld-slide { display: none; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.ld-slide.is-active { display: grid; animation: ld-fade .5s ease both; }
.ld-slide-media {
  aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background: #0f172a; display: grid; place-items: center;
}
.ld-slide-media img, .ld-slide-media video, .ld-slide-media iframe {
  width: 100%; height: 100%; object-fit: contain; border: 0; display: block;
}
/* Imágenes: completas y con su proporción, sin recortar ni marco oscuro. */
.ld-slide-media--image { aspect-ratio: auto; background: transparent; }
.ld-slide-media--image img { height: auto; max-height: 520px; border-radius: 16px; }
.ld-slide-media--default {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: #fff;
  background:
    radial-gradient(60% 70% at 20% 10%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, var(--ld-brand), rgba(var(--ld-brand-rgb), .65));
}
.ld-slide-media--default svg { width: 34%; height: auto; opacity: .95; }
.ld-slide-copy { padding: 8px 8px 8px 0; }
.ld-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.ld-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--ld-line); cursor: pointer; transition: width .2s; }
.ld-dot.is-active { width: 26px; border-radius: 6px; background: var(--ld-brand); }
.ld-stage-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

.ld-stage--compact { box-shadow: none; padding: 0; margin-bottom: 18px; }
.ld-stage--compact .ld-slide { grid-template-columns: 1fr; gap: 20px; }
.ld-stage--compact .ld-title { font-size: 26px; }
.ld-stage--compact .ld-text { font-size: 15px; }

/* ---- Portada ----------------------------------------------------------- */
.ld-cta-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; margin: 8px 0 32px; }
.ld-cta-row .ld-muted { margin: 0; }
.ld-how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ld-how-item { background: rgba(255,255,255,.75); border: 1px solid var(--ld-line); border-radius: var(--ld-radius); padding: 22px; }
.ld-how-item h3 { margin: 10px 0 6px; font-size: 17px; }
.ld-how-item p { margin: 0; color: var(--ld-muted); font-size: 14px; }
.ld-how-num {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(var(--ld-brand-rgb), .12); color: var(--ld-brand); font-weight: 800;
}

/* ---- Tarjetas y formularios ------------------------------------------- */
.ld-step { animation: ld-in .4s ease both; }
.ld-card { background: var(--ld-card); border-radius: 22px; box-shadow: var(--ld-shadow); padding: 34px; }
.ld-card--narrow { max-width: 720px; margin: 0 auto; }
.ld-card-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }

.ld-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ld-field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: #334155; }
.ld-field input {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ld-ink);
  width: 100%; min-width: 0;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ld-line); background: #fbfcfe;
  transition: border-color .15s, box-shadow .15s;
}
.ld-field input:focus { outline: none; border-color: var(--ld-brand); box-shadow: 0 0 0 4px rgba(var(--ld-brand-rgb), .14); background: #fff; }
.ld-hint { font-size: 12px; font-weight: 500; color: var(--ld-muted); }
.ld-form-note { margin: -4px 0 0; }
.ld-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #334155; cursor: pointer; }
.ld-check input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ld-brand); }
.ld-form-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.ld-captcha:empty { display: none; }
.ld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ld-alert { border-radius: 14px; padding: 14px 18px; margin: 0 0 18px; font-size: 14px; }
.ld-alert p { margin: 4px 0 10px; }
.ld-alert ul { margin: 0; padding-left: 18px; }
.ld-flash { max-width: 720px; margin: 0 auto 18px; }
.ld-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ld-alert--info { background: rgba(var(--ld-brand-rgb), .07); border: 1px solid rgba(var(--ld-brand-rgb), .25); }

.ld-drop {
  position: relative; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 36px 20px; border: 2px dashed rgba(var(--ld-brand-rgb), .35); border-radius: 18px;
  background: rgba(var(--ld-brand-rgb), .04); cursor: pointer; transition: background .15s, border-color .15s;
}
.ld-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ld-drop svg { width: 42px; height: 42px; color: var(--ld-brand); }
.ld-drop strong { font-size: 16px; }
.ld-drop small { color: var(--ld-muted); }
.ld-drop.is-over, .ld-drop:hover { background: rgba(var(--ld-brand-rgb), .09); border-color: var(--ld-brand); }
.ld-drop.has-file { border-style: solid; background: rgba(var(--ld-brand-rgb), .08); }
.ld-tips { margin: 0; padding-left: 18px; color: var(--ld-muted); font-size: 13px; display: grid; gap: 4px; }

/* ---- Espera ------------------------------------------------------------ */
.ld-working {
  display: flex; gap: 18px; align-items: center; max-width: 720px; margin: 0 auto 12px;
  background: var(--ld-card); border-radius: 18px; box-shadow: var(--ld-shadow); padding: 20px 24px;
}
.ld-spinner {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid rgba(var(--ld-brand-rgb), .18); border-top-color: var(--ld-brand);
  animation: ld-spin 1s linear infinite;
}
.ld-working-body { flex: 1; min-width: 0; }
.ld-working-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ld-percent { font-weight: 800; color: var(--ld-brand); font-variant-numeric: tabular-nums; }
.ld-bar { height: 10px; margin: 10px 0 4px; border-radius: 999px; background: rgba(var(--ld-brand-rgb), .12); overflow: hidden; }
.ld-bar span {
  display: block; height: 100%; border-radius: inherit; transition: width 2s linear;
  background-color: var(--ld-brand);
  background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%, transparent);
  background-size: 18px 18px;
  animation: ld-stripes 1s linear infinite;
}
@keyframes ld-stripes { from { background-position: 0 0; } to { background-position: 18px 0; } }
.ld-phases { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ld-muted); }
.ld-phases li::before { content: "○ "; }
.ld-phases li.is-current { color: var(--ld-brand); font-weight: 700; }
.ld-phases li.is-current::before { content: "● "; }
.ld-phases li.is-done { color: var(--ld-ink); }
.ld-phases li.is-done::before { content: "✓ "; color: var(--ld-brand); }
.ld-waiting .ld-stage { margin-top: 18px; }

/* ---- Diseño ------------------------------------------------------------ */
.ld-design-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.ld-design-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ld-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ld-chips li { background: #fff; border: 1px solid var(--ld-line); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ld-muted); }
.ld-chips li strong { color: var(--ld-ink); }
.ld-chips li.is-ai { border-color: rgba(var(--ld-brand-rgb), .35); background: rgba(var(--ld-brand-rgb), .07); }
.ld-chips li.is-locked { background: #fff7ed; border-color: #fed7aa; }

/* Cabecera del diseño con el botón de ayuda a la derecha. La tarjeta se abre
   flotando sobre el diseño, sin empujarlo hacia abajo. */
.ld-design-top { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.ld-design-top .ld-design-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 0; }
.ld-help { position: relative; flex: none; }
.ld-help summary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(var(--ld-brand-rgb), .25);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35);
  font-weight: 800; font-size: 14px; cursor: pointer; list-style: none; white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
}
.ld-help summary:hover, .ld-help[open] summary { border-color: var(--ld-brand); box-shadow: 0 0 0 4px rgba(var(--ld-brand-rgb), .12); }
.ld-help summary::-webkit-details-marker { display: none; }
.ld-help summary::after { content: "▾"; color: var(--ld-muted); transition: transform .2s; }
.ld-help[open] summary::after { transform: rotate(180deg); }
.ld-help-badge {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ld-brand); color: #fff; font-size: 14px; font-weight: 800;
}
.ld-help ul {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  width: min(380px, calc(100vw - 32px));
  list-style: none; margin: 0; padding: 18px; display: grid; gap: 12px;
  background: #fff; border: 1px solid rgba(var(--ld-brand-rgb), .22); border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .45);
  animation: ld-in .2s ease both;
}
.ld-help li { display: flex; gap: 10px; align-items: flex-start; }
.ld-help-icon { flex: none; width: 22px; text-align: center; font-size: 15px; line-height: 1.4; }
.ld-help strong { font-size: 13.5px; }
.ld-help p { margin: 1px 0 0; font-size: 13px; color: var(--ld-muted); line-height: 1.45; }

.ld-modal-box--sm { width: min(480px, 100%); text-align: center; }
.ld-modal-box.ld-modal-box--sm .ld-cta-row { justify-content: center; margin-top: 18px; }
.ld-modal-box--sm .ld-text { font-size: 15px; }
.ld-modal-icon {
  width: 56px; height: 56px; margin: 4px auto 14px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(var(--ld-brand-rgb), .12); color: var(--ld-brand);
}
.ld-modal-icon--danger { background: #fef2f2; color: #dc2626; }
.ld-modal-cancel { display: block; margin: 14px auto 0; }
.ld-modal-small { font-size: 13px; margin: 10px 0 0; }
.ld-modal-icon svg { width: 28px; height: 28px; }
.ld-modal-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; }

/* Prompts en redacción con el diseño ya a la vista. */
.ld-drafting {
  display: flex; gap: 14px; align-items: center; margin: 0 0 16px; padding: 14px 18px;
  border-radius: 16px; background: rgba(var(--ld-brand-rgb), .07); border: 1px solid rgba(var(--ld-brand-rgb), .25);
}
.ld-drafting p { margin: 2px 0 0; font-size: 14px; color: var(--ld-muted); }
.ld-drafting--done { background: #ecfdf5; border-color: #a7f3d0; }
.ld-spinner--sm { width: 28px; height: 28px; border-width: 3px; }
.ld-mini-spinner {
  display: inline-block; width: 11px; height: 11px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid rgba(var(--ld-brand-rgb), .25); border-top-color: var(--ld-brand);
  animation: ld-spin .9s linear infinite;
}
.ld-chips li.is-drafting { border-color: rgba(var(--ld-brand-rgb), .35); color: var(--ld-brand); font-weight: 600; }
.ld-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.ld-doc { width: 100%; height: 75vh; border: 1px solid var(--ld-line); border-radius: 16px; background: #fff; }

.ld-banner {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  margin-top: 32px; padding: 24px 28px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, var(--ld-brand), rgba(var(--ld-brand-rgb), .75));
  box-shadow: 0 18px 40px -18px rgba(var(--ld-brand-rgb), .9);
}
.ld-banner p { margin: 4px 0 0; opacity: .9; }
.ld-exit { display: flex; justify-content: center; margin-top: 22px; }

/* ---- Modal ------------------------------------------------------------- */
.ld-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.ld-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.ld-modal-box {
  position: relative; width: min(620px, 100%); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 24px; padding: 28px; box-shadow: 0 30px 80px -20px rgba(15,23,42,.5);
  animation: ld-in .3s ease both;
}
.ld-modal-box .ld-cta-row { margin: 0; justify-content: flex-start; }
.ld-modal-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--ld-muted); cursor: pointer; }

/* ---- Gracias ----------------------------------------------------------- */
.ld-thanks-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--ld-brand);
}

@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Móvil ------------------------------------------------------------- */
@media (max-width: 860px) {
  .ld-header { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .ld-progress { order: 3; width: 100%; justify-content: center; }
  .ld-progress-label { display: none; }
  .ld-main { padding: 24px 16px 48px; }
  .ld-slide, .ld-slide.is-active { grid-template-columns: 1fr; gap: 20px; }
  .ld-stage, .ld-card { padding: 20px; }
  .ld-grid, .ld-how { grid-template-columns: minmax(0, 1fr); }
  .ld-design-top { flex-direction: column-reverse; }
  .ld-help ul { right: auto; left: 0; }
  .ld-lang { height: 38px; padding: 0 12px; }
}
/* Con "reducir movimiento" se quitan las animaciones decorativas, pero no las
   que indican que la aplicación sigue trabajando (spinner y barra). */
@media (prefers-reduced-motion: reduce) {
  .ld-body *:not(.ld-spinner):not(.ld-mini-spinner):not(.ld-bar span):not(.ld-btn.is-busy) { animation: none !important; transition: none !important; }
  .ld-spinner { animation-duration: 1.4s !important; }
}
/* ==========================================================================
   Páginas de acceso (layout brand_login): login general y Mi Equipo.
   Fondo claro con el color del cliente, tarjeta ancha centrada con un panel
   decorativo (imágenes del branding) y el formulario con el logotipo destacado.
   El color del cliente llega como --lg-brand / --lg-brand-rgb.
   ========================================================================== */

.lg-body {
  --lg-brand: #1f6f5c;
  --lg-brand-rgb: 31, 111, 92;
  --lg-ink: #0f172a;
  --lg-muted: #5b6678;
  --lg-line: #dfe3ea;

  margin: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lg-ink);
  background: #f4f6fa;
  -webkit-font-smoothing: antialiased;
}
.lg-body *, .lg-body *::before, .lg-body *::after { box-sizing: border-box; }
.lg-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.lg {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 84px 24px 64px;
}

/* --------------------------------------------------------------------------
   Fondo de página: claro, con un tinte suave del color corporativo
   -------------------------------------------------------------------------- */
.lg-page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(55% 60% at 0% 0%, rgba(var(--lg-brand-rgb), .16), transparent 70%),
    radial-gradient(45% 55% at 100% 100%, rgba(var(--lg-brand-rgb), .12), transparent 70%),
    linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
}
.lg-page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--lg-brand-rgb), .10) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 45%, transparent 35%, #000 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 35%, #000 85%);
}

/* --------------------------------------------------------------------------
   Tarjeta: panel decorativo + formulario
   -------------------------------------------------------------------------- */
.lg-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  border-radius: 28px;
  background: #fff;
  box-shadow:
    0 40px 90px -40px rgba(15, 23, 42, .35),
    0 12px 30px -18px rgba(var(--lg-brand-rgb), .35),
    0 0 0 1px rgba(15, 23, 42, .04);
  overflow: hidden;
  animation: lg-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* Franja superior con el color corporativo */
.lg-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  z-index: 2;
  background: linear-gradient(90deg, rgb(var(--lg-brand-rgb)), rgba(var(--lg-brand-rgb), .55));
}
@keyframes lg-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Variante de una sola columna (verificación y configuración de la 2FA) */
.lg-card--single {
  grid-template-columns: 1fr;
  max-width: 540px;
  min-height: 0;
}
.lg-card--single .lg-form { padding: 56px clamp(28px, 6vw, 64px) 44px; }
.lg-card--setup { max-width: 880px; }
.lg-card--setup .lg-form-inner { max-width: none; }

/* Configuración de la 2FA: QR + pasos */
.lg-setup {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.lg-qr {
  padding: 16px;
  border: 1.5px solid var(--lg-line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.lg-qr svg { width: 100%; height: auto; display: block; }
.lg-qr-hint { margin: 10px 0 0; font-size: .8rem; color: var(--lg-muted); line-height: 1.45; }
.lg-steps {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: lgstep;
  display: grid;
  gap: 12px;
}
.lg-steps li {
  position: relative;
  padding-left: 40px;
  font-size: .93rem;
  line-height: 1.5;
}
.lg-steps li::before {
  counter-increment: lgstep;
  content: counter(lgstep);
  position: absolute;
  left: 0; top: -1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--lg-brand-rgb), .12);
  color: rgb(var(--lg-brand-rgb));
  font-size: .8rem;
  font-weight: 800;
}
.lg-stores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lg-store {
  padding: 4px 10px;
  border: 1px solid var(--lg-line);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--lg-ink);
  text-decoration: none;
  background: #fff;
}
.lg-store:hover { border-color: rgb(var(--lg-brand-rgb)); color: rgb(var(--lg-brand-rgb)); }

/* Panel decorativo */
.lg-visual {
  position: relative;
  overflow: hidden;
  margin: 14px 0 14px 14px;
  border-radius: 20px;
  background: rgb(var(--lg-brand-rgb));
}
.lg-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  animation: lg-drift 30s ease-in-out infinite alternate;
}
@keyframes lg-drift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.1); }
}
.lg-mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(45% 45% at 25% 25%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(40% 45% at 80% 70%, rgba(0, 0, 0, .25), transparent 70%),
    radial-gradient(35% 35% at 70% 20%, rgba(255, 255, 255, .14), transparent 70%),
    rgb(var(--lg-brand-rgb));
  filter: blur(24px);
  animation: lg-mesh 24s ease-in-out infinite alternate;
}
@keyframes lg-mesh {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(10deg) scale(1.08); }
}
.lg-visual-tint {
  /* Veladura con el color corporativo sobre la imagen */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg, rgba(var(--lg-brand-rgb), .22) 0%, rgba(var(--lg-brand-rgb), .48) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.lg-visual-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--lg-brand-rgb), .16);
  mix-blend-mode: normal;
}

/* Formulario */
.lg-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(32px, 5vw, 72px) 48px;
}
.lg-form-inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.lg-logo { margin-bottom: 34px; }
.lg-logo img {
  max-height: 84px;
  max-width: 320px;
  width: auto;
  display: block;
}

.lg-title {
  margin: 0 0 26px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.lg-text {
  margin: -12px 0 24px;
  color: var(--lg-muted);
  font-size: .95rem;
  line-height: 1.55;
}
.lg-hint {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--lg-muted);
}
.lg-input--code {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
  padding-left: calc(16px + .5em);
}

.lg-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.45;
}
.lg-alert--error  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.lg-alert--notice { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

.lg-field { margin-bottom: 16px; }
.lg-label {
  display: block;
  margin: 0 0 7px;
  font-size: .86rem;
  font-weight: 700;
  color: #1e293b;
}
.lg-input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1.5px solid var(--lg-line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--lg-ink);
  transition: border-color .15s, box-shadow .15s;
}
.lg-input::placeholder { color: #a0aab8; }
.lg-input:focus {
  outline: none;
  border-color: rgb(var(--lg-brand-rgb));
  box-shadow: 0 0 0 4px rgba(var(--lg-brand-rgb), .15);
}
.lg-input[aria-invalid="true"] {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
}

.lg-btns { display: grid; gap: 12px; margin-top: 8px; }
/* Botones de proveedor en una sola fila (Mi Equipo) */
.lg-btns--row { grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 54px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, filter .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
.lg-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 3px solid rgba(var(--lg-brand-rgb), .4); outline-offset: 2px; }
.lg-btn--brand {
  background: rgb(var(--lg-brand-rgb));
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(var(--lg-brand-rgb), .95);
}
.lg-btn--brand:hover { filter: brightness(1.07); }
.lg-btn--dark {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(15, 23, 42, .85);
}
.lg-btn--dark:hover { background: #1e293b; }
.lg-btn--light {
  background: #fff;
  color: var(--lg-ink);
  border-color: var(--lg-line);
}
.lg-btn--light:hover { border-color: #c5ccd6; background: #fafbfc; }
.lg-btn[disabled] { opacity: .65; cursor: progress; }
.lg-btn--sm { height: 46px; font-size: .92rem; gap: 10px; }
.lg-btn--sm svg { width: 18px; height: 18px; flex-basis: 18px; }

.lg-links {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  font-size: .9rem;
}
.lg-link {
  color: var(--lg-muted);
  text-decoration: none;
}
.lg-link:hover { color: rgb(var(--lg-brand-rgb)); text-decoration: underline; }
.lg-link--button {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
}
.lg-links form { margin: 0; }
.lg-link--strong { color: rgb(var(--lg-brand-rgb)); font-weight: 700; }
.lg-sep {
  height: 1px;
  margin: 26px 0 4px;
  background: var(--lg-line);
}

.lg-auto .lg-title { font-size: 1.35rem; }
.lg-spinner {
  width: 44px; height: 44px;
  margin: 0 0 20px;
  border-radius: 50%;
  border: 3px solid rgba(var(--lg-brand-rgb), .18);
  border-top-color: rgb(var(--lg-brand-rgb));
  animation: lg-spin .9s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Selector de idioma y firma
   -------------------------------------------------------------------------- */
.lg-lang {
  position: fixed;
  top: 20px;
  right: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lg-line);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35);
  color: var(--lg-ink);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lg-lang:hover { border-color: rgba(var(--lg-brand-rgb), .5); }
.lg-lang:focus-within {
  border-color: rgb(var(--lg-brand-rgb));
  box-shadow: 0 0 0 4px rgba(var(--lg-brand-rgb), .15);
}
.lg-lang > svg { width: 18px; height: 18px; flex: 0 0 18px; color: rgb(var(--lg-brand-rgb)); }
.lg-lang select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0 22px 0 0;
  margin-right: -20px;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--lg-ink);
  cursor: pointer;
}
.lg-lang select:focus { outline: none; }
.lg-lang .lg-lang-caret { width: 14px; height: 14px; flex: 0 0 14px; color: var(--lg-muted); pointer-events: none; }

.lg-powered {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .04em;
  color: #8a94a6;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .lg { padding: 76px 14px 56px; }
  .lg-card {
    grid-template-columns: 1fr;
    min-height: 0;
    max-width: 520px;
    border-radius: 24px;
  }
  .lg-visual {
    height: 150px;
    margin: 12px 12px 0;
    border-radius: 16px;
  }
  .lg-form { padding: 32px 26px 34px; }
  .lg-logo { margin-bottom: 24px; }
  .lg-logo img { max-height: 56px; }
  .lg-title { font-size: 1.45rem; margin-bottom: 20px; }
  .lg-lang { top: 16px; right: 14px; height: 38px; }
  .lg-setup { grid-template-columns: 1fr; gap: 24px; }
  .lg-qr { max-width: 240px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-photo, .lg-mesh, .lg-card, .lg-spinner { animation: none !important; transition: none !important; }
}
/* Editor markdown con vista previa y pantalla completa.
   Lo activa el Stimulus controller `markdown-editor`
   (app/javascript/controllers/markdown_editor_controller.js). */

.markdown-editor {
    position: relative;
}

.markdown-editor__toolbar {
    margin-bottom: 0.35rem;
}

/* Panel de previsualización: mismo aspecto que un form-control pero de
   solo lectura, con altura mínima para que no salte el layout. */
.markdown-editor__preview {
    min-height: 6rem;
    overflow-y: auto;
    background-color: #fff;
}

.markdown-editor__preview > :first-child {
    margin-top: 0;
}

.markdown-editor__preview > :last-child {
    margin-bottom: 0;
}

/* Tabler estiliza `pre` como una caja oscura con texto claro. Aquí forzamos
   fondo claro Y color de texto oscuro: si solo cambiáramos el fondo, el texto
   (que Tabler deja claro) quedaría invisible sobre el fondo claro — que es
   justo lo que rompía la visualización de los esquemas de árbol. */
.markdown-editor__preview pre {
    background-color: #f6f8fa;
    color: #1f2937;
    border-radius: 0.25rem;
    padding: 0.6rem 0.8rem;
    overflow-x: auto;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
}

.markdown-editor__preview code {
    background-color: #f6f8fa;
    color: #1f2937;
    border-radius: 0.2rem;
    padding: 0.1rem 0.3rem;
}

.markdown-editor__preview pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

.markdown-editor__preview table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.75rem;
}

.markdown-editor__preview th,
.markdown-editor__preview td {
    border: 1px solid #dee2e6;
    padding: 0.35rem 0.5rem;
}

.markdown-editor__preview blockquote {
    border-left: 3px solid #dee2e6;
    margin: 0 0 0.75rem;
    padding-left: 0.75rem;
    color: #6c757d;
}

/* ---- Pantalla completa ---- */
.markdown-editor--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #fff;
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.markdown-editor--fullscreen .markdown-editor__toolbar {
    flex: 0 0 auto;
}

.markdown-editor--fullscreen .markdown-editor__input,
.markdown-editor--fullscreen .markdown-editor__preview {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none;
    resize: none;
    font-size: 0.95rem;
}

/* Evita el scroll del fondo mientras el editor está maximizado. */
body.markdown-editor-open {
    overflow: hidden;
}
/* ===============================
   BASE
   =============================== */

body {
    font-family: "DejaVuSans", Arial, sans-serif;
    font-size: 12px;
    color: #1f2937;
    background: #ffffff;
}

h1, h2, h3, h4 {
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

/* ===============================
   CONTAINER
   =============================== */

.container-xl {
    width: 100%;
    padding: 0 24px;
}

/* ===============================
   CARD (Tabler-style)
   =============================== */

.card {
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    margin-bottom: 20px;
    background: #ffffff;
}

.card-header {
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e6e8eb;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
}

.card-body {
    padding: 14px;
}

/* ===============================
   TABLES
   =============================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.table th {
    background: #f1f5f9;
    text-align: left;
    font-weight: 600;
    padding: 8px;
    border-bottom: 1px solid #e6e8eb;
}

.table td {
    padding: 8px;
    border-bottom: 1px solid #e6e8eb;
}

.table-vcenter td {
    vertical-align: middle;
}

/* ===============================
   BADGES
   =============================== */

.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
}

.bg-blue-lt {
    background-color: #e0f2fe;
    color: #0369a1;
}

/* ===============================
   TEXT HELPERS
   =============================== */

.text-muted {
    color: #64748b;
}

.fst-italic {
    font-style: italic;
}

.fw-semibold {
    font-weight: 600;
}

/* ===============================
   GRID (simple replacement)
   =============================== */

/* Acotada a `body.pdf-document` (layouts/pdf): esta hoja también entra en la
   de la aplicación por el `require_tree .` de application.css, y sin acotar
   pisaba la rejilla de Bootstrap/Tabler en toda la app (el 2% de margen de
   `.col-md-6` hacía que dos columnas del 50% no cupieran en una fila). */

.pdf-document .row {
    width: 100%;
    clear: both;
}

.pdf-document .col-12 {
    width: 100%;
}

.pdf-document .col-md-6 {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
}

/* ===============================
   SPACING
   =============================== */

.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 20px; }
/*
 * SweetAlert2 — Tabler cosmetic alignment (CSS only).
 *
 * No JS mixin/wrapper: we let each call site keep its confirmButtonColor
 * (so destructive actions stay red, success stays green, etc.) and only
 * adjust shape, typography and spacing to feel like Tabler cards.
 */

/* ── Popup container: card-like shape and shadow ─────────────────────── */
.swal2-popup {
  border-radius: var(--tblr-border-radius-lg, 0.5rem) !important;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.12) !important;
  font-family: var(--tblr-font-sans-serif,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif) !important;
  padding: 1.5rem 1.5rem 1.25rem !important;
}

/* ── Title ───────────────────────────────────────────────────────────── */
.swal2-popup .swal2-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--tblr-body-color, #1f2937) !important;
  line-height: 1.4 !important;
  padding: 0.25rem 0 0.5rem !important;
}

/* ── Body text ───────────────────────────────────────────────────────── */
.swal2-popup .swal2-html-container {
  font-size: 0.9375rem !important;
  color: var(--tblr-secondary-color, #6b7280) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ── Actions row ─────────────────────────────────────────────────────── */
.swal2-popup .swal2-actions {
  gap: 0.5rem !important;
  margin-top: 1.25rem !important;
  padding: 0 !important;
}

/* ── Buttons: keep inline color, tweak shape/typography to Tabler ────── */
.swal2-popup .swal2-styled {
  border-radius: var(--tblr-btn-border-radius, 0.375rem) !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  min-width: 6.5rem;
}

.swal2-popup .swal2-styled:focus {
  box-shadow: 0 0 0 0.15rem rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.25) !important;
}

/* Cancel button: override Swal's default (pinkish red) with a neutral
   Tabler-outline look. Confirm stays whatever colour the caller set. */
.swal2-popup .swal2-cancel.swal2-styled {
  background-color: transparent !important;
  color: var(--tblr-secondary-color, #6b7280) !important;
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
}
.swal2-popup .swal2-cancel.swal2-styled:hover {
  background-color: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  color: var(--tblr-body-color, #1f2937) !important;
}

/* ── Icons ───────────────────────────────────────────────────────────── */
/* Replace Swal's animated SVG icons with Tabler-style outline icons via
   mask-image. Each variant gets a light tint circle (Tabler *-lt palette)
   and the icon itself in the semantic color. */
.swal2-popup .swal2-icon {
  width: 3.5rem !important;
  height: 3.5rem !important;
  margin: 0.25rem auto 0.75rem !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
/* Hide Swal's internal animated SVG primitives. */
.swal2-popup .swal2-icon > * {
  display: none !important;
}
/* The Tabler icon as a masked pseudo-element; colour = background-color. */
.swal2-popup .swal2-icon::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.swal2-popup .swal2-icon.swal2-success {
  background-color: var(--tblr-green-lt, #d8f5e4) !important;
}
.swal2-popup .swal2-icon.swal2-success::before {
  background-color: var(--tblr-success, #2fb344);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 12l2 2 4-4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 12l2 2 4-4'/></svg>");
}

.swal2-popup .swal2-icon.swal2-warning {
  background-color: var(--tblr-yellow-lt, #fff3cd) !important;
}
.swal2-popup .swal2-icon.swal2-warning::before {
  background-color: var(--tblr-warning, #f59f00);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><path d='M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><path d='M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75'/></svg>");
}

.swal2-popup .swal2-icon.swal2-error {
  background-color: var(--tblr-red-lt, #fbe9eb) !important;
}
.swal2-popup .swal2-icon.swal2-error::before {
  background-color: var(--tblr-danger, #d63939);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v4'/><path d='M12 16h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v4'/><path d='M12 16h.01'/></svg>");
}

.swal2-popup .swal2-icon.swal2-info {
  background-color: var(--tblr-blue-lt, #e3f1fa) !important;
}
.swal2-popup .swal2-icon.swal2-info::before {
  background-color: var(--tblr-info, #4299e1);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8h.01'/><path d='M11 12h1v4h1'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8h.01'/><path d='M11 12h1v4h1'/></svg>");
}

.swal2-popup .swal2-icon.swal2-question {
  background-color: var(--tblr-blue-lt, #e3f1fa) !important;
}
.swal2-popup .swal2-icon.swal2-question::before {
  background-color: var(--tblr-primary, #206bc4);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 16v.01'/><path d='M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 16v.01'/><path d='M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483'/></svg>");
}

/* Close button (the X) — smaller, neutral grey to match Tabler close. */
.swal2-popup .swal2-close {
  font-size: 1.5rem !important;
  color: var(--tblr-secondary-color, #6b7280) !important;
  padding: 0.25rem 0.5rem !important;
}
.swal2-popup .swal2-close:hover {
  color: var(--tblr-body-color, #1f2937) !important;
  background: transparent !important;
}
/* =====================================================================
   TEMA GLOBAL (look & feel de la ficha de acción v4)
   ---------------------------------------------------------------------
   Se carga la ÚLTIMA (después de Tabler, branding.css y el <style> de
   marca del cliente) para dar coherencia visual a toda la aplicación
   sin tocar la estructura de las pantallas:
     - tarjetas blancas con borde cálido y esquinas amplias
     - botones neutros blancos; primario relleno con el color de marca
     - formularios, tablas, pestañas, desplegables y modales a juego
   El acento sale SIEMPRE del color de marca del cliente
   (--tblr-primary), nunca de un color fijo.
   ===================================================================== */

:root {
  /* Tabler calcula los tonos suaves (-lt, focus, etc.) con el RGB del
     primario: lo alineamos con el de la marca del cliente. */
  --tblr-primary-rgb: var(--brand-primary-rgb, 2, 48, 71);

  --app-accent: var(--tblr-primary);
  --app-accent-soft: color-mix(in srgb, var(--tblr-primary) 10%, #fff);
  --app-accent-line: color-mix(in srgb, var(--tblr-primary) 28%, #fff);
  --app-ink: #1d2622;
  --app-text: #2c3430;
  --app-muted: #6b716d;
  --app-faint: #9aa09c;
  --app-line: #e6e4de;
  --app-line-strong: #dcd9d2;
  --app-surface: #fff;
  --app-surface-2: #fafaf8;
  --app-hover: #f7f6f2;
  --app-page: #f6f5f1;
  --app-radius: .9rem;
  --app-radius-sm: .6rem;

  --tblr-border-color: var(--app-line);
  --tblr-border-radius: var(--app-radius-sm);
  --tblr-body-color: var(--app-text);
}

/* ---------------------------------------------------------------------
   Página y tipografía
   --------------------------------------------------------------------- */
.page,
body { background-color: var(--app-page) !important; }

.page-title { font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--app-ink); }
.page-pretitle {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--app-accent);
}
.page-subtitle, .text-secondary { color: var(--app-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--app-ink); }

/* Migas de pan: discretas, el último nivel en tinta. */
.breadcrumb { font-size: .85rem; }
.breadcrumb-item a { color: var(--app-accent); }
.breadcrumb-item.active { color: var(--app-ink); font-weight: 500; }

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  box-shadow: none;
}
.card > .card-header:first-child { border-top-left-radius: var(--app-radius); border-top-right-radius: var(--app-radius); }
.card > .card-footer:last-child,
.card > .list-group:last-child { border-bottom-left-radius: var(--app-radius); border-bottom-right-radius: var(--app-radius); }
.card-header {
  background-color: var(--app-surface) !important;
  border-bottom: 1px solid var(--app-line);
  min-height: 3.5rem;
}
.card-footer {
  background-color: var(--app-surface-2) !important;
  border-top: 1px solid var(--app-line);
}
.card-title { font-size: 1.05rem; font-weight: 600; color: var(--app-ink); }
.card-subtitle { color: var(--app-muted); }
.card-link-pop:hover, a.card:hover { border-color: var(--app-accent-line); }

/* Bloques secundarios dentro de tarjetas. */
.bg-light, .bg-body-tertiary { background-color: var(--app-surface-2) !important; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
  --tblr-btn-border-radius: var(--app-radius-sm);
  font-weight: 500;
  box-shadow: none;
}
.btn-sm { --tblr-btn-border-radius: .5rem; }

.btn-primary {
  --tblr-btn-bg: var(--app-accent);
  --tblr-btn-border-color: var(--app-accent);
  --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-primary) 88%, #fff);
  --tblr-btn-hover-border-color: color-mix(in srgb, var(--tblr-primary) 88%, #fff);
  --tblr-btn-active-bg: color-mix(in srgb, var(--tblr-primary) 85%, #000);
  --tblr-btn-color: #fff;
  --tblr-btn-hover-color: #fff;
  font-weight: 600;
}

/* Botones de contorno y neutros: blancos con borde cálido, como la barra
   de la ficha de acción. Mantienen el color del texto de su variante
   (salvo el secundario, que pasa a tinta). */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-dark,
.btn-white,
.btn-light,
.btn-default {
  --tblr-btn-bg: var(--app-surface);
  --tblr-btn-border-color: var(--app-line-strong);
  --tblr-btn-hover-bg: var(--app-hover);
  --tblr-btn-hover-border-color: var(--app-line-strong);
  --tblr-btn-active-bg: var(--app-hover);
  --tblr-btn-active-border-color: var(--app-line-strong);
}
.btn-outline-secondary, .btn-white, .btn-light, .btn-default, .btn-outline-dark {
  --tblr-btn-color: var(--app-ink);
  --tblr-btn-hover-color: var(--app-ink);
  --tblr-btn-active-color: var(--app-ink);
}
.btn-outline-primary {
  --tblr-btn-color: var(--app-accent);
  --tblr-btn-hover-color: var(--app-accent);
  --tblr-btn-active-color: var(--app-accent);
}
.btn-outline-info {
  --tblr-btn-color: var(--app-ink);
  --tblr-btn-hover-color: var(--app-ink);
}
/* branding.css pinta TODOS los .btn-sm con el color secundario al pasar
   el ratón: cada botón vuelve a usar el hover de su propia variante. */
.btn-sm:hover { background-color: var(--tblr-btn-hover-bg, var(--app-hover)); }

.btn-ghost-primary { --tblr-btn-color: var(--app-accent); --tblr-btn-hover-bg: var(--app-accent-soft); --tblr-btn-hover-color: var(--app-accent); }
.btn-link { color: var(--app-accent); }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form-control,
.form-select,
.ts-control {
  border-color: var(--app-line-strong);
  border-radius: var(--app-radius-sm);
  background-color: var(--app-surface);
  color: var(--app-text);
}
.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px var(--app-accent-soft);
}
.form-control::placeholder { color: var(--app-faint); }
.form-label { font-weight: 500; color: #4a504c; }
.form-hint, .form-text { color: var(--app-muted); }
.input-group-text { background-color: var(--app-surface-2); border-color: var(--app-line-strong); color: var(--app-muted); }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--app-accent-soft); border-color: var(--app-accent); }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.table { --tblr-table-border-color: var(--app-line); color: var(--app-text); }
.table thead th,
.table > :not(caption) > tr > th {
  background-color: var(--app-surface-2);
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.table-hover > tbody > tr:hover > * { --tblr-table-bg-state: var(--app-hover); }
.card > .table-responsive:last-child .table,
.card > .table:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Pestañas
   --------------------------------------------------------------------- */
.nav-tabs { border-bottom-color: var(--app-line); }
.nav-tabs .nav-link { color: var(--app-muted); font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--app-ink); }
.nav-tabs .nav-link.active { color: var(--app-accent); border-bottom-color: var(--app-accent); }
.nav-pills .nav-link.active { background-color: var(--app-accent-soft); color: var(--app-accent); }

/* ---------------------------------------------------------------------
   Insignias, avisos y progreso
   --------------------------------------------------------------------- */
.badge { font-weight: 600; border-radius: 999px; }
.bg-primary-lt { background-color: var(--app-accent-soft) !important; color: var(--app-accent) !important; }
.text-primary { color: var(--app-accent) !important; }
.alert { border-radius: var(--app-radius-sm); }
.progress { background-color: #ecebe6; border-radius: 999px; }
.progress-bar.bg-primary, .progress-bar:not([class*="bg-"]) { background-color: var(--app-accent) !important; }

/* ---------------------------------------------------------------------
   Desplegables, modales y listas
   --------------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-sm);
  box-shadow: 0 8px 24px rgba(29, 38, 34, .08);
  padding: .35rem;
}
.dropdown-item { border-radius: .4rem; color: var(--app-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--app-hover); color: var(--app-ink); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--app-accent-soft); color: var(--app-accent); }

.modal-content { border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: 0 16px 48px rgba(29, 38, 34, .14); }
.modal-header { border-bottom-color: var(--app-line); }
.modal-title { font-weight: 600; color: var(--app-ink); }
.modal-footer { border-top-color: var(--app-line); background-color: var(--app-surface-2); border-bottom-left-radius: var(--app-radius); border-bottom-right-radius: var(--app-radius); }

.list-group-item { border-color: var(--app-line); color: var(--app-text); }
.list-group-item-action:hover { background-color: var(--app-hover); }

/* Paginación */
.page-link { color: var(--app-text); border-radius: .45rem; }
.page-item.active .page-link { background-color: var(--app-accent); border-color: var(--app-accent); color: #fff; }

/* Acordeones */
.accordion-item { border-color: var(--app-line); background-color: var(--app-surface); }
.accordion-button:not(.collapsed) { color: var(--app-accent); background-color: var(--app-accent-soft); }

/* Avatares sin foto: tono de marca suave, como el responsable de la acción. */
.avatar:not([style*="background-image"]) { background-color: color-mix(in srgb, var(--tblr-primary) 14%, #fff); color: var(--app-accent); }

/* Editor Quill: bordes y esquinas a juego con los campos. */
.ql-toolbar.ql-snow { border-color: var(--app-line-strong); border-top-left-radius: var(--app-radius-sm); border-top-right-radius: var(--app-radius-sm); }
.ql-container.ql-snow { border-color: var(--app-line-strong); border-bottom-left-radius: var(--app-radius-sm); border-bottom-right-radius: var(--app-radius-sm); }

/* ---------------------------------------------------------------------
   Mapa de bifurcaciones del modelo (admin/project_model_branches)
   Cada decisión lleva su color en --bm-c (lo asigna el JS).
   --------------------------------------------------------------------- */
.bm-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 991.98px) { .bm-layout { grid-template-columns: minmax(0, 1fr); } }

.bm-tree { position: sticky; top: 1rem; max-height: calc(100vh - 7rem); display: flex; flex-direction: column; }
.bm-tree-body { overflow-y: auto; padding: .25rem .5rem .75rem; }
.bm-tree-legend { display: flex; flex-wrap: wrap; gap: .75rem; padding: .5rem 1rem; border-bottom: 1px solid var(--app-line); }
.bm-tree-block { margin-top: .5rem; }
.bm-tree-block-name { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--app-muted); padding: .35rem .5rem; }
.bm-tree-phase { border-radius: var(--app-radius-sm); margin-bottom: .15rem; }
.bm-tree-phase[draggable="true"] > .bm-tree-row:first-child { cursor: grab; }
.bm-tree-row { display: flex; align-items: center; gap: .35rem; padding: .3rem .5rem; border-radius: .45rem; cursor: pointer; min-width: 0; }
.bm-tree-row:hover { background: var(--app-hover); }
.bm-tree-action { padding-left: 1.6rem; font-size: .85rem; color: var(--app-text); }
.bm-tree-action.is-inactive { opacity: .5; }
.bm-tree-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-tree-chips { display: inline-flex; gap: .25rem; flex-shrink: 0; }
.bm-tree-icon { color: var(--app-faint); flex-shrink: 0; }
.bm-grip { color: var(--app-faint); flex-shrink: 0; }
.bm-make { opacity: 0; flex-shrink: 0; }
.bm-tree-row:hover .bm-make { opacity: 1; }

.bm-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; flex-shrink: 0; }
.bm-chip {
  display: inline-flex; align-items: center; gap: .2rem; max-width: 9rem;
  font-size: .7rem; font-weight: 500; line-height: 1.4; padding: .05rem .4rem; border-radius: 999px;
  color: var(--bm-c, var(--app-accent)); background: color-mix(in srgb, var(--bm-c, var(--tblr-primary)) 12%, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-chip-rule { --bm-c: #b35c00; cursor: pointer; }

.bm-main { min-width: 0; padding-bottom: 5rem; }
.bm-section { margin-bottom: 2rem; }
.bm-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.bm-empty { border: 1px dashed var(--app-line-strong); border-radius: var(--app-radius); padding: 1.25rem; text-align: center; color: var(--app-muted); background: var(--app-surface-2); }
.bm-inline-form { background: var(--app-surface); border: 1px solid var(--app-accent-line); border-radius: var(--app-radius); padding: .85rem 1rem; margin-bottom: .75rem; }
.bm-warnings ul { padding-left: 1.1rem; }

.bm-decision {
  background: var(--app-surface); border: 1px solid var(--app-line); border-left: 4px solid var(--bm-c);
  border-radius: var(--app-radius); padding: .9rem 1rem 1rem; margin-bottom: 1rem;
}
.bm-decision-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.bm-diamond {
  width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .5rem; color: #fff; background: var(--bm-c); font-size: 1.1rem;
}
.bm-decision-name.form-control { border-color: transparent; background: transparent; font-weight: 600; font-size: 1.05rem; padding: .15rem .4rem; margin-left: -.4rem; }
.bm-decision-name.form-control:hover:not(:disabled), .bm-decision-name.form-control:focus { border-color: var(--app-line-strong); background: var(--app-surface); }

.bm-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.bm-lane {
  display: flex; flex-direction: column; gap: .4rem; min-height: 8rem; padding: .55rem;
  border-radius: var(--app-radius-sm); background: color-mix(in srgb, var(--bm-c) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--bm-c) 22%, #fff); transition: box-shadow .15s, background .15s;
}
.bm-lane.is-over { background: color-mix(in srgb, var(--bm-c) 16%, #fff); box-shadow: 0 0 0 2px var(--bm-c) inset; }
.branches-map.is-dragging .bm-lane[data-drop-lane] { border-style: dashed; }
.bm-lane-head { display: flex; align-items: center; gap: .25rem; }
.bm-lane-label.form-control { font-weight: 600; color: var(--bm-c); border-color: transparent; background: transparent; }
.bm-lane-label.form-control:hover:not(:disabled), .bm-lane-label.form-control:focus { border-color: var(--app-line-strong); background: var(--app-surface); }
.bm-lane-body { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; }
.bm-lane-empty { font-size: .8rem; color: var(--app-faint); text-align: center; padding: .75rem .25rem; }
.bm-lane-add-phase.form-select { font-size: .8rem; color: var(--app-muted); background-color: var(--app-surface); }
.bm-lane-add {
  align-items: center; justify-content: center; gap: .35rem; color: var(--app-muted); font-weight: 500;
  border: 1px dashed var(--app-line-strong); background: transparent; --bm-c: var(--app-faint);
}
.bm-lane-add:hover { color: var(--app-accent); border-color: var(--app-accent); }
.bm-lane-warn { --bm-c: #e8590c; }
.bm-phase-chip {
  display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .85rem;
  background: var(--app-surface); border: 1px solid var(--app-line); border-radius: .45rem; padding: .3rem .45rem;
}
.bm-phase-chip[draggable="true"] { cursor: grab; }
.bm-phase-chip .btn-close-sm { width: .55rem; height: .55rem; padding: .2rem; }

.bm-rule { background: var(--app-surface); border: 1px solid var(--app-line); border-left: 4px solid #b35c00; border-radius: var(--app-radius); padding: .75rem 1rem; margin-bottom: .75rem; }
.bm-rule-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 500; }
.bm-target { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--app-ink); background: var(--app-surface-2); border: 1px solid var(--app-line); border-radius: .45rem; padding: .05rem .45rem; margin-left: .25rem; }
.bm-rule-mode { margin: .4rem 0; color: var(--app-muted); }
.bm-leaves { display: flex; flex-direction: column; gap: .4rem; }
.bm-leaf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: .4rem; align-items: start; }
@media (max-width: 767.98px) { .bm-leaf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.bm-decision.is-flash, .bm-rule.is-flash { animation: bm-flash 1.4s ease-out; }
@keyframes bm-flash { 0% { box-shadow: 0 0 0 4px var(--app-accent-line); } 100% { box-shadow: 0 0 0 0 transparent; } }

.bm-savebar {
  position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .7rem 1rem; background: var(--app-surface);
  border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}
.bm-savebar.is-dirty { border-color: var(--app-accent-line); }

/* ---------------------------------------------------------------------
   Ficha del modelo: menú lateral y ventanas que abre
   --------------------------------------------------------------------- */
.pm-menu { position: sticky; top: 1rem; }
.pm-menu-title { font-weight: 600; color: var(--app-ink); }
.pm-menu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-bottom: .25rem; }
.pm-menu-stats > div {
  display: flex; flex-direction: column; align-items: center; padding: .4rem .2rem;
  background: var(--app-surface-2); border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
}
.pm-menu-stats strong { font-size: 1.05rem; line-height: 1.2; color: var(--app-ink); }
.pm-menu-stats span { font-size: .68rem; color: var(--app-muted); }
.pm-menu-section {
  font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--app-muted); margin: .9rem 0 .35rem;
}
.pm-menu-switch .btn { border-color: var(--app-line-strong); }
.pm-menu-switch .btn.active { background: var(--app-accent-soft); color: var(--app-accent); border-color: var(--app-accent-line); font-weight: 600; }
.pm-menu-list .list-group-item { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; border-left: 0; border-right: 0; text-align: left; }
.pm-menu-list:last-child .list-group-item:last-child { border-bottom: 0; border-bottom-left-radius: var(--app-radius); border-bottom-right-radius: var(--app-radius); }
.pm-menu-icon { font-size: 1.15rem; color: var(--app-accent); flex-shrink: 0; }
.pm-menu-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pm-menu-text > span { font-weight: 500; color: var(--app-ink); }
.pm-menu-text small { color: var(--app-muted); font-size: .74rem; }

/* Las tarjetas de bloques, tipologías y documentación se muestran dentro de
   una ventana: la tarjeta ocupa la ventana y su cabecera hace de título. */
.pm-panel-modal .modal-content { position: relative; max-height: calc(100vh - 3.5rem); overflow-y: auto; }
.pm-panel-modal .modal-content > .card { margin: 0 !important; border: 0; box-shadow: none; border-radius: 0; }
.pm-panel-modal .modal-content > .card > .card-header { padding-right: 3rem; }
.pm-panel-modal .modal-content > .card { height: auto !important; }
.pm-panel-modal .pm-panel-close { position: absolute; top: .9rem; right: 1rem; z-index: 2; }

.pm-help-flow { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.pm-help-flow > span {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--app-accent);
  background: var(--app-accent-soft); border: 1px solid var(--app-accent-line); border-radius: 999px; padding: .3rem .8rem; text-transform: capitalize;
}
.pm-help-flow > i { color: var(--app-faint); }

/* Mapa de bifurcaciones: ventana de opciones de una acción */
.bm-chip-neutral { --bm-c: var(--app-muted); }
.bm-outcome-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.bm-outcome-row .form-control { flex: 1 1 auto; }
.bm-outcome-key { font-size: .72rem; color: var(--app-muted); background: var(--app-surface-2); border: 1px solid var(--app-line); border-radius: .35rem; padding: .1rem .4rem; flex-shrink: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Mapa de automatizaciones del modelo (admin/project_model_automations).
   Reutiliza la maqueta del mapa de bifurcaciones (.bm-*).
   --------------------------------------------------------------------- */
.am-tree-phase-name { cursor: default; }
.am-chip { --bm-c: #b8860b; }
.am-icon-on { color: #b8860b !important; }

.am-action-card {
  background: var(--app-surface); border: 1px solid var(--app-line); border-left: 4px solid #e0a800;
  border-radius: var(--app-radius); padding: .85rem 1rem; margin-bottom: 1rem;
}
.am-action-card.is-flash { animation: bm-flash 1.4s ease-out; }
.am-drop-zone { min-height: 60vh; border-radius: var(--app-radius); transition: background .15s, box-shadow .15s; }
.am-drop-zone.is-over { background: #fffaf0; box-shadow: 0 0 0 2px #e0a800; }
.am-workflow-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.am-bolt {
  width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .5rem; color: #fff; background: #e0a800; font-size: 1.1rem;
}
.am-trigger-list { display: flex; flex-direction: column; gap: .35rem; }
.am-trigger { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 2rem; gap: .5rem; align-items: center; }
.am-trigger-head { margin-bottom: -.1rem; }
.am-trigger.is-off .form-select:first-child { color: var(--app-muted); border-style: dashed; }
@media (max-width: 767.98px) { .am-trigger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .am-trigger-head { display: none; } }
.am-trigger-action {
  display: flex; flex-direction: column; min-width: 0; text-align: left;
  background: none; border: 0; padding: 0; color: var(--app-ink); cursor: pointer;
}
.am-trigger-action:hover .fw-semibold { color: var(--app-accent); text-decoration: underline; }
.am-empty { font-size: .85rem; color: var(--app-faint); text-align: center; padding: .9rem .5rem; border: 1px dashed var(--app-line-strong); border-radius: var(--app-radius-sm); }
.am-add-action.form-select { margin-bottom: .9rem; color: var(--app-muted); }

/* Ventana de una acción */
.am-modal-section { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--app-muted); margin-bottom: .5rem; }
.am-modal-trigger { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 2rem; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.am-modal-trigger-head { margin-bottom: .2rem; }
.am-fields { border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-surface-2); margin-bottom: .5rem; }
.am-fields > summary { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; cursor: pointer; list-style: none; font-weight: 500; }
.am-fields > summary::-webkit-details-marker { display: none; }
.am-fields[open] > summary .am-chev { transform: rotate(90deg); }
.am-chev { transition: transform .15s ease; color: var(--app-faint); }
.am-fields-body { padding: .1rem .75rem .6rem; }
.am-fields-body .am-fields { background: var(--app-surface); }
.am-field-check { margin-bottom: .3rem; }
.am-token { display: block; font-size: .68rem; color: var(--app-muted); word-break: break-all; margin-top: .1rem; }
.automations-map .modal-body { max-height: calc(100vh - 12rem); overflow-y: auto; }

/* Título del modelo con su descripción desplegable: el acordeón no lleva
   fondo de tarjeta (el título queda sobre el fondo de la página) y la
   descripción, al abrirla, se muestra en una tarjeta suave. */
.page-header .accordion-flush .accordion-item { background: transparent; border: 0; }
.page-header .accordion-flush .accordion-body {
  margin-top: .5rem; padding: .75rem 1rem; max-width: 60rem;
  background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
}
.page-header .accordion-flush .btn-ghost-secondary { color: var(--app-muted); }
.page-header .accordion-flush .btn-ghost-secondary:hover { color: var(--app-accent); background: var(--app-accent-soft); }

/* Sidebar comprimida: en 72px el pie (manual + copyright) se parte en muchas
   líneas y queda debajo del botón de comprimir/expandir, que va en absoluto
   sobre el fondo de la barra. Comprimida no se muestra. */
body.navbar-vertical-collapsed .sidebar-footer { display: none; }
/* Editor visual de workflows (Drawflow) + ajustes de la página de edición. */

.wf-canvas-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);
  padding: 0.75rem 1rem 0;
}

.wf-canvas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
}

/* Ajustes generales (acordeón) sobre el lienzo: no se aplasta y, abierto, su
   cuerpo no crece sin límite (scroll interno). */
.wf-canvas-settings {
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}
.wf-canvas-settings .accordion-body {
  max-height: 40vh;
  overflow-y: auto;
}

.wf-canvas-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  overflow: hidden;
  background: #fafbfc;
}

/* ── Paleta: cards con icono + nombre pequeño ───────────────────────────── */
.wf-canvas-palette {
  width: 345px;
  flex-shrink: 0;
  border-right: 1px solid #e3e6ec;
  background: #fff;
  overflow-y: auto;
  padding: 0.75rem;
}

/* ── Plegar/desplegar el panel de conectores ────────────────────────────── */
/* Botón para ocultar (dentro del panel, pegado arriba a la derecha). */
.wf-palette-collapse {
  position: sticky;
  top: 0;
  float: right;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  z-index: 5;
}
.wf-palette-collapse:hover { background: #f3f4f6; color: #334155; }

/* Botón flotante para volver a mostrar el panel (solo cuando está oculto). */
.wf-palette-expand {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  width: 30px;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1);
  cursor: pointer;
}
.wf-palette-expand:hover { background: #eef2ff; color: var(--tblr-primary, #206bc4); }

/* Estado colapsado: oculta el panel y muestra el botón de desplegar. */
.wf-canvas-body.palette-collapsed .wf-canvas-palette { display: none; }
.wf-canvas-body.palette-collapsed .wf-palette-expand { display: inline-flex; }

.wf-palette-title {
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.6rem;
}

/* ── Buscador de la paleta ──────────────────────────────────────────────── */
.wf-palette-search {
  position: relative;
  margin-bottom: 0.7rem;
}
.wf-palette-search-icon {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 15px;
  pointer-events: none;
}
.wf-palette-search-input {
  padding-right: 1.9rem;
  border-radius: 8px;
}

/* ── Carpetas de categoría (plegables) ──────────────────────────────────── */
.wf-palette-group {
  margin-bottom: 0.5rem;
}
.wf-palette-group-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.4rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  color: #374151;
}
.wf-palette-group-head:hover {
  background: #f3f4f6;
}
.wf-palette-group-caret {
  font-size: 14px;
  color: #9ca3af;
  transition: transform 0.15s;
}
.wf-palette-group.collapsed .wf-palette-group-caret {
  transform: rotate(-90deg);
}
.wf-palette-group-name {
  flex: 1;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-primary, #206bc4);
}
.wf-palette-group-count {
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b7280;
  background: #eef2f7;
  border-radius: 10px;
  padding: 0.05rem 0.4rem;
}
.wf-palette-group-body {
  padding: 0.4rem 0.1rem 0.1rem;
}
.wf-palette-group.collapsed .wf-palette-group-body {
  display: none;
}
.wf-palette-empty {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
  padding: 1rem 0.5rem;
}

.wf-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.wf-palette-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.wf-palette-card:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.12);
}
.wf-palette-card-icon {
  font-size: 22px;
  color: var(--tblr-primary, #206bc4);
  line-height: 1;
}
.wf-palette-card-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.1;
}
.wf-palette-card-conn {
  font-size: 0.62rem;
  color: #9ca3af;
  line-height: 1;
}

/* ── Menú contextual del nodo (clic derecho) ────────────────────────────── */
.wf-ctxmenu {
  position: fixed;
  z-index: 3000;
  min-width: 168px;
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.wf-ctxmenu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 0.85rem;
  color: #334155;
  cursor: pointer;
  text-align: left;
}
.wf-ctxmenu-item i {
  font-size: 16px;
  color: #64748b;
}
.wf-ctxmenu-item:hover {
  background: #eef2ff;
}
.wf-ctxmenu-danger {
  color: #b42318;
}
.wf-ctxmenu-danger i {
  color: #d92d20;
}
.wf-ctxmenu-danger:hover {
  background: #fef3f2;
}

/* ── Lienzo ─────────────────────────────────────────────────────────────── */
.wf-canvas-stage {
  flex: 1;
  position: relative;
  min-width: 0;
}
.wf-canvas-stage .drawflow {
  width: 100%;
  height: 100%;
}

/* ── Nodos ──────────────────────────────────────────────────────────────── */
/* Drawflow pone la clase del nodo (wf-node-box) en el MISMO elemento que
   .drawflow-node, y su CSS se carga después; por eso usamos
   `.drawflow .drawflow-node.wf-node-box` (mayor especificidad) para ganar. */
.drawflow .drawflow-node.wf-node-box {
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  min-width: 180px;
  padding: 0;
}
/* OJO: Drawflow define `.drawflow .drawflow-node.selected{background:red}`.
   Hay que sobreescribir explícitamente el `background` (no basta con borde). */
.drawflow .drawflow-node.wf-node-box.selected {
  border-color: #9ad3b4;
  background: #ecf8f1;
  box-shadow: 0 0 0 2px rgba(154, 211, 180, 0.35);
}
.wf-node {
  padding: 0.5rem 0.7rem;
}
.wf-node-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.wf-node-icon {
  font-size: 16px;
  color: #64748b;
}
.wf-node-label {
  font-weight: 500;
  font-size: 0.88rem;
  color: #334155;
}
.wf-node-sub {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 0.15rem;
}

/* Leyenda de ramas dentro de un nodo de bifurcación. El orden de las filas
   coincide con el de los puertos de salida (arriba→abajo). */
.wf-branch-legend {
  margin-top: 0.4rem;
  border-top: 1px dashed #e2e8f0;
  padding-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wf-branch-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #475569;
}
.wf-branch-row.wf-branch-else {
  color: #94a3b8;
  font-style: italic;
}
.wf-branch-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 4px;
  background: #eef2f7;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 600;
}

/* Editor de ramas en el inspector (campo type: branches). */
.wf-branch-edit {
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  padding: 0.45rem;
  background: #fafbfc;
}

/* Punto de entrada del nodo: Drawflow lo pinta amarillo (#ff0) → verde.
   Drawflow usa `.drawflow .drawflow-node .input` (misma especificidad) y carga
   su CSS después, así que prefijamos con `.wf-canvas-stage` para ganar. */
.wf-canvas-stage .drawflow .drawflow-node .input {
  background: #22c55e;
}
/* Línea de conexión entre nodos un poco más fina (Drawflow usa 5px, misma
   especificidad → prefijamos para ganar). */
.wf-canvas-stage .drawflow .connection .main-path {
  stroke-width: 2.5px;
}

/* ── Modal de configuración (3 columnas) ────────────────────────────────── */
/* Tabler define `.modal-dialog{max-width:...}` y su CSS carga después, así que
   subimos especificidad con `.modal-dialog.wf-config-dialog` para ganar. */
.modal-dialog.wf-config-dialog {
  max-width: min(1500px, 96vw);
}
.wf-config-row > [class*="col-"] {
  padding: 0 1.1rem;
}
.wf-config-col {
  border-right: 1px solid #eceff3;
}
.wf-vars-col {
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.025);
}
.wf-vars-col-context {
  border-left: 1px solid #eceff3;
}
.wf-vars-col-title {
  font-weight: 500;
  color: var(--tblr-primary, #206bc4);
  margin-bottom: 0.25rem;
}
@media (max-width: 1199.98px) {
  .wf-config-col,
  .wf-vars-col-context { border: 0; border-top: 1px solid #eceff3; }
  .wf-vars-col, .wf-vars-col-context { margin-top: 1rem; padding-top: 1rem; }
  .wf-vars-col { background: transparent; }
}

/* ── Bloques de variables (tarjetas separadas y con color del branding) ──── */
.wf-vars-group {
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.wf-vars-group-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tblr-primary, #206bc4);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.08);
  border-bottom: 1px solid #e6e9ef;
}
.wf-vars-group-body {
  padding: 0.55rem 0.6rem 0.3rem;
}
.wf-var-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid #dfe3ea;
  background: #f8f9fb;
  color: #334155;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin: 0 0.3rem 0.3rem 0;
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.wf-var-chip:hover {
  background: var(--tblr-primary, #206bc4);
  border-color: var(--tblr-primary, #206bc4);
  color: #fff;
}
.wf-var-chip .ti { font-size: 13px; opacity: 0.7; }
.wf-var-chip:hover .ti { opacity: 1; }

/* ── Editor de campo con "pastillas" de variables ───────────────────────── */
.wf-token-input {
  min-height: calc(1.6em + 0.75rem);
  height: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.wf-token-input.wf-token-input-multiline { min-height: 5.5rem; }
.wf-token-input:focus { outline: none; }
.wf-rich-toolbar { flex-wrap: wrap; }
.wf-rich-toolbar .btn { padding: 0.15rem 0.45rem; }
.wf-rich { min-height: 7rem; }
.wf-rich p { margin: 0 0 0.5rem; }
.wf-rich ul, .wf-rich ol { margin: 0 0 0.5rem 1.25rem; }
.wf-rich a { color: var(--tblr-primary, #206bc4); text-decoration: underline; }
.wf-token {
  display: inline-block;
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.12);
  color: var(--tblr-primary, #206bc4);
  border: 1px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.35);
  border-radius: 6px;
  padding: 0 0.35rem;
  margin: 0 1px;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}

/* ── Documentación del nodo (panel izquierdo) ───────────────────────────── */
/* Barra de acciones fija arriba del panel (el panel hace scroll): así
   "Configurar nodo" y "Conectores" quedan siempre visibles aunque la ayuda
   sea larga. El fondo blanco tapa el contenido que pasa por debajo. */
.wf-doc-actions {
  position: sticky;
  top: -0.75rem; /* compensa el padding del panel para pegarse arriba del todo */
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: #fff;
  padding: 0.75rem 0 0.6rem;
  margin: -0.75rem 0 0.4rem; /* anula el padding superior del panel */
  z-index: 3;
  border-bottom: 1px solid #eef1f5;
}
.wf-doc-back {
  text-decoration: none;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.wf-doc-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.9rem;
}
.wf-doc-icon {
  font-size: 26px;
  color: var(--tblr-primary, #206bc4);
}
.wf-doc-title {
  font-weight: 500;
  font-size: 0.95rem;
  color: #1f2937;
  line-height: 1.2;
}
.wf-doc-meta {
  font-size: 0.72rem;
  color: #9ca3af;
}
.wf-doc-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6b7280;
  font-weight: 500;
  margin: 0.9rem 0 0.35rem;
}
.wf-doc-mission {
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.5;
  white-space: pre-line;
}
.wf-doc-field {
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0f2f5;
}
.wf-doc-field-name {
  font-size: 0.8rem;
  color: #1f2937;
}
.wf-doc-field-name code {
  background: #f4f6fa;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.wf-doc-req {
  font-size: 0.65rem;
  color: #b45309;
  background: #fef3c7;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.3rem;
}
.wf-doc-field-help {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 0.15rem;
  line-height: 1.35;
}

/* ── Vista experta (página de edición) ──────────────────────────────────── */
.wf-expert-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.9rem;
  background: #f4f6fa;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  font-weight: 500;
  user-select: none;
}
.wf-expert-summary::-webkit-details-marker { display: none; }
.wf-expert[open] .wf-expert-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.wf-expert-summary:hover { background: #eef2ff; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont;
    margin: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

nav a {
    margin-right: 0.5rem;
}