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

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; }

/* Chip de usuario en caja (mockup: nombre + wallet abreviada). */
.navbar .dropdown > .nav-link {
    border: 1px solid var(--pmo-rule);
    border-radius: .5rem;
    padding: .25rem .6rem;
}

.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-ink);
    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-surface);
    color: var(--pmo-ink);
    border-color: var(--pmo-ink);
    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;
}

.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 --- */
footer {
    border-top: 2px solid var(--pmo-ink) !important;
    background: var(--pmo-surface);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pmo-muted);
}

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

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