/* ===============================
   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;
}

.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;
}
/* =========================================
   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;
    /* `pdf.css` (pensada para el renderizado de PDF) se empaqueta también en
       la hoja de la aplicación y define `.col-md-6 { width:48%;
       display:inline-block; margin-right:2% }`. Bootstrap gana en el ancho,
       pero no tiene ninguna declaración de `margin-right` que anule la suya,
       así que cada columna arrastraba un 2% extra: tres columnas del 33% más
       dos márgenes no caben y la rejilla se quedaba en dos por fila.
       Aquí se neutraliza; la separación la ponen los gutters de Bootstrap. */
    margin-right: 0;
}

.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;
}
/* 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)
   =============================== */

.row {
    width: 100%;
    clear: both;
}

.col-12 {
    width: 100%;
}

.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;
}
/* 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;
}