/* ============================================================
   HIMALAYA · Resúmenes Semanales — "Amanecer Alpino"
   Fondo claro, partículas 3D, serif editorial + sans limpia
   ============================================================ */

:root {
  --ink: #2e3057;            /* navy de marca */
  --ink-soft: #3d4070;
  --text: #2b2f4a;
  --muted: #6a7090;
  --faint: #9aa0bd;
  --sky-top: #f7fafd;
  --sky-mid: #edf3fa;
  --sky-low: #dfeaf6;
  --gold: #d99a3d;
  --card: #ffffff;
  --paper: #fffdf9;
  --border: rgba(46, 48, 87, 0.12);
  --border-soft: rgba(46, 48, 87, 0.07);
  --shadow-sm: 0 2px 10px rgba(46, 48, 87, 0.06);
  --shadow-md: 0 10px 34px rgba(46, 48, 87, 0.10);
  --shadow-lg: 0 24px 70px rgba(46, 48, 87, 0.18);
  --ok: #1e7f4f;
  --ok-bg: #e5f5ec;
  --err: #b3383c;
  --err-bg: #fdeeee;
  --info: #2563a8;
  --info-bg: #e7f0fa;
  --radius: 18px;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* el atributo hidden siempre gana, aunque la clase defina display */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #ffffff;
  min-height: 100vh;
}

::selection { background: rgba(46, 48, 87, 0.16); }

/* el panel de detalle solo bloquea el scroll de fondo en las páginas con overlay modal
   clásico (body.panel-modal, ver .panel-overlay) — en el resto (panel lateral no
   bloqueante) se deja la clase sin efecto en vez de quitarla del JS */
body.no-scroll { overflow: auto; }
body.panel-modal.no-scroll { overflow: hidden; }

/* ---- Fondo de líneas ---- */
.bg-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.topbar, .container, .login-wrap { position: relative; z-index: 1; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 44px 40px 36px;
  width: 400px;
  max-width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes card-in {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.login-card.shake { animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.login-logo { height: 72px; width: auto; margin-bottom: 18px; }
.login-card h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.login-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin: 0 0 28px;
}
.login-card .field { text-align: left; }

/* ---- Alerta personalizada ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  background: var(--err-bg);
  border: 1px solid rgba(179, 56, 60, 0.22);
  border-left: 3px solid var(--err);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.alert svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--err);
  margin-top: 1px;
}
.alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-body strong { font-size: 13px; color: var(--err); }
.alert-body span { font-size: 12.5px; line-height: 1.5; color: #8a3a3d; }
.alert-in { animation: alert-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes alert-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.field input {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.12);
}

.field select {
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-family: var(--font-body);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field select:hover { border-color: var(--ink-soft); }
.field select:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.12);
}

/* ---- Ojito de la contraseña ---- */
.pass-wrap { position: relative; display: flex; }
.pass-wrap input { flex: 1; padding-right: 44px; }
.eye-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}
.eye-btn:hover { background: rgba(46, 48, 87, 0.07); color: var(--ink); }
.eye-btn svg { width: 18px; height: 18px; }

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.btn:hover { background: var(--ink-soft); box-shadow: var(--shadow-md); }
.btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.btn-block { width: 100%; margin-top: 6px; }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); box-shadow: none; }

/* ============================================================
   RAIL LATERAL (navegación)
   ============================================================ */
body.has-rail { padding-left: 68px; }

.rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 68px;
  z-index: 18;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border-soft);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s;
}
.rail:hover { width: 224px; box-shadow: var(--shadow-lg); }

.rail-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-decoration: none;
}
.rail-logo img { width: 36px; height: 36px; flex: none; }
.rail-logo span {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s 0.05s;
}

.rail-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
}

.rail-item, .rail-logout { flex: none; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s, color 0.18s;
}
.rail-item svg { width: 20px; height: 20px; flex: none; }
.rail-item span { opacity: 0; transition: opacity 0.2s 0.05s; }
.rail:hover .rail-item span,
.rail:hover .rail-logo span { opacity: 1; }
.rail-item:hover { background: rgba(46, 48, 87, 0.06); color: var(--ink); }
.rail-item.active { background: var(--ink); color: #fff; }
.rail-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.22); }

.rail-logout { margin: 10px; flex: none; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* avatar de cuenta de Jira en el topbar (ver jira-config.js): sustituye al antiguo botón
   "Jira" con icono de engranaje + texto, visible ahora en TODAS las páginas, no solo
   Proyectos. Mismo lenguaje visual que .avatar (círculo con inicial), tamaño ajustado al
   topbar. Estado "desconectado" se marca con un anillo dorado + opacidad reducida, en vez
   de ocultar el botón del todo — así el usuario siempre tiene acceso a conectar Jira desde
   cualquier pantalla, no solo desde Proyectos como antes. */
.jira-avatar-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(145deg, var(--ink-soft), var(--ink));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  transition: box-shadow 0.15s, opacity 0.15s;
}
.jira-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.14); }
.jira-avatar-btn.jira-avatar-desconectado {
  background: var(--faint);
  opacity: 0.75;
  box-shadow: 0 0 0 2px var(--gold);
}

.brand-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.topbar .btn { padding: 9px 16px; font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 28px 120px;
}

/* ---- Hero de semana ---- */
.week-hero { text-align: center; margin-bottom: 34px; }
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin: 0 0 10px;
}
.week-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.15;
  white-space: nowrap; /* evita saltos de línea al cambiar de semana */
  min-height: 1.15em;
}

.week-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
/* toggle "Por proyecto/Por persona" de Estadísticas: en su propia fila, debajo de
   Mes/Trimestre/Semestre/Año, centrado igual que el resto de .week-hero */
.period-agrupar-tabs { margin: 14px auto 0; }
.wk-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.wk-btn:hover { background: #fff; box-shadow: var(--shadow-md); }
.wk-btn svg { width: 19px; height: 19px; display: block; }
.wk-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.wk-btn.girando svg { animation: wk-btn-girar 0.9s linear infinite; }
@keyframes wk-btn-girar { to { transform: rotate(360deg); } }

/* ============================================================
   DATEPICKER PERSONALIZADO (estilo extensión, paleta navy)
   ============================================================ */
.dp-anchor { position: relative; }

.dp-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  min-width: 230px;
  justify-content: center;
}
.dp-trigger:hover { border-color: var(--ink-soft); }
.dp-trigger.open {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.12);
}
.dp-trigger > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.dp-trigger .dp-chev { width: 14px; height: 14px; transition: transform 0.2s; }
.dp-trigger.open .dp-chev { transform: rotate(180deg); }

.dp-cal {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 6px -2px rgba(46, 48, 87, 0.10), 0 18px 46px -4px rgba(46, 48, 87, 0.24);
  overflow: hidden;
  animation: dp-in 0.16s cubic-bezier(0.2, 0.8, 0.4, 1);
}
@keyframes dp-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* variante que se reposiciona por JS con position:fixed (crearDatePickerDia, para escapar
   de contenedores con overflow:hidden/auto como .pd-eventos-scroll) — sin transform en la
   animación, porque el transform final lo fija JS según la posición real calculada */
.dp-cal.dp-cal-fixed { animation: dp-in-fixed 0.16s cubic-bezier(0.2, 0.8, 0.4, 1); }
@keyframes dp-in-fixed {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* trigger compacto para el formulario de borrador: el .dp-trigger genérico (usado en la
   cabecera de Resúmenes) es demasiado grande para encajar en una fila junto a inputs de
   11px/padding 4px — este modificador iguala su tamaño real al resto de .pd-fase-manual-field,
   así el borde inferior de todos los campos de la fila queda alineado (align-items:flex-end
   en .pd-fase-manual ya alinea por el borde inferior; el problema era que este trigger, sin
   modificador, tenía mucha más altura que un input normal). */
.pd-borrador-fecha-trigger {
  min-width: 0;
  width: 100%;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  justify-content: flex-start;
  box-shadow: none;
}
.pd-borrador-fecha-trigger svg { width: 13px; height: 13px; flex: none; }
.pd-borrador-fecha-texto, .pd-tp-fecha-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* trigger de date-picker dentro de los chips de fecha de la cabecera del proyecto
   (Cliente/Estimada/Inicio/Fin) y de los campos de estimación manual por tarea — mismo
   componente que .pd-borrador-fecha-trigger, pero sin icono de calendario y con el tamaño
   compacto que ya tenía el <input type="date"> nativo que sustituye */
.pd-tp-fecha-trigger {
  min-width: 0;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
  justify-content: flex-start;
  box-shadow: none;
}
.dp-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.dp-cal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}
.dp-cal-navs { display: flex; gap: 4px; }
.dp-cal-nav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background-color 0.12s, color 0.12s;
}
.dp-cal-nav:hover { background: rgba(46, 48, 87, 0.07); color: var(--ink); }
.dp-cal-nav svg { width: 15px; height: 15px; }

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 12px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.dp-wd {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.dp-wd.weekend { color: var(--gold); }

.dp-days {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px 12px 10px;
}
.dp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  border-radius: 99px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.dp-week:hover { background: rgba(46, 48, 87, 0.07); }
.dp-day {
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  position: relative;
  font-family: var(--font-body);
  line-height: 1;
  z-index: 1;
}
.dp-day.dp-out { color: var(--faint); }
.dp-today { font-weight: 700; color: var(--ink); }
.dp-today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

/* semana seleccionada: sombreado dorado claro */
.dp-week.dp-selweek {
  background: rgba(217, 154, 61, 0.16);
  box-shadow: inset 0 0 0 1px rgba(217, 154, 61, 0.28);
  animation: selweek-in 0.25s ease-out;
}
.dp-week.dp-selweek:hover { background: rgba(217, 154, 61, 0.22); }
.dp-week.dp-selweek .dp-day { color: var(--ink); font-weight: 600; }
@keyframes selweek-in {
  from { background-color: rgba(217, 154, 61, 0); }
  to   { background-color: rgba(217, 154, 61, 0.16); }
}

/* día suelto seleccionado (variante de día, no de semana completa — usada por el
   date-picker de día único de los formularios, p.ej. Inicio/Fin de un borrador) */
.dp-day.dp-day-sel {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.dp-day.dp-day-sel.dp-today::after { background: #fff; }

/* día fuera del rango permitido (p.ej. fuera de las fechas de la Fase borrador padre al
   elegir Inicio/Fin de una tarea borrador): no seleccionable, visualmente apagado */
.dp-day.dp-day-disabled { color: var(--faint); opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.dp-shortcuts { display: flex; border-top: 1px solid var(--border-soft); }
.dp-sc {
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px 4px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--muted);
  border-right: 1px solid var(--border-soft);
  transition: background-color 0.1s, color 0.1s;
}
.dp-sc:last-child { border-right: none; }
.dp-sc:hover { background: rgba(46, 48, 87, 0.07); color: var(--ink); }

/* ============================================================
   KPIs DE LA SEMANA (pantalla completa)
   ============================================================ */
.kpi-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
}
.kpi-value small { font-size: 22px; font-weight: 500; }
.kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 3px;
}

/* vista de KPIs dentro de la página semanal */
#kpiView { animation: card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stats-kpis.kpis3 {
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
  margin-bottom: 20px;
}
.kpis3 .stat-tile { padding: 30px 20px; }
.kpis3 .kpi-value { font-size: 52px; }
.kpis3 .kpi-value small { font-size: 26px; }
.kpis3 .delta { margin-top: 10px; }
.chart-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px 26px;
}
.kpi-chart-big { height: 170px; gap: 8px; margin-top: 12px; }

.delta {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}
.delta.up   { background: var(--ok-bg);  color: var(--ok); }
.delta.down { background: var(--err-bg); color: var(--err); }
.delta.flat { background: rgba(46, 48, 87, 0.07); color: var(--muted); }

.kpi-chart-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 8px;
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
}
.kpi-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 76px;
}
.kpi-bar {
  flex: 1;
  min-height: 5px;
  border: none;
  padding: 0;
  border-radius: 4px 4px 2px 2px;
  background: rgba(46, 48, 87, 0.16);
  cursor: pointer;
  transition: background-color 0.15s;
}
.kpi-bar:hover { background: rgba(46, 48, 87, 0.32); }
.kpi-bar.active { background: var(--ink); }
.kpi-empty-msg { font-size: 12px; color: var(--faint); }

/* ============================================================
   PÁGINA DE ESTADÍSTICAS
   ============================================================ */
.stats-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 34px;
}
.stat-tile {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-tile .kpi-value { font-size: 34px; }

.rank-section { margin-bottom: 40px; }
.rank-section > .view-tabs { margin-bottom: 16px; }
.rank-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rank-section-header .view-tabs { margin-bottom: 0; }
.rank-search { width: 240px; flex: none; }
#rankWrap { transition: opacity 0.2s; }
#rankWrap.updating { opacity: 0.45; pointer-events: none; }
.rank-list {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 8px 0;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid var(--border-soft);
}
.rank-item:last-child { border-bottom: none; }
.rank-item:hover { background: rgba(46, 48, 87, 0.04); }
.rank-item:focus-visible { outline: none; background: rgba(46, 48, 87, 0.07); }
.rank-item .read {
  flex: none;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}
.rank-item:hover .read { gap: 9px; }

/* secciones dentro del panel de detalle */
.panel-sec {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
  margin: 26px 0 16px;
}
.panel-sec:first-child { margin-top: 0; }
.panel-chart { height: 90px; margin-bottom: 6px; }
.panel-chart .kpi-bar { cursor: default; }

/* ---- Sticky notes ---- */
.nota-form { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.nota-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nota-form textarea:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.10);
}
.nota-form .btn { flex: none; padding: 11px 18px; }

.notas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.nota {
  position: relative;
  background: linear-gradient(160deg, #fdf6e3 0%, #faecc8 100%);
  border: 1px solid rgba(217, 154, 61, 0.30);
  border-radius: 4px 14px 14px 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 3px 10px rgba(46, 48, 87, 0.08);
  transform: rotate(-0.4deg);
}
.nota:nth-child(even) { transform: rotate(0.5deg); }
.nota-texto {
  font-size: 13px;
  line-height: 1.6;
  color: #4a3f22;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin-bottom: 10px;
}
.nota-meta { font-size: 10.5px; color: rgba(74, 63, 34, 0.6); font-weight: 600; }
.nota-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(74, 63, 34, 0.45);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.nota-del:hover { background: rgba(217, 154, 61, 0.25); color: #4a3f22; }
.notas-empty { font-size: 13px; color: var(--faint); }

/* ---- Diálogo de confirmación propio ---- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(46, 48, 87, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: alert-in 0.18s ease-out;
}
.confirm-box {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 24px 26px 20px;
  width: 340px;
  max-width: 100%;
  animation: card-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.confirm-box p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-actions .btn { padding: 9px 16px; font-size: 13px; }
.btn-danger { background: var(--err); }
.btn-danger:hover { background: #942e31; }
.btn-danger:disabled { background: rgba(46, 48, 87, 0.15); cursor: not-allowed; }
.pd-confirmar-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .stats-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpis3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile { padding: 14px 10px; }
  .stat-tile .kpi-value { font-size: 26px; }
  .period-tabs .view-tab { padding: 9px 12px; font-size: 12px; }
  .rank-item { padding: 13px 14px; gap: 10px; }
}

/* ============================================================
   PÁGINA CARGA DEL EQUIPO — timeline horizontal
   ============================================================ */

/* escala de color: 1=muy libre .. 5=muy sobrecargado */
:root {
  --n1: #8fddae;
  --n2: #bfe9c9;
  --n3: #7fa8d9;
  --n4: #f3c98a;
  --n5: #e8875a;
}

.load-range-label {
  flex: 1;
  max-width: 320px;
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.load-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.load-legend-scale { display: flex; gap: 3px; }
.load-dot { width: 16px; height: 8px; border-radius: 3px; display: inline-block; }
.load-dot.n1 { background: var(--n1); }
.load-dot.n2 { background: var(--n2); }
.load-dot.n3 { background: var(--n3); }
.load-dot.n4 { background: var(--n4); }
.load-dot.n5 { background: var(--n5); }
.load-legend-text { font-size: 12px; color: var(--muted); font-weight: 600; }
.load-legend-sep { width: 1px; height: 16px; background: var(--border); }
.load-chip {
  font-size: 12px;
  color: var(--faint);
}

#loadWrap { transition: opacity 0.2s; }
#loadWrap.updating { opacity: 0.45; pointer-events: none; }

.timeline {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px 24px;
  overflow-x: auto;
}
.tl-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.tl-person-spacer { flex: none; width: 170px; }
.tl-head-cell {
  flex: 1;
  min-width: 74px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}
.tl-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
}
.tl-row + .tl-row { border-top: 1px solid var(--border-soft); }
.tl-person {
  flex: none;
  width: 170px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tl-person .avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.tl-person-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-cells { flex: 1; display: flex; gap: 8px; }
.tl-cell {
  flex: 1;
  min-width: 74px;
  height: 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 0;
}
.tl-cell:hover { transform: scaleY(1.15); box-shadow: 0 0 0 2px rgba(46, 48, 87, 0.15); }
.tl-cell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink); }
.tl-cell.tl-empty {
  background: repeating-linear-gradient(135deg, var(--border-soft), var(--border-soft) 4px, transparent 4px, transparent 9px);
  cursor: default;
}
.tl-cell.tl-empty:hover { transform: none; box-shadow: none; }
/* vista Planificada (motor de capacidad): la celda muestra el % de carga calculado, y un
   punto marca que hay tareas sin estimar en Jira (que no suman horas al %) */
.tl-cell.tl-pct {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.tl-sin-estimar { font-size: 14px; line-height: 0; color: var(--ink); opacity: 0.55; }
.capacidad-editor { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.capacidad-editor input {
  width: 72px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 13px;
}
.capacidad-editor .btn { padding: 7px 14px; }

.tl-cell.tl-n1 { background: var(--n1); }
.tl-cell.tl-n2 { background: var(--n2); }
.tl-cell.tl-n3 { background: var(--n3); }
.tl-cell.tl-n4 { background: var(--n4); }
.tl-cell.tl-n5 { background: var(--n5); }

.load-tip {
  position: fixed;
  z-index: 30;
  transform: translate(-50%, -100%);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
.load-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}

.load-detail-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
}
.load-detail-badge.tl-n1 { background: var(--n1); }
.load-detail-badge.tl-n2 { background: var(--n2); }
.load-detail-badge.tl-n3 { background: var(--n3); color: #fff; }
.load-detail-badge.tl-n4 { background: var(--n4); }
.load-detail-badge.tl-n5 { background: var(--n5); color: #fff; }

@media (max-width: 900px) {
  .timeline { padding: 16px; }
  .tl-person-spacer, .tl-person { width: 120px; }
  .tl-person-name { font-size: 12px; }
}

/* ============================================================
   COMPARATIVA ENTRE SEMANAS — panel de dos columnas
   ============================================================ */

/* el panel se ensancha cuando se abre la columna B; una única curva
   compartida por todo el gesto (panel + columna) para que se perciban
   como un solo movimiento en vez de dos animaciones descoordinadas */
:root { --compare-ease: cubic-bezier(0.65, 0, 0.35, 1); }

.reader-panel { transition: transform 0.5s var(--compare-ease), width 0.5s var(--compare-ease); }
.reader-panel.wide { width: min(1560px, 96vw); }

.reader-cols {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Columna A: al 50% cuando la B está abierta; a ancho completo si no.
   Se anima por transform (GPU) en vez de flex-basis/width, mucho más fluido. */
.reader-col {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--compare-ease);
  transform-origin: left center;
}

/* columna B: ocupa el hueco reservado por flex-basis desde el principio
   (no anima el flex-basis en sí, que es costoso), y solo revela su
   contenido con un escalado + fundido, sincronizado con el de la A. */
.reader-col-b {
  flex: 0 0 0%;
  min-width: 0;
  border-left: 0px solid var(--border-soft);
  overflow: hidden;
  transition: flex-basis 0.5s var(--compare-ease),
              border-left-width 0.5s var(--compare-ease);
}
.reader-col-b.open {
  flex: 1 1 0%;
  border-left-width: 1px;
}
.reader-col-b-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: min(760px, 90vw); /* ancho de "reposo": evita que el contenido se comprima mientras crece el hueco */
  opacity: 0;
  transform: translateX(28px) scale(0.98);
  transform-origin: left center;
  transition: opacity 0.35s ease 0.12s, transform 0.5s var(--compare-ease) 0.05s;
}
.reader-col-b.open .reader-col-b-inner {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.reader-col-b .reader-body { padding-top: 26px; }

/* pestaña "Comparar con IA": lengüeta pegada al borde izquierdo del panel */
/* Pestaña "Comparar con IA": sin rotación (evita desajustes de bounding
   box al girar elementos posicionados). Es un botón horizontal normal,
   colgado justo del borde izquierdo exterior del panel con right:100%. */
.compare-ai-btn {
  position: absolute;
  top: 22px;
  right: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  z-index: 3;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: var(--card);
  box-shadow: -6px 0 18px rgba(46, 48, 87, 0.12);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: padding 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.compare-ai-btn:hover { padding-right: 20px; box-shadow: -8px 0 22px rgba(46, 48, 87, 0.18); }
.compare-ai-btn:disabled { opacity: 0.7; cursor: default; }
.compare-ai-btn svg { width: 16px; height: 16px; flex: none; }
.compare-ai-btn .exec-spinner { width: 14px; height: 14px; flex: none; }

.compare-week-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compare-week-opt {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.compare-week-opt:hover { border-color: var(--ink-soft); background: rgba(46, 48, 87, 0.05); }

/* resultado de la comparativa IA: sustituye a las dos columnas dentro del propio panel */
.reader-cols.comparing .reader-col:not(.reader-col-result) { display: none; }
.reader-col-result {
  flex: 1 1 auto;
  width: auto;
  animation: card-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.compare-result-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.compare-result-loading .exec-spinner {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

@media (max-width: 860px) {
  .reader-panel.wide { width: 100vw; }
  .reader-cols { flex-direction: column; overflow-y: auto; }
  .reader-col-b.open { flex-basis: auto; }
  .reader-col-b .reader-head, .reader-col-b .reader-body { min-width: 0; }
  .compare-ai-btn { flex-direction: row; width: auto; margin: 0; border-radius: 12px; }
  .reader-col-b { border-left: none; border-top: 0px solid var(--border-soft); }
  .reader-col-b.open { border-top-width: 1px; }
}

/* ---- Pestañas Personas / Proyectos ---- */
.view-tabs {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 0 auto 22px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  box-shadow: var(--shadow-sm);
}
.view-tab {
  border: none;
  background: transparent;
  padding: 9px 24px;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { background: var(--ink); color: #fff; }

/* ---- Tarjetas de proyecto ---- */
.proj-avatar { background: linear-gradient(145deg, #e8b25c, var(--gold)); }
.proj-people { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.avatar-stack { display: flex; flex: none; }
.avatar-stack .avatar {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  border: 2px solid #fff;
  margin-left: -9px;
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.proj-names {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* detalle de proyecto en el panel */
.reader-body.no-pre { white-space: normal; }
.proj-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.proj-row .avatar { width: 38px; height: 38px; font-size: 13px; flex: none; margin-top: 2px; }
/* variante de una sola línea (ej. equipo del proyecto): avatar y nombre centrados entre sí */
.proj-row.proj-row-simple { align-items: center; margin-bottom: 12px; }
.proj-row.proj-row-simple .avatar { margin-top: 0; }
.proj-row.proj-row-simple .proj-row-head { margin-bottom: 0; }

#pdEquipo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 10px;
}
#pdEquipo .avatar { width: 26px; height: 26px; font-size: 10px; }
#pdEquipo .proj-row-head strong { font-size: 12px; }
#pdEquipo .proj-row.proj-row-simple { margin-bottom: 0; min-width: 0; }
#pdEquipo .proj-row-main { min-width: 0; overflow: hidden; }
#pdEquipo .proj-row-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pd-equipo-fila {
  width: 100%;
  border: 1px solid transparent;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pd-equipo-fila:hover { background: rgba(46, 48, 87, 0.05); }
.pd-equipo-fila-activa { background: rgba(201, 162, 39, 0.12); border-color: rgba(201, 162, 39, 0.35); }
.proj-tasks { margin-top: 9px; }
.proj-task {
  position: relative;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 3px 0 3px 15px;
}
.proj-task::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}
.proj-row-main { flex: 1; min-width: 0; }
.proj-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.proj-row-head strong { color: var(--ink); }
.proj-row-head span { color: var(--muted); font-weight: 600; white-space: nowrap; }
.proj-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(46, 48, 87, 0.08);
  overflow: hidden;
}
.proj-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ink-soft), var(--ink));
}

/* ---- Toolbar (filtro) ---- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.search-pill {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.search-pill svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--faint);
}
.search-pill input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 13.5px;
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-pill input:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.10);
}
.result-count { font-size: 12.5px; color: var(--muted); }
/* wrapper del botón "Sincronizar" (topbar, ver sincronizar-jira.js): position:relative +
   flex:none para que el mensaje de progreso, anclado a ESTE wrapper concreto (no a todo
   el topbar), nunca desplace al resto de la barra al aparecer/desaparecer o cambiar de
   longitud. El mensaje se abre hacia la IZQUIERDA del botón: al vivir junto al avatar,
   cerca del borde derecho de la pantalla, abrirlo a la derecha lo sacaría de la ventana */
.sync-btn-wrap { position: relative; display: inline-flex; flex: none; }
.sync-progreso {
  position: absolute;
  right: 100%;
  margin-right: 10px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-style: italic;
  color: var(--gold);
  animation: sync-progreso-parpadeo 1.6s ease-in-out infinite;
}
@keyframes sync-progreso-parpadeo {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---- Actualización en sitio (sin repintado brusco) ---- */
#listWrap, #execWrap { transition: opacity 0.2s; }
#listWrap.updating, #execWrap.updating { opacity: 0.45; pointer-events: none; }
.cards.no-anim .card { animation: none; }

/* ---- Tarjeta de resumen ejecutivo (IA) ---- */
#execWrap { margin-bottom: 18px; }
.exec-card {
  background: linear-gradient(135deg, #fffdf6 0%, #fdf6e8 100%);
  border: 1px solid rgba(217, 154, 61, 0.35);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.exec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.exec-card.static { cursor: default; }
.exec-card.static:hover { transform: none; box-shadow: var(--shadow-sm); }
.exec-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e8b25c, var(--gold));
  color: #fff;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exec-body { flex: 1; min-width: 0; }
.exec-body h3 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.exec-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exec-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.exec-regen {
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background-color 0.15s;
}
.exec-regen:hover { background: rgba(217, 154, 61, 0.12); }
.btn-gold {
  background: linear-gradient(145deg, #e8b25c, var(--gold));
  white-space: nowrap;
}
.btn-gold:hover { background: var(--gold); }
.exec-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}
.exec-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(217, 154, 61, 0.3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Tarjetas de resúmenes ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 48, 87, 0.25), var(--shadow-md);
}
.card-top { display: flex; align-items: center; gap: 12px; }
.avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ink-soft), var(--ink));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
/* avatar de proyecto = icono real de Jira (vía proxy ProyectoAvatar.php) en vez de
   iniciales — mismo círculo/tamaño que .avatar, la imagen rellena todo el círculo.
   .avatar-img-fallback se añade por JS si la imagen no llega a cargar (proxy caído,
   proyecto sin avatar en Jira): en ese caso se quita la imagen rota y el propio
   contenedor pasa a comportarse como el .avatar de iniciales de siempre. */
.avatar-img-wrap { padding: 0; overflow: hidden; background: var(--border-soft); }
.avatar-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-img-wrap.avatar-img-fallback { background: linear-gradient(145deg, var(--ink-soft), var(--ink)); }
.avatar-img-wrap.avatar-img-fallback img { display: none; }

.card-who { min-width: 0; flex: 1; }
.card-who h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-who .email {
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.hours-chip {
  flex: none;
  background: rgba(46, 48, 87, 0.08);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  white-space: nowrap;
}
.excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.3em;
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  font-size: 12px;
  color: var(--faint);
}
.card-foot .read {
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}
.card:hover .card-foot .read { gap: 9px; }

/* ---- Estados vacío / carga ---- */
.empty-state, .loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}
.empty-state svg { width: 50px; height: 50px; color: var(--faint); margin-bottom: 12px; }
.empty-state p { margin: 0; }

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.skeleton {
  height: 172px;
  border-radius: var(--radius);
  background: linear-gradient(100deg,
    rgba(255,255,255,0.65) 40%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.65) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border: 1px solid var(--border-soft);
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .card, .login-card { animation: none; }
  .kpi-panel, .reader-panel { transition: none; }
}

/* ============================================================
   PANEL LATERAL DE LECTURA
   ============================================================ */
/* Dos comportamientos para el mismo componente de panel de detalle, según la página:
   - Por defecto (Estadísticas, Carga del equipo): panel lateral NO bloqueante — sin
     overlay que oscurezca/intercepte, se puede seguir haciendo scroll/click en la lista
     de detrás mientras el panel está abierto (cerrar es solo con ✕ o Escape).
   - body.panel-modal (Resúmenes semanales, index.html): overlay clásico bloqueante,
     como estaba antes — aquí el contenido son tarjetas en grid a ancho completo, no una
     lista de una columna, y "encoger el grid" resultó más aparatoso que mantener el
     overlay de toda la vida. */
.panel-overlay { display: none; }
body.panel-modal .panel-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(46, 48, 87, 0.30);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
body.panel-modal .panel-overlay.open { opacity: 1; pointer-events: auto; }

.reader-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(700px, 94vw);
  background: var(--paper);
  z-index: 21;
  box-shadow: -24px 0 80px rgba(46, 48, 87, 0.25);
  transform: translateX(102%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.reader-panel.open { transform: translateX(0); }

.reader-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border-soft);
}
.reader-head .avatar { width: 48px; height: 48px; font-size: 16px; }
.reader-meta { flex: 1; min-width: 0; }
.reader-meta h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-meta .reader-sub { font-size: 12.5px; color: var(--muted); }
.reader-close {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.reader-close:hover { background: rgba(46, 48, 87, 0.06); color: var(--ink); }
.reader-close svg { width: 17px; height: 17px; display: block; margin: 0 auto; }

.reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 34px 46px 60px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.reader-body h1, .reader-body h2, .reader-body h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.3;
}
.reader-body a { color: var(--ink-soft); }
.reader-body ul, .reader-body ol { padding-left: 22px; }

@media (max-width: 720px) {
  .container { padding: 24px 16px 100px; }
  .topbar { padding: 12px 16px; }
  .week-controls { gap: 8px; }
  .dp-trigger { min-width: 0; flex: 1; }
  .dp-cal { width: min(300px, 92vw); }
  .reader-body { padding: 26px 22px 50px; }
  .reader-head { padding: 16px 18px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-pill { max-width: none; }

  /* el rail pasa a barra inferior */
  body.has-rail { padding-left: 0; padding-bottom: 72px; }
  .rail {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 64px;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border-soft);
  }
  .rail:hover { width: 100%; box-shadow: none; }
  .rail-logo { display: none; }
  .rail-nav { flex-direction: row; justify-content: space-around; padding: 10px 8px; gap: 4px; }
  .rail-item { height: 44px; padding: 0 12px; }
  .rail-item span { display: none; }
  .rail-logout { margin: 10px 8px; }
}

/* ============================================================
   PÁGINA PROYECTOS (Jira)
   ============================================================ */

/* ---- Pantalla de conexión con Jira ---- */
.jira-connect-card {
  max-width: 460px;
  margin: 8vh auto 0;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 40px 36px 36px;
}
.jira-connect-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: rgba(46, 48, 87, 0.08);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.jira-connect-icon svg { width: 28px; height: 28px; }
.jira-connect-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 26px;
}
.jira-connect-card .field { text-align: left; }

/* ---- KPIs (reutiliza .stats-kpis de Estadísticas) ---- */
#projKpis { margin-bottom: 28px; }

/* ---- Filtro de categoría y estado (desplegables custom, como en Jira) ---- */
.proj-cat-dropdown { position: relative; }
.proj-cat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.proj-cat-btn:hover { border-color: var(--ink-soft); }
.proj-cat-btn svg { width: 14px; height: 14px; color: var(--faint); }
.proj-cat-count { color: var(--gold); font-weight: 700; }

.proj-cat-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
}
.proj-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s;
}
.proj-cat-item:hover { background: rgba(46, 48, 87, 0.05); }
.proj-cat-item input { cursor: pointer; }

/* ---- Tabla de proyectos ---- */
#projWrap { transition: opacity 0.2s; }
#projWrap.updating { opacity: 0.45; pointer-events: none; }

.proj-table-wrap {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  overflow-x: auto;
}
.proj-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.proj-table thead th {
  text-align: left;
  padding: 14px 18px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(46, 48, 87, 0.03);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.proj-table tbody tr {
  cursor: pointer;
  transition: background-color 0.12s;
  border-bottom: 1px solid var(--border-soft);
}
.proj-table tbody tr:last-child { border-bottom: none; }
.proj-table tbody tr:hover, .proj-table tbody tr:focus-visible { background: rgba(46, 48, 87, 0.04); outline: none; }
.proj-table td { padding: 14px 18px; color: var(--text); white-space: nowrap; }
.proj-fecha-fin { color: var(--gold); font-weight: 600; }

.proj-name-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.proj-name-cell svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
/* avatar del proyecto (icono real de Jira, con fallback a iniciales) en vez del SVG
   genérico de carpeta que había antes en la celda de nombre de la tabla — mismo tamaño
   base que en Estadísticas (.avatar sin override, 44px) */
.proj-name-avatar { width: 38px; height: 38px; font-size: 13px; flex: none; }

.proj-estado-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}
.proj-estado-pill.preproyecto { background: #fdf0dd; color: #a3690f; }
.proj-estado-pill.en-curso { background: var(--info-bg); color: var(--info); }
.proj-estado-pill.bloqueado { background: var(--err-bg); color: var(--err); }
.proj-estado-pill.finalizado { background: var(--ok-bg); color: var(--ok); }
.proj-estado-pill.mantenimiento { background: rgba(46, 48, 87, 0.08); color: var(--muted); }

/* dropdown de estado editable directamente desde la tabla de Proyectos: componente
   propio (no <select> nativo, cuyo menú desplegable no se puede estilizar de forma
   consistente entre navegadores) — mismo patrón que .proj-cat-dropdown/.proj-cat-menu
   ya usado en el filtro de Categoría, para que todo el menú (fondo, hover, radios) sea
   nuestro y no del sistema operativo. */
.proj-estado-dropdown { position: relative; display: inline-block; }
.proj-estado-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  padding: 5px 10px 5px 12px;
  border-radius: 99px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s;
}
.proj-estado-btn svg { width: 10px; height: 10px; flex: none; opacity: 0.75; transition: transform 0.15s; }
.proj-estado-btn:hover { filter: brightness(0.97); border-color: rgba(46, 48, 87, 0.12); }
.proj-estado-btn:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18); }
.proj-estado-dropdown.abierto .proj-estado-btn svg { transform: rotate(180deg); }
.proj-estado-dropdown.guardando .proj-estado-btn { opacity: 0.6; cursor: wait; pointer-events: none; }
.proj-estado-btn.preproyecto { background: #fdf0dd; color: #a3690f; }
.proj-estado-btn.preproyecto svg { color: #a3690f; }
.proj-estado-btn.en-curso { background: var(--info-bg); color: var(--info); }
.proj-estado-btn.en-curso svg { color: var(--info); }
.proj-estado-btn.bloqueado { background: var(--err-bg); color: var(--err); }
.proj-estado-btn.bloqueado svg { color: var(--err); }
.proj-estado-btn.finalizado { background: var(--ok-bg); color: var(--ok); }
.proj-estado-btn.finalizado svg { color: var(--ok); }
.proj-estado-btn.mantenimiento { background: rgba(46, 48, 87, 0.08); color: var(--muted); }
.proj-estado-btn.mantenimiento svg { color: var(--muted); }

.proj-estado-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 160px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.proj-estado-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s;
}
.proj-estado-opcion:hover { background: rgba(46, 48, 87, 0.05); }
.proj-estado-opcion .proj-estado-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.proj-estado-opcion.activa { background: rgba(46, 48, 87, 0.06); }
.proj-estado-opcion[data-estado="preproyecto"] .proj-estado-dot { background: #a3690f; }
.proj-estado-opcion[data-estado="en_curso"] .proj-estado-dot { background: var(--info); }
.proj-estado-opcion[data-estado="bloqueado"] .proj-estado-dot { background: var(--err); }
.proj-estado-opcion[data-estado="finalizado"] .proj-estado-dot { background: var(--ok); }
.proj-estado-opcion[data-estado="mantenimiento"] .proj-estado-dot { background: var(--muted); }

.proj-team-avatars { display: flex; }
.proj-team-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ink-soft), var(--ink));
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
}
.proj-team-avatar:first-child { margin-left: 0; }
.proj-team-more { background: var(--faint); }

/* ---- Edición de estado/fechas en el panel ---- */
.proj-edit-saved {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ok);
}

/* ---- Modal de configuración de Jira ---- */
.jira-config-box { width: 420px; text-align: left; }
.jira-config-box .field { margin-bottom: 14px; }
.jira-config-current {
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(46, 48, 87, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.jira-config-current:empty { display: none; }
.jira-config-box .confirm-actions { justify-content: space-between; }
.jira-config-box .confirm-actions .btn-danger { margin-right: auto; }

@media (max-width: 720px) {
  .jira-connect-card { margin: 4vh auto 0; padding: 28px 22px; }
  .jira-config-box { width: 100%; }
}

/* ============================================================
   PÁGINA DETALLE DE PROYECTO
   ============================================================ */
.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.pd-back:hover { color: var(--ink); }
.pd-back svg { width: 14px; height: 14px; }

.pd-container {
  max-width: 100%;
  padding-left: 28px;
  padding-right: 28px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px);
  min-height: 0;
}
#pdContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pd-hero { margin-bottom: 8px; flex: none; }
/* avatar del proyecto (icono real de Jira vía proxy, con fallback a iniciales) antes
   del nombre en la cabecera de proyecto-detalle.html */
.pd-hero-con-avatar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pd-hero-avatar { width: 34px; height: 34px; font-size: 12px; }

/* ---- Cabecera: tarjeta de proyecto + tarjeta de equipo, lado a lado ---- */
.pd-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
  flex: none;
}
.pd-tarjeta-proyecto, .pd-tarjeta-equipo { min-width: 0; }

/* fila superior: pill/select de estado + acciones de edición */
.pd-tp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pd-tp-estado-wrap { flex: 1; min-width: 0; }
.pd-tp-estado-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 13px 13px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
/* botón icono "editar" sin fondo (mismo tratamiento de hover que .pd-borrador-icono, ver
   más abajo — agrupados aquí para no duplicar el mismo par de colores dos veces) */
.pd-tp-editar-btn {
  flex: none;
  border: none;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: 6px;
  display: flex;
  border-radius: 8px;
  transition: color 0.15s, background-color 0.15s;
}
.pd-tp-editar-btn svg { width: 16px; height: 16px; }
.pd-tp-editar-btn:hover, .pd-borrador-icono:hover { color: var(--ink); background: rgba(46, 48, 87, 0.06); }
.pd-tp-eliminar-btn:hover, .pd-borrador-eliminar:hover { color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.pd-borrador-exportar:hover { color: var(--gold); background: rgba(201, 162, 39, 0.12); }
.pd-tp-top .btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* fila de fechas: chips con icono/color según origen */
.pd-tp-fechas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}
/* align-items:flex-start (no center): el chip "Límite" (solo texto) y el chip "Inicio —
   Fin" (dos date-pickers + botón copiar, más alto) tienen contenidos de distinta altura;
   con center cada chip se centraba dentro de la fila estirada al alto del más grande,
   descuadrando las etiquetas entre sí. Con flex-start todas las etiquetas quedan siempre
   a la misma altura, sea cual sea el chip más alto. */
.pd-tp-chip { display: flex; align-items: flex-start; gap: 8px; }
.pd-tp-chip-icono {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pd-tp-chip-icono svg { width: 12px; height: 12px; }
.pd-tp-chip-cliente .pd-tp-chip-icono { background: rgba(217, 154, 61, 0.15); color: var(--gold); }
.pd-tp-chip-limite .pd-tp-chip-icono { background: rgba(127, 168, 217, 0.18); color: #5c86b8; }
.pd-tp-chip-estimada .pd-tp-chip-icono { background: rgba(46, 48, 87, 0.08); color: var(--muted); }
.pd-tp-chip-rango .pd-tp-chip-icono { background: rgba(46, 48, 87, 0.08); color: var(--muted); }
.pd-tp-chip-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--faint);
  margin-bottom: 1px;
}
.pd-tp-chip-valor { font-size: 12.5px; color: var(--text); font-weight: 600; }

/* .pd-tp-chip-input ahora es el .dp-anchor que envuelve el trigger del date-picker (ver
   .pd-tp-fecha-trigger) — ya no necesita su propio padding/borde, todo el aspecto visual
   vive en el trigger interno para no duplicar el borde */
.pd-tp-chip-input-rango { display: flex; align-items: center; gap: 6px; }
.pd-tp-chip-input-rango .pd-tp-fecha-trigger { width: 118px; }
.pd-tp-rango-flecha { width: 14px; height: 14px; flex: none; color: var(--muted); }
/* la flecha ahora es un botón funcional ("copiar Inicio en Fin"), no solo decorativo */
.pd-tp-rango-flecha-btn { flex: none; border: none; background: transparent; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.pd-tp-rango-flecha-btn:hover { background: rgba(46, 48, 87, 0.06); color: var(--ink); }
.pd-tp-rango-flecha-btn:hover .pd-tp-rango-flecha { color: var(--ink); }

/* barras de progreso, una por fase (nivel 0), máximo 3 por fila */
.pd-tp-progreso-fases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px;
  max-height: 60px;
  overflow-y: auto;
  padding-right: 4px;
}
.pd-tp-progreso-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-tp-progreso-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pd-tp-progreso-nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-tp-progreso-pct { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pd-tp-progreso-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(46, 48, 87, 0.08);
  overflow: hidden;
}
.pd-tp-progreso-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--gold);
  transition: width 0.2s ease;
}
.pd-tp-progreso-vacio { font-size: 12.5px; color: var(--muted); grid-column: 1 / -1; }

/* ---- Fila principal: calendario + fases, misma altura ---- */
.pd-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.pd-col-cal, .pd-col-fases { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pd-panel {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px 16px;
  margin-bottom: 12px;
}
.pd-panel-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
  padding: 16px 20px 18px;
}

.wk-btn-sm { width: 34px; height: 34px; }
.wk-btn-sm svg { width: 15px; height: 15px; }

/* ---- Cabecera del calendario ---- */
/* barra de herramientas del calendario en 3 zonas (patrón Google Calendar/Notion), en vez
   de un único flex-wrap donde competían 5 grupos de controles heterogéneos sin jerarquía:
   izquierda = CUÁNDO (navegación de fecha), centro = QUÉ VISTA (Calendario/Gantt),
   derecha = QUÉ MOSTRAR (Filtros, colapsados detrás de un botón en vez de 4 checkboxes
   siempre visibles). grid con 3 columnas de igual ancho mantiene el toggle de vista
   centrado de verdad frente al panel, no solo entre los otros dos grupos. */
.pd-cal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* .view-tabs por defecto trae margin:0 auto 22px (pensado para centrarse solo en su propia
   fila) — aquí vive dentro de .pd-cal-header (grid), así que se anula ese margen y se
   reduce el padding para que quepa compacto */
.pd-vista-toggle { margin: 0; padding: 3px; justify-self: start; }
.pd-vista-toggle .view-tab { padding: 6px 14px; font-size: 12px; }
.pd-cal-header-der { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Anual/Mensual vive debajo del botón de Filtros (misma zona derecha) como un sub-ajuste
   discreto, subordinado — solo aparece en modo Gantt, cuando decidir el alcance del eje
   horizontal (todo el proyecto vs. un mes concreto) tiene sentido */
.pd-gantt-rango-toggle { display: flex; align-items: center; gap: 6px; height: 15px; }
/* visibility (no display:none) para que el hueco quede siempre reservado en la columna
   derecha — así .pd-cal-header no cambia de alto al pasar de Calendario a Gantt */
.pd-gantt-rango-toggle-oculto { visibility: hidden; }
.pd-gantt-rango-tab {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.15s;
}
.pd-gantt-rango-tab:hover { color: var(--muted); }
.pd-gantt-rango-tab.active { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pd-gantt-rango-sep { font-size: 11.5px; color: var(--faint); }
.pd-cal-nav { display: flex; align-items: center; gap: 10px; flex: none; justify-self: center; }
/* chip de "filtrado por [miembro]": ahora vive FUERA de .pd-cal-header (ver HTML), con su
   propio margen inferior para separarlo de la barra de herramientas */
.pd-cal-filtro-miembro {
  /* sin align-self, un <button> dentro de un flex-column (.pd-panel-fill) se estira a
     todo el ancho por defecto (align-items:stretch heredado) — así el badge parecía
     ocupar toda la fila con la "X" pegada al nombre, cuando debería encogerse a su
     contenido como cualquier chip/pill */
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(201, 162, 39, 0.12);
  color: var(--ink);
  border-radius: 99px;
  padding: 4px 6px 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  margin-bottom: 10px;
}
.pd-cal-filtro-miembro svg {
  width: 10px;
  height: 10px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.25);
  box-sizing: content-box;
  transition: background-color 0.15s;
}
.pd-cal-filtro-miembro:hover { background: rgba(201, 162, 39, 0.2); }
.pd-cal-filtro-miembro:hover svg { background: rgba(201, 162, 39, 0.4); }
.pd-cal-month {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  min-width: 120px;
  text-align: center;
  white-space: nowrap;
}

/* botón "Filtros" + panel flotante con las 4 capas — antes eran 4 checkboxes siempre
   visibles compitiendo con el resto de la barra; ahora su estado se resume en un solo
   botón (con indicador si algún filtro está desactivado) y el detalle vive en un dropdown */
.pd-cal-filtros-dropdown { position: relative; }
.pd-cal-filtros-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.pd-cal-filtros-btn svg { width: 14px; height: 14px; flex: none; }
.pd-cal-filtros-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.pd-cal-filtros-btn.activo { border-color: var(--gold); color: var(--ink); background: rgba(217, 154, 61, 0.08); }
/* punto dorado: se muestra cuando al menos un filtro de capa está desactivado, para que el
   estado "algo está oculto" siga siendo visible sin necesidad de abrir el panel */
.pd-cal-filtros-btn.tiene-ocultos::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: -2px;
}
.pd-cal-filtros-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 6px -2px rgba(46, 48, 87, 0.10), 0 18px 46px -4px rgba(46, 48, 87, 0.24);
  padding: 8px;
  min-width: 160px;
  animation: dp-in-fixed 0.14s ease-out;
}
.pd-cal-filtros-menu .pd-cal-capa-toggle { width: 100%; justify-content: flex-start; }

.pd-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
/* icono de tarea (distinto del círculo sólido de Fase, para no confundirlos en la lista):
   mismo color por tarea (--tc), pero como trazo de un SVG en vez de relleno de círculo */
.pd-task-icon { width: 14px; height: 14px; flex: none; color: var(--tc, #7fa8d9); margin-top: 3px; }
.pd-n-0 { background: var(--gold); }
.pd-n-1 { background: #7fa8d9; }
.pd-n-2 { background: #8fddae; }

/* ---- Muestras de estilo (leyenda + selector de capas) ---- */
.pd-swatch { width: 16px; height: 12px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pd-swatch-linea { height: 4px; align-self: center; background: #7fa8d9; border-radius: 2px; }
.pd-swatch-barra { background: #7fa8d9; color: #fff; }
.pd-swatch-estimada { background: rgba(127, 168, 217, 0.18); border: 1.5px solid #7fa8d9; }
.pd-swatch-cliente {
  background: transparent;
  border-radius: 50%;
  border: 2px solid #e0433d;
  width: 14px;
  height: 14px;
}

/* ---- Contenedor interno del panel de calendario: grid + lateral de día ---- */
.pd-cal-panel-inner {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.pd-cal-grid-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pd-cal-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* lateral interno del día seleccionado: colapsado por defecto, se abre al hacer click en un día */
.pd-dia-panel-wrap {
  width: 0;
  overflow: hidden;
  flex: none;
  transition: width 0.18s ease;
}
.pd-dia-panel-wrap.visible { width: 240px; }
.pd-dia-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  white-space: nowrap;
}
.pd-dia-panel-cerrar {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex: none;
}
.pd-dia-panel-cerrar svg { width: 16px; height: 16px; }
.pd-dia-panel-cerrar:hover { color: var(--ink); }

/* ---- Calendario: cada semana es un bloque independiente en flujo normal de documento ----
   (flex-column dentro de .pd-cal-semanas-wrap), NO una fila de un grid con overlays
   posicionados por "top" en píxeles. Dentro de una semana: una fila de 7 celdas de día,
   y debajo tantas filas de carril (grid de 7 columnas, contenido en flujo normal) como
   haga falta para líneas de fase / barras límite / barras estimada. El alto de una semana
   crece con sus propios carriles sin afectar a las demás: es estructuralmente imposible
   que una barra invada la semana de abajo, porque no hay ningún posicionamiento absoluto
   calculado a mano — todo es contenido real que el navegador apila él solo. */
.pd-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 2px 4px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2px;
}
.pd-cal-weekdays span {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
/* el bloque de semanas tiene scroll propio (la cabecera L M X J V S D queda fija arriba,
   fuera de este contenedor): cada semana muestra SIEMPRE todas sus barras/líneas, sin
   recorte ni badge "+N" por falta de espacio — si eso hace que el conjunto de semanas no
   quepa en el alto visible del panel, se scrollea en vez de recortar contenido o invadir
   la semana vecina. min-height por semana evita que una semana vacía se vea desproporcio-
   nadamente distinta de una con barras. */
/* las semanas reparten el ESPACIO SOBRANTE del panel entre sí (flex-grow), después de que
   cada una reserve el mínimo real que necesita según su contenido (flex-basis: auto, no un
   valor fijo) — una semana vacía o con pocas barras crece más para ocupar el hueco que deja
   una semana con más contenido, hasta llenar el 100% del alto disponible sin dejar hueco
   vacío debajo del calendario. Si el contenido total de TODAS las semanas ya supera el alto
   disponible (mes muy cargado), flex-grow no tiene sobrante que repartir y cada semana se
   queda en su alto natural — ahí es cuando entra el scroll de overflow-y. */
.pd-cal-semanas-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.pd-cal-semana {
  flex: 1 1 auto;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--border-soft);
  padding-top: 3px;
  padding-bottom: 3px;
}
.pd-cal-semana:first-child { border-top: none; }
.pd-cal-dias-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pd-cal-carriles { display: flex; flex-direction: column; gap: 1px; margin-top: 1px; }
.pd-cal-carril { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

/* al desactivar un filtro de capa (checkbox Fases/Límite/Estimada), los carriles de esa
   capa NO se eliminan del DOM ni dejan de renderizarse — solo se ocultan visualmente con
   visibility:hidden, que reserva su espacio (a diferencia de display:none). Así ninguna
   semana cambia de alto al marcar/desmarcar un filtro, evitando que el calendario entero
   se recoloque. Ver el listener de los checkboxes en proyecto-detalle.js. */
.pd-cal-oculta-fase .pd-cal-linea-fase { visibility: hidden; pointer-events: none; }
.pd-cal-oculta-limite .pd-cal-barra-limite { visibility: hidden; pointer-events: none; }
.pd-cal-oculta-estimada .pd-cal-barra-estimada { visibility: hidden; pointer-events: none; }
/* el marcador de "Entrega a cliente" (anillo + texto) sigue existiendo siempre en el DOM
   (ver esCliente en proyecto-detalle.js) — visibility:hidden en vez de display:none para
   que .pd-cal-cliente-texto siga reservando su línea y la fila de días no cambie de alto */
.pd-cal-oculta-cliente .pd-cal-cliente-ring,
.pd-cal-oculta-cliente .pd-cal-cliente-texto { visibility: hidden; pointer-events: none; }
.pd-cal-oculta-cliente .pd-cal-cliente-dia .pd-cal-daynum { color: inherit; font-weight: inherit; }
.pd-cal-day {
  min-height: 0;
  border-radius: 6px;
  padding: 1px 4px 1px;
  background: transparent;
  transition: background-color 0.12s;
  position: relative;
  cursor: pointer;
}
.pd-cal-day:hover { background: rgba(46, 48, 87, 0.03); }
.pd-cal-out { opacity: 0.35; }
.pd-cal-inrange { background: rgba(46, 48, 87, 0.05); }
.pd-cal-inrange:hover { background: rgba(46, 48, 87, 0.08); }
.pd-cal-daynum { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.pd-cal-inrange .pd-cal-daynum { color: var(--ink); }

/* paleta rotativa por fase/tarea: la misma fila usa el mismo color en su
   línea de Fase, su barra de fecha límite (Jira) y su barra de fecha
   estimada (manual), para relacionarlas visualmente aunque caigan en
   días distintos del calendario */
.pd-tc-1 { --tc: #7fa8d9; }
.pd-tc-2 { --tc: #6bc98d; }
.pd-tc-3 { --tc: #d97fa8; }
.pd-tc-4 { --tc: #d9b25b; }
.pd-tc-5 { --tc: #9a7fd9; }
.pd-tc-6 { --tc: #5bbcd9; }
.pd-cal-linea-fase.pd-tc-1, .pd-cal-barra.pd-tc-1:not(.pd-cal-barra-estimada), .pd-dot.pd-tc-1 { background: var(--tc, #7fa8d9); }
.pd-cal-linea-fase.pd-tc-2, .pd-cal-barra.pd-tc-2:not(.pd-cal-barra-estimada), .pd-dot.pd-tc-2 { background: var(--tc, #6bc98d); }
.pd-cal-linea-fase.pd-tc-3, .pd-cal-barra.pd-tc-3:not(.pd-cal-barra-estimada), .pd-dot.pd-tc-3 { background: var(--tc, #d97fa8); }
.pd-cal-linea-fase.pd-tc-4, .pd-cal-barra.pd-tc-4:not(.pd-cal-barra-estimada), .pd-dot.pd-tc-4 { background: var(--tc, #d9b25b); }
.pd-cal-linea-fase.pd-tc-5, .pd-cal-barra.pd-tc-5:not(.pd-cal-barra-estimada), .pd-dot.pd-tc-5 { background: var(--tc, #9a7fd9); }
.pd-cal-linea-fase.pd-tc-6, .pd-cal-barra.pd-tc-6:not(.pd-cal-barra-estimada), .pd-dot.pd-tc-6 { background: var(--tc, #5bbcd9); }

/* paleta propia para PERSONAS en el modo Equipo de planificación (más colores que la
   paleta de 6 de Fases/proyectos, y elegidos para maximizar el contraste entre sí —
   alternando familias de color en vez de variaciones cercanas del mismo tono).
   Tonos pastel: misma familia de matiz que la versión anterior, pero con más
   luminosidad y saturación moderada para un aspecto más suave. */
.pl-pc-1 { --tc: #e8918d; }
.pl-pc-2 { --tc: #8ec090; }
.pl-pc-3 { --tc: #8fb0e0; }
.pl-pc-4 { --tc: #ecc978; }
.pl-pc-5 { --tc: #c39ce0; }
.pl-pc-6 { --tc: #7fcdc7; }
.pl-pc-7 { --tc: #e0a0c0; }
.pl-pc-8 { --tc: #b0c584; }
.pl-pc-9 { --tc: #d9a26b; }
.pl-pc-10 { --tc: #9ba6e0; }
.pl-pc-11 { --tc: #85cba9; }
.pl-pc-12 { --tc: #e0899c; }
.pd-cal-linea-fase.pl-pc-1, .pl-bar.pl-pc-1, .pd-dot.pl-pc-1, .pl-anual-linea.pl-pc-1 { background: var(--tc, #e8918d); }
.pd-cal-linea-fase.pl-pc-2, .pl-bar.pl-pc-2, .pd-dot.pl-pc-2, .pl-anual-linea.pl-pc-2 { background: var(--tc, #8ec090); }
.pd-cal-linea-fase.pl-pc-3, .pl-bar.pl-pc-3, .pd-dot.pl-pc-3, .pl-anual-linea.pl-pc-3 { background: var(--tc, #8fb0e0); }
.pd-cal-linea-fase.pl-pc-4, .pl-bar.pl-pc-4, .pd-dot.pl-pc-4, .pl-anual-linea.pl-pc-4 { background: var(--tc, #ecc978); }
.pd-cal-linea-fase.pl-pc-5, .pl-bar.pl-pc-5, .pd-dot.pl-pc-5, .pl-anual-linea.pl-pc-5 { background: var(--tc, #c39ce0); }
.pd-cal-linea-fase.pl-pc-6, .pl-bar.pl-pc-6, .pd-dot.pl-pc-6, .pl-anual-linea.pl-pc-6 { background: var(--tc, #7fcdc7); }
.pd-cal-linea-fase.pl-pc-7, .pl-bar.pl-pc-7, .pd-dot.pl-pc-7, .pl-anual-linea.pl-pc-7 { background: var(--tc, #e0a0c0); }
.pd-cal-linea-fase.pl-pc-8, .pl-bar.pl-pc-8, .pd-dot.pl-pc-8, .pl-anual-linea.pl-pc-8 { background: var(--tc, #b0c584); }
.pd-cal-linea-fase.pl-pc-9, .pl-bar.pl-pc-9, .pd-dot.pl-pc-9, .pl-anual-linea.pl-pc-9 { background: var(--tc, #d9a26b); }
.pd-cal-linea-fase.pl-pc-10, .pl-bar.pl-pc-10, .pd-dot.pl-pc-10, .pl-anual-linea.pl-pc-10 { background: var(--tc, #9ba6e0); }
.pd-cal-linea-fase.pl-pc-11, .pl-bar.pl-pc-11, .pd-dot.pl-pc-11, .pl-anual-linea.pl-pc-11 { background: var(--tc, #85cba9); }
.pd-cal-linea-fase.pl-pc-12, .pl-bar.pl-pc-12, .pd-dot.pl-pc-12, .pl-anual-linea.pl-pc-12 { background: var(--tc, #e0899c); }

/* paleta propia para PROYECTOS en planificación (más colores que la paleta de 6 de
   Fases en proyecto-detalle.html, que se deja intacta) — misma estrategia de contraste
   que PALETA_PERSONA pero con tonos propios, para distinguir de un vistazo si una
   captura es del modo Proyectos o del modo Equipo. También en tonos pastel. */
.pl-prc-1 { --tc: #8fb6dd; }
.pl-prc-2 { --tc: #e0ac7a; }
.pl-prc-3 { --tc: #8ecda3; }
.pl-prc-4 { --tc: #cd9bcd; }
.pl-prc-5 { --tc: #e09492; }
.pl-prc-6 { --tc: #82cccc; }
.pl-prc-7 { --tc: #c7c785; }
.pl-prc-8 { --tc: #a3a3e0; }
.pl-prc-9 { --tc: #e0c17e; }
.pl-prc-10 { --tc: #93cd8b; }
.pl-prc-11 { --tc: #cd8fa9; }
.pl-prc-12 { --tc: #86b6cd; }
.pd-cal-linea-fase.pl-prc-1, .pl-bar.pl-prc-1, .pd-dot.pl-prc-1, .pl-anual-linea.pl-prc-1 { background: var(--tc, #8fb6dd); }
.pd-cal-linea-fase.pl-prc-2, .pl-bar.pl-prc-2, .pd-dot.pl-prc-2, .pl-anual-linea.pl-prc-2 { background: var(--tc, #e0ac7a); }
.pd-cal-linea-fase.pl-prc-3, .pl-bar.pl-prc-3, .pd-dot.pl-prc-3, .pl-anual-linea.pl-prc-3 { background: var(--tc, #8ecda3); }
.pd-cal-linea-fase.pl-prc-4, .pl-bar.pl-prc-4, .pd-dot.pl-prc-4, .pl-anual-linea.pl-prc-4 { background: var(--tc, #cd9bcd); }
.pd-cal-linea-fase.pl-prc-5, .pl-bar.pl-prc-5, .pd-dot.pl-prc-5, .pl-anual-linea.pl-prc-5 { background: var(--tc, #e09492); }
.pd-cal-linea-fase.pl-prc-6, .pl-bar.pl-prc-6, .pd-dot.pl-prc-6, .pl-anual-linea.pl-prc-6 { background: var(--tc, #82cccc); }
.pd-cal-linea-fase.pl-prc-7, .pl-bar.pl-prc-7, .pd-dot.pl-prc-7, .pl-anual-linea.pl-prc-7 { background: var(--tc, #c7c785); }
.pd-cal-linea-fase.pl-prc-8, .pl-bar.pl-prc-8, .pd-dot.pl-prc-8, .pl-anual-linea.pl-prc-8 { background: var(--tc, #a3a3e0); }
.pd-cal-linea-fase.pl-prc-9, .pl-bar.pl-prc-9, .pd-dot.pl-prc-9, .pl-anual-linea.pl-prc-9 { background: var(--tc, #e0c17e); }
.pd-cal-linea-fase.pl-prc-10, .pl-bar.pl-prc-10, .pd-dot.pl-prc-10, .pl-anual-linea.pl-prc-10 { background: var(--tc, #93cd8b); }
.pd-cal-linea-fase.pl-prc-11, .pl-bar.pl-prc-11, .pd-dot.pl-prc-11, .pl-anual-linea.pl-prc-11 { background: var(--tc, #cd8fa9); }
.pd-cal-linea-fase.pl-prc-12, .pl-bar.pl-prc-12, .pd-dot.pl-prc-12, .pl-anual-linea.pl-prc-12 { background: var(--tc, #86b6cd); }

/* día actual y día seleccionado */
.pd-cal-hoy .pd-cal-daynum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.pd-cal-seleccionado { outline: 2px solid var(--gold); outline-offset: -2px; }

/* marcador de fecha cliente: mismo anillo "pintado a mano" del date-picker de
   la extensión (en rojo) rodeando el número del día, más un texto manuscrito
   "Entrega a cliente" debajo, con una tipografía de trazo tipo rotulador */
.pd-cal-daynum { margin-left: 8px; }
.pd-cal-cliente-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px;
  height: 17px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pd-cal-cliente-dia .pd-cal-daynum { color: #e0433d; font-weight: 700; }
.pd-cal-cliente-texto {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 17px;
  font-weight: 700;
  color: #e0433d;
  line-height: 1;
  margin-top: 3px;
  transform: rotate(-2deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* línea fina de Fase (versión de Jira): carril propio, más compacto, encima de las barras.
   Vive en flujo normal dentro de su .pd-cal-carril (grid de 7 columnas) — su altura real
   SÍ participa en el cálculo de layout, a diferencia del viejo modelo con top absoluto. */
.pd-cal-linea-fase {
  height: 3px;
  margin: 0 1px;
  border-radius: 2px;
  cursor: pointer;
}
.pd-cal-linea-fase[title]:hover { height: 5px; }
/* Fase BORRADOR: tiene que distinguirse de una fase real a simple vista, no solo con
   opacidad reducida (demasiado sutil, se confundía con una fase real al pasar rápido por el
   calendario). Ahora: sin relleno de color (fondo transparente, no el color sólido de una
   fase real), borde de color más grueso y discontinuo (dashed) — el propio patrón de trazos
   ya comunica "provisional/sin confirmar" independientemente del color de fase que le toque,
   y al no rellenar destaca menos como bloque de color continuo. */
.pd-cal-linea-borrador {
  box-sizing: border-box;
  height: 7px;
  margin-top: -2px;
  background: transparent !important;
  border: 2px dashed var(--tc, #9aa0b8);
  border-radius: 3px;
  box-shadow: none;
}

.pd-cal-barra {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 12px;
  margin: 0 1px;
  border: none;
  border-radius: 3px 0 0 3px;
  padding: 0 5px;
  font-size: 8.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: var(--font-body);
}
.pd-cal-barra-inicio { border-radius: 3px 0 0 3px; margin-left: 2px; }
.pd-cal-barra-fin { border-radius: 0 3px 3px 0; margin-right: 2px; }
.pd-cal-barra-inicio.pd-cal-barra-fin { border-radius: 3px; }

/* barra de fecha estimada (manual): mismo color de tarea que su barra límite,
   pero en vez de opacidad reducida (poco distinguible) usa fondo pastel del
   mismo color + borde sólido + texto coloreado, con los DOS extremos recortados
   en forma de flecha (apuntando hacia atrás al inicio, hacia delante al fin).
   El "borde" se simula con drop-shadow (a diferencia de `border`, SÍ sigue
   la silueta real recortada por clip-path, incluida la punta de flecha). */
.pd-cal-barra-estimada {
  background: rgba(217, 178, 91, 0.22);
  color: #8a6a2a;
  height: 11px;
  filter: drop-shadow(0 0 0 1.2px var(--tc, #d9b25b));
}
.pd-cal-barra-estimada.pd-tc-1 { background: rgba(127, 168, 217, 0.22); color: #3d5c80; }
.pd-cal-barra-estimada.pd-tc-2 { background: rgba(107, 201, 141, 0.22); color: #2e7a4e; }
.pd-cal-barra-estimada.pd-tc-3 { background: rgba(217, 127, 168, 0.22); color: #a3446f; }
.pd-cal-barra-estimada.pd-tc-4 { background: rgba(217, 178, 91, 0.22); color: #8a6a2a; }
.pd-cal-barra-estimada.pd-tc-5 { background: rgba(154, 127, 217, 0.22); color: #6a4aa3; }
.pd-cal-barra-estimada.pd-tc-6 { background: rgba(91, 188, 217, 0.22); color: #2d7690; }

/* ---- Tamaño de barra FIJO, igual en cualquier resolución (modelo Google Calendar / FullCalendar) ----
   Intentar que el tamaño de la barra escalase con el espacio disponible (primero con JS
   midiendo el DOM, luego con container queries/cqh, luego con custom properties calculadas)
   creaba una dependencia circular entre "cuánto mide una barra" y "cuántas caben", frágil en
   cada iteración. Los calendarios de referencia NO escalan el tamaño de evento: lo fijan, y
   lo único que varía con el espacio disponible es CUÁNTOS carriles se muestran (ver
   calcularCupoDiario en proyecto-detalle.js, que ahora es solo aritmética: alto disponible
   dividido entre este alto fijo, sin medir ningún carril ya pintado). Un monitor grande
   muestra MÁS barras, no barras más grandes. */
.pd-cal-day { padding: 3px 5px 3px; }
.pd-cal-daynum { font-size: 10.5px; }
.pd-cal-barra { height: 18px; font-size: 11px; gap: 4px; padding: 0 6px; }
.pd-cal-barra-estimada { height: 16px; }
.pd-cal-cliente-texto { font-size: 17px; }
.pd-cal-cliente-ring { width: 18px; height: 17px; }
.pd-cal-linea-fase { height: 3px; }
.pd-cal-hoy .pd-cal-daynum { width: 16px; height: 16px; }
.pd-cal-weekdays span { font-size: 9px; }
.pd-cal-barra-estimada .pd-cal-barra-txt { color: inherit; }
.pd-cal-barra-estimada.pd-cal-barra-inicio {
  border-radius: 0 4px 4px 0;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  padding-left: 13px;
}
.pd-cal-barra-estimada.pd-cal-barra-fin {
  border-radius: 4px 0 0 4px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  padding-right: 13px;
}
.pd-cal-barra-estimada.pd-cal-barra-inicio.pd-cal-barra-fin {
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  padding-left: 13px;
  padding-right: 13px;
}
.pd-cal-barra-txt { overflow: hidden; text-overflow: ellipsis; }

/* ---- Selector de capas del calendario ---- */
/* filtros de capa del calendario, como chips clicables (mismo lenguaje visual que .view-tab
   en el resto de la app) en vez de checkboxes nativos sin estilo — el checkbox real sigue
   ahí por accesibilidad/teclado, pero visualmente oculto; el estado se refleja en el propio
   chip (borde + fondo cuando está activo, atenuado cuando no). */
.pd-cal-capa-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s, background-color 0.15s, color 0.15s;
}
.pd-cal-capa-toggle:hover { opacity: 0.85; }
.pd-cal-capa-toggle:has(input:checked) {
  opacity: 1;
  color: var(--ink);
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(217, 154, 61, 0.25), var(--shadow-sm);
}
.pd-cal-capa-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Panel de detalle del día ---- */
.pd-dia-fecha {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.pd-dia-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.pd-dia-item:last-child { margin-bottom: 0; }
.pd-dia-item .pd-dot { margin-top: 4px; }
.pd-dia-item-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pd-dia-item-titulo { font-size: 13px; color: var(--text); font-weight: 600; }
.pd-dot.pd-swatch-cliente { background: #e0433d; }

/* ---- Cabecera de la sección de eventos + toggle de pasados ---- */
.pd-eventos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex: none;
}
.pd-eventos-header-izq { display: flex; align-items: center; gap: 14px; }
.pd-eventos-scroll { flex: 1; overflow-y: auto; min-height: 0; }

/* ---- Borradores: tareas planificadas sin issue de Jira todavía ---- */
.pd-badge-borrador {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a6d00;
  background: rgba(201, 162, 39, 0.15);
  border: 1px dashed rgba(201, 162, 39, 0.5);
  border-radius: 5px;
  padding: 2px 6px;
}
/* una Fase/tarea borrador se ve exactamente igual que una real (mismo borde, mismo
   padding) — la única diferencia visual es el badge "Borrador" junto al título */
/* columna a la derecha de una tarea borrador: fecha arriba, editar/eliminar debajo — a
   diferencia de la cabecera de Fase borrador (editar/eliminar en su propia fila junto al
   botón "+"), aquí no hay una segunda fila propia, así que se agrupan bajo la fecha */
.pd-borrador-fecha-col { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pd-borrador-acciones { display: flex; justify-content: flex-end; gap: 4px; }
.pd-borrador-icono {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.pd-borrador-icono svg { width: 13px; height: 13px; }
/* :hover de .pd-borrador-icono/.pd-borrador-eliminar unificado con .pd-tp-editar-btn/
   .pd-tp-eliminar-btn más arriba — mismo componente (icono sin fondo + halo de color al
   pasar el ratón), antes duplicado con valores ligeramente distintos en dos sitios */
.pd-borrador-form { border: 1px dashed rgba(201, 162, 39, 0.5); border-radius: 10px; padding: 10px 12px; background: rgba(201, 162, 39, 0.04); }
.pd-borrador-hint { margin-top: 6px; font-size: 10.5px; color: var(--muted); }
/* .pd-borrador-btn y .pd-fase-manual-guardar/.pd-fase-manual-a-jira (ver más abajo) son
   el mismo componente — botón icono 28×28 con borde, blanco por defecto y dorado cuando
   es la acción de "guardar" — agrupados en un único bloque de reglas */
.pd-borrador-btn, .pd-fase-manual-guardar, .pd-fase-manual-a-jira {
  flex: none;
  width: 28px;
  height: 28px;
  margin-bottom: 1px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
.pd-borrador-btn svg, .pd-fase-manual-guardar svg, .pd-fase-manual-a-jira svg { width: 14px; height: 14px; }
/* :hover blanco solo para las variantes NO doradas (Cancelar); .pd-borrador-guardar y
   .pd-fase-manual-guardar tienen fondo dorado + icono blanco (ver regla más abajo), así
   que ponerlas en blanco en hover dejaba el icono blanco invisible sobre fondo blanco */
.pd-borrador-btn:not(.pd-borrador-guardar):hover,
.pd-fase-manual-a-jira:hover:not(:disabled) { background: #fff; }
.pd-borrador-guardar:hover, .pd-fase-manual-guardar:hover { background: #b8872a; }
.pd-borrador-guardar, .pd-fase-manual-guardar { background: var(--gold); color: #fff; }
.pd-fase-manual-guardar:disabled, .pd-fase-manual-a-jira:disabled {
  background: rgba(46, 48, 87, 0.06);
  color: var(--faint);
  border-color: var(--border);
  cursor: not-allowed;
}
.pd-fase-manual-a-jira.pd-enviando svg { animation: wk-btn-girar 0.9s linear infinite; }

/* barras de tarea BORRADOR: fondo blanco/gris sólido (propio, distinto tanto del fondo del
   calendario como del relleno de color de una barra real) + borde GRUESO de color — con
   fondo transparente (intento anterior) el "hueco" se confundía con el fondo del calendario
   en meses con muchas barras; un fondo sólido propio + borde grueso hace que la tarea
   borrador se note tanto como una real, pero inconfundible por su paleta invertida (fondo
   claro con borde de color, en vez de fondo de color). Selector repetido con .pd-cal-barra
   para IGUALAR la especificidad (0,0,3,0) de las reglas de color sólido por fase
   (.pd-cal-barra.pd-tc-N:not(.pd-cal-barra-estimada), más arriba) — .pd-cal-barra-borrador
   solo tenía 2 clases y esas reglas ganaban por especificidad, pintando el fondo sólido de
   color encima del estilo que se buscaba aquí. */
.pd-cal-barra.pd-cal-barra-borrador:not(.pd-cal-barra-estimada) {
  background: #f3f4f8 !important;
  color: var(--tc, #5c86b8);
  border: 2.5px solid var(--tc, #5c86b8);
}
.pd-cal-barra.pd-cal-barra-borrador.pd-cal-barra-estimada {
  background: #f3f4f8 !important;
  color: var(--tc, #d9b25b);
  filter: drop-shadow(0 0 0 2px var(--tc, #d9b25b));
}
.pd-cal-barra-borrador .pd-cal-barra-txt { color: inherit !important; font-weight: 700; }

/* resaltado de la tarea seleccionada en el panel de Fases: su(s) barra(s)/línea en el
   calendario ganan un contorno dorado y el resto del calendario se atenúa por contraste */
.pd-cal-barra, .pd-cal-linea-fase { transition: opacity 0.15s, filter 0.15s; }
.pd-cal-atenuada { opacity: 0.3; }
.pd-cal-resaltada {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  opacity: 1;
  z-index: 1;
}

/* ---- Vista Gantt: fila por Fase/Tarea, barra horizontal sobre todo el rango del proyecto ----
   Alternativa al calendario mensual (toggle Mes/Gantt en la cabecera del panel). A diferencia
   del calendario, aquí el eje horizontal no está dividido en semanas: cada barra se posiciona
   con left/width en % sobre el ancho total del eje, proporcional a su rango de fechas real
   dentro de rangoGantt() (ver proyecto-detalle.js). */
.pd-gantt-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* tooltip propio del Gantt: aparece al instante junto al cursor sobre una fila de tarea o
   un bloque de Fase, con el nombre y el rango de fechas — sustituye al title nativo del
   navegador, que tiene retraso y no se puede maquetar en dos líneas */
.pd-gantt-tooltip {
  position: fixed;
  z-index: 40;
  max-width: 260px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 18px -4px rgba(46, 48, 87, 0.35);
  pointer-events: none;
  white-space: normal;
}
.pd-gantt-tooltip strong { display: block; font-weight: 700; margin-bottom: 2px; }
.pd-gantt-tooltip span { color: rgba(255, 255, 255, 0.75); }
.pd-gantt-scroll { flex: 1; min-height: 0; overflow: auto; }

/* sin ninguna columna de texto: el Gantt es puramente el dibujo de barras, mismo orden de
   filas (arriba a abajo) que el panel de Fases de al lado — el nombre de cada fila se lee
   ahí, no aquí. La cabecera de meses y las filas ocupan el 100% del ancho disponible. */
.pd-gantt-cabecera {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  min-width: 480px;
  height: 26px;
}
/* en modo mensual la cabecera crece para dar sitio a la fila discreta de números de día
   debajo de la marca de mes (ver .pd-gantt-marca-dia) */
.pd-gantt-cabecera.pd-gantt-cabecera-mes { height: 40px; }
.pd-gantt-marca-mes {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border-soft);
  padding: 4px 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}
/* marca de día, discreta: solo el número, más pequeño y fino que la marca de mes, en una
   segunda fila más abajo — solo se pinta en modo mensual (ver renderGantt) */
.pd-gantt-marca-dia {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}
/* .pd-gantt-cuerpo envuelve las filas + una capa de líneas verticales (hoy / entrega a
   cliente) que atraviesan TODA la altura del gráfico, no solo la cabecera — para que se
   note claramente su posición contra las barras de cualquier fila, no solo arriba */
.pd-gantt-cuerpo { position: relative; min-width: 480px; }
.pd-gantt-lineas-verticales {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.pd-gantt-linea-hoy {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  z-index: 1;
}
.pd-gantt-linea-cliente {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e0433d;
  z-index: 1;
}

/* cada Fase raíz es un BLOQUE ancho, con un alto MÍNIMO bajo (60px, evita que quede
   demasiado fino con 0-1 tareas) que crece según el número real de tareas visibles — sin
   scroll interno ni contenido escondido, y sin dejar hueco vacío grande cuando hay pocas
   tareas (o cuando el filtro de rango del modo mensual solo deja 1-2 visibles). Fondo
   semitransparente muy tenue del color de la fase + borde izquierdo grueso y sólido de ese
   mismo color, en vez de relleno sólido completo. Posicionado/dimensionado según su propio
   rango de fechas real (left/width en % sobre el eje global, igual que cualquier otra
   barra). Las Fases se apilan una debajo de otra en flujo normal; dentro de cada bloque,
   sus tareas ocupan una fila propia cada una, apiladas de arriba a abajo — ver
   bloqueFase()/barrasTarea() en proyecto-detalle.js. */
.pd-gantt-filas { display: flex; flex-direction: column; gap: 14px; padding: 14px 0; }
.pd-gantt-bloque-fase {
  position: relative;
  min-height: 60px;
  border-radius: 10px;
  border-left: 5px solid var(--tc, #7fa8d9);
  background: color-mix(in srgb, var(--tc, #7fa8d9) 12%, transparent);
  padding: 10px 10px 10px 16px;
  transition: opacity 0.15s;
}
/* Fase borrador: mismo lenguaje que el resto de la app (borde discontinuo en vez de
   sólido) aplicado al bloque completo, no solo a una línea */
.pd-gantt-bloque-fase.pd-gantt-bloque-fase-borrador {
  border-left-style: dashed;
}
/* Fase sin fecha_inicio/fecha_fin propias: no hay bloque de color que dibujar, pero sus
   tareas (que sí pueden tener fecha) se siguen mostrando, solo sin el fondo envolvente */
.pd-gantt-bloque-fase-vacio { display: flex; flex-direction: column; gap: 6px; }
.pd-gantt-bloque-fase-filas { display: flex; flex-direction: column; gap: 8px; }
.pd-gantt-fila-tarea { position: relative; min-height: 16px; transition: opacity 0.15s; }

/* ============================================================
   Planificación (planificacion.html): Gantt multi-proyecto — una barra
   sólida por proyecto (todo su rango de Fases), cabecera con marcas
   semanales y panel lateral fijo de proyectos. Reutiliza a propósito el
   motor del Gantt de proyecto-detalle.js (posicionGantt(), colorTarea()/
   paleta pd-tc-N, el sistema de tooltip #pdGanttTooltip) para que ambas
   pantallas se comporten igual — solo el HTML/CSS de la cabecera y las
   barras es distinto (píldoras sólidas en vez de bloques de Fase).
   ============================================================ */
.pl-hero { margin-bottom: 6px; }
/* toggle Proyectos/Equipo: mismo componente pill que .view-tabs (Resúmenes/Gráficas
   etc.), centrado debajo del título, para que se vea como una elección de vista de
   primer nivel y no como un ajuste secundario del Gantt */
.pl-agrupar-toggle { margin: 18px auto 0; }
/* la cabecera (Calendario/Gantt + navegación + Anual/Mensual) reutiliza directamente
   .pd-cal-header/.pd-cal-nav/.pd-gantt-rango-toggle de proyecto-detalle.html — sin
   clases .pl-nav-*/.pl-rango-*/.pl-btn-hoy propias, para que ambas pantallas compartan
   exactamente el mismo componente de cabecera */
.pl-panel { padding-top: 12px; }

/* cuerpo: timeline/calendario (izq, flexible) + panel de proyectos (der, ancho fijo) — el
   panel de Proyectos vive en .pl-body-wrap, así que se ve SIEMPRE en las dos vistas; solo
   .pl-main-content alterna entre el Gantt (#plGanttArea) y el Calendario (#plCalGrid) */
.pl-body-wrap { display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--border-soft); }
.pl-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.pl-gantt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 18px 14px; position: relative; }

.pl-timeline-header { position: relative; height: 34px; flex: none; }
.pl-mes-seg {
  position: absolute; top: 0; height: 100%; border-left: 1px solid var(--border-soft);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); padding: 0 0 0 6px;
}
.pl-semana-tick { position: absolute; top: 16px; font-size: 10px; font-weight: 500; color: var(--muted); transform: translateX(-50%); }
.pl-hoy-badge {
  position: absolute; top: 14px; transform: translate(-50%, 0); background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3;
}

/* overflow-y: auto — en modo Equipo, una persona con proyectos solapados en fecha
   ocupa varias sub-filas y su altura pasa a ser fija (no flex:1 repartido); si la suma
   de alturas excede el alto disponible, esto da scroll en vez de desbordar sin control */
.pl-plot { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
.pl-grid-cols { position: absolute; inset: 0; pointer-events: none; }
.pl-grid-col { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border-soft); }

.pl-rows { position: relative; display: flex; flex-direction: column; height: 100%; }
.pl-row { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; }
.pl-bar {
  position: absolute; height: 15px; border-radius: 999px; display: flex; align-items: center;
  box-shadow: 0 1px 2px rgba(46, 48, 87, 0.15); cursor: default; background: var(--tc, #7fa8d9);
}
.pl-marker {
  position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); width: 13px; height: 13px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--tc, #7fa8d9); z-index: 1;
}
.pl-marker.pl-diamante { border-radius: 3px; transform: translate(-50%, -50%) rotate(45deg); width: 9px; height: 9px; background: var(--tc, #7fa8d9); border: none; }

/* modo Equipo: fila = persona (identificada por el fondo tenue de su color y por el
   checkbox del panel derecho, sin nombre en el propio Gantt), con varias barras — una
   por proyecto en el que participa — sobre el mismo eje temporal. La fila se reparte el
   alto total igual que en modo Proyectos (flex:1); cada barra ocupa (casi) todo ese alto
   en vez de una píldora fina centrada, para que se vea claramente contenida en su fila.
   Si dos o más proyectos se solapan en fecha, cada uno recibe su propia sub-fila con un
   alto proporcional (top/height en % inline, calculados en JS según nº de carriles). */
.pl-row-persona { align-items: stretch; }
.pl-row-persona-track {
  position: relative; flex: 1; border-radius: 0 6px 6px 0;
  /* fondo tenue con el color de la PERSONA (variable --tc de su clase pl-pc-N),
     independiente del color de proyecto que llevan las barras encima. Además, una
     franja sólida pegada al borde izquierdo (más saturada que el resto del fondo) sirve
     de "etiqueta" para distinguir dónde empieza y termina la fila de cada persona,
     sobre todo cuando varias personas tienen una barra a ancho completo seguida y el
     fondo tenue por sí solo se leía como un color continuo sin cortes. */
  background: color-mix(in srgb, var(--tc, transparent) 16%, transparent);
  border-left: 5px solid var(--tc, transparent);
  transition: background-color 0.15s;
}
.pl-row-persona-track:hover { background: color-mix(in srgb, var(--tc, transparent) 26%, transparent); }
.pl-bar-persona { cursor: pointer; transition: filter 0.15s; border-radius: 5px; }
.pl-bar-persona:hover { filter: brightness(0.92); }
.pl-tarea-marca {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 9px;
  /* con la paleta pastel (más clara) un blanco semitransparente perdía contraste —
     un oscuro semitransparente se lee mejor sobre tonos claros */
  background: rgba(46, 48, 87, 0.4); border-radius: 1px; pointer-events: none;
}

/* panel lateral de proyectos: fijo, siempre visible (no dropdown) */
.pl-sidebar { flex: none; width: 330px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; padding: 14px 14px 12px; }
.pl-sidebar h3 { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.pl-sidebar-search { position: relative; margin-bottom: 8px; flex: none; }
.pl-sidebar-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--faint); }
.pl-sidebar-search input {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px 7px 28px;
  font-size: 12px; font-family: var(--font-body); color: var(--text); background: rgba(46, 48, 87, 0.02);
}
.pl-sidebar-search input:focus { outline: none; border-color: var(--ink); }
/* dos filtros (Estado + Categoría) en la misma fila, reutilizando el componente
   .proj-cat-dropdown/.proj-cat-btn/.proj-cat-menu de proyectos.html tal cual — solo se
   ajusta aquí para que quepan uno junto al otro en el ancho estrecho del sidebar */
.pl-sidebar-filtros { display: flex; gap: 6px; margin-bottom: 10px; flex: none; }
.pl-sidebar-filtros .proj-cat-dropdown { flex: 1; min-width: 0; }
.pl-sidebar-filtros .proj-cat-btn { width: 100%; justify-content: space-between; padding: 7px 10px; font-size: 11.5px; border-radius: 9px; }
.pl-sidebar-filtros .proj-cat-btn svg { width: 12px; height: 12px; flex: none; }
.pl-sidebar-filtros .proj-cat-menu { min-width: 190px; }
/* misma línea visual que .pl-sidebar-footer (texto subrayado 11px, alineado a la
   derecha), con un checkbox delante — a propósito NO es un <button>, ya que necesita
   llevar el estado marcado/indeterminado del checkbox */
.pl-seleccionar-todos-row { display: flex; justify-content: flex-end; margin-bottom: 4px; flex: none; }
.pl-seleccionar-todos {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.pl-seleccionar-todos span { text-decoration: underline; text-underline-offset: 2px; }
.pl-seleccionar-todos input { accent-color: var(--ink); width: 13px; height: 13px; flex: none; margin: 0; }
.pl-proyecto-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pl-proyecto-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.pl-proyecto-item:hover { background: rgba(46, 48, 87, 0.04); }
.pl-proyecto-item input { accent-color: var(--ink); width: 14px; height: 14px; flex: none; }
.pl-proyecto-item span.pl-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border-soft); flex: none; }
.pl-sidebar-footer span { font-size: 11px; color: var(--muted); }
.pl-sidebar-footer button { border: none; background: none; font-size: 11px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: var(--font-body); }

/* modo Calendario · Mensual: reutiliza LITERALMENTE el mismo componente que
   proyecto-detalle.js (.pd-cal-grid/.pd-cal-day/.pd-cal-carril/.pd-cal-linea-fase, motor
   de carriles asignarCarriles()) para que ambas pantallas se vean exactamente igual —
   la única diferencia es que aquí la línea de Fase se colorea por PROYECTO
   (colorProyecto) en vez de por Fase individual. Solo se añade el padding propio de esta
   tarjeta, ya que en proyecto-detalle.html ese padding lo aporta un contenedor distinto. */
#plCalGrid.pd-cal-grid { padding: 12px 18px 14px; }

/* modo Calendario · Anual: los 12 meses en miniatura, en grid. grid-template-rows
   explícito (3 filas iguales para 12 meses en 4 columnas) para que todos los meses tengan
   la MISMA altura sin importar cuántas semanas tenga cada uno — así cada uno reparte ese
   alto igual entre sus propias filas de día */
.pl-anual-wrap { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px; }
.pl-anual-mes { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; min-height: 0; }
.pl-anual-mes-titulo { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 6px; text-align: center; }
/* filas de día con grid-auto-rows:1fr: las celdas se reparten TODO el alto disponible del
   mes, en vez de quedarse con la altura mínima de su contenido */
.pl-anual-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 0; flex: 1; min-height: 0; }
/* cada día: número arriba con fondo blanco + línea separadora, y debajo una línea fina
   por cada proyecto con una Fase activa ese día (mismo principio que los puntos de la
   vista Mensual, pero apiladas verticalmente por ser más compactas). Sin gap entre
   celdas: las líneas de un mismo proyecto en días consecutivos quedan a la misma altura y
   se tocan sin corte, leyéndose como una línea continua en vez de segmentos sueltos. */
.pl-anual-day {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-soft);
  overflow: hidden;
}
.pl-anual-out { opacity: 0.4; }
.pl-anual-daynum {
  flex: none;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 1px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pl-anual-hoy .pl-anual-daynum { color: #fff; background: var(--gold); border-bottom-color: var(--gold); }
.pl-anual-lineas {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  padding: 1px;
  overflow: hidden;
}
.pl-anual-linea { flex: none; height: 2px; border-radius: 1px; background: var(--tc, #7fa8d9); }
.pl-anual-day { cursor: pointer; }
.pl-anual-day:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }

/* modal de detalle de un día (Vista anual): reutiliza .confirm-overlay/.confirm-box, con
   un ancho algo mayor que el diálogo de confirmación genérico para caber varias filas */
.pl-dia-modal-box { width: 380px; max-height: 80vh; display: flex; flex-direction: column; }
.pl-dia-modal-box p { flex: none; }
.pl-dia-modal-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pl-dia-modal-item { display: flex; align-items: flex-start; gap: 9px; }
.pl-dia-modal-item .pd-dot { margin-top: 4px; }
.pl-dia-modal-item strong { font-size: 13px; color: var(--ink); display: block; }
.pl-dia-modal-fase { font-size: 12px; color: var(--muted); margin-top: 1px; }

.pd-gantt-fila-pasada { opacity: 0.55; }
.pd-gantt-fila-atenuada { opacity: 0.3; }
/* la tarea seleccionada no gana un outline alrededor de toda la fila (se veía como un
   rectángulo grande y desproporcionado sobre una línea de 3px) — en su lugar, su propia
   línea se engrosa y brilla con un glow dorado sutil, dejando el resto de la fila intacta */
.pd-gantt-fila-resaltada { opacity: 1; z-index: 1; }
.pd-gantt-fila-resaltada .pd-gantt-linea {
  height: 6px;
  box-shadow: 0 0 0 2px rgba(217, 154, 61, 0.35);
}
.pd-gantt-fila-resaltada .pd-gantt-linea-estimada { height: 4px; }
/* el propio bloque de Fase también puede resaltarse (si tareaSeleccionada es el id de la
   fase, no de una tarea suya) — ahí sí tiene sentido un borde más marcado, al ser un
   contenedor grande y no una línea fina */
.pd-gantt-bloque-fase.pd-gantt-fila-resaltada { box-shadow: 0 0 0 2px var(--gold); }

/* líneas finas de tarea, en su propio color (el fondo del bloque de Fase ahora es
   semitransparente/tenue, no sólido, así que ya no hace falta un color de contraste
   blanco — el color propio de la tarea se lee bien igual) */
.pd-gantt-linea {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 2px;
  background: var(--tc, #7fa8d9);
  min-width: 6px;
}
.pd-gantt-linea-limite { top: calc(50% - 4px); }
.pd-gantt-linea-estimada {
  top: calc(50% + 4px);
  height: 2px;
  opacity: 0.55;
}
/* tarea borrador: línea discontinua, mismo lenguaje que el resto de la app para "sin
   confirmar", en vez del trazo sólido de una tarea real */
.pd-gantt-linea.pd-gantt-linea-borrador {
  background: transparent;
  border-top: 2px dashed var(--tc, #7fa8d9);
  height: 0;
}

/* filtros de capa (mismos checkboxes que ya existen para el calendario): ocultan con
   visibility:hidden en vez de display:none, para no cambiar el alto/hueco de la fila —
   igual criterio que .pd-cal-oculta-* en el calendario, ver el listener en
   proyecto-detalle.js. "Fases" solo apaga el fondo/borde de color del bloque (las tareas
   de dentro se siguen viendo sueltas); "Límite"/"Estimada" ocultan solo esas líneas de
   tarea; "Cliente" oculta la línea vertical roja. */
.pd-gantt-oculta-fase .pd-gantt-bloque-fase {
  background: transparent;
  border-left-color: transparent;
}
.pd-gantt-oculta-limite .pd-gantt-linea-limite { visibility: hidden; }
.pd-gantt-oculta-estimada .pd-gantt-linea-estimada { visibility: hidden; }
.pd-gantt-oculta-cliente .pd-gantt-linea-cliente { visibility: hidden; }

.pd-toggle-pasados {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.pd-toggle-pasados:hover { border-color: var(--ink-soft); }
.pd-toggle-pasados.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pd-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(46, 48, 87, 0.1);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
}
.pd-toggle-pasados.active .pd-toggle-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* ---- Lista de eventos ---- */
.pd-evento-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-soft);
  transition: background-color 0.12s;
  cursor: pointer;
}
.pd-evento-row:last-child { border-bottom: none; }
.pd-evento-row:hover { background: rgba(46, 48, 87, 0.03); }
.pd-evento-row-seleccionada { background: rgba(201, 162, 39, 0.1); border-radius: 8px; }
.pd-evento-row-seleccionada:hover { background: rgba(201, 162, 39, 0.14); }

/* ---- Cabecera de Fase, colapsable ----
   Dos filas: la 1ª con chevron+dot+título+badges a la izquierda y la fecha a la derecha;
   la 2ª (solo si es borrador) con el "+" a la izquierda y editar/eliminar a la derecha. */
.pd-fase-cabecera {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background-color 0.12s;
}
.pd-fase-cabecera:hover { background: rgba(46, 48, 87, 0.03); }
.pd-fase-cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-fase-cabecera-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-fase-cabecera-izq strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-fase-cabecera-acciones .pd-borrador-acciones { margin-top: 0; }
/* mismo ancho que chevron(14px) + dot(9px) + 2 gaps(10px) de la fila de arriba, para que
   el botón "+" de la segunda fila arranque justo debajo del nombre de la Fase */
.pd-fase-cabecera-espaciador { flex: none; width: 43px; }
.pd-fase-chevron {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--faint);
  transition: transform 0.15s ease;
}
.pd-fase-cabecera.expandida .pd-fase-chevron { transform: rotate(90deg); }
.pd-fase-contador {
  font-size: 11px;
  color: var(--faint);
  background: rgba(46, 48, 87, 0.06);
  padding: 2px 8px;
  border-radius: 99px;
}
.pd-evento-row.pd-evento-pasado { opacity: 0.55; }
.pd-evento-row.pd-evento-pasado:hover { opacity: 0.8; }
.pd-badge-pasado {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 8px;
}
.pd-evento-row .pd-dot { margin-top: 6px; width: 10px; height: 10px; }
.pd-evento-main { flex: 1; min-width: 0; }
.pd-evento-head { display: flex; align-items: center; gap: 10px; }
.pd-evento-head strong { font-size: 13.5px; color: var(--ink); }
.pd-evento-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pd-evento-fecha { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }

.pd-fase-manual { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.pd-fase-manual-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 90px; }
.pd-fase-manual-field[hidden] { display: none; }
.pd-fase-manual-field span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-fase-manual-inicio, .pd-fase-manual-fecha, .pd-fase-manual-field input, .pd-fase-manual-field select {
  width: 100%;
  padding: 4px 4px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
}
.pd-fase-manual-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 11px 11px;
  cursor: pointer;
}
.pd-fase-manual-field select:disabled { background-color: rgba(46, 48, 87, 0.04); color: var(--faint); cursor: not-allowed; }
.pd-fase-manual-inicio::-webkit-datetime-edit,
.pd-fase-manual-fecha::-webkit-datetime-edit,
.pd-fase-manual-field input::-webkit-datetime-edit {
  flex: none;
  padding: 0;
}
.pd-fase-manual-inicio::-webkit-calendar-picker-indicator,
.pd-fase-manual-fecha::-webkit-calendar-picker-indicator,
.pd-fase-manual-field input::-webkit-calendar-picker-indicator {
  margin-left: 4px;
  padding: 0;
  width: 12px;
  height: 12px;
}
.pd-fase-manual-readonly input {
  background: rgba(46, 48, 87, 0.04);
  color: var(--muted);
  cursor: not-allowed;
}
/* .pd-fase-manual-guardar/.pd-fase-manual-a-jira: mismo componente que .pd-borrador-btn/
   .pd-borrador-guardar, ver reglas unificadas junto a .pd-borrador-btn más arriba */
.pd-fase-manual-copiar {
  flex: none;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
}
.pd-fase-manual-copiar svg { width: 12px; height: 12px; }
.pd-fase-manual-copiar:hover { background: rgba(46, 48, 87, 0.08); color: var(--text); }

/* ---- Toast de feedback (sustituye a alert()/confirm() del navegador) ---- */
.pd-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}
.pd-toast {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-sm);
  animation: pd-toast-entrada 0.2s ease;
}
.pd-toast-error { background: #c0392b; }
.pd-toast-exito { background: #2f8a4b; }
.pd-toast-saliendo { animation: pd-toast-salida 0.3s ease forwards; }
@keyframes pd-toast-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pd-toast-salida {
  to { opacity: 0; transform: translateY(8px); }
}

/* ---- Árbol de fases (indentado por nivel) ---- */
.pd-fase-nivel-1 { margin-left: 20px; }
.pd-fase-nivel-2 { margin-left: 40px; }

@media (max-width: 980px) {
  .pd-container { height: auto; min-height: 0; }
  .pd-hero-grid { grid-template-columns: 1fr; }
  .pd-grid { grid-template-columns: 1fr; flex: none; min-height: 0; }
  .pd-panel-fill { min-height: 480px; flex: none; }
  .pd-dia-panel-wrap.visible { width: 200px; }
}

/* .pd-container ya tenía padding-top heredado de .container (36px): se reduce aquí de forma
   permanente (no solo en pantallas bajas) para dar más alto real al calendario */
.pd-container { padding-top: 6px; }
.pd-back { margin-bottom: 2px; }
.pd-hero { margin-bottom: 4px; }
.pd-hero .week-title { margin: 0 0 4px; }

@media (max-width: 720px) {
  .pd-container { padding: 20px 14px 80px; }
  .pd-panel { padding: 18px 16px 22px; }
  .pd-cal-barra-txt { font-size: 10px; }
  .pd-evento-fecha { white-space: normal; text-align: right; }
}

.proj-gestor-vacio { color: var(--faint); font-style: italic; }

/* responsable del proyecto en la lista de equipo: fondo dorado (en vez del navy estándar)
   con las iniciales en blanco (mismo color que el resto de avatares, para no romper el
   grosor/contraste que ya tienen) */
.avatar.avatar-responsable { background: var(--gold); color: #fff; }