/* ============================================================
   Synapse — Componentes
   ------------------------------------------------------------
   Convenciones:
   · BEM: .bloque, .bloque__elemento, .bloque--variante
   · Estados: .is-active, .is-open, .is-unread, .is-dragging…
   · Color por intención: los componentes marcados con [tone]
     leen la variable --tone. Se asigna con una clase .tone-*
     (utilities.css) o desde datos: style="--tone: #hex".

   Índice
     1. Iconos                 12. Avatares y presencia
     2. Botones                13. Media y filas de lista
     3. Formularios            14. Lista en píldoras
     4. Chips, badges, conteos 15. Línea de tiempo
     5. Puntos de color        16. Mini calendario
     6. Tarjetas               17. Progreso y medidor
     7. Cifras                 18. Actividad y chat
     8. Alertas (flash)        19. Popover
     9. Modal                  20. Estados vacíos y utilidades visuales
    10. Hoja de formulario     21. Estrellas, cita, código, entregables
    11. Menús y notificaciones 22. Toasts
   ============================================================ */

/* ── 1. Iconos (sprite: assets/img/iconos.svg) ───────────── */
.icon {
    --icon-size: var(--icon-md);
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon--xs  { --icon-size: var(--icon-xs); stroke-width: 2.5; }
.icon--sm  { --icon-size: var(--icon-sm); }
.icon--md  { --icon-size: var(--icon-md); }
.icon--lg  { --icon-size: var(--icon-lg); }
.icon--xl  { --icon-size: var(--icon-xl); }
.icon--2xl { --icon-size: var(--icon-2xl); stroke-width: 1.5; }
.icon--thin { stroke-width: 1.5; }
.icon--bold { stroke-width: 2.5; }
.icon--fill { fill: currentColor; stroke: none; }

/* ── 2. Botones ──────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-normal);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition), filter var(--transition);
}
.btn:hover { opacity: 1; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Dorado con brillo: acción principal */
.btn--primary {
    background: var(--gold-gradient);
    color: var(--on-accent);
    box-shadow: var(--shadow-glow), inset 0 1px 0 var(--gloss), inset 0 -2px 6px var(--shade);
}
.btn--primary:hover {
    color: var(--on-accent);
    filter: brightness(1.06);
    box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 var(--gloss);
}

/* Píldora gris */
.btn--secondary { background: var(--surface-6); color: var(--text-primary); }
.btn--secondary:hover { background: color-mix(in srgb, var(--surface-6) 85%, white); color: var(--text-primary); }

.btn--danger {
    background: color-mix(in srgb, var(--danger) var(--tint-subtle), var(--surface-1));
    border-color: color-mix(in srgb, var(--danger) var(--tint-line), transparent);
    color: var(--danger);
}
.btn--danger:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--danger) 35%, transparent); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn--lg    { padding: var(--space-3) var(--space-8); font-size: var(--fs-lg); }
.btn--sm    { padding: 6px var(--space-4); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* Texto con aspecto de enlace ("Ver informe", "Marcar todas") */
.link-btn {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.link-btn:hover { opacity: 0.75; }

/* Botón cuadrado de icono con brillo (campana, exportar, filtros) */
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--surface-1);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 var(--bg-glass);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.icon-btn:hover { border-color: var(--border-strong); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent); opacity: 1; }
.icon-btn__dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--surface-1);
    border-radius: var(--radius-round);
    background: var(--danger);
}

/* Botón circular pequeño (mes anterior / siguiente) */
.round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-round);
    background: var(--text-muted);
    color: var(--surface-1);
    transition: background var(--transition);
}
.round-btn:hover { background: var(--text-secondary); opacity: 1; }

/* ── 3. Formularios ──────────────────────────────────────── */
/* Control tipo píldora */
.form-control {
    width: 100%;
    padding: 10px var(--space-5);
    background: var(--bg-input);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.form-control::placeholder { color: var(--text-placeholder); }
.form-control:disabled { opacity: 0.6; cursor: not-allowed; }
textarea.form-control {
    min-height: 120px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    resize: vertical;
    line-height: var(--lh-base);
}
input[type="date"].form-control,
input[type="datetime-local"].form-control { color-scheme: dark; }

/* La flecha del select es un SVG embebido: no puede leer variables CSS,
   por eso su color (#E6E6E6) está escrito en el data URI. */
select.form-control,
.pill-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpolygon points='3 6 21 6 12 19' fill='%23E6E6E6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: var(--space-10);
    cursor: pointer;
}
select.form-control { background-color: var(--bg-input); }
select option { background: var(--surface-3); color: var(--text-primary); }

.form-hint { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }

/* Filtros de la barra de herramientas: texto con flecha; activo = píldora gris */
.pill-select {
    field-sizing: content;   /* ancho según la opción elegida (Chromium) */
    padding: 8px var(--space-8) 8px var(--space-4);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    background-position: right 12px center;
    transition: background-color var(--transition), color var(--transition);
}
.pill-select:hover { color: var(--text-secondary); }
.pill-select.is-active { background-color: var(--surface-6); color: var(--text-primary); }
.pill-select:focus-visible { outline: 2px solid var(--border-focus); }

/* Búsqueda en píldora */
.search {
    width: 230px;
    padding: 9px var(--space-5);
    background: var(--surface-6);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    outline: none;
}
.search::placeholder { color: var(--text-placeholder); }
.search:focus { border-color: var(--border-focus); }

/* Grupo de casillas con aspecto de chip (responsables) */
.check-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3) 4px 4px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip:has(input:checked) { border-color: var(--border-focus); color: var(--text-primary); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }

.color-input {
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-round);
    cursor: pointer;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: 2px solid var(--border-strong); border-radius: var(--radius-round); }
.color-input::-moz-color-swatch { border: 2px solid var(--border-strong); border-radius: var(--radius-round); }
/* Variante punto (junto a un título) */
.color-input--dot { flex-shrink: 0; width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--border-light); }
.color-input--dot::-webkit-color-swatch { border: none; }
.color-input--dot::-moz-color-swatch { border: none; }

/* Cuadrícula de campos de las hojas (etiqueta a la izquierda) */
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-10);
}
.field-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.field { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-primary); }
.field__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.field__control .form-control { width: auto; min-width: 0; flex: 1; padding: 6px var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field__control select.form-control { flex: 0 1 auto; min-width: 150px; }
.field__value { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-secondary); }
/* Si la tarjeta que contiene la cuadrícula es angosta, una sola columna */
@container (max-width: 700px) {
    .field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Selector con color de tono [tone]
   · por defecto, estilo chip (prioridad): fondo teñido y texto del tono
   · --solid (estado): relleno del tono con texto oscuro */
select.form-control.tone-select {
    background-color: color-mix(in srgb, var(--tone, var(--text-muted)) var(--tint-soft), var(--surface-1));
    border-color: color-mix(in srgb, var(--tone, var(--text-muted)) var(--tint-line), transparent);
    color: var(--tone, var(--text-primary));
    box-shadow: 0 0 12px color-mix(in srgb, var(--tone, transparent) 25%, transparent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
select.form-control.tone-select--solid {
    background-color: color-mix(in srgb, var(--tone, var(--text-muted)) 75%, var(--surface-6));
    border-color: transparent;
    color: var(--on-accent);
    box-shadow: none;
}

/* Título editable (hojas de formulario) */
.title-input {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    border-bottom: 1px dashed transparent;
    color: var(--text-primary);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    outline: none;
}
.title-input::placeholder { color: var(--text-primary); opacity: 0.9; }
.title-input:focus { border-bottom-color: var(--border-strong); }

/* ── 4. Chips, badges y conteos [tone] ───────────────────── */
.chip,
.badge,
.status-pill {
    --tone: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--tone) var(--tint-soft), var(--surface-1));
    color: var(--tone);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
}
.chip { box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 22%, transparent); }
.status-pill { padding: 3px var(--space-3); }

/* Círculo con número (conteo de columnas) */
.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--shade);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

/* ── 5. Puntos de color [tone] ───────────────────────────── */
.color-dot {
    --tone: currentColor;
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    vertical-align: middle;
    border-radius: var(--radius-round);
    background: var(--tone);
}
.color-dot--lg { width: 22px; height: 22px; box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 40%, transparent); }

/* ── 6. Tarjetas ─────────────────────────────────────────── */
.card {
    position: relative;
    padding: var(--space-5);
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.card.is-inactive { opacity: 0.55; }
.card--flush   { padding: 0; overflow: hidden; }

/* Tarjeta interna más clara (datos del perfil, reseñas, entregables) */
.card--raised {
    background: var(--raised-gradient);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
}

/* Pestaña de color en el borde superior [tone] */
.card--accent-top { --tone: var(--accent); margin-top: 4px; }
.card--accent-top::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 12%;
    right: 12%;
    height: 5px;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    background: var(--tone);
    box-shadow: 0 -2px 10px color-mix(in srgb, var(--tone) 45%, transparent);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}
.card__header--divided { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); }

/* ── 7. Cifras ───────────────────────────────────────────── */
/* Cifra en la barra de la página: etiqueta arriba, número grande [tone] */
.stats-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-10); }
.stat-inline { text-align: center; }
.stat-inline__label { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.stat-inline__value {
    --tone: var(--accent);
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-none);
    color: var(--tone);
}
.stat-inline__value .icon { margin-top: 2px; }
/* Unidad pequeña junto a la cifra, con icono encima ("5 ↗%") */
.stat-inline__unit { display: inline-flex; flex-direction: column; align-items: center; font-size: var(--fs-xl); line-height: var(--lh-none); }
.stat-inline__unit .icon { margin: 0 0 1px; }

/* Mosaico de cifra (perfil del dashboard) */
.kpi { padding: var(--space-3) var(--space-3) var(--space-2); background: var(--surface-1); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 var(--bg-glass); }
.kpi__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-none); color: var(--accent); }
.kpi__unit { margin-left: 2px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); }
.kpi__label { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--fs-3xs); color: var(--text-muted); }

/* ── 8. Alertas (flash) [tone] ───────────────────────────── */
.flash {
    --tone: var(--success);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: color-mix(in srgb, var(--tone) var(--tint-subtle), var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--tone) var(--tint-line), transparent);
    border-radius: var(--radius-md);
    color: var(--tone);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    transition: opacity var(--duration-slow);
}
.flash--error   { --tone: var(--danger); }
.flash--success { --tone: var(--success); }
.flash.is-hiding { opacity: 0; }
.flash__close {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: var(--fs-2xl);
    opacity: 0.6;
    cursor: pointer;
}
.flash__close:hover { opacity: 1; }

/* ── 9. Modal (confirmaciones) ───────────────────────────── */
.overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
}
.modal {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card-gradient);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6) var(--space-3);
}
.modal__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-round);
    color: var(--text-muted);
    font-size: var(--fs-2xl);
    line-height: var(--lh-none);
    cursor: pointer;
}
.modal__close:hover { color: var(--text-primary); background: var(--bg-hover); }
.modal__body { padding: var(--space-2) var(--space-6) var(--space-5); color: var(--text-secondary); }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); }

/* ── 10. Hoja de formulario a pantalla completa ──────────── */
/* Barra superior con ruta + contenido centrado + acción al pie */
.sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-base);
    animation: sheet-in var(--duration-base) var(--ease-standard);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.has-sheet { overflow: hidden; }

.sheet__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-12) var(--space-4);
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-light);
}
.sheet__crumb { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--accent); }
.sheet__crumb-sep { margin: 0 var(--space-2); }
.sheet__bar-end { display: flex; align-items: center; gap: var(--space-5); }
.sheet__meta { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.sheet__tool {
    display: inline-flex;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}
.sheet__tool:hover { color: var(--text-primary); opacity: 1; }
.sheet__tool--danger { color: var(--danger); }
.sheet__tool--danger:hover { color: var(--danger); filter: brightness(1.2); }

.sheet__body {
    flex: 1;
    width: 100%;
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: var(--space-10) var(--space-6) var(--space-12);
}
.sheet__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--space-10);
    max-width: none;
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}
/* La columna de actividad ocupa el alto visible bajo la barra */
.sheet__body--split > .activity { min-height: calc(100vh - 170px); }
.sheet__card {
    container-type: inline-size;
    padding: var(--space-10) var(--space-8);
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
}
.sheet__title { margin-bottom: var(--space-6); font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
/* Título precedido por un punto de color (cliente) */
.sheet__heading { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.sheet__heading > .sheet__title { margin-bottom: 0; }
/* Texto de solo lectura (notas) */
.sheet__text {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-sunken);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    white-space: pre-line;
}
.sheet__subtitle { margin: var(--space-8) 0 var(--space-4); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.sheet__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-8); }

/* Caja con pestaña ("Entregable 1") */
.tab-box {
    position: relative;
    margin-top: var(--space-5);
    padding: var(--space-6) var(--space-4) var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.tab-box__tab {
    position: absolute;
    top: -13px;
    left: var(--space-4);
    padding: 2px var(--space-3);
    background: var(--surface-6);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.tab-box__remove { position: absolute; top: var(--space-2); right: var(--space-2); }

/* ── 11. Menús desplegables y notificaciones ─────────────── */
.dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}
.dropdown__empty { padding: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

.notif { position: relative; }
.notif__panel { width: 340px; }
.notif__list  { max-height: 360px; overflow-y: auto; }

.notif-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item.is-unread { background: color-mix(in srgb, var(--accent) var(--tint-faint), transparent); }
.notif-item__icon { flex-shrink: 0; color: var(--text-muted); }
.notif-item.is-unread .notif-item__icon { color: var(--accent); }
.notif-item__content { flex: 1; min-width: 0; }
.notif-item__msg { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.notif-item__time { margin-top: 2px; font-size: var(--fs-2xs); color: var(--text-muted); }
.notif-item__dot {
    align-self: center;
    width: 7px;
    height: 7px;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: var(--radius-round);
    background: var(--accent);
}

/* ── 12. Avatares y presencia ────────────────────────────── */
/* Iniciales: style="--avatar-color: #hex" */
.avatar {
    --avatar-size: 34px;
    --avatar-color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    border-radius: var(--radius-round);
    background: var(--avatar-color);
    color: var(--on-accent);
    /* Iniciales en blanco o negro según la luminosidad del color del usuario */
    color: oklch(from var(--avatar-color) clamp(0, (0.62 - l) * 1000, 1) 0 0);
    font-size: calc(var(--avatar-size) * 0.38);
    font-weight: var(--fw-bold);
    line-height: var(--lh-none);
    object-fit: cover;
}
.avatar--xs { --avatar-size: 22px; }
.avatar--sm { --avatar-size: 28px; }
.avatar--md { --avatar-size: 38px; }
.avatar--lg { --avatar-size: 64px; box-shadow: 0 0 0 3px var(--surface-1), 0 0 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.avatar--xl { --avatar-size: 80px; }
.avatar--more { background: var(--surface-5); color: var(--text-secondary); font-size: var(--fs-3xs); }

.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -8px; border: 2px solid var(--surface-6); }
.avatar-group .avatar:first-child { margin-left: 0; }

/* Punto de presencia [tone]: .tone-verde / .tone-rojo / .tone-gris */
.status-dot {
    --tone: var(--presencia-gris);
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border: 2px solid var(--surface-1);
    border-radius: var(--radius-round);
    background: var(--tone);
}
.avatar-status { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-status .status-dot { position: absolute; right: 0; bottom: 0; }

/* ── 13. Media y filas de lista ──────────────────────────── */
.media { display: flex; align-items: flex-start; gap: var(--space-3); }
.media--center { align-items: center; }
.media__body  { flex: 1; min-width: 0; }
.media__meta  { margin-top: 2px; font-size: var(--fs-2xs); color: var(--text-muted); }

/* Estado de un miembro del equipo en píldora con borde brillante [tone] */
.team-member {
    --tone: var(--presencia-gris);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    background: var(--surface-1);
    border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 14px color-mix(in srgb, var(--tone) 30%, transparent), inset 0 0 12px color-mix(in srgb, var(--tone) 12%, transparent);
}
.team-member.tone-gris { border-color: var(--border-light); box-shadow: none; }
.team-member__body { flex: 1; min-width: 0; }
.team-member__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.team-member__meta { font-size: var(--fs-3xs); color: var(--tone); }
.team-member.tone-gris .team-member__meta { color: var(--text-muted); }

/* ── 14. Lista en píldoras (clientes, usuarios, papelera) ── */
/* Las columnas se definen por página con la variable --cols.
   Encabezado y filas son subgrid de la lista: las columnas "auto"
   quedan alineadas entre todas las filas. */
.pill-list {
    display: grid;
    grid-template-columns: var(--cols, 1fr);
    gap: var(--space-3) var(--space-5);
}
.pill-list__head,
.pill-list__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}
.pill-list__head {
    padding: 0 var(--space-6) 0 var(--space-8);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}
.pill-list__sort { display: inline-flex; align-items: center; gap: var(--space-2); }
.pill-list__sort .icon { color: var(--text-primary); }
.pill-list__row {
    position: relative;
    min-height: 48px;
    padding: var(--space-2) var(--space-6) var(--space-2) var(--space-8);
    background: var(--row-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-raised);
}
.pill-list__row.is-inactive { opacity: 0.5; }
.pill-list__row.is-inactive:hover { opacity: 0.8; }
/* Punto de color que monta sobre el borde izquierdo [tone] */
.pill-list__dot {
    --tone: var(--accent);
    position: absolute;
    top: 50%;
    left: -11px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-round);
    background: var(--tone);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 45%, transparent);
    transform: translateY(-50%);
}
.pill-list__main { min-width: 0; }
.pill-list__row > form { display: flex; align-items: center; }
.pill-list__name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
a.pill-list__name:hover { color: var(--accent); opacity: 1; }
.pill-list__sub  { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.pill-list__text { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-secondary); }
/* Cifra de una columna [tone] */
.pill-list__num  { --tone: var(--accent); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tone); text-align: center; }
.pill-list__actions { display: flex; align-items: center; gap: var(--space-5); }

/* Acción de texto con icono en gris ("Notas", "Ver tareas", "Editar") */
.row-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition);
}
.row-action:hover { color: var(--text-primary); opacity: 1; }
.row-action--danger:hover { color: var(--danger); }

/* ── 15. Línea de tiempo (entregas, agenda, tareas por hacer) ── */
.timeline { display: flex; flex-direction: column; gap: var(--space-4); }
.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 58px 2px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
}
a.timeline__item:hover { opacity: 0.85; }
.timeline__when { text-align: center; }
.timeline__date { font-size: var(--fs-3xs); color: var(--text-muted); }
.timeline__big  { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-none); color: var(--text-muted); }
.timeline__bar  { --tone: var(--text-muted); align-self: stretch; min-height: 34px; border-radius: 1px; background: var(--tone); }
.timeline__client { font-size: var(--fs-3xs); color: var(--text-secondary); }
.timeline__title  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.timeline__note   { --tone: var(--text-muted); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--tone); }

/* ── 16. Mini calendario ─────────────────────────────────── */
.mini-cal__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.mini-cal__year  { margin-left: var(--space-1); color: var(--accent); }
.mini-cal__grid,
.mini-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.mini-cal__grid { row-gap: var(--space-2); }
.mini-cal__week { grid-column: 1 / -1; }
.mini-cal__head {
    padding-bottom: var(--space-2);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
.mini-cal__head:first-child { color: var(--danger); }
.mini-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}
.mini-cal__day.is-sunday { color: color-mix(in srgb, var(--danger) 85%, black); font-weight: var(--fw-bold); }
.mini-cal__day.has-items { color: var(--text-primary); font-weight: var(--fw-bold); }
.mini-cal__day.is-today span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-round);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: var(--fw-bold);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
/* Semana actual resaltada con franja azul */
.mini-cal__week.is-current {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, transparent 0%, var(--info) 12%, var(--info) 88%, transparent 100%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--info) 45%, transparent);
}
.mini-cal__week.is-current .mini-cal__day { color: var(--text-primary); font-weight: var(--fw-bold); }

/* ── 17. Progreso y medidor ──────────────────────────────── */
/* Barra de progreso con punto al final: style="--value: 45%" */
.progress {
    position: relative;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-1);
}
.progress__fill {
    position: relative;
    width: var(--value, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--progress-gradient);
}
.progress__fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    background: var(--success);
    box-shadow: 0 0 8px color-mix(in srgb, var(--success) 60%, transparent);
    transform: translateY(-50%);
}

/* Medidor semicircular de barras (lo dibuja medidorHtml() en PHP) */
.gauge { position: relative; width: 220px; max-width: 100%; margin: 0 auto; }
.gauge svg { display: block; width: 100%; height: auto; }
.gauge__bar { stroke: var(--surface-6); stroke-width: 7; stroke-linecap: round; }
.gauge__bar.is-on { stroke: color-mix(in srgb, var(--info), white var(--luz, 0%)); }
.gauge__label { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.gauge__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-none); }
.gauge__value small { font-size: var(--fs-sm); }
.gauge__caption { font-size: var(--fs-3xs); color: var(--text-muted); }

/* ── 18. Actividad y chat ────────────────────────────────── */
.activity { display: flex; flex-direction: column; min-height: 100%; }
.activity__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}
.activity__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.activity__feed {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-4);
    min-height: 240px;
    padding: var(--space-6) 0;
}
.activity__event { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.activity__event strong { font-weight: var(--fw-semibold); color: var(--text-secondary); }
.activity__event a { font-weight: var(--fw-semibold); color: var(--accent); }
.activity__time { font-size: var(--fs-3xs); color: var(--text-muted); }
/* Icono en lugar de avatar (adjuntos, proyectos, informes) */
.activity__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-round);
    background: var(--surface-4);
    color: var(--text-secondary);
}

.chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-4);
    border-radius: var(--radius-lg);
}
.chat-bubble.is-mine { flex-direction: row-reverse; text-align: right; background: var(--surface-6); }
.chat-bubble__body { flex: 1; min-width: 0; }
.chat-bubble__text { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-tight); word-break: break-word; }
.chat-bubble__meta { margin-top: var(--space-1); font-size: var(--fs-3xs); color: var(--text-secondary); }
.chat-bubble__meta a { color: var(--accent); }

.chat-input {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}
.chat-input__field {
    width: 100%;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 1px solid var(--text-faint);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-md);
    resize: none;
    outline: none;
}
.chat-input__field:focus { border-color: var(--border-focus); }
.chat-input__field::placeholder { color: var(--text-muted); }
.chat-input__tools { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.chat-input__tools .sheet__tool { color: var(--text-muted); }
.chat-input__send { margin-left: auto; }

/* ── 19. Popover ─────────────────────────────────────────── */
.popover {
    position: absolute;
    z-index: var(--z-popover);
    width: 280px;
    padding: var(--space-5);
    background: var(--card-gradient);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* ── 20. Estados vacíos y utilidades visuales ────────────── */
.empty-state { padding: var(--space-10) 0; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.empty-state--sm { padding: var(--space-6) 0; }
.empty-state--lg { padding: var(--space-16) var(--space-5); }
.empty-state__icon { display: flex; justify-content: center; margin-bottom: var(--space-4); color: var(--text-faint); }

/* Texto gigante de fondo (mes del calendario). Con style="--letras: N" el tamaño se ajusta
   para que las palabras largas no ocupen todo el ancho */
.watermark {
    position: fixed;
    right: var(--space-6);
    bottom: calc(-1 * var(--space-6));
    z-index: -1;
    font-size: min(11rem, calc(60vw / var(--letras, 4)));
    font-weight: var(--fw-black);
    line-height: var(--lh-none);
    letter-spacing: var(--tracking-tight);
    color: var(--surface-2);
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

/* ── 21. Estrellas, cita, código, entregables ────────────── */
.stars {
    --stars-size: var(--fs-lg);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--stars-size);
    line-height: var(--lh-none);
}
.stars--lg { --stars-size: var(--fs-3xl); gap: var(--space-1); }
.stars__star { color: var(--text-faint); }
.stars__star.is-on { color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.stars__count { margin-left: var(--space-2); font-size: var(--fs-md); color: var(--text-secondary); }

.quote {
    padding: var(--space-2) var(--space-4);
    border-left: 2px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-style: italic;
    line-height: var(--lh-relaxed);
}
.quote--accent { border-left-color: color-mix(in srgb, var(--accent) var(--tint-line), transparent); }

.code {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    user-select: all;
}

/* Entregable: miniatura + enlace + red */
.deliverable { display: flex; align-items: center; gap: var(--space-4); }
.deliverable__thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 150px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--raised-gradient);
    box-shadow: var(--shadow-raised);
    color: var(--text-primary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
}
.deliverable__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.deliverable__title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.deliverable__url {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    padding: 6px var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deliverable__tag { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-6); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.deliverable__actions { flex-shrink: 0; }

/* ── 22. Toasts (assets/js/notificaciones.js) ────────────── */
.toast-stack {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 340px;
    padding: var(--space-3) var(--space-4);
    background: var(--card-gradient);
    border: 1px solid color-mix(in srgb, var(--accent) var(--tint-line), transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
}
.toast.is-visible { opacity: 1; transform: none; }
.toast__icon { margin-top: 1px; color: var(--accent); }
.toast__body { flex: 1; min-width: 0; }
.toast__title {
    margin-bottom: 2px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
.toast__msg { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.toast__link { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-xs); }
.toast__close {
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-2xl);
    line-height: var(--lh-none);
    cursor: pointer;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .field-grid { grid-template-columns: minmax(0, 1fr); }
    .sheet__bar { padding: var(--space-4); }
    .sheet__body { padding: var(--space-6) var(--space-4); }
    .sheet__body--split { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-4); padding-right: var(--space-4); }
    .sheet__card { padding: var(--space-6) var(--space-5); }
    /* Lista en píldoras: cada fila se vuelve una tarjeta y las cifras llevan su etiqueta */
    .pill-list { display: flex; flex-direction: column; }
    .pill-list__head { display: none; }
    .pill-list__row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
        padding: var(--space-4) var(--space-5) var(--space-4) var(--space-8);
        border-radius: var(--radius-xl);
    }
    .pill-list__main { flex: 1 1 100%; }
    .pill-list__num { text-align: left; }
    .pill-list [data-label]::before { content: attr(data-label) " "; font-weight: var(--fw-medium); color: var(--text-muted); }
    .pill-list__actions { flex-wrap: wrap; }
    .watermark { font-size: min(5rem, calc(60vw / var(--letras, 4))); }
    .search { width: 100%; }
}
@media (max-width: 600px) {
    .field { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .deliverable { flex-direction: column; align-items: flex-start; }
}