/* =========================================================
refresh.css — Capa 2 del design refresh Claude Design
Port selectivo de componentes BEM desde
claude_design_raw/components.css (526 líneas originales,
acá solo lo que agrega jerarquía visual sin requerir
refactor masivo del HTML existente).
Convención:
- Clases sin prefijo (.card-hero, .card-eyebrow, .eyebrow)
se agregan JUNTO a las clases legacy existentes
(.project-kpi-card + .card-hero, por ejemplo).
- Clases con prefijo .cr-* se usan cuando el nombre limpio
ya existe en el sistema (.cr-pill vs .badge legacy).
- Todo usa tokens nuevos ya expuestos en variables.css
(Capa 1): --bg-elevated, --fs-display, --{*}-tint, etc.
========================================================= */
/* ---------------------------------------------------------
CARDS — variantes aditivas
Aplican ENCIMA de .project-kpi-card, .metric-card, .kpi-card
o cualquier card legacy. Usan mayor especificidad via
combinadores para pisar el background/border del base.
--------------------------------------------------------- */
.card-hero,
.metric-card.card-hero,
.kpi-card.card-hero,
.project-kpi-card.card-hero {
background: var(--bg-elevated);
border-color: var(--border-strong, var(--border-hover));
box-shadow: var(--sh-2);
transition: border-color var(--dur-1) var(--ease-out-soft),
background var(--dur-1) var(--ease-out-soft);
}
/* Card con barra acento lateral (3px), ideal para items destacados */
.card-featured {
background: var(--bg-elevated);
border-color: var(--border-strong, var(--border-hover));
position: relative;
overflow: hidden;
}
.card-featured::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--blue);
}
.card-featured[data-accent="green"]::before { background: var(--green); }
.card-featured[data-accent="amber"]::before { background: var(--amber); }
.card-featured[data-accent="red"]::before { background: var(--red); }
.card-featured[data-accent="purple"]::before { background: var(--purple); }
.card-featured[data-accent="orange"]::before { background: var(--orange); }
/* Card "well" — fondo hundido para paneles anidados */
.card-inset {
background: var(--bg-inset);
border-color: var(--border-subtle, var(--border));
}
/* Hover interactivo (opcional, agregar con .card-hover en HTML) */
.card-hover {
cursor: pointer;
}
.card-hover:hover {
border-color: var(--border-strong, var(--border-hover));
background: var(--bg-elevated);
}
/* ---------------------------------------------------------
EYEBROW / HEAD / TITLE — tipografía jerárquica
--------------------------------------------------------- */
.eyebrow,
.card-eyebrow {
font-size: var(--fs-micro);
color: var(--text-tertiary, var(--text-muted));
text-transform: uppercase;
letter-spacing: var(--tr-wider);
font-weight: var(--fw-medium);
font-family: var(--font-sans);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.card-title {
font-size: var(--fs-h3);
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
color: var(--text-primary);
}
/* Display gigante para números KPI — se aplica al texto donde
querés el "44px mono" típico del mockup Claude Design */
.kpi-display {
font-family: var(--font-mono);
font-size: var(--fs-display);
font-weight: var(--fw-semi);
letter-spacing: var(--tr-tight);
line-height: var(--lh-tight);
color: var(--text-primary);
}
/* Variante más pequeña (28px) para displays secundarios */
.display-mono {
font-family: var(--font-mono);
font-size: var(--fs-h1);
font-weight: var(--fw-semi);
letter-spacing: var(--tr-tight);
line-height: var(--lh-tight);
color: var(--text-primary);
}
/* Helpers de color de texto (semánticos) */
.t-primary { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary, var(--text-muted)); }
/* ---------------------------------------------------------
PILL SYSTEM (.cr-pill) — nuevo, no pisa .badge legacy
Fondos a 14%, borde a 28%, texto a color pálido.
Uso: proyectada
--------------------------------------------------------- */
.cr-pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px;
border-radius: var(--radius-full);
font-size: var(--fs-micro);
font-weight: var(--fw-medium);
letter-spacing: 0.01em;
font-family: var(--font-sans);
border: 1px solid transparent;
white-space: nowrap;
vertical-align: middle;
}
.cr-pill--sm { height: 18px; padding: 0 6px; font-size: 10px; gap: 4px; }
.cr-pill .cr-dot,
.cr-pill::before {
width: 6px; height: 6px;
border-radius: 99px;
flex: none;
}
.cr-pill--green { background: var(--green-tint); color: #86efac; border-color: var(--green-edge); }
.cr-pill--green .cr-dot { background: var(--green); }
.cr-pill--amber { background: var(--amber-tint); color: #fde047; border-color: var(--amber-edge); }
.cr-pill--amber .cr-dot { background: var(--amber); }
.cr-pill--red { background: var(--red-tint); color: #fca5a5; border-color: var(--red-edge); }
.cr-pill--red .cr-dot { background: var(--red); }
.cr-pill--blue { background: var(--blue-tint); color: #93c5fd; border-color: var(--blue-edge); }
.cr-pill--blue .cr-dot { background: var(--blue); }
.cr-pill--purple { background: var(--purple-tint); color: #d8b4fe; border-color: var(--purple-edge); }
.cr-pill--purple .cr-dot { background: var(--purple); }
.cr-pill--gray {
background: var(--bg-hover);
color: var(--text-secondary);
border-color: var(--border-default, var(--border));
}
.cr-pill--outline {
background: transparent;
color: var(--text-secondary);
border-color: var(--border-strong, var(--border-hover));
}
/* Light mode — texto más oscuro para contraste sobre tints claros */
[data-theme="light"] .cr-pill--green { color: #166534; }
[data-theme="light"] .cr-pill--amber { color: #854d0e; }
[data-theme="light"] .cr-pill--red { color: #991b1b; }
[data-theme="light"] .cr-pill--blue { color: #1e40af; }
[data-theme="light"] .cr-pill--purple { color: #6b21a8; }
/* ---------------------------------------------------------
HR / separadores
--------------------------------------------------------- */
.hr-soft {
height: 1px;
background: var(--border-default, var(--border));
border: 0;
margin: 0;
}
.hr-subtle {
height: 1px;
background: var(--border-subtle, var(--bg-muted));
border: 0;
margin: 0;
}
/* ---------------------------------------------------------
APLICACIÓN SELECTIVA — KPIs Row 1 de Proyectos
Reestila los 3 KPI cards grandes para darles look "hero"
(fondo elevado + border más fuerte + label uppercase wide).
Aprovecha que ya están marcados con .kpi-avance/.kpi-hh/.kpi-docs-total
dentro de .proy-kpi-row1 — no requiere tocar el JS.
--------------------------------------------------------- */
/* Hero card — contraste MARCADO contra el fondo general del dashboard.
Background 2 pasos más claro que bg-card (#2a2a2e) para que se vea
elevado sin confusión. Gradiente top sutil para sensación de lift. */
.proy-kpi-row1 .project-kpi-card {
background: linear-gradient(180deg, #2a2a2e 0%, #232327 100%);
border: 1px solid #3f3f46;
border-top-color: #52525b; /* highlight superior */
border-radius: var(--radius-lg);
padding: var(--density-card-pad);
box-shadow: 0 8px 20px -8px rgb(0 0 0 / .55),
0 1px 0 0 rgb(255 255 255 / .04) inset;
transition: border-color var(--dur-1) var(--ease-out-soft),
transform var(--dur-1) var(--ease-out-soft),
box-shadow var(--dur-1) var(--ease-out-soft);
}
.proy-kpi-row1 .project-kpi-card:hover {
border-color: #71717a;
border-top-color: #a1a1aa;
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgb(0 0 0 / .7),
0 1px 0 0 rgb(255 255 255 / .06) inset;
}
/* Light mode: invertir — fondo blanco con borde más marcado y sombra suave */
[data-theme="light"] .proy-kpi-row1 .project-kpi-card {
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
border: 1px solid #d4d4d8;
border-top-color: #e4e4e7;
box-shadow: 0 4px 12px -4px rgb(0 0 0 / .08),
0 1px 0 0 rgb(255 255 255 / .4) inset;
}
[data-theme="light"] .proy-kpi-row1 .project-kpi-card:hover {
border-color: #a1a1aa;
box-shadow: 0 8px 20px -6px rgb(0 0 0 / .12),
0 1px 0 0 rgb(255 255 255 / .4) inset;
}
/* El label (.kpi-label) ya usa uppercase + mono, pero Claude Design
lo quiere en sans + wider-tracking para diferenciarlo del valor
central que sí es mono. */
.proy-kpi-row1 .project-kpi-card .kpi-label {
font-family: var(--font-sans);
font-size: var(--fs-micro);
letter-spacing: var(--tr-wider);
color: var(--text-tertiary, var(--text-muted));
font-weight: var(--fw-medium);
}
/* Detail pequeño debajo del anillo — más suave */
.proy-kpi-row1 .project-kpi-card .kpi-detail {
color: var(--text-tertiary, var(--text-muted));
font-size: var(--fs-small);
}
/* ---------------------------------------------------------
PANEL HEADER — look "featured" con barra acento lateral
Aplicado a .proy-panel-header (header expandible de proyecto).
La barra del lado izquierdo toma el color que ya calcula el JS
para el ícono de la carpeta (kpi.avanceGlobal → verde/azul/amarillo).
--------------------------------------------------------- */
.proyecto-panel {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
}
.proyecto-panel > .proy-panel-header {
position: relative;
transition: background var(--dur-1) var(--ease-out-soft);
}
/* ---------------------------------------------------------
PROYECTOS — layout 2-col cuando el proyecto está expandido
Inspirado en el prototipo Claude Design: 3 anillos arriba,
KPIs de docs al LADO de la Curva S (no apilados), Enviados al pie.
Respeta el estilo minimal del Dashboard real (light mode, mono).
Solo aplica en viewports anchos (>= 1280px). En mobile mantiene
el stack vertical tradicional.
--------------------------------------------------------- */
@media (min-width: 1280px) {
.proyecto-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"rings rings"
"metrics curvas"
"envios curvas";
gap: 10px;
align-items: start;
}
.proyecto-body .proy-kpi-row1 { grid-area: rings; }
.proyecto-body .proy-kpi-row2 { grid-area: metrics; }
.proyecto-body .proy-kpi-envios-row { grid-area: envios; }
.proyecto-body .proyecto-curva-s { grid-area: curvas; }
/* En el layout 2-col, los 6 KPIs de docs ya NO son 6x1 sino 2x3
(2 columnas, 3 filas) para entrar en la col izquierda. */
.proyecto-body .proy-kpi-row2 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
/* Enviados en rango — que siga compacto a la izquierda (ya lo está). */
.proyecto-body .proy-kpi-envios-row {
padding-top: 0 !important;
}
/* La Curva S ahora ocupa altura desde metrics hasta envios,
se expande verticalmente. El canvas interno sigue en 420px
pero el card card envuelve todo con altura fluida. */
.proyecto-body .proyecto-curva-s {
align-self: stretch;
min-height: 0;
}
}
/* ---------------------------------------------------------
SIDEBAR estilo Claude Design — clase .sb
Port literal de claude_design_v2/styles/shell.css adaptado al
light mode del Dashboard real (colores desde variables.css).
--------------------------------------------------------- */
.sb {
width: 220px;
background: var(--bg-card);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: sticky; /* sticky en vez de fixed → se integra al body flex */
top: 0;
height: 100vh;
overflow: hidden;
z-index: 90;
flex: none; /* no expandir, ancho fijo */
transition: width 200ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.sb.collapsed { width: 60px; }
.sb.collapsed .sb__brand,
.sb.collapsed .sb__section,
.sb.collapsed .sb__item .label,
.sb.collapsed .sb__item .count,
.sb.collapsed .sb__user-txt,
.sb.collapsed .sb__user-menu,
.sb.collapsed .sb__clockline,
.sb.collapsed .sb__counts,
.sb.collapsed .sb__sync-label { display: none; }
.sb.collapsed .sb__collapse i { transform: rotate(180deg); }
.sb.collapsed .sb__item { justify-content: center; padding: 0; height: 34px; }
.sb.collapsed .sb__head { padding: 0 12px; justify-content: center; }
.sb.collapsed .sb__foot { padding: 8px; align-items: center; }
.sb.collapsed .sb__user { padding: 6px; justify-content: center; }
.sb.collapsed .sb__sync { justify-content: center; padding: 4px; }
/* Head: logo + brand */
.sb__head {
height: 56px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border);
flex: none;
}
.sb__logo {
width: 28px; height: 28px;
border-radius: var(--radius-md);
background: var(--text-primary);
color: var(--background);
display: grid; place-items: center;
font-weight: 700;
font-size: 14px;
letter-spacing: -0.03em;
flex: none;
font-family: var(--font-mono);
}
.sb__brand {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
.sb__brand b {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-primary);
white-space: nowrap;
font-family: var(--font-mono);
}
.sb__brand-user {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb__collapse {
width: 28px; height: 28px;
border-radius: var(--radius-md);
color: var(--text-muted);
display: grid; place-items: center;
margin-left: auto;
flex: none;
background: transparent;
border: 0;
cursor: pointer;
transition: all 120ms;
font-size: 11px;
}
.sb__collapse:hover { background: var(--bg-muted); color: var(--text-primary); }
/* Nav groups */
.sb__nav {
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 1px;
overflow-y: auto;
flex: 1;
}
.sb__section {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--text-muted);
padding: 10px 10px 6px;
font-family: var(--font-mono);
}
.sb__item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
height: 34px;
padding: 0 10px;
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 500;
transition: all 120ms;
cursor: pointer;
white-space: nowrap;
width: 100%;
background: transparent;
border: 0;
font-family: var(--font-mono);
text-align: left;
}
.sb__item:hover { background: var(--bg-muted); color: var(--text-primary); }
.sb__item.is-active {
background: var(--bg-muted);
color: var(--text-primary);
}
.sb__item.is-active::before {
content: "";
position: absolute;
left: -8px;
top: 6px; bottom: 6px;
width: 2px;
background: var(--text-primary);
border-radius: 99px;
}
/* Preview del accent en hover */
.sb__item:not(.is-active):hover::before {
content: "";
position: absolute;
left: -8px;
top: 6px; bottom: 6px;
width: 2px;
background: var(--text-muted);
opacity: 0.6;
border-radius: 99px;
}
.sb__item i {
width: 16px; font-size: 13px; text-align: center;
color: inherit;
flex: none;
}
.sb__item .count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: 99px;
padding: 1px 6px;
min-width: 18px;
text-align: center;
}
.sb__item.is-active .count {
color: var(--text-secondary);
background: var(--background);
border-color: var(--border-hover);
}
.sb__item .count:empty { display: none; }
/* Footer */
.sb__foot {
border-top: 1px solid var(--border);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
flex: none;
}
.sb__user {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 120ms;
}
.sb__user:hover { background: var(--bg-muted); }
.sb__user-avatar {
width: 26px; height: 26px;
border-radius: var(--radius-md);
background: var(--primary);
color: var(--primary-text);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: -0.02em;
flex: none;
}
.sb__user-txt { flex: 1; min-width: 0; }
.sb__user-name {
font-size: 0.76rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb__user-role {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb__user-menu {
width: 22px; height: 22px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
color: var(--text-muted);
flex: none;
}
.sb__user-menu:hover {
background: var(--bg-card);
color: var(--text-primary);
}
/* Clock + date en una fila */
.sb__clockline {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 0 8px;
}
.sb__clock {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1;
position: relative;
}
.sb__clock .clock-ghost {
position: absolute;
inset: 0;
opacity: 0.08;
pointer-events: none;
}
.sb__clock .save-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 99px;
background: var(--success);
margin-left: 4px;
vertical-align: middle;
}
.sb__date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
/* Counters tareas/equipo */
.sb__counts {
display: flex;
gap: 4px;
}
.sb__count {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 8px;
min-width: 0;
}
.sb__count .k {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-mono);
}
.sb__count .v {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
}
/* Sync badge compacto */
.sb__sync {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgb(34 197 94 / .08);
border: 1px solid rgb(34 197 94 / .28);
border-radius: var(--radius-sm);
color: var(--success);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sb__sync.warning { background: rgb(234 179 8 / .08); border-color: rgb(234 179 8 / .28); color: var(--warning); }
.sb__sync.error { background: rgb(239 68 68 / .08); border-color: rgb(239 68 68 / .28); color: var(--destructive); }
.sb__sync-dot {
width: 6px; height: 6px;
border-radius: 99px;
background: currentColor;
box-shadow: 0 0 0 2px currentColor;
opacity: 0.3;
animation: pulse-sync 2s ease-in-out infinite;
}
@keyframes pulse-sync {
0%, 100% { box-shadow: 0 0 0 2px currentColor; opacity: 0.35; }
50% { box-shadow: 0 0 0 4px currentColor; opacity: 0.15; }
}
/* ---------------------------------------------------------
TOPBAR estilo Claude Design — barra superior con breadcrumbs,
buscador central y acciones (sync/notifs/ayuda) a la derecha.
--------------------------------------------------------- */
.topbar {
height: 52px;
padding: 0 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
background: var(--background);
position: sticky;
top: 0;
z-index: 80;
backdrop-filter: blur(8px);
}
.topbar__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text-muted);
font-family: var(--font-mono);
}
.topbar__crumbs .crumb {
text-transform: lowercase;
letter-spacing: 0.02em;
}
.topbar__crumbs .crumb.now {
color: var(--text-primary);
font-weight: 600;
}
.topbar__search {
margin-left: auto;
position: relative;
flex: 0 1 320px;
}
.topbar__search input {
width: 100%;
padding: 6px 60px 6px 30px;
font-size: 0.76rem;
font-family: var(--font-mono);
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
transition: border-color 120ms;
}
.topbar__search input:focus {
outline: none;
border-color: var(--border-hover);
background: var(--bg-card);
}
.topbar__search i.fa-magnifying-glass {
position: absolute;
left: 10px; top: 50%; transform: translateY(-50%);
color: var(--text-muted);
font-size: 11px;
pointer-events: none;
}
.topbar__search .kbd {
position: absolute;
right: 8px; top: 50%; transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
letter-spacing: 0.04em;
pointer-events: none;
}
.topbar__right {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
.topbar__sync {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgb(34 197 94 / .08);
border: 1px solid rgb(34 197 94 / .28);
border-radius: 99px;
color: var(--success);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
}
.topbar__sync .sync__dot {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--success);
box-shadow: 0 0 0 2px rgb(34 197 94 / .2);
animation: pulse-sync 2s ease-in-out infinite;
}
.topbar__sync .sync__time {
opacity: 0.85;
}
.topbar__sync.warning { background: rgb(234 179 8 / .08); border-color: rgb(234 179 8 / .28); color: var(--warning); }
.topbar__sync.warning .sync__dot { background: var(--warning); box-shadow: 0 0 0 2px rgb(234 179 8 / .2); }
.topbar__sync.error { background: rgb(239 68 68 / .08); border-color: rgb(239 68 68 / .28); color: var(--destructive); }
.topbar__sync.error .sync__dot { background: var(--destructive); box-shadow: 0 0 0 2px rgb(239 68 68 / .2); }
.topbar__icon {
width: 32px; height: 32px;
border-radius: var(--radius-md);
background: transparent;
border: 0;
color: var(--text-muted);
display: grid; place-items: center;
cursor: pointer;
position: relative;
transition: all 120ms;
font-size: 13px;
}
.topbar__icon:hover {
background: var(--bg-muted);
color: var(--text-primary);
}
.topbar__icon-dot {
position: absolute;
top: 6px; right: 6px;
width: 6px; height: 6px;
border-radius: 99px;
background: var(--destructive);
border: 1.5px solid var(--background);
}
/* Como .sb ahora es sticky dentro del body flex, NO hace falta padding-left.
El body sigue siendo display:flex (variables.css) y .sb es flex item fixed-width.
.main es el otro flex item con flex:1 (hereda de la clase legacy). */
/* CRÍTICO: el sections.css legacy pone `.main { margin-left: 240px }` asumiendo
el sidebar viejo fijo. Con el nuevo .sb como flex item eso duplica el offset.
Forzar margin-left:0 y max-width libre. */
body > .main {
flex: 1 1 0;
min-width: 0;
margin-left: 0 !important;
max-width: 100% !important;
}
body.sidebar-collapsed > .main {
margin-left: 0 !important;
max-width: 100% !important;
}
/* Esconder el botón toggle legacy (ya integrado en .sb__collapse) */
.sidebar-toggle-btn { display: none !important; }
/* ---------------------------------------------------------
INICIO — adaptación del prototipo Claude Design al Dashboard real
Estructura: hero compacto · 3 KPI cards · 2 cols tareas/notas · week-bar pie
Todo entra sin scroll en ≥1280×800. Respeta light mode + mono + borde sutil.
--------------------------------------------------------- */
/* Hero */
#sec-inicio .home-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 60px;
margin-bottom: 12px;
padding: 0 4px;
}
#sec-inicio .home-hero__left {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
#sec-inicio .home-hero h1 {
margin: 0;
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.15;
font-family: var(--font-sans);
}
#sec-inicio .home-hero__sub {
font-size: 0.8rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
#sec-inicio .home-hero__actions {
display: flex;
gap: 8px;
flex: none;
}
/* Fila KPI cards hero (3 cols) */
#sec-inicio .home-kpi {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
@media (max-width: 1100px) {
#sec-inicio .home-kpi { grid-template-columns: 1fr; }
}
#sec-inicio .kpi-card {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#sec-inicio .kpi-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-sm);
}
#sec-inicio .row--meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#sec-inicio .icon-chip {
width: 24px;
height: 24px;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex: none;
}
#sec-inicio .icon-chip--blue { background: rgb(59 130 246 / .12); color: var(--info); }
#sec-inicio .icon-chip--green { background: rgb(34 197 94 / .12); color: var(--success); }
#sec-inicio .icon-chip--amber { background: rgb(234 179 8 / .14); color: var(--warning); }
#sec-inicio .icon-chip--red { background: rgb(239 68 68 / .12); color: var(--destructive); }
#sec-inicio .icon-chip--purple { background: rgb(168 85 247 / .12); color: var(--purple); }
#sec-inicio .kpi-body {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
overflow: hidden;
}
#sec-inicio .kpi-body__placeholder { padding: 2px 0; }
#sec-inicio .kpi-num {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
color: var(--text-primary);
margin: 2px 0 0;
}
#sec-inicio .kpi-num span {
font-size: 13px;
color: var(--text-muted);
margin-left: 3px;
font-weight: 500;
}
#sec-inicio .row--foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: auto;
min-height: 18px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--text-muted);
}
/* 2 columnas mid: tareas + notas — altura igualada para evitar gap blanco */
#sec-inicio .home-mid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 12px;
margin-bottom: 12px;
align-items: stretch;
}
@media (max-width: 1100px) {
#sec-inicio .home-mid { grid-template-columns: 1fr; }
}
#sec-inicio .home-mid__card {
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
overflow-x: hidden;
}
/* Los contenedores de lista interna crecen para llenar el alto del card */
#sec-inicio .home-mid__card #home-tasks,
#sec-inicio .home-mid__card #home-emails-panel,
#sec-inicio .home-mid__card #home-notes {
flex: 1;
min-height: 0;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* Truncar por elipsis cualquier texto largo dentro de filas densas del home.
Evita que asuntos de correo con cadenas sin espacios disparen scroll horizontal. */
#sec-inicio .tasks-dense__row,
#sec-inicio .notes-dense__row {
min-width: 0;
}
#sec-inicio .tasks-dense__row > *,
#sec-inicio .notes-dense__row > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sec-inicio .notes-dense__row .n-prev {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all; /* por si viene un token sin espacios */
}
/* Prevenir scroll horizontal en cualquier card/panel del Inicio */
#sec-inicio .kpi-card,
#sec-inicio .metric-card,
#sec-inicio .panel,
#sec-inicio .card-hero,
#sec-inicio .week-bar {
min-width: 0;
overflow-x: hidden;
}
#sec-inicio .home-mid__card .card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
#sec-inicio .home-mid__card .card-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.005em;
font-family: var(--font-sans);
}
#sec-inicio .home-mid__card .card-eyebrow {
font-size: 0.6rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
font-family: var(--font-mono);
margin-bottom: 2px;
}
/* Lista densa de tareas — una línea por tarea */
#sec-inicio .tasks-dense { display: flex; flex-direction: column; }
#sec-inicio .tasks-dense__row {
min-height: 26px;
display: grid;
grid-template-columns: 18px 1fr auto auto auto;
align-items: center;
gap: 8px;
padding: 2px 6px;
margin: 0 -6px;
border-radius: var(--radius-sm);
cursor: pointer;
border-bottom: 1px solid var(--border);
font-size: 0.78rem;
}
#sec-inicio .tasks-dense__row:last-child { border-bottom: 0; }
#sec-inicio .tasks-dense__row:hover { background: var(--bg-muted); }
#sec-inicio .tasks-dense__row.is-done .t-title {
color: var(--text-muted);
text-decoration: line-through;
text-decoration-color: var(--text-disabled);
}
#sec-inicio .tasks-dense__row .t-check {
width: 14px;
height: 14px;
border: 1px solid var(--border-hover);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
#sec-inicio .tasks-dense__row.is-done .t-check {
background: var(--success);
border-color: var(--success);
color: #fff;
}
#sec-inicio .tasks-dense__row .t-check i { font-size: 8px; }
#sec-inicio .tasks-dense__row .t-title {
color: var(--text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
#sec-inicio .tasks-dense__row .t-dot {
width: 5px;
height: 5px;
border-radius: 99px;
flex: none;
}
#sec-inicio .tasks-dense__row .t-proj {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text-muted);
background: var(--bg-muted);
padding: 1px 5px;
border-radius: 3px;
border: 1px solid var(--border);
}
#sec-inicio .tasks-dense__row .t-due {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text-muted);
min-width: 44px;
text-align: right;
}
/* Composer de tareas (input rápido) */
#sec-inicio .home-task-composer {
margin-top: 8px;
display: flex;
gap: 6px;
}
#sec-inicio .home-task-composer .input-field:first-child { flex: 1; }
#sec-inicio .home-task-composer #home-task-resp {
width: 110px;
flex: none;
font-size: 0.72rem;
padding: 4px 6px;
}
/* Lista densa de notas — 3 líneas (title / preview / meta) */
#sec-inicio .notes-dense { display: flex; flex-direction: column; }
#sec-inicio .notes-dense__row {
min-height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 6px 6px;
margin: 0 -6px;
border-radius: var(--radius-sm);
border-bottom: 1px solid var(--border);
cursor: pointer;
}
#sec-inicio .notes-dense__row:last-child { border-bottom: 0; }
#sec-inicio .notes-dense__row:hover { background: var(--bg-muted); }
#sec-inicio .notes-dense__row .n-title {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sec-inicio .notes-dense__row .n-prev {
font-size: 0.72rem;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sec-inicio .notes-dense__row .n-meta {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text-muted);
display: flex;
gap: 6px;
}
/* Week bar al pie: 7 celdas horizontales con dots */
#sec-inicio .week-bar {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 8px 14px;
}
#sec-inicio .week-bar__head {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 16px;
align-items: center;
}
#sec-inicio .week-bar__cells {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
#sec-inicio .wb-cell {
height: 40px;
border-radius: var(--radius-sm);
background: var(--bg-muted);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: border-color var(--transition-fast);
}
#sec-inicio .wb-cell:hover { border-color: var(--border-hover); }
#sec-inicio .wb-cell.is-today {
background: var(--bg-card);
border-color: var(--text-primary);
}
#sec-inicio .wb-cell .wb-name {
font-size: 0.6rem;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.06em;
font-family: var(--font-mono);
}
#sec-inicio .wb-cell.is-today .wb-name { color: var(--text-primary); }
#sec-inicio .wb-cell .wb-num {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
}
#sec-inicio .wb-cell.is-today .wb-num { color: var(--text-primary); }
#sec-inicio .wb-cell .wb-dots { display: flex; gap: 2px; }
#sec-inicio .wb-cell .wb-dots span {
width: 4px;
height: 4px;
border-radius: 99px;
background: var(--text-muted);
}
#sec-inicio .wb-cell .wb-dots span.d-green { background: var(--success); }
#sec-inicio .wb-cell .wb-dots span.d-amber { background: var(--warning); }
#sec-inicio .wb-cell .wb-dots span.d-blue { background: var(--info); }
#sec-inicio .wb-cell .wb-dots span.d-red { background: var(--destructive); }
/* ---------------------------------------------------------
CONFIGURACIÓN — layout del prototipo adaptado
Head + body 2-col (nav lateral + content). Respeta light mode.
--------------------------------------------------------- */
#sec-config { padding: 4px 0; }
/* Head */
.cfg-head {
padding: 0 4px 16px;
}
.cfg-head h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.15;
}
.cfg-head__meta {
font-size: 0.76rem;
color: var(--text-secondary);
font-family: var(--font-mono);
margin-top: 4px;
}
/* Body 2-col */
.cfg-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 14px;
align-items: start;
min-height: 0;
}
@media (max-width: 900px) { .cfg-body { grid-template-columns: 1fr; } }
/* Nav lateral */
.cfg-nav {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 6px;
display: flex;
flex-direction: column;
gap: 1px;
position: sticky;
top: 64px;
}
.cfg-nav__item {
display: flex;
align-items: center;
gap: 10px;
height: 36px;
padding: 0 10px;
background: transparent;
border: 0;
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: 0.76rem;
font-weight: 500;
font-family: var(--font-mono);
cursor: pointer;
transition: all 120ms;
text-align: left;
width: 100%;
}
.cfg-nav__item:hover {
background: var(--bg-muted);
color: var(--text-primary);
}
.cfg-nav__item.is-active {
background: var(--bg-muted);
color: var(--text-primary);
box-shadow: inset 0 0 0 1px var(--border-hover);
}
.cfg-nav__item.is-danger {
color: var(--destructive);
}
.cfg-nav__item.is-danger:hover,
.cfg-nav__item.is-danger.is-active {
background: rgb(239 68 68 / .08);
color: var(--destructive);
}
.cfg-nav__item i:first-child {
width: 16px;
font-size: 13px;
text-align: center;
flex: none;
}
.cfg-nav__item span {
flex: 1;
}
.cfg-nav__chev {
font-size: 9px;
opacity: 0.4;
transition: transform 120ms;
}
.cfg-nav__item.is-active .cfg-nav__chev { transform: translateX(2px); opacity: 0.7; }
/* Content */
.cfg-content { min-width: 0; }
/* Section head */
.cfg-sec-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.cfg-sec-head h2 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.cfg-sec-head__sub {
font-size: 0.72rem;
color: var(--text-muted);
font-family: var(--font-mono);
margin-top: 3px;
}
/* Profile section */
.cfg-profile {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px;
}
.cfg-profile__avatar {
display: flex;
align-items: center;
gap: 12px;
}
.cfg-profile__av-circle {
width: 56px; height: 56px;
border-radius: var(--radius-lg);
background: var(--primary);
color: var(--primary-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
flex: none;
}
.cfg-profile__hint {
font-size: 0.62rem;
color: var(--text-muted);
font-family: var(--font-mono);
margin-top: 4px;
}
.cfg-profile__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (max-width: 700px) { .cfg-profile__grid { grid-template-columns: 1fr; } }
.cfg-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cfg-field__l {
font-size: 0.62rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-weight: 500;
}
.cfg-field .input-field {
font-size: 0.78rem;
padding: 6px 10px;
}
.cfg-profile__foot {
display: flex;
gap: 8px;
justify-content: flex-end;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
/* Integrations grid */
.cfg-int-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (max-width: 900px) { .cfg-int-grid { grid-template-columns: 1fr; } }
.cfg-int {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--transition-fast);
}
.cfg-int:hover { border-color: var(--border-hover); }
.cfg-int.is-featured {
border-left: 3px solid var(--success);
padding-left: 13px;
}
.cfg-int__top {
display: flex;
align-items: flex-start;
gap: 10px;
}
.cfg-int__icon {
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: grid; place-items: center;
font-size: 14px;
flex: none;
}
.cfg-int__head {
flex: 1;
min-width: 0;
}
.cfg-int__name {
font-size: 0.86rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cfg-int__sub {
font-size: 0.7rem;
color: var(--text-secondary);
font-family: var(--font-mono);
margin-top: 2px;
}
.cfg-int__body {
display: flex;
flex-direction: column;
gap: 3px;
padding: 6px 10px;
background: var(--bg-muted);
border-radius: var(--radius-md);
border: 1px dashed var(--border);
font-family: var(--font-mono);
font-size: 0.66rem;
}
.cfg-int__meta {
display: flex;
justify-content: space-between;
gap: 10px;
}
.cfg-int__meta-k {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
.cfg-int__meta-v {
color: var(--text-primary);
font-weight: 500;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cfg-int__foot {
display: flex;
gap: 6px;
align-items: center;
padding-top: 4px;
border-top: 1px dashed var(--border);
flex-wrap: wrap;
}
.cfg-int__foot .btn { font-size: 0.68rem; padding: 4px 10px; }
.integration-status--inactive {
background: var(--bg-muted);
color: var(--text-muted);
border: 1px solid var(--border);
padding: 2px 7px;
border-radius: 99px;
font-size: 0.58rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
}
/* Danger zone */
.cfg-danger {
display: flex;
flex-direction: column;
gap: 8px;
}
.cfg-danger__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.cfg-danger__row--fatal {
border-color: rgb(239 68 68 / .4);
background: rgb(239 68 68 / .04);
}
.cfg-danger__t {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cfg-danger__row--fatal .cfg-danger__t { color: var(--destructive); }
.cfg-danger__s {
font-size: 0.7rem;
color: var(--text-muted);
font-family: var(--font-mono);
margin-top: 2px;
}
/* Wrapper panels reubicados */
#my-password-panel-wrap .panel,
#admin-panel-wrap .panel,
#audit-panel-wrap .panel {
margin: 0;
}
#my-password-panel-wrap #my-password-panel,
#admin-panel-wrap #admin-panel,
#audit-panel-wrap #audit-panel {
display: block !important;
}
/* ---------------------------------------------------------
EQUIPO — layout del prototipo adaptado
Head (título + stats inline + filtros + invitar) · Grid 3-col
Cards con avatar lg + status dot + nombre + rol + proyecto chip
+ badge estado + HH bar + acciones. Respeta light mode + mono.
--------------------------------------------------------- */
#sec-equipo {
padding: 4px 0;
}
/* Head */
.team-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 0 4px 16px;
flex-wrap: wrap;
}
.team-head__left h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.15;
}
.team-head__actions {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Stats inline */
.team-stats {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-secondary);
margin-top: 6px;
}
.team-stats b {
color: var(--text-primary);
font-weight: 700;
margin-right: 3px;
}
.team-stats .sep {
width: 1px;
height: 12px;
background: var(--border);
}
.team-stats__tot {
color: var(--text-muted);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.team-stats__tot b { color: var(--text-primary); }
/* Search con icono */
.team-search {
position: relative;
}
.team-search i {
position: absolute;
left: 10px; top: 50%; transform: translateY(-50%);
color: var(--text-muted);
font-size: 11px;
pointer-events: none;
}
.team-search input {
padding: 5px 10px 5px 30px;
width: 220px;
font-size: 0.72rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-mono);
}
.team-search input:focus { outline: none; border-color: var(--border-hover); }
/* Grid */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0;
}
@media (max-width: 1200px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } }
/* Team card */
.team-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
position: relative;
}
.team-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-sm);
}
.team-card.is-selected {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgb(24 24 27 / .08);
}
/* Top: avatar + status dot + menu hover */
.team-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 2px;
position: relative;
}
.team-card__avatar {
width: 42px;
height: 42px;
border-radius: var(--radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.02em;
flex: none;
position: relative;
}
.team-card__st {
position: absolute;
left: 32px;
top: 28px;
width: 14px; height: 14px;
border-radius: 99px;
background: var(--bg-card);
display: grid; place-items: center;
}
.team-card__st-dot {
width: 8px; height: 8px;
border-radius: 99px;
background: var(--text-muted);
}
.team-card__st--pres .team-card__st-dot { background: var(--success); box-shadow: 0 0 0 2px rgb(34 197 94 / .2); }
.team-card__st--remote .team-card__st-dot { background: var(--info); box-shadow: 0 0 0 2px rgb(59 130 246 / .2); }
.team-card__st--field .team-card__st-dot { background: var(--warning); box-shadow: 0 0 0 2px rgb(234 179 8 / .2); }
.team-card__st--out .team-card__st-dot { background: var(--text-muted); box-shadow: 0 0 0 2px rgb(113 113 122 / .2); }
/* Menú acciones (edit/delete) — visible on hover */
.team-card__menu {
position: absolute;
top: -4px;
right: -4px;
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 120ms;
}
.team-card:hover .team-card__menu { opacity: 1; }
.team-card__menu button {
width: 24px; height: 24px;
border-radius: var(--radius-sm);
background: var(--bg-muted);
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
font-size: 10px;
display: grid; place-items: center;
transition: all 120ms;
}
.team-card__menu button:hover {
background: var(--bg-card);
color: var(--text-primary);
border-color: var(--border-hover);
}
/* Nombre + rol */
.team-card__name {
font-size: 0.86rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.005em;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.team-card__role {
font-size: 0.7rem;
color: var(--text-secondary);
font-family: var(--font-mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Proyecto chip + estado badge */
.team-card__proj {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 2px;
}
.team-card__proj-chip {
font-family: var(--font-mono);
font-size: 0.62rem;
background: var(--bg-muted);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
letter-spacing: 0.02em;
}
.team-card__state-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px;
border-radius: 99px;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.04em;
font-family: var(--font-mono);
text-transform: lowercase;
border: 1px solid transparent;
}
.team-card__state-dot {
width: 5px; height: 5px; border-radius: 99px; background: currentColor;
}
.team-card__state-badge--green { background: rgb(34 197 94 / .12); color: var(--success); border-color: rgb(34 197 94 / .28); }
.team-card__state-badge--blue { background: rgb(59 130 246 / .12); color: var(--info); border-color: rgb(59 130 246 / .28); }
.team-card__state-badge--amber { background: rgb(234 179 8 / .14); color: var(--warning); border-color: rgb(234 179 8 / .28); }
.team-card__state-badge--gray { background: var(--bg-muted); color: var(--text-muted); border-color: var(--border); }
/* HH bar */
.team-card__hh {
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.team-card__hh-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.team-card__hh-k {
font-size: 0.58rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-weight: 500;
}
.team-card__hh-v {
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.team-card__hh-v span {
font-size: 0.6rem;
color: var(--text-muted);
margin-left: 3px;
font-weight: 400;
}
.team-card__hh-bar {
height: 3px;
background: var(--bg-muted);
border-radius: 99px;
overflow: hidden;
}
.team-card__hh-fill {
height: 100%;
border-radius: 99px;
transition: width 300ms ease-out;
}
.team-card__hh-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 2px;
}
.team-card__hh-tag {
font-family: var(--font-mono);
font-size: 0.56rem;
padding: 1px 5px;
border-radius: 99px;
border: 1px solid transparent;
font-weight: 600;
letter-spacing: 0.03em;
}
.team-card__hh-tag--amber { background: rgb(234 179 8 / .12); color: var(--warning); border-color: rgb(234 179 8 / .28); }
.team-card__hh-tag--blue { background: rgb(59 130 246 / .12); color: var(--info); border-color: rgb(59 130 246 / .28); }
.team-card__hh-tag--green { background: rgb(34 197 94 / .12); color: var(--success); border-color: rgb(34 197 94 / .28); }
/* Empty state */
.team-empty {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.76rem;
}
.team-empty i {
font-size: 2rem;
opacity: 0.3;
display: block;
margin-bottom: 10px;
}
.team-empty p {
margin: 6px 0;
font-size: 0.84rem;
color: var(--text-secondary);
}
.team-empty small { opacity: 0.7; }
/* ---------------------------------------------------------
DOCUMENTOS — layout del prototipo adaptado
Head (título + meta + acciones) · Tabs por estado · Body 2-col
(filtros izq + tabla der). Respeta light mode + mono del real.
--------------------------------------------------------- */
#sec-documentos {
padding: 4px 0;
}
/* Head */
.docs-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 0 4px 16px;
}
.docs-head__left h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.15;
}
.docs-head__meta {
font-size: 0.76rem;
color: var(--text-secondary);
font-family: var(--font-mono);
margin-top: 4px;
}
.docs-head__actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.docs-head__actions .btn {
font-size: 0.66rem;
padding: 5px 10px;
white-space: nowrap;
}
/* Tabs por estado */
.docs-tabs {
display: flex;
gap: 2px;
padding: 4px;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow-x: auto;
margin-bottom: 14px;
}
.docs-tab {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.74rem;
font-weight: 500;
font-family: var(--font-mono);
cursor: pointer;
white-space: nowrap;
transition: all 120ms;
}
.docs-tab:hover {
background: var(--bg-card);
color: var(--text-primary);
}
.docs-tab.is-active {
background: var(--bg-card);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.docs-tab__dot {
width: 6px;
height: 6px;
border-radius: 99px;
flex: none;
}
.docs-tab__dot--green { background: var(--success); }
.docs-tab__dot--amber { background: var(--warning); }
.docs-tab__dot--red { background: var(--destructive); }
.docs-tab__dot--gray { background: var(--text-muted); }
.docs-tab__dot--blue { background: var(--info); }
.docs-tab__dot--purple { background: var(--purple); }
.docs-tab__n {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text-muted);
padding: 1px 6px;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: 99px;
min-width: 20px;
text-align: center;
}
.docs-tab.is-active .docs-tab__n {
background: var(--bg-app, var(--background));
border-color: var(--border-hover);
color: var(--text-secondary);
}
/* Body 2-col */
.docs-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 12px;
align-items: start;
min-height: 0;
}
@media (max-width: 1100px) {
.docs-body { grid-template-columns: 1fr; }
}
/* Sidebar de filtros */
.docs-filters {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
position: sticky;
top: 64px;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.docs-filters__sect {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border);
}
.docs-filters__sect:last-child { border-bottom: 0; padding-bottom: 0; }
.docs-filters__sect .card-eyebrow {
font-size: 0.58rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
font-family: var(--font-mono);
margin-bottom: 4px;
}
.docs-filter-label {
font-size: 0.66rem;
color: var(--text-muted);
font-family: var(--font-mono);
margin-top: 6px;
display: block;
}
.docs-filters .input-field {
width: 100%;
font-size: 0.72rem;
padding: 5px 8px;
}
/* Tabla wrapper */
.docs-table-wrap {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.docs-list {
display: flex;
flex-direction: column;
}
/* Bulk bar */
.docs-bulk {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--bg-muted);
border-bottom: 1px solid var(--border);
font-size: 0.72rem;
font-family: var(--font-mono);
}
.docs-bulk__count {
color: var(--text-secondary);
}
.docs-bulk__count b { color: var(--text-primary); font-weight: 700; }
.docs-bulk__sep {
width: 1px;
height: 16px;
background: var(--border);
}
.docs-bulk__hint {
color: var(--text-muted);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.docs-bulk .input-field {
font-size: 0.66rem;
padding: 3px 6px;
width: auto;
}
/* ---------------------------------------------------------
CONFIG — card de integración Zoho (más visual que key-value)
Respeta el estilo minimal del Dashboard real: borde sutil,
mono para datos técnicos, accent verde cuando está activo.
--------------------------------------------------------- */
.integration-card {
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-lg, 8px);
background: var(--bg-card);
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"icon meta action"
"icon details details";
gap: 4px 16px;
align-items: start;
margin-bottom: 10px;
transition: border-color var(--transition-fast, 120ms);
}
.integration-card:hover {
border-color: var(--border-hover);
}
.integration-card[data-status="active"] {
border-left: 3px solid var(--green);
padding-left: 15px;
}
.integration-card[data-status="disconnected"] {
border-left: 3px solid var(--text-muted);
padding-left: 15px;
opacity: .82;
}
.integration-card__icon {
grid-area: icon;
width: 42px;
height: 42px;
border-radius: var(--radius-md, 6px);
background: var(--bg-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--text-primary);
flex: none;
}
.integration-card[data-status="active"] .integration-card__icon {
background: rgb(34 197 94 / .12);
color: var(--green);
}
.integration-card__meta {
grid-area: meta;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.integration-card__title {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.integration-card__subtitle {
font-size: 0.72rem;
color: var(--text-secondary);
font-family: var(--font-mono);
word-break: break-all;
}
.integration-card__action {
grid-area: action;
display: flex;
gap: 6px;
align-items: flex-start;
}
.integration-card__details {
grid-area: details;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--text-muted);
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.integration-card__details span {
display: inline-flex;
gap: 4px;
align-items: center;
}
.integration-card__details b {
color: var(--text-secondary);
font-weight: 500;
}
/* Status pill compact para el título */
.integration-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 99px;
font-size: 0.58rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
}
.integration-status--active {
background: rgb(34 197 94 / .12);
color: var(--green);
border: 1px solid rgb(34 197 94 / .28);
}
.integration-status--active::before {
content: "";
width: 6px; height: 6px;
border-radius: 99px;
background: var(--green);
box-shadow: 0 0 0 2px rgb(34 197 94 / .2);
animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
0%, 100% { box-shadow: 0 0 0 2px rgb(34 197 94 / .2); }
50% { box-shadow: 0 0 0 4px rgb(34 197 94 / .08); }
}
/* Barra acento de 5px pegada al borde izquierdo del header.
El JS inyecta el color via --accent inline (avColor calculado
por avanceGlobal: verde ≥80, azul ≥50, amarillo <20, default claude).
Ancho 5px para que sea imposible perderla visualmente. */
.proyecto-panel > .proy-panel-header::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 5px;
background: var(--accent, var(--text-tertiary, var(--text-muted)));
opacity: .85;
transition: opacity var(--dur-1) var(--ease-out-soft),
width var(--dur-1) var(--ease-out-soft);
}
.proyecto-panel > .proy-panel-header:hover::before {
opacity: 1;
width: 6px;
}
/* =========================================================
CAPA 14 · CORREOS — port del prototipo screen-mail.jsx
3 cols: folders (180px) / lista threads / preview inline
========================================================= */
/* Reset alias: el prototipo usa --text-tertiary; en el real es --text-muted. */
#sec-correos { --text-tertiary: var(--text-muted, var(--text3)); }
/* Sección ocupa el alto disponible sin scroll de página */
#sec-correos.section.active {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
/* Head */
.mail-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; min-height: 48px;
}
.mail-head__left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mail-head h1 {
margin: 0;
font-size: 22px;
font-weight: var(--fw-semi, 600);
letter-spacing: -0.02em;
color: var(--text-primary, var(--text));
}
.mail-head__actions { display: flex; gap: 8px; align-items: center; }
/* Pill "Conectado" */
.mail-conn {
display: inline-flex; align-items: center; gap: 6px;
height: 26px; padding: 0 12px;
background: var(--green-tint);
border: 1px solid var(--green-edge);
border-radius: var(--radius-full, 9999px);
font-size: 11px;
color: var(--green);
font-weight: var(--fw-medium, 500);
line-height: 1;
}
.mail-conn__dot {
width: 6px; height: 6px; border-radius: 99px;
background: var(--green);
box-shadow: 0 0 0 3px rgb(34 197 94 / .20);
}
.mail-conn__via {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary);
padding-left: 6px;
border-left: 1px solid var(--green-edge);
margin-left: 2px;
}
.mail-conn i { font-size: 9px; }
/* Body 3-col */
.mail-body {
display: grid;
grid-template-columns: 196px minmax(0, 0.9fr) minmax(0, 1.35fr);
gap: 12px;
flex: 1;
min-height: 560px;
}
@media (max-width: 1200px) {
.mail-body { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (max-width: 960px) {
.mail-body { grid-template-columns: 1fr; }
.mail-preview { min-height: 320px; }
}
/* ---------- Folders col ---------- */
.mail-folders {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: 8px 6px;
display: flex; flex-direction: column;
gap: 2px;
overflow: auto;
min-height: 0;
}
.mail-folders__sect {
font-size: 10px;
font-weight: var(--fw-semi, 600);
color: var(--text-tertiary);
letter-spacing: .08em;
padding: 12px 10px 4px;
text-transform: uppercase;
}
.mail-folders__group { display: flex; flex-direction: column; gap: 2px; }
.mail-folder {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 10px;
border: 0; background: transparent;
border-radius: var(--radius-sm);
color: var(--text-secondary, var(--text2));
font-size: 12px;
cursor: pointer;
transition: background var(--dur-1) var(--ease-out),
color var(--dur-1) var(--ease-out);
text-align: left;
font-family: inherit;
width: 100%;
}
.mail-folder:hover { background: var(--bg-hover); color: var(--text-primary, var(--text)); }
.mail-folder.is-active {
background: var(--bg-elevated);
color: var(--text-primary, var(--text));
box-shadow: inset 2px 0 0 var(--blue, var(--claude));
}
.mail-folder i { font-size: 11px; }
.mail-folder__l {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: var(--fw-medium, 500);
}
.mail-folder__n {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary);
}
.mail-folder__n--b {
background: var(--bg-inset);
border: 1px solid var(--border-subtle);
padding: 1px 6px;
border-radius: 99px;
color: var(--text-secondary, var(--text2));
min-width: 18px; text-align: center;
}
/* ---------- List col ---------- */
.mail-list {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
min-height: 0;
overflow: hidden;
}
.mail-list__head {
padding: 8px 10px;
border-bottom: 1px solid var(--border-default);
display: flex; align-items: center;
gap: 8px;
background: var(--bg-inset);
}
.mail-list__head .seg {
display: inline-flex;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 2px;
gap: 2px;
}
.mail-list__head .seg__btn {
border: 0; background: transparent;
padding: 3px 10px;
font-size: 11px;
color: var(--text-secondary, var(--text2));
cursor: pointer;
border-radius: calc(var(--radius-md) - 2px);
font-family: inherit;
font-weight: var(--fw-medium, 500);
transition: background var(--dur-1) var(--ease-out);
}
.mail-list__head .seg__btn.is-active {
background: var(--bg-elevated);
color: var(--text-primary, var(--text));
box-shadow: 0 0 0 1px var(--border-strong, var(--border));
}
.mail-list__search { position: relative; flex: 1; min-width: 0; }
.mail-list__search i {
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
font-size: 11px;
pointer-events: none;
}
.mail-list__search .input {
width: 100%;
padding: 0 10px 0 28px;
height: 28px;
font-size: 12px;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
color: var(--text-primary, var(--text));
outline: none;
font-family: inherit;
transition: border-color var(--dur-1) var(--ease-out);
}
.mail-list__search .input:focus {
border-color: var(--blue, var(--claude));
box-shadow: 0 0 0 2px rgb(59 130 246 / .14);
}
.mail-list__body {
flex: 1;
overflow: auto;
min-height: 0;
}
.mail-list__empty {
padding: 40px 20px;
text-align: center;
color: var(--text-tertiary);
font-size: 12px;
}
/* ---------- Thread row ---------- */
.mail-th {
display: grid;
grid-template-columns: 1fr 6px;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background var(--dur-1) var(--ease-out);
position: relative;
}
.mail-th:hover { background: var(--bg-hover); }
.mail-th.is-active {
background: var(--bg-elevated);
box-shadow: inset 2px 0 0 var(--blue, var(--claude));
}
.mail-th__body { min-width: 0; }
.mail-th__top {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.mail-th__from {
font-size: 12px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-th:not(.is-unread) .mail-th__from {
color: var(--text-secondary, var(--text2));
font-weight: var(--fw-medium, 500);
}
.mail-th__time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary);
flex: none;
}
.mail-th__subj {
font-size: 11.5px;
color: var(--text-primary, var(--text));
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-th:not(.is-unread) .mail-th__subj { color: var(--text-secondary, var(--text2)); }
.mail-th__prev {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-th__meta {
display: flex; gap: 6px; align-items: center;
margin-top: 6px;
}
.mail-th__proj {
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--text-tertiary);
background: var(--bg-inset);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--border-subtle);
max-width: 180px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-th__ico { color: var(--text-tertiary); font-size: 10px; }
.mail-th__count {
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--text-tertiary);
}
.mail-th__dot {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--blue, var(--claude));
margin-top: 8px;
align-self: flex-start;
}
.mail-th:not(.is-unread) .mail-th__dot { background: transparent; }
/* ---------- Preview col ---------- */
.mail-preview {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
min-height: 0;
overflow: hidden;
position: relative;
}
.mail-preview__empty {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px;
color: var(--text-tertiary);
padding: 40px 20px;
text-align: center;
}
.mail-preview__empty i {
font-size: 40px;
opacity: .35;
}
.mail-preview__empty p {
margin: 0;
font-size: 12px;
}
.mail-preview__content {
flex: 1;
display: flex; flex-direction: column;
min-height: 0;
}
.mail-preview__head {
display: flex; align-items: flex-start; gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-default);
}
.mail-preview__subj {
font-size: 15px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
letter-spacing: -0.01em;
line-height: 1.3;
word-break: break-word;
}
.mail-preview__meta {
display: flex; align-items: center;
gap: 8px;
margin-top: 6px;
flex-wrap: wrap;
}
.mail-preview__count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary);
}
.mail-preview__body {
flex: 1;
overflow: auto;
padding: 16px 18px;
font-size: 13px;
line-height: 1.65;
color: var(--text-secondary, var(--text2));
min-height: 0;
}
.mail-preview__body img { max-width: 100%; height: auto; }
.mail-preview__body a { color: var(--blue, var(--claude)); text-decoration: underline; }
.mail-preview__body blockquote {
border-left: 2px solid var(--border-default);
padding-left: 12px;
margin: 8px 0;
color: var(--text-tertiary);
}
.mail-preview__body table { max-width: 100%; font-size: 12px; }
.mail-preview__foot {
padding: 10px 14px;
border-top: 1px solid var(--border-default);
background: var(--bg-inset);
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.mail-preview__foot .btn[disabled] {
opacity: .55;
cursor: not-allowed;
}
/* =========================================================
CAPA 19 · CALENDARIO — head + sidebar estilo prototipo screen-calendar.jsx
Mantiene #ec-calendar (EventCalendar lib) pero aplica el look minimal del prototipo.
========================================================= */
/* Head */
#sec-calendario .cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 48px;
margin-bottom: 12px;
flex-wrap: wrap;
}
#sec-calendario .cal-head__left {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
#sec-calendario .cal-head h1 {
margin: 0;
font-size: 22px;
font-weight: var(--fw-semi, 600);
letter-spacing: -0.02em;
color: var(--text-primary, var(--text));
}
#sec-calendario .cal-head__actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Nav minimal: prev mes / title mono / next / hoy */
#sec-calendario .cal-nav {
display: flex;
align-items: center;
gap: 4px;
}
#sec-calendario .cal-nav__btn {
width: 28px; height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
background: transparent;
border-radius: var(--radius-md);
color: var(--text-secondary, var(--text2));
cursor: pointer;
font-size: 11px;
transition: background var(--dur-1, 120ms) var(--ease-out, ease),
color var(--dur-1, 120ms) var(--ease-out, ease);
}
#sec-calendario .cal-nav__btn:hover {
background: var(--bg-hover);
color: var(--text-primary, var(--text));
}
#sec-calendario .cal-nav__month {
font-family: var(--font-mono);
font-size: 13px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
padding: 0 12px;
letter-spacing: .04em;
text-transform: uppercase;
min-width: 140px;
text-align: center;
}
/* Segmented view switcher */
#sec-calendario .cal-seg {
display: inline-flex;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 2px;
gap: 2px;
}
#sec-calendario .cal-seg .seg__btn {
border: 0;
background: transparent;
padding: 4px 12px;
font-size: 11.5px;
color: var(--text-secondary, var(--text2));
cursor: pointer;
border-radius: calc(var(--radius-md) - 2px);
font-family: inherit;
font-weight: var(--fw-medium, 500);
transition: background var(--dur-1, 120ms) var(--ease-out, ease);
}
#sec-calendario .cal-seg .seg__btn.is-active {
background: var(--bg-elevated);
color: var(--text-primary, var(--text));
box-shadow: 0 0 0 1px var(--border-strong, var(--border));
}
/* Sidebar "Próximos eventos" */
#sec-calendario .cal-side__section {
background: var(--bg-surface);
border: 1px solid var(--border-default, var(--border));
border-radius: var(--radius-lg);
padding: 12px 14px;
margin-bottom: 10px;
}
#sec-calendario .cal-side__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
#sec-calendario .cal-side__count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary, var(--text3));
background: var(--bg-inset);
padding: 1px 7px;
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--border-subtle);
}
/* Rows de próximos eventos */
#sec-calendario .cal-up {
display: flex;
flex-direction: column;
gap: 8px;
}
#sec-calendario .cal-up__row {
display: grid;
grid-template-columns: 8px 1fr;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background var(--dur-1, 120ms) var(--ease-out, ease);
padding-right: 4px;
border-radius: var(--radius-sm);
}
#sec-calendario .cal-up__row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
#sec-calendario .cal-up__row:hover {
background: var(--bg-hover);
}
#sec-calendario .cal-up__dot {
width: 6px; height: 6px;
border-radius: 99px;
margin-top: 6px;
background: var(--text-tertiary, var(--text3));
align-self: flex-start;
}
#sec-calendario .cal-up__dot.kind-tarea { background: var(--blue, var(--claude)); }
#sec-calendario .cal-up__dot.kind-hito { background: var(--green); }
#sec-calendario .cal-up__dot.kind-accion { background: var(--amber, var(--warning)); }
#sec-calendario .cal-up__dot.kind-overdue { background: var(--red); }
#sec-calendario .cal-up__body { min-width: 0; }
#sec-calendario .cal-up__date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary, var(--text3));
letter-spacing: .05em;
text-transform: uppercase;
}
#sec-calendario .cal-up__title {
font-size: 12px;
color: var(--text-primary, var(--text));
font-weight: var(--fw-medium, 500);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sec-calendario .cal-up__proj {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary, var(--text3));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Línea de meta: responsable · apoyo · proyecto — debajo del título */
#sec-calendario .cal-up__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
margin-top: 3px;
font-size: 10.5px;
line-height: 1.3;
}
#sec-calendario .cal-up__resp {
color: var(--text-secondary, var(--text2));
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
#sec-calendario .cal-up__resp i {
font-size: 9px;
opacity: 0.7;
}
#sec-calendario .cal-up__apoyo {
color: var(--text-tertiary, var(--text3));
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
}
#sec-calendario .cal-up__apoyo i {
font-size: 9px;
opacity: 0.6;
}
#sec-calendario .cal-up__empty {
padding: 12px 4px;
text-align: center;
color: var(--text-tertiary, var(--text3));
font-size: 11.5px;
font-family: var(--font-mono);
}
/* Ocultar header legacy (.cal-custom-header) — ya no se usa */
#sec-calendario .cal-custom-header { display: none !important; }
/* =========================================================
CAPA 18 · BÚSQUEDA GLOBAL — dropdown en topbar
========================================================= */
.topbar-search-dd {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
max-height: 420px;
overflow: auto;
background: var(--bg-elevated, var(--bg-surface));
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
z-index: 9999;
padding: 6px 0;
}
.topbar-search-dd__group {
padding: 2px 0;
}
.topbar-search-dd__head {
padding: 6px 12px 4px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary, var(--text3));
letter-spacing: .08em;
text-transform: uppercase;
font-weight: var(--fw-semi, 600);
display: flex;
align-items: center;
gap: 6px;
}
.topbar-search-dd__head i { font-size: 10px; opacity: .6; }
.topbar-search-dd__item {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: center;
padding: 6px 12px;
cursor: pointer;
transition: background var(--dur-1, 120ms) var(--ease-out, ease);
border: 0;
background: transparent;
width: 100%;
text-align: left;
font: inherit;
color: var(--text-primary, var(--text));
}
.topbar-search-dd__item:hover,
.topbar-search-dd__item.is-active {
background: var(--bg-hover);
}
.topbar-search-dd__item i.kind {
font-size: 11px;
color: var(--text-tertiary, var(--text3));
text-align: center;
}
.topbar-search-dd__body { min-width: 0; }
.topbar-search-dd__title {
font-size: 12.5px;
font-weight: var(--fw-medium, 500);
color: var(--text-primary, var(--text));
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-search-dd__title mark {
background: rgb(234 179 8 / .24);
color: inherit;
padding: 0 1px;
border-radius: 2px;
}
.topbar-search-dd__sub {
font-size: 10.5px;
color: var(--text-tertiary, var(--text3));
margin-top: 1px;
font-family: var(--font-mono);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-search-dd__meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-tertiary, var(--text3));
white-space: nowrap;
padding-left: 6px;
}
.topbar-search-dd__empty {
padding: 20px 14px;
text-align: center;
color: var(--text-tertiary, var(--text3));
font-size: 12px;
}
.topbar-search-dd__empty i {
display: block;
font-size: 20px;
opacity: .3;
margin-bottom: 6px;
}
.topbar-search-dd__foot {
padding: 6px 12px;
border-top: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--text-tertiary, var(--text3));
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
.topbar-search-dd__foot .kbd {
padding: 1px 5px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
background: var(--bg-inset);
}
.topbar-search-dd__sep {
height: 1px;
background: var(--border-subtle);
margin: 4px 0;
}
/* =========================================================
CAPA 21 · FIX scrum drag — evitar que hijos de .scrum-card
inicien drags nativos del browser que pisen el handler de la card.
========================================================= */
.scrum-card {
-webkit-user-drag: element;
}
.scrum-card * {
-webkit-user-drag: none;
user-select: none;
}
/* Inputs/textareas dentro del scrum permiten selección (edit inline si aplica) */
.scrum-card input,
.scrum-card textarea {
user-select: text;
}
/* Detalle expandido no debe pisar el drag tampoco */
.scrum-card-detail,
.scrum-card-docs,
.scrum-card-meta,
.scrum-card-proy,
.scrum-card-desc {
pointer-events: auto;
}
/* Los íconos FontAwesome son que en Chrome pueden ser arrastrables como imagen */
.scrum-card i,
.scrum-card svg {
-webkit-user-drag: none;
pointer-events: none;
}
/* Botones del card-actions sí reciben pointer-events (override de arriba) */
.scrum-card-actions button,
.scrum-card-actions button i {
pointer-events: auto;
}
/* =========================================================
CAPA 20 · AUTOCOMPLETE DE ENTREGABLES en modal AC
========================================================= */
.ac-doc-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 260px;
overflow-y: auto;
background: var(--bg-elevated, var(--bg-surface));
border: 1px solid var(--border-default, var(--border));
border-radius: var(--radius-md);
box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
z-index: 10001;
padding: 4px 0;
}
.ac-doc-sug__item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
padding: 7px 12px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--text-primary, var(--text));
transition: background var(--dur-1, 120ms) var(--ease-out, ease);
}
.ac-doc-sug__item:hover,
.ac-doc-sug__item.is-active {
background: var(--bg-hover);
}
.ac-doc-sug__body {
min-width: 0;
flex: 1;
}
.ac-doc-sug__code {
font-family: var(--font-mono);
font-size: 11px;
color: var(--claude, var(--blue));
font-weight: var(--fw-semi, 600);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ac-doc-sug__name {
font-size: 12px;
color: var(--text-primary, var(--text));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ac-doc-sug__code mark,
.ac-doc-sug__name mark {
background: rgb(234 179 8 / .26);
color: inherit;
padding: 0 1px;
border-radius: 2px;
}
.ac-doc-sug__meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10px;
}
.ac-doc-sug__rev {
color: var(--text-tertiary, var(--text3));
padding: 1px 5px;
background: var(--bg-inset);
border: 1px solid var(--border-subtle);
border-radius: 3px;
}
.ac-doc-sug__cat {
padding: 1px 5px;
background: rgb(59 130 246 / .1);
color: var(--blue, var(--claude));
border-radius: 3px;
font-weight: var(--fw-semi, 600);
letter-spacing: .04em;
text-transform: uppercase;
font-size: 9px;
}
.ac-doc-sug__cat--adic {
background: rgb(168 85 247 / .1);
color: var(--purple);
}
.ac-doc-sug__hh {
color: var(--text-secondary, var(--text2));
font-weight: var(--fw-semi, 600);
min-width: 30px;
text-align: right;
}
.ac-doc-sug__empty {
padding: 16px;
text-align: center;
color: var(--text-tertiary, var(--text3));
font-size: 11.5px;
}
/* =========================================================
CAPA 17 · MODAL ACCIONES CORRECTIVAS — port de modal-ac.jsx
Sobrescribe .acc-modal legacy y agrega clases .ac-* del prototipo.
========================================================= */
/* Overlay: centrado, fade-in + blur sutil */
.acc-modal {
position: fixed !important;
inset: 0;
background: rgb(0 0 0 / .55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: none !important;
align-items: center;
justify-content: center;
z-index: 10000;
animation: ac-fade-in 180ms var(--ease-out, ease);
}
.acc-modal.active { display: flex !important; }
@keyframes ac-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes ac-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98) } to { opacity: 1; transform: none } }
/* Modal box: flex column, sin padding (cada sección maneja su padding) */
.acc-modal .acc-modal-box {
width: min(820px, 94vw);
max-height: 88vh;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl, 12px);
box-shadow: 0 20px 56px rgba(0, 0, 0, .28);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 !important;
min-width: 0 !important;
animation: ac-pop-in 180ms var(--ease-out, ease);
}
/* Head */
.acc-modal .ac-head {
padding: 18px 22px;
border-bottom: 1px solid var(--border-default);
display: flex;
align-items: flex-start;
gap: 14px;
}
.acc-modal .ac-head__icon {
width: 36px; height: 36px;
border-radius: var(--radius-md);
background: var(--red-tint, rgb(239 68 68 / .14));
color: var(--red);
display: grid; place-items: center;
flex: none;
font-size: 15px;
}
.acc-modal .ac-head__body { flex: 1; min-width: 0; }
.acc-modal .ac-head__title {
font-size: 17px;
font-weight: var(--fw-semi, 600);
letter-spacing: -0.015em;
color: var(--text-primary, var(--text));
margin: 0;
}
.acc-modal .ac-head__meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-tertiary, var(--text3));
flex-wrap: wrap;
}
.acc-modal .ac-head__meta .desv-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-full, 9999px);
font-weight: var(--fw-semi, 600);
font-size: 10px;
letter-spacing: .04em;
}
.acc-modal .ac-close {
width: 28px; height: 28px;
border-radius: var(--radius-md);
border: 0;
background: transparent;
color: var(--text-tertiary, var(--text3));
display: grid; place-items: center;
flex: none;
cursor: pointer;
transition: background var(--dur-1, 120ms) var(--ease-out, ease),
color var(--dur-1, 120ms) var(--ease-out, ease);
font-size: 14px;
}
.acc-modal .ac-close:hover {
background: var(--bg-hover);
color: var(--red);
}
/* Summary: 4 KPI cells grid */
.acc-modal .ac-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 14px 22px;
background: var(--bg-inset);
border-bottom: 1px solid var(--border-default);
}
.acc-modal .ac-summary > div {
padding: 2px 0;
}
.acc-modal .ac-summary .k {
font-size: 10px;
color: var(--text-tertiary, var(--text3));
text-transform: uppercase;
letter-spacing: .08em;
font-weight: var(--fw-medium, 500);
font-family: var(--font-mono);
}
.acc-modal .ac-summary .v {
font-family: var(--font-mono);
font-size: 20px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
margin-top: 4px;
letter-spacing: -0.02em;
line-height: 1;
}
.acc-modal .ac-summary .v.green { color: var(--green); }
.acc-modal .ac-summary .v.red { color: var(--red); }
.acc-modal .ac-summary .v.amber { color: var(--amber, var(--warning, #eab308)); }
.acc-modal .ac-summary .v.blue { color: var(--blue, var(--claude)); }
/* Progress row */
.acc-modal .ac-progress-wrap {
padding: 10px 22px 12px;
background: var(--bg-inset);
border-bottom: 1px solid var(--border-default);
}
.acc-modal .ac-progress-meta {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary, var(--text2));
margin-bottom: 6px;
}
.acc-modal .ac-progress-hh {
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
}
.acc-modal .ac-progress-docs { color: var(--text-tertiary, var(--text3)); }
.acc-modal .ac-progress-pct {
margin-left: auto;
font-weight: var(--fw-semi, 600);
color: var(--green);
}
.acc-modal .ac-progress-bar {
height: 4px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full, 9999px);
overflow: hidden;
}
.acc-modal .ac-progress-fill {
height: 100%;
background: var(--green);
border-radius: var(--radius-full, 9999px);
transition: width 400ms var(--ease-out, ease);
}
/* Body */
.acc-modal .modal__body {
flex: 1;
overflow: auto;
padding: 0;
min-height: 0;
}
/* List */
.acc-modal .ac-list {
padding: 16px 22px;
}
.acc-modal .ac-list__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
gap: 12px;
}
.acc-modal .ac-list__head h3 {
margin: 0;
font-size: 13px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
}
/* Item — layout rediseñado: barra vertical + título prominente + pill al lado */
.acc-modal .ac-item {
position: relative;
padding: 12px 14px 12px 18px;
border: 1px solid var(--border-subtle);
background: var(--bg-inset);
border-radius: var(--radius-md);
margin-bottom: 6px;
transition: border-color var(--dur-1, 120ms) var(--ease-out, ease);
}
.acc-modal .ac-item:hover { border-color: var(--border-default); }
/* Barra vertical lateral coloreada por estado */
.acc-modal .ac-item::before {
content: "";
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--text-tertiary, var(--text3));
}
.acc-modal .ac-item.estado-pendiente::before { background: var(--amber, var(--warning, #eab308)); }
.acc-modal .ac-item.estado-en_proceso::before { background: var(--blue, var(--claude)); }
.acc-modal .ac-item.estado-completada::before { background: var(--green); }
/* Row superior: título + pill estado + actions */
.acc-modal .ac-item__top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.acc-modal .ac-item__body { flex: 1; min-width: 0; }
.acc-modal .ac-item__title {
font-size: 13.5px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
line-height: 1.35;
word-break: break-word;
}
.acc-modal .ac-item.is-done .ac-item__title {
text-decoration: line-through;
color: var(--text-tertiary, var(--text3));
}
/* Pill de estado a la derecha del título */
.acc-modal .tag-estado {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-full, 9999px);
font-weight: var(--fw-semi, 600);
letter-spacing: .04em;
text-transform: uppercase;
font-size: 9px;
font-family: var(--font-mono);
white-space: nowrap;
flex-shrink: 0;
}
.acc-modal .tag-estado::before {
content: "";
width: 5px; height: 5px;
border-radius: 99px;
background: currentColor;
}
.acc-modal .tag-estado.pendiente { background: rgb(234 179 8 / .12); color: var(--amber, var(--warning, #eab308)); }
.acc-modal .tag-estado.en_proceso { background: rgb(59 130 246 / .12); color: var(--blue, var(--claude)); }
.acc-modal .tag-estado.completada { background: rgb(34 197 94 / .14); color: var(--green); }
/* Meta en una línea: responsable · apoyo · fecha */
.acc-modal .ac-item__meta {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary, var(--text3));
margin-top: 6px;
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
}
.acc-modal .ac-item__meta > span {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Docs: summary compacto clickeable que expande los chips */
.acc-modal .ac-item__docs {
margin-top: 8px;
font-size: 11px;
}
.acc-modal .ac-item__docs-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-secondary, var(--text2));
transition: background var(--dur-1, 120ms) var(--ease-out, ease);
user-select: none;
}
.acc-modal .ac-item__docs-summary:hover { background: var(--bg-hover); }
.acc-modal .ac-item__docs-summary .chev {
font-size: 9px;
transition: transform var(--dur-1, 120ms) var(--ease-out, ease);
color: var(--text-tertiary, var(--text3));
}
.acc-modal .ac-item__docs.is-open .chev { transform: rotate(90deg); }
.acc-modal .ac-item__docs-summary .hh {
font-weight: var(--fw-semi, 600);
color: var(--text-primary, var(--text));
}
.acc-modal .ac-item__docs-summary .pct { color: var(--text-tertiary, var(--text3)); }
.acc-modal .ac-item__docs-summary .count {
margin-left: auto;
color: var(--text-tertiary, var(--text3));
}
.acc-modal .ac-item__docs-chips {
display: none;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
padding: 6px 10px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
}
.acc-modal .ac-item__docs.is-open .ac-item__docs-chips { display: flex; }
.acc-modal .doc-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
background: var(--bg-inset);
border: 1px solid var(--border-subtle);
border-radius: 3px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary, var(--text2));
cursor: pointer;
transition: background var(--dur-1, 120ms) var(--ease-out, ease);
}
.acc-modal .doc-tag:hover { background: var(--bg-hover); }
.acc-modal .ac-item__actions {
display: flex;
gap: 2px;
align-self: flex-start;
flex-shrink: 0;
}
.acc-modal .ac-item__actions button {
width: 24px; height: 24px;
border: 1px solid transparent;
background: transparent;
border-radius: var(--radius-sm);
color: var(--text-tertiary, var(--text3));
cursor: pointer;
font-size: 11px;
display: grid; place-items: center;
transition: background var(--dur-1, 120ms) var(--ease-out, ease),
color var(--dur-1, 120ms) var(--ease-out, ease);
}
.acc-modal .ac-item__actions button:hover {
background: var(--bg-hover);
color: var(--text-primary, var(--text));
border-color: var(--border-default);
}
.acc-modal .ac-item__actions .is-danger:hover { color: var(--red); border-color: var(--red); }
/* Empty state */
.acc-modal .ac-list__empty {
text-align: center;
padding: 24px 20px;
color: var(--text-tertiary, var(--text3));
font-size: 12px;
font-family: var(--font-mono);
}
.acc-modal .ac-list__empty i { font-size: 22px; opacity: .25; display: block; margin-bottom: 6px; }
/* Form (grid 2-col dentro del body) */
.acc-modal .ac-form {
padding: 18px 22px;
margin: 0 22px 18px;
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
background: var(--bg-inset);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.acc-modal .ac-form .col-full { grid-column: 1 / -1; }
.acc-modal .ac-form__eyebrow {
font-size: 10px;
font-weight: var(--fw-semi, 600);
color: var(--text-tertiary, var(--text3));
letter-spacing: .08em;
text-transform: uppercase;
font-family: var(--font-mono);
}
.acc-modal .ac-field-l {
display: block;
font-size: 11px;
color: var(--text-secondary, var(--text2));
margin-bottom: 4px;
font-weight: var(--fw-medium, 500);
}
.acc-modal .ac-form .input-field {
width: 100%;
font-size: 12px;
}
/* Footer */
.acc-modal .modal__foot {
padding: 12px 22px;
border-top: 1px solid var(--border-default);
background: var(--bg-inset);
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Responsive */
@media (max-width: 640px) {
.acc-modal .ac-summary { grid-template-columns: repeat(2, 1fr); }
.acc-modal .ac-form { grid-template-columns: 1fr; }
}
/* Pills de cuenta en team-card: distingue "MIEMBRO" (con cuenta) vs "INVITADO" */
.team-card__account-pill {
display: inline-block;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .06em;
padding: 1px 6px;
border-radius: 3px;
font-weight: var(--fw-semi, 600);
vertical-align: middle;
margin-left: 6px;
line-height: 1.4;
}
.team-card__account-pill--active {
background: var(--green-tint);
color: var(--green);
border: 1px solid var(--green-edge);
}
.team-card__account-pill--invited {
background: var(--bg-inset);
color: var(--text-tertiary, var(--text3));
border: 1px solid var(--border-subtle);
}
.team-card.is-invited { opacity: .88; }
.team-card.is-invited:hover { opacity: 1; }
/* btn-ghost para header del preview (si no existe en legacy) */
#sec-correos .btn.btn-ghost {
background: transparent;
border: 1px solid transparent;
padding: 5px 8px;
color: var(--text-secondary, var(--text2));
font-size: 11px;
}
#sec-correos .btn.btn-ghost:hover {
background: var(--bg-hover);
color: var(--text-primary, var(--text));
border-color: var(--border-default);
}
/* ---------------------------------------------------------
CRONOGRAMA — layout del prototipo adaptado
Head (título + meta + acciones) · Strip compacto (proyecto
+ avance) · Toolbar (leyenda + zoom + scope) · Gantt grid.
Mantiene IDs/selectores del legacy para no romper gantt.js.
--------------------------------------------------------- */
#sec-cronograma.section.active {
padding: 4px 0;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Head — mismo patrón que docs-head */
.gantt-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 0 4px 16px;
}
.gantt-head__left h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.15;
}
.gantt-head__meta {
font-size: 0.76rem;
color: var(--text-secondary);
font-family: var(--font-mono);
margin-top: 4px;
}
.gantt-head__actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.gantt-head__actions .btn {
font-size: 0.66rem;
padding: 5px 10px;
white-space: nowrap;
}
/* Strip compacto: proyecto + avance (en una sola fila si hay espacio) */
.gantt-strip {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 10px;
margin-bottom: 10px;
}
@media (max-width: 900px) {
.gantt-strip { grid-template-columns: 1fr; }
}
.gantt-strip__proj {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.gantt-strip__lbl {
font-size: 0.62rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-mono);
white-space: nowrap;
}
.gantt-strip__proj .input-field {
flex: 1;
font-size: 0.78rem;
padding: 4px 8px;
border-radius: var(--radius-sm);
}
.gantt-strip__kpi {
font-size: 0.64rem !important;
padding: 3px 8px !important;
white-space: nowrap;
}
.gantt-strip__progress {
padding: 8px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 4px;
}
.gantt-strip__progress-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.gantt-strip__progress-lbl {
font-size: 0.62rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-mono);
}
.gantt-strip__progress-pct {
font-family: var(--font-mono);
font-size: 0.92rem;
font-weight: 700;
color: var(--claude);
letter-spacing: -0.01em;
}
.gantt-strip__progress-track {
height: 6px;
background: var(--bg-muted);
border-radius: 99px;
overflow: hidden;
}
.gantt-strip__progress-fill {
height: 100%;
background: var(--claude);
border-radius: 99px;
transition: width .8s cubic-bezier(.22,1,.36,1);
}
.gantt-strip__progress-foot {
display: flex;
justify-content: space-between;
font-size: 0.58rem;
color: var(--text-muted);
font-family: var(--font-mono);
}
/* Toolbar: leyenda + zoom + scope + info */
.gantt-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 12px;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 10px;
}
.gantt-toolbar__sep {
width: 1px;
height: 16px;
background: var(--border);
flex: none;
}
.gantt-toolbar__spacer { flex: 1; }
.gantt-toolbar__lbl {
font-size: 0.62rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-mono);
}
.gantt-toolbar__info {
font-size: 0.7rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
/* Leyenda de estados (swatches de color) */
.gantt-legend {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.gantt-legend__item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.gantt-legend__sw {
display: inline-block;
width: 14px;
height: 8px;
border-radius: 2px;
border: 1px solid transparent;
}
.gantt-legend__sw--done { background: var(--success); }
.gantt-legend__sw--doing { background: var(--info); }
.gantt-legend__sw--late { background: var(--warning); }
.gantt-legend__sw--future {
background: transparent;
border: 1px dashed var(--border-hover);
}
/* Segmented buttons (zoom día/semana/mes + scope TODAS/MÍAS) */
.gantt-seg {
display: inline-flex;
padding: 2px;
gap: 2px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.gantt-seg__btn {
border: 0;
background: transparent;
padding: 3px 10px;
font-size: 0.68rem;
font-family: var(--font-mono);
border-radius: calc(var(--radius-md) - 2px);
cursor: pointer;
color: var(--text-secondary);
white-space: nowrap;
transition: background-color 120ms, color 120ms;
}
.gantt-seg__btn:hover {
color: var(--text-primary);
}
.gantt-seg__btn.is-active {
background: var(--bg-muted);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
/* Container: tarjeta contenedora con bordes redondeados y sombra sutil */
#sec-cronograma .gantt-container {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--bg-card);
overflow: hidden;
flex: 1;
min-height: 0;
box-shadow: var(--shadow-sm);
}
/* Upload zone — refresca bordes y radius al estilo prototipo */
#sec-cronograma .gantt-upload-zone {
margin-top: 4px;
border-radius: var(--radius-lg);
}
/* Responsive: en móvil apilar head__left + actions */
@media (max-width: 720px) {
.gantt-head {
flex-direction: column;
align-items: stretch;
}
.gantt-head__actions {
justify-content: flex-start;
}
.gantt-toolbar {
gap: 8px;
}
.gantt-toolbar__sep { display: none; }
}