/* ============================================================
   PMO2 — Sistema de diseño «Expediente»
   Fiel a las pantallas S1–S5 de Rediseno-PMO2.pdf: papel suave,
   esquinas redondeadas, tarjetas con borde de estado a la
   izquierda, chips pastilla, reglas de 2px en las cabeceras y un
   acento violeta.
   ============================================================ */

/* ------------------------------------------------ tokens ---- */
:root,
[data-bs-theme='light'] {
    --pmo-bg: #f6f5f8;           /* fondo (papel) */
    --pmo-surface: #ffffff;      /* superficie */
    --pmo-ink: #20213a;          /* tinta */
    --pmo-accent: #6d5ef0;       /* acento */
    --pmo-accent-deep: #4c3ed9;  /* acento para texto pequeño (AA) */
    --pmo-accent-tint: #eceafc;
    --pmo-success: #2fa27a;      /* éxito / terminado */
    --pmo-success-tint: #e2f3ec;
    --pmo-muted: #6b6a7c;        /* apagado / por hacer */
    --pmo-muted-tint: #ecebf0;
    --pmo-warn: #b58117;         /* en curso (ámbar) */
    --pmo-warn-tint: #f6ecd9;
    --pmo-info: #4c7bd9;         /* columnas personalizadas (azul) */
    --pmo-info-tint: #e4ecfa;
    --pmo-danger: #b3403f;
    --pmo-danger-tint: #f7e5e4;
    --pmo-rule: #dddbe4;         /* regla fina */
}

[data-bs-theme='dark'] {
    --pmo-bg: #14141c;
    --pmo-surface: #1c1c26;
    --pmo-ink: #eceaf4;
    --pmo-accent: #8b7dff;
    --pmo-accent-deep: #a89dff;
    --pmo-accent-tint: #2a2743;
    --pmo-success: #4fca9c;
    --pmo-success-tint: #1e3229;
    --pmo-muted: #a3a0b4;
    --pmo-muted-tint: #262532;
    --pmo-warn: #d9a54a;
    --pmo-warn-tint: #332a1a;
    --pmo-info: #7ba2ec;
    --pmo-info-tint: #1f2740;
    --pmo-danger: #e08886;
    --pmo-danger-tint: #3a2323;
    --pmo-rule: #32313f;
}

/* ------------------------------- mapeo a Bootstrap 5.3 ------ */
:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    --bs-body-bg: var(--pmo-bg);
    --bs-body-color: var(--pmo-ink);
    --bs-emphasis-color: var(--pmo-ink);
    --bs-secondary-color: var(--pmo-muted);
    --bs-tertiary-bg: var(--pmo-bg);
    --bs-secondary-bg: var(--pmo-muted-tint);
    --bs-border-color: var(--pmo-rule);
    --bs-link-color: var(--pmo-accent-deep);
    --bs-link-hover-color: var(--pmo-accent);
    --bs-primary: var(--pmo-accent);
    --bs-success: var(--pmo-success);
    --bs-focus-ring-color: color-mix(in srgb, var(--pmo-accent) 30%, transparent);

    /* Redondeo suave, como en las pantallas del PDF. */
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;

    --bs-font-sans-serif: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Utilidades de color de Bootstrap (`.text-primary`, `.bg-primary`, etc.)
   no leen `--bs-primary`: usan `--bs-primary-rgb` como tripleta separada.
   Sin esto, `.text-primary` cae al azul por defecto de Bootstrap en vez
   del violeta de Kazen — no se puede resolver con `var()` porque hex→rgb
   no es convertible en CSS puro, así que va por tema. */
[data-bs-theme='light'] { --bs-primary-rgb: 109, 94, 240; }   /* #6d5ef0 */
[data-bs-theme='dark']  { --bs-primary-rgb: 139, 125, 255; }  /* #8b7dff */

body {
    background: var(--pmo-bg);
    color: var(--pmo-ink);
}

/* --------------------------------------------- tipografía --- */
h1, h2, h3, .h1, .h2, .h3, .navbar-brand, .display-5 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.table, .font-monospace { font-variant-numeric: tabular-nums; }

/* Fila de sección (mockup S2): título + acción, regla de 2px a lo
   ancho de toda la fila. */
.pmo-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    border-bottom: 2px solid var(--pmo-ink);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.pmo-section h1, .pmo-section h2 { margin-bottom: 0; font-size: 1.05rem; }

/* Etiqueta mayúscula de sección (DESCRIPCIÓN, ADJUNTOS…). */
main h2.h6, main .form-label.small, .pmo-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pmo-muted) !important;
}

/* Ruta contextual: «OBRA PERIFÉRICO › EN CURSO». */
.breadcrumb {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    --bs-breadcrumb-divider: '›';
}

.breadcrumb a { text-decoration: none; }
.breadcrumb-item.active { color: var(--pmo-muted); }

/* ------------------------------------------------- botones -- */
.btn { font-weight: 600; }

.btn-primary {
    --bs-btn-bg: var(--pmo-accent);
    --bs-btn-border-color: var(--pmo-accent);
    --bs-btn-hover-bg: var(--pmo-accent-deep);
    --bs-btn-hover-border-color: var(--pmo-accent-deep);
    --bs-btn-active-bg: var(--pmo-accent-deep);
    --bs-btn-active-border-color: var(--pmo-accent-deep);
    --bs-btn-disabled-bg: var(--pmo-accent);
    --bs-btn-disabled-border-color: var(--pmo-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--pmo-accent-deep);
    --bs-btn-border-color: var(--pmo-accent);
    --bs-btn-hover-bg: var(--pmo-accent);
    --bs-btn-hover-border-color: var(--pmo-accent);
    --bs-btn-active-bg: var(--pmo-accent);
    --bs-btn-active-border-color: var(--pmo-accent);
}

/* «Marcar terminada»: píldora con tinte de éxito (mockup S4). */
.btn-success, .btn-outline-success {
    --bs-btn-bg: var(--pmo-success-tint);
    --bs-btn-color: var(--pmo-success);
    --bs-btn-border-color: var(--pmo-success);
    --bs-btn-hover-bg: var(--pmo-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--pmo-success);
    --bs-btn-active-bg: var(--pmo-success);
    --bs-btn-active-color: #fff;
    border-radius: 999px;
}

.btn-outline-secondary {
    --bs-btn-color: var(--pmo-ink);
    --bs-btn-border-color: var(--pmo-rule);
    --bs-btn-bg: var(--pmo-surface);
    --bs-btn-hover-bg: var(--pmo-muted-tint);
    --bs-btn-hover-border-color: var(--pmo-muted);
    --bs-btn-hover-color: var(--pmo-ink);
    --bs-btn-active-bg: var(--pmo-muted-tint);
    --bs-btn-active-color: var(--pmo-ink);
}

/* -------------------------------------- chips y badges ------ */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .7rem;
    padding: .3em .7em;
}

/* Tintes planos de un solo sistema (etiquetas y roles). */
.badge.text-bg-primary { background: var(--pmo-accent-tint) !important; color: var(--pmo-accent-deep) !important; }
.badge.text-bg-success { background: var(--pmo-success-tint) !important; color: var(--pmo-success) !important; }
.badge.text-bg-secondary { background: var(--pmo-muted-tint) !important; color: var(--pmo-muted) !important; }
.badge.text-bg-warning { background: var(--pmo-warn-tint) !important; color: var(--pmo-warn) !important; }
.badge.text-bg-danger { background: var(--pmo-danger-tint) !important; color: var(--pmo-danger) !important; }
.badge.text-bg-info { background: var(--pmo-info-tint) !important; color: var(--pmo-info) !important; }
.badge.text-bg-dark { background: var(--pmo-accent-tint) !important; color: var(--pmo-accent-deep) !important; text-transform: uppercase; letter-spacing: .05em; }
.badge.text-bg-light { background: var(--pmo-muted-tint) !important; color: var(--pmo-muted) !important; }

/* ------------------------------------------------ navbar ---- */
.navbar {
    background: var(--pmo-surface) !important;
    border-bottom: 2px solid var(--pmo-ink) !important;
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.pmo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    background: var(--pmo-accent);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    border-radius: .4rem;
}

.navbar .nav-link { font-weight: 600; font-size: .9rem; }

/* Familia de chips de la navbar — tema / idioma / notificaciones / cuenta.
   Métricas calcadas de templates/base.html (el hub): min-height 2.75rem
   (44px, el mismo mínimo táctil), borde de 1px, radio .5rem (=
   `rounded` de Tailwind, ya es el --bs-border-radius por defecto acá) y
   padding generoso. Los cuatro controles deben verse como el MISMO
   componente, solo cambia el contenido. */
.navbar .dropdown > .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    border: 1px solid var(--pmo-rule);
    border-radius: .5rem;
    padding: .5rem .85rem;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.navbar .dropdown > .nav-link:hover {
    border-color: var(--pmo-accent);
    color: var(--pmo-accent-deep);
}

/* Toggle de tema (luna/sol) — mismo chip que el resto, cuadrado e
   icon-only. `appearance: none` es necesario: sin él, algunos navegadores
   dibujan el chrome nativo del <button> (fondo/borde "hundido") encima de
   estos estilos y se ve como un botón presionado. */
.navbar .pmo-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--pmo-rule);
    border-radius: .5rem;
    background: var(--pmo-surface);
    color: var(--pmo-ink);
    font-size: 1.1rem;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.navbar .pmo-theme-toggle:hover {
    border-color: var(--pmo-accent);
    background: var(--pmo-accent-tint);
    color: var(--pmo-accent-deep);
}

.navbar .pmo-theme-toggle:focus-visible {
    outline: 2px solid var(--pmo-accent);
    outline-offset: 2px;
}

/* Punto de estado del chip de cuenta (mismo lugar/tamaño que el `bg-accent`
   del hub — acá con el acento violeta de Kazen). */
.pmo-status-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--pmo-accent);
    flex-shrink: 0;
}

.pmo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    background: var(--pmo-accent);
    color: #fff;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .02em;
    border-radius: .4rem;
    flex-shrink: 0;
}

.pmo-avatar-sm { width: 1.35rem; height: 1.35rem; font-size: .58rem; }

.pmo-context {
    border-left: 2px solid var(--pmo-rule);
    padding-left: .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pmo-muted);
}
.pmo-context:empty { display: none; }

/* ---------------------------------------------- tarjetas ---- */
.card {
    --bs-card-bg: var(--pmo-surface);
    --bs-card-border-color: var(--pmo-rule);
}

.card.shadow-sm { box-shadow: 0 1px 2px rgba(16, 16, 32, .05) !important; }

a.card { transition: border-color .15s ease, box-shadow .15s ease; }
a.card:hover { border-color: var(--pmo-muted); box-shadow: 0 4px 14px rgba(16, 16, 32, .08) !important; }

.list-group {
    --bs-list-group-bg: var(--pmo-surface);
    --bs-list-group-border-color: var(--pmo-rule);
}

/* Sombra marcada SOLO en capas flotantes. */
.dropdown-menu {
    border: 1px solid var(--pmo-rule);
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(16, 16, 32, .16);
}

/* ------------------------------------------------- tablas --- */
.table { --bs-table-bg: var(--pmo-surface); border-color: var(--pmo-rule); }

.table thead th {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pmo-muted);
    border-bottom: 2px solid var(--pmo-ink);
    white-space: nowrap;
}

/* --------------------------------------------- formularios -- */
.form-control, .form-select {
    border-color: var(--pmo-rule);
    background-color: var(--pmo-surface);
    color: var(--pmo-ink);
}

.form-control:focus, .form-select:focus {
    border-color: var(--pmo-accent);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-control::placeholder { color: var(--pmo-muted); opacity: .8; }

/* --------------------- pestañas tipo folder (mockup S3) ----- */
.nav-tabs {
    border-bottom: 2px solid var(--pmo-accent);
    gap: .35rem;
}

.nav-tabs .nav-link {
    border: 1px solid var(--pmo-rule);
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
    background: var(--pmo-muted-tint);
    color: var(--pmo-muted);
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem 1rem;
    margin-bottom: 0;
}

.nav-tabs .nav-link.active {
    background: var(--pmo-accent-tint);
    color: var(--pmo-accent-deep);
    border-color: var(--pmo-accent);
    font-weight: 700;
    position: relative;
}

/* ------------------------------------------------- kanban --- */
.js-kanban .js-column {
    background: var(--pmo-surface) !important;
    border: 1px solid var(--pmo-rule) !important;
    border-radius: .75rem;
}

/* Cabecera de columna con regla de 2px por debajo. */
.js-kanban .js-column > .card-header {
    background: transparent !important;
    border-bottom: 2px solid var(--pmo-ink) !important;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Punto de estado (cuadrito) de la columna. */
.pmo-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: .15rem;
    background: var(--pmo-muted);       /* por hacer */
    flex-shrink: 0;
}
.pmo-dot-doing { background: var(--pmo-warn); }     /* en curso: ámbar */
.pmo-dot-done { background: var(--pmo-success); }   /* terminado: verde */
.pmo-dot-custom { background: var(--pmo-info); }    /* propias: azul */

/* Contador como chip suave. */
.pmo-count {
    background: var(--pmo-muted-tint);
    color: var(--pmo-muted);
    font-weight: 700;
    font-size: .72rem;
    padding: .1rem .5rem;
    border-radius: .375rem;
    font-variant-numeric: tabular-nums;
}

/* Tarjeta: borde de estado a la IZQUIERDA según su columna. */
.js-activity-card {
    background: var(--pmo-surface);
    border: 1px solid var(--pmo-rule);
    border-left: 4px solid var(--pmo-muted);
    border-radius: .5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.js-col-body[data-kind='doing'] .js-activity-card { border-left-color: var(--pmo-warn); }
.js-col-body[data-kind='done'] .js-activity-card { border-left-color: var(--pmo-success); }
.js-col-body[data-kind='custom'] .js-activity-card { border-left-color: var(--pmo-info); }

.js-activity-card:hover { box-shadow: 0 4px 14px rgba(16, 16, 32, .1); }

/* Arrastre: hueco fantasma punteado; sombra mientras flota. */
.pmo-ghost {
    opacity: .5;
    border: 1px dashed var(--pmo-accent) !important;
    background: var(--pmo-accent-tint) !important;
}

.pmo-chosen { box-shadow: 0 12px 28px rgba(16, 16, 32, .2) !important; }

/* Alta rápida: fila punteada redondeada «+ Añadir actividad». */
.js-quick-add input, .js-list-add input[name='name'], .js-col-add input, .js-quick-add-style {
    border: 1px dashed var(--pmo-muted);
    background: transparent;
    border-radius: .5rem;
}

.js-quick-add input:focus, .js-list-add input[name='name']:focus, .js-col-add input:focus, .js-quick-add-style:focus {
    border-style: solid;
    background: var(--pmo-surface);
}

/* ------------------------- detalle de actividad (S4) -------- */
/* Barra superior: ruta + acciones, con regla de 2px debajo. */
.pmo-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    border-bottom: 2px solid var(--pmo-ink);
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
}

.pmo-toolbar .breadcrumb { margin-bottom: 0; }

/* Título editable: grande, sin caja, subrayado punteado. */
.pmo-title-input {
    border: 0;
    border-bottom: 1px dashed var(--pmo-muted);
    border-radius: 0;
    background: transparent;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding-left: 0;
}

.pmo-title-input:focus {
    background: transparent;
    border-bottom: 1px solid var(--pmo-accent);
    box-shadow: none;
}

/* Riel derecho: separado por regla vertical, secciones con reglas. */
.pmo-side { border-left: 1px solid var(--pmo-rule); }

@media (max-width: 991.98px) {
    .pmo-side { border-left: 0; border-top: 2px solid var(--pmo-ink); padding-top: 1rem; }
}

.pmo-side > div:not(:last-child), .pmo-side > dl {
    border-bottom: 1px solid var(--pmo-rule);
    padding-bottom: .9rem;
    margin-bottom: .9rem !important;
}

/* Chip plano (asistentes, adjuntos). */
.pmo-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border: 1px solid var(--pmo-rule);
    background: var(--pmo-surface);
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--pmo-ink);
    text-decoration: none;
}

a.pmo-chip:hover { border-color: var(--pmo-accent); color: var(--pmo-accent-deep); }

/* ------------------------------------- «Guardado ✓» vivo ---- */
@keyframes pmo-saved {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

#live-status.text-success, #migrate-status.text-success {
    animation: pmo-saved .18s ease-out;
    font-weight: 600;
}

/* Campana: timbra una vez cuando llega notificación nueva. */
@keyframes pmo-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-6deg); }
}

.pmo-ring i.bi-bell { display: inline-block; animation: pmo-ring .5s ease-in-out; }

#notif-count { font-size: .6rem; }

/* Banda de invitaciones pendientes del inicio. */
.pmo-band {
    background: var(--pmo-accent-tint);
    border: 1px solid color-mix(in srgb, var(--pmo-accent) 35%, transparent);
    border-left: 4px solid var(--pmo-accent);
    border-radius: .5rem;
    color: var(--pmo-ink);
}

/* Monograma de espacio/tablero: cuadro sólido con letra blanca; el
   color cicla por tarjeta (violeta, azul, verde, ámbar), como en S2. */
.pmo-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--pmo-accent);
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .02em;
    border-radius: .5rem;
    flex-shrink: 0;
}

.pmo-monogram-2 { background: var(--pmo-info); }
.pmo-monogram-3 { background: var(--pmo-success); }
.pmo-monogram-4 { background: var(--pmo-warn); }

/* Tile suave para filas de tableros compartidos. */
.pmo-tile {
    background: var(--pmo-accent-tint);
    color: var(--pmo-accent-deep);
}

/* Badge de rol: mayúscula chica (ADMIN · MIEMBRO · VISITANTE). */
.pmo-role {
    text-transform: uppercase;
    font-size: .62rem;
    letter-spacing: .07em;
    font-weight: 700;
}

/* Iniciales como texto al pie de la tarjeta, sobre una línea fina. */
.pmo-initials {
    border-top: 1px solid var(--pmo-rule);
    padding-top: .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pmo-muted);
    text-transform: uppercase;
}

/* ------------------------------------------------- login ---- */
.pmo-hero {
    background: var(--pmo-accent);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 26rem;
    border-radius: .75rem 0 0 .75rem;
}

.pmo-hero h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

/* Marca en grande de la landing (Archivo 900, como el mockup S1). */
.pmo-hero .pmo-hero-brand {
    font-size: clamp(3.5rem, 9vw, 6rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -0.035em;
    color: #fff;
}

/* Chips de la promesa web3 y del contador de usuarios, sobre el violeta. */
.pmo-hero .pmo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .4rem .95rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
}

.pmo-hero .pmo-hero-foot {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
}

.pmo-login-panel {
    background: var(--pmo-surface);
    border: 1px solid var(--pmo-rule);
    border-left: 0;
    border-radius: 0 .75rem .75rem 0;
    padding: 3rem;
}

@media (max-width: 991.98px) {
    .pmo-hero { border-radius: .75rem .75rem 0 0; }
    .pmo-login-panel { border-left: 1px solid var(--pmo-rule); border-radius: 0 0 .75rem .75rem; }
}

/* -------------------------------------------- misceláneos --- */
/* Avisos flotantes: superficie del sistema con filo de acento. */
.pmo-toast {
    background: var(--pmo-surface);
    border: 1px solid var(--pmo-rule);
    border-left: 4px solid var(--pmo-accent);
    border-radius: .6rem;
    color: var(--pmo-ink);
    font-weight: 500;
}

/* Modal de novedades de versión. */
.pmo-whatsnew {
    border: 1px solid var(--pmo-rule);
    border-top: 4px solid var(--pmo-accent);
    border-radius: .75rem;
}

.pmo-whatsnew-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.pmo-whatsnew-list li {
    display: flex;
    gap: .6rem;
    align-items: baseline;
}

.pmo-whatsnew-list .bi-stars {
    color: var(--pmo-accent);
}

/* Línea de tiempo del historial de versiones. */
.pmo-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.pmo-timeline::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: var(--pmo-rule);
}

.pmo-timeline-item {
    position: relative;
}

.pmo-timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: .35rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--pmo-surface);
    border: 2px solid var(--pmo-muted);
}

.pmo-timeline-marker.current {
    border-color: var(--pmo-accent);
    background: var(--pmo-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pmo-accent) 25%, transparent);
}

/* Footer compacto: una línea en la superficie del sistema, con la
   regla de tinta de 2px que usan las secciones del expediente. */
footer.pmo-footer {
    border-top: 2px solid var(--pmo-ink);
    background: var(--pmo-surface);
    font-size: .8rem;
    color: var(--pmo-muted);
}

footer.pmo-footer .pmo-footer-brand {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pmo-ink);
}

footer.pmo-footer a {
    color: var(--pmo-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease;
}

footer.pmo-footer a:hover {
    color: var(--pmo-accent);
}

/* Botón que alterna al otro idioma (persiste vía set_language). */
.pmo-footer-lang {
    background: none;
    border: 1px solid var(--pmo-rule);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pmo-muted);
    transition: border-color .15s ease, color .15s ease;
}

.pmo-footer-lang:hover {
    border-color: var(--pmo-accent);
    color: var(--pmo-accent);
}

.pmo-footer-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pmo-rule);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pmo-muted);
}

.pmo-footer-copy {
    font-size: .72rem;
    letter-spacing: .05em;
}

/* Acuerdos: viñeta cuadrada de expediente. */
.pmo-squares { list-style: none; padding-left: 0; }
.pmo-squares li { position: relative; padding-left: 1.1rem; margin-bottom: .5rem; }
.pmo-squares li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: .45rem;
    height: .45rem;
    border-radius: .1rem;
    background: var(--pmo-accent);
}

/* Gantt acorde al tema. */
[data-bs-theme='dark'] .gantt .grid-background { fill: transparent; }

/* ------------------------------------------- dashboard del tablero -- */
/* Barras horizontales de una sola serie: etiqueta en tinta a la
   izquierda, pista fina en la regla, relleno en el acento y el valor
   como texto al final (nunca dentro de la barra). */
.pmo-bar-name {
    flex: 0 0 34%;
    min-width: 0;
    font-size: .8rem;
    color: var(--pmo-ink);
}

/* Pista apilada: terminadas (acento) + abiertas (tinte), con el hueco
   de 2px entre segmentos que pide la guía de dataviz. */
.pmo-bar-track {
    flex: 1 1 auto;
    height: 8px;
    display: flex;
    gap: 2px;
    border-radius: 4px;
    background: var(--pmo-rule);
    overflow: hidden;
}

.pmo-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--pmo-accent);
}

.pmo-bar-fill.open {
    background: var(--pmo-accent-tint);
}

.pmo-bar-value {
    min-width: 1.5rem;
    font-size: .8rem;
    color: var(--pmo-ink);
    font-variant-numeric: tabular-nums;
}

/* Leyenda mínima para las barras de dos series. */
.pmo-legend {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--pmo-muted);
}

.pmo-legend-swatch {
    width: .7rem;
    height: .7rem;
    border-radius: .2rem;
    background: var(--pmo-accent);
}

.pmo-legend-swatch.open {
    background: var(--pmo-accent-tint);
    border: 1px solid var(--pmo-rule);
    margin-left: .5rem;
}

/* Anillo de progreso (tile de avance). */
.pmo-ring-track {
    fill: none;
    stroke: var(--pmo-rule);
    stroke-width: 9;
}

.pmo-ring-fill {
    fill: none;
    stroke: var(--pmo-accent);
    stroke-width: 9;
    stroke-linecap: round;
}

/* Ritmo semanal: sparkline SVG de área (los textos usan tinta, los
   puntos llevan anillo de superficie de 2px sobre la línea). */
.pmo-spark-axis { stroke: var(--pmo-rule); }
.pmo-spark-area { fill: var(--pmo-accent); opacity: .16; }
.pmo-spark-line { fill: none; stroke: var(--pmo-accent); stroke-width: 2.5; }

.pmo-spark-dot {
    fill: var(--pmo-surface);
    stroke: var(--pmo-accent);
    stroke-width: 2;
}

.pmo-spark-text {
    font-size: 13px;
    font-weight: 700;
    fill: var(--pmo-ink);
}

.pmo-spark-label {
    flex: 1 1 0;
    text-align: center;
    font-size: .625rem;
    color: var(--pmo-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los enlaces directos del dashboard visten como el resto del texto
   (tinta, sin subrayado); el acento aparece solo al pasar el cursor. */
.pmo-dash .card a:not(.btn) {
    color: var(--pmo-ink);
    text-decoration: none;
    transition: color .15s ease;
}

.pmo-dash .card a:not(.btn):hover {
    color: var(--pmo-accent-deep);
}

.pmo-dash .card a:not(.btn):hover .text-body-secondary {
    color: var(--pmo-accent-deep) !important;
}

/* Elementos del dashboard que abren el modal de detalle. */
.pmo-click { cursor: pointer; }

.pmo-click:focus-visible {
    outline: 2px solid var(--pmo-accent);
    outline-offset: 2px;
    border-radius: .4rem;
}

.pmo-click-row {
    padding: .15rem .35rem;
    margin-left: -.35rem;
    margin-right: -.35rem;
    border-radius: .4rem;
    transition: background .15s ease;
}

.pmo-click-row:hover {
    background: var(--pmo-accent-tint);
}

/* Mini-stat con clic (tarjeta de minutas): hereda color, acento al pasar. */
.pmo-stat-link {
    color: inherit;
    text-decoration: none;
    border-radius: .5rem;
    transition: background .15s ease;
}

.pmo-stat-link:hover {
    color: inherit;
    background: var(--pmo-accent-tint);
}

/* --- Movimiento del dashboard: entradas escalonadas y trazos. ---- */
@keyframes pmo-fade-up {
    from { opacity: 0; transform: translateY(12px); }
}

@keyframes pmo-grow-x {
    from { transform: scaleX(0); }
}

@keyframes pmo-ring-draw {
    from { stroke-dasharray: 0 213.6; }
}

@keyframes pmo-draw-line {
    from { stroke-dashoffset: 100; }
}

@keyframes pmo-fade-in {
    from { opacity: 0; }
}

.pmo-dash .card {
    animation: pmo-fade-up .5s cubic-bezier(.2, .7, .3, 1) backwards;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pmo-dash .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .55rem 1.1rem rgba(32, 33, 58, .10);
}

/* Escalonado: tiles de izquierda a derecha, tarjetas de arriba abajo. */
.pmo-dash .pmo-tiles .col:nth-child(2) .card { animation-delay: .06s; }
.pmo-dash .pmo-tiles .col:nth-child(3) .card { animation-delay: .12s; }
.pmo-dash .pmo-tiles .col:nth-child(4) .card { animation-delay: .18s; }
.pmo-dash .pmo-tiles .col:nth-child(5) .card { animation-delay: .24s; }
.pmo-dash .pmo-tiles .col:nth-child(6) .card { animation-delay: .30s; }
.pmo-dash .pmo-dash-col .card:nth-child(1) { animation-delay: .15s; }
.pmo-dash .pmo-dash-col .card:nth-child(2) { animation-delay: .25s; }
.pmo-dash .pmo-dash-col .card:nth-child(3) { animation-delay: .35s; }
.pmo-dash .pmo-dash-col .card:nth-child(4) { animation-delay: .45s; }

/* Las barras crecen desde la izquierda; el anillo y la línea se trazan. */
.pmo-dash .pmo-bar-fill {
    transform-origin: left;
    animation: pmo-grow-x .9s cubic-bezier(.2, .7, .3, 1) backwards .35s;
}

.pmo-dash .pmo-ring-fill {
    animation: pmo-ring-draw 1s ease-out backwards .25s;
}

.pmo-dash .pmo-spark-line {
    stroke-dasharray: 100;
    animation: pmo-draw-line 1.1s ease-out backwards .5s;
}

.pmo-dash .pmo-spark-area {
    animation: pmo-fade-in .7s ease-out backwards 1.3s;
}

.pmo-dash .pmo-spark-dot {
    animation: pmo-fade-in .35s ease-out backwards;
    animation-delay: calc(.55s + var(--di, 0) * .09s);
}

.pmo-dash .pmo-spark-text {
    animation: pmo-fade-in .4s ease-out backwards 1.45s;
}

/* Accesibilidad: sin animaciones si el usuario las redujo. */
@media (prefers-reduced-motion: reduce) {
    .pmo-ring i.bi-bell,
    #live-status.text-success,
    #migrate-status.text-success { animation: none; }
    .js-activity-card, a.card { transition: none; }
    .pmo-dash .card,
    .pmo-dash .pmo-bar-fill,
    .pmo-dash .pmo-ring-fill,
    .pmo-dash .pmo-spark-line,
    .pmo-dash .pmo-spark-area,
    .pmo-dash .pmo-spark-dot,
    .pmo-dash .pmo-spark-text { animation: none; transition: none; }
}

/* --------------------- edición silenciosa ------------------- */
/* Los campos de edición en vivo del detalle parecen texto normal;
   la caja de formulario aparece al pasar el cursor o al enfocar.
   (Los multiselect quedan fuera: son listas y se ven como tales.) */
[data-live-url] .js-live:not(:focus):not([multiple]) {
    border-color: transparent;
    background-color: transparent;
    background-image: none;            /* flecha del select */
    box-shadow: none;
}

[data-live-url] .js-live:hover:not(:focus):not([multiple]) {
    border-color: var(--pmo-muted);
    border-style: dashed;
}

/* El placeholder queda visible en reposo: es la pista de que ahí se
   puede escribir (p. ej. la descripción vacía). */
[data-live-url] .js-live:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0; }

/* Vista Lista: mismo patrón que el detalle — las celdas parecen texto
   y el control aparece al pasar el cursor o al hacer clic. */
.js-list-table .js-row-live:not(:focus) {
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.js-list-table .js-row-live:hover:not(:focus) {
    border-color: var(--pmo-muted);
    border-style: dashed;
}

.js-list-table .js-row-live:not(:focus):not(:hover)::placeholder { color: transparent; }
.js-list-table .js-row-live:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0; }
/* Fecha vacía en reposo: celda en blanco, no «dd/mm/aaaa». */
.js-list-table input[type='date'].js-row-live.is-empty:not(:focus):not(:hover) { color: transparent; }

/* Compositor de seguimiento: una línea silenciosa que se enciende al
   enfocar; el botón Enviar aparece al escribir o enfocar. */
.js-followup-form textarea:not(:focus) {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.js-followup-form textarea:hover:not(:focus) {
    border-color: var(--pmo-muted);
    border-style: dashed;
}

.js-followup-form .btn { visibility: hidden; }
.js-followup-form:focus-within .btn,
.js-followup-form.has-text .btn { visibility: visible; }

/* ----------------- acento personalizable -------------------- */
/* data-pmo-accent en <html> según User.accent; el violeta es el
   default de la marca y no necesita regla. */
[data-pmo-accent='blue'] { --pmo-accent: #2f6fd0; --pmo-accent-deep: #2456ad; --pmo-accent-tint: #e3edfb; }
[data-pmo-accent='teal'] { --pmo-accent: #128d76; --pmo-accent-deep: #0d6c5a; --pmo-accent-tint: #def2ed; }
[data-pmo-accent='amber'] { --pmo-accent: #b07a10; --pmo-accent-deep: #8a5f0c; --pmo-accent-tint: #f6ecd9; }
[data-pmo-accent='rose'] { --pmo-accent: #c04a80; --pmo-accent-deep: #9d3363; --pmo-accent-tint: #f9e7f0; }

[data-bs-theme='dark'][data-pmo-accent='blue'] { --pmo-accent: #6ea8ff; --pmo-accent-deep: #8db9ff; --pmo-accent-tint: #243349; }
[data-bs-theme='dark'][data-pmo-accent='teal'] { --pmo-accent: #41c3a9; --pmo-accent-deep: #63d3bd; --pmo-accent-tint: #1d322c; }
[data-bs-theme='dark'][data-pmo-accent='amber'] { --pmo-accent: #d9a54a; --pmo-accent-deep: #e5bc74; --pmo-accent-tint: #332a1a; }
[data-bs-theme='dark'][data-pmo-accent='rose'] { --pmo-accent: #e685b1; --pmo-accent-deep: #efa5c6; --pmo-accent-tint: #3a2430; }

/* Selector de acento en el perfil: radios ocultos bajo un círculo. */
.pmo-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--pmo-rule);
}

.pmo-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.pmo-swatch:has(input:checked) {
    border-color: var(--pmo-ink);
    box-shadow: 0 0 0 3px var(--pmo-accent-tint);
}

.pmo-swatch:has(input:focus-visible) { outline: 2px solid var(--pmo-accent); outline-offset: 2px; }

.pmo-swatch-violet { background: #6d5ef0; }
.pmo-swatch-blue { background: #2f6fd0; }
.pmo-swatch-teal { background: #128d76; }
.pmo-swatch-amber { background: #b07a10; }
.pmo-swatch-rose { background: #c04a80; }

/* ── Modal de login: réplica del modal del hub (misma geometría, espaciado
      y jerarquía; SOLO cambian los colores de la herramienta y la tipografía
      propia). Esquinas rectas y bordes finos, como el hub. ── */
#wallet-modal .modal-dialog { max-width: 28rem; }
#wallet-modal .modal-content { border-radius: 0; }
#wallet-modal .modal-body { padding: 2rem; }
#wallet-modal .btn { border-radius: 0; }

.pmo-wallet-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: color-mix(in srgb, var(--pmo-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--pmo-accent) 20%, transparent);
    border-radius: 0;
    color: var(--pmo-accent);
    font-size: 1.875rem;
}

#wallet-modal #wallet-buttons .btn {
    font-weight: 700;
    padding: 0.75rem 1rem;
    min-height: 44px;
    text-align: left;
}
#wallet-modal #wallet-buttons .btn-outline-secondary {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    background: transparent;
}
#wallet-modal #wallet-buttons .btn-outline-secondary:hover {
    background: var(--bs-tertiary-bg);
    border-color: color-mix(in srgb, var(--pmo-accent) 30%, transparent);
}
/* Chip INSTALAR ↗: pequeño, bold y con tracking ancho, como el hub */
#wallet-modal #wallet-buttons .btn .small {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------- */
/* Tablas del reporte del espacio: separador vertical entre columnas  */
/* (la regla fina del canon, no un carácter «|»), y ancho mínimo para */
/* que la barra de avance no se aplaste al angostar la ventana.       */
.pmo-report-table th + th,
.pmo-report-table td + td {
    border-left: 1px solid var(--pmo-rule);
}

/* El encabezado marca la separación con más presencia que el cuerpo. */
.pmo-report-table thead th + th {
    border-left-color: var(--pmo-ink);
    border-left-style: solid;
    opacity: 1;
}

.pmo-report-table .pmo-report-bar {
    min-width: 7rem;
}

/* Barra de «Primeros pasos». El ancho va por atributo y no en un style
   inline: la CSP del monolito no admite estilos sueltos en el HTML.
   Un paso más en kazen/guide.py pide rehacer estos tramos. */
.pmo-guide-bar { width: 0; transition: width .3s ease; }
.pmo-guide-bar[data-progress="1"] { width: 20%; }
.pmo-guide-bar[data-progress="2"] { width: 40%; }
.pmo-guide-bar[data-progress="3"] { width: 60%; }
.pmo-guide-bar[data-progress="4"] { width: 80%; }
.pmo-guide-bar[data-progress="5"] { width: 100%; }

/* ---------------------------------------------------------------- guía
   Pantalla /kazen/guide/. Una sola columna a lo ancho: la tarjeta corta
   de «primeros pasos» se queda en el inicio, aquí manda el panel. */

/* Panel de avance: el anillo y el estado, sobre la tinta suave. */
.pmo-progress-panel {
    background: var(--pmo-accent-tint);
    border: 1px solid color-mix(in srgb, var(--pmo-accent) 30%, transparent);
    border-left: 4px solid var(--pmo-accent);
    border-radius: .75rem;
}

/* El número dentro del anillo. En Archivo, que es la única familia que
   Kazen carga: la mono del canon no está enlazada en esta herramienta. */
.pmo-ring-stat {
    font-weight: 700;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    fill: var(--pmo-ink);
}

.pmo-ring-stat-sub { font-size: .62rem; fill: var(--pmo-muted); }

/* Marcador de paso cumplido en el riel: relleno de éxito, no de acento
   (el acento es identidad; «hecho» es estado). */
.pmo-timeline-marker.done {
    border-color: var(--bs-success, #198754);
    background: var(--bs-success, #198754);
}

/* Fila del riel: el paso siguiente es el único que se ve encendido. */
.pmo-step-row { border-bottom: 1px solid var(--pmo-rule); }
.pmo-step-row:last-child { border-bottom: 0; }
.pmo-step-row.is-next { background: var(--pmo-accent-tint); border-radius: .5rem; }
.pmo-step-row.is-done .pmo-step-title { color: var(--pmo-muted); }

/* Diagrama espacio → tablero → actividad. En móvil se apila y las
   flechas giran; en pantalla ancha corre en fila. */
.pmo-flow { display: grid; gap: .5rem; align-items: stretch; }

.pmo-flow-tile {
    background: var(--pmo-surface);
    border: 1px solid var(--pmo-rule);
    border-left: 3px solid var(--pmo-accent);
    border-radius: .6rem;
    padding: .75rem .9rem;
}

.pmo-flow-tile .pmo-flow-kind {
    text-transform: uppercase;
    font-size: .62rem;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--pmo-muted);
}

.pmo-flow-tile .pmo-flow-name { font-weight: 600; color: var(--pmo-ink); }

.pmo-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pmo-muted);
    transform: rotate(90deg);
}

/* Lo que cuelga de una actividad: seguimiento y minuta. */
.pmo-flow-attach {
    border-left: 2px dashed var(--pmo-rule);
    margin-left: 1rem;
    padding-left: .9rem;
}

@media (min-width: 768px) {
    .pmo-flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
    .pmo-flow-arrow { transform: none; }
    .pmo-flow-attach { border-left: 0; margin-left: 0; padding-left: 0; }
}

/* Los ocho temas: <details> nativo, cero JavaScript. */
.pmo-disclosure {
    background: var(--pmo-surface);
    border: 1px solid var(--pmo-rule);
    border-left: 3px solid var(--pmo-rule);
    border-radius: .6rem;
    height: 100%;
}

.pmo-disclosure[open] { border-left-color: var(--pmo-accent); }

.pmo-disclosure > summary {
    cursor: pointer;
    padding: .8rem .95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .6rem;
    list-style: none;
}

.pmo-disclosure > summary::-webkit-details-marker { display: none; }

/* El chevron gira al abrir: la única animación de la pantalla. */
.pmo-disclosure > summary .pmo-disclosure-caret {
    margin-left: auto;
    color: var(--pmo-muted);
    transition: transform .2s ease;
}

.pmo-disclosure[open] > summary .pmo-disclosure-caret { transform: rotate(180deg); }

/* Foco visible en el summary nativo, como en el resto de lo clicable. */
.pmo-disclosure > summary:focus-visible {
    outline: 2px solid var(--pmo-accent);
    outline-offset: -2px;
    border-radius: .6rem;
}

.pmo-disclosure-body { padding: 0 .95rem .9rem; }

@media (prefers-reduced-motion: reduce) {
    .pmo-disclosure > summary .pmo-disclosure-caret { transition: none; }
}