/* Pilas — tema visual. Sereno, preciso, sin adornos: la información manda,
   la interfaz desaparece. Superficies suaves, sombras en capas, curvas amplias. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #ecedf1;
  --border-strong: #d9dce3;
  --text: #0d1220;
  --text-soft: #4a5468;
  --text-faint: #98a2b3;
  --primary: #2f5fde;
  --primary-hover: #2650c0;
  --primary-soft: #eef2ff;
  --danger: #d92d20;
  --danger-soft: #fef3f2;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --amber: #f79009;
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --purple: #6941c6;
  --purple-soft: #f4ebff;
  --sidebar-bg: #0d1220;
  --sidebar-text: #98a2b3;

  /* Curvas: escala coherente en toda la app */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;
  --radius: var(--r-lg);            /* compatibilidad con reglas antiguas */

  /* Sombras en capas: casi imperceptibles en reposo, presentes al elevar */
  --shadow: 0 1px 2px rgba(13, 18, 32, .04), 0 1px 3px rgba(13, 18, 32, .05);
  --shadow-md: 0 2px 4px rgba(13, 18, 32, .04), 0 8px 20px rgba(13, 18, 32, .07);
  --shadow-lg: 0 8px 16px rgba(13, 18, 32, .08), 0 32px 64px rgba(13, 18, 32, .18);
  --ring: 0 0 0 3px rgba(47, 95, 222, .16);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --sidebar-w: 236px;
  --sidebar-w-mini: 68px;
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.006em;                 /* apenas perceptible: da densidad optica */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
/* Los numeros se alinean en columnas en toda la app */
.num, .count, .bar-num, .up-when, .ring-num { font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Campos de fecha. Safari en iPhone los pinta a su manera: centra el valor y
   estira la caja, asi que en el movil la fecha quedaba descuadrada y mas alta
   que los demas campos del formulario, donde todo va a la izquierda. Estas tres
   reglas la devuelven a la linea. El calendario nativo al tocar sigue igual. */
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; line-height: inherit; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
/* Y este relleno interno propio es el que dejaba la caja mas alta que las demas */
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
a { color: var(--primary); text-decoration: none; }
svg.ic { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; }

/* ---------- Autenticación ---------- */
.auth-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1200px 600px at 15% -10%, #1e3a8f 0%, transparent 55%),
              linear-gradient(160deg, #0d1220 0%, #17203a 55%, #24408f 130%);
}
.auth-card {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 42px 40px; width: 100%; max-width: 430px; animation: pop .3s var(--ease);
}
.auth-card .logo { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.02em; }
.auth-card .logo .mark { width: 34px; height: 34px; }
.auth-card .logo .wordmark { color: var(--text); }
.auth-card .logo .wordmark span { color: var(--primary); }
.auth-card .tagline { color: var(--text-soft); margin-bottom: 26px; font-size: 14px; }
.auth-card label { display: block; font-weight: 600; font-size: 13px; margin: 15px 0 5px; }
.auth-card input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.auth-card input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.auth-switch { margin-top: 20px; text-align: center; color: var(--text-soft); font-size: 13.5px; }
.auth-legal { margin-top: 16px; text-align: center; color: var(--text-faint); font-size: 11.5px; line-height: 1.5; }
.legal-text { max-height: 60vh; overflow-y: auto; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.legal-text p { margin-bottom: 10px; }
.legal-text b { color: var(--text); }
.auth-error { background: var(--danger-soft); color: var(--danger); padding: 11px 13px; border-radius: var(--r-md); margin-top: 14px; font-size: 13.5px; display: none; }

/* ---------- Pulso del equipo ---------- */
.pu-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .pu-kpis { grid-template-columns: repeat(2, 1fr); } }
.pu-kpi {
  background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px;
  border-top: 3px solid var(--primary); box-shadow: var(--shadow);
}
.pu-kpi.ver { border-top-color: var(--ok); }
.pu-kpi.amb { border-top-color: var(--warn); }
.pu-kpi.roj { border-top-color: var(--danger); }
.pu-kpi .et { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.pu-kpi .val { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.pu-kpi .val small { font-size: 13px; font-weight: 600; color: var(--text-faint); }
.pu-kpi .ten { font-size: 11.5px; font-weight: 600; }
.pu-kpi .ten.sube { color: var(--ok); }
.pu-kpi .ten.baja { color: var(--warn); }
.pu-kpi .ten.neutro { color: var(--text-faint); font-weight: 500; }
.pu-spark { display: flex; align-items: flex-end; gap: 3px; height: 20px; margin-top: 9px; }
.pu-spark i { flex: 1; background: var(--primary-soft); border-radius: 2px; min-height: 2px; }
.pu-spark i.hi { background: var(--primary); }

.pu-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin: 0 0 8px 2px;
}
.pu-card { padding: 0; overflow: hidden; margin-bottom: 20px; }
.pu-rep { display: flex; align-items: center; gap: 11px; padding: 11px 16px; cursor: pointer; transition: background .15s var(--ease); }
.pu-rep + .pu-rep { border-top: 1px solid var(--border); }
.pu-rep:hover { background: var(--bg); }
.pu-rep:focus-visible { outline: none; box-shadow: inset var(--ring); }
.pu-rep .veces {
  font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-soft);
  border-radius: var(--r-pill); padding: 2px 9px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.pu-rep .grow { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-rep .quien, .pu-rep .desde { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
@media (max-width: 700px) { .pu-rep .desde { display: none; } }

.pu-pers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 700px) { .pu-pers { grid-template-columns: 1fr; } }
.pu-p { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow); }
/* Quien necesita apoyo se destaca con una sombra calida, no con un borde rojo:
   la pantalla ayuda, no señala. */
.pu-p.atencion { box-shadow: 0 1px 2px rgba(13,18,32,.05), 0 8px 20px rgba(181,71,8,.14); }
.pu-p-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pu-p-nom { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; }
.pu-tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); flex-shrink: 0; }
.pu-tag.ayuda { background: var(--warn-soft); color: var(--warn); }
.pu-tag.bien { background: var(--ok-soft); color: var(--ok); }
.pu-p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pu-p-grid .e { font-size: 10.5px; color: var(--text-faint); }
.pu-p-grid .v { font-size: 16px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pu-p-grid .v.amb { color: var(--warn); }
.pu-p-grid .v.ver { color: var(--ok); }

/* ---------- Subtareas desplegables ----------
   El contador deja de ser texto y se vuelve el tirador. Objetivo de toque
   generoso (28px de alto) para que en el movil no se abra la tarea sin querer. */
.sub-toggle {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  height: 22px; padding: 0 8px 0 4px; margin-left: 2px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-soft);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.sub-toggle:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.sub-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.sub-toggle.abierto { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.sub-flecha { display: inline-flex; transition: transform .2s var(--ease); }
.sub-flecha .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.sub-toggle.abierto .sub-flecha { transform: rotate(180deg); }
/* Toque mas grande de lo que se ve, solo donde el dedo compite con el titulo */
@media (hover: none) { .sub-toggle { height: 28px; padding: 0 10px 0 6px; } }

.sub-wrap > td { padding: 0 0 0 46px !important; background: var(--bg); border-top: none !important; }
.sub-lista { padding: 2px 0 8px; animation: subAbre .18s var(--ease); }
@keyframes subAbre { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sub-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 0;
  border-left: 2px solid var(--border); padding-left: 14px; margin-left: 2px;
}
.sub-item + .sub-item { margin-top: 1px; }
.sub-t { flex: 1; min-width: 0; font-size: 13.5px; cursor: pointer; }
.sub-t:hover { color: var(--primary); }
.sub-item.hecha { border-left-color: var(--ok); }
.sub-item.hecha .sub-t { color: var(--text-faint); text-decoration: line-through; }
.sub-quien, .sub-fecha { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sub-fecha.tarde { color: var(--warn); font-weight: 600; }
.check-btn.sm { width: 18px; height: 18px; font-size: 11px; flex-shrink: 0; }
@media (max-width: 700px) { .sub-quien { display: none; } .sub-wrap > td { padding-left: 30px !important; } }

/* Tarea sin proyecto: el hueco se vuelve un boton, no un texto muerto */
.tp-add-proj {
  padding: 3px 10px; font-size: 12px; color: var(--primary);
  border-color: var(--border); background: var(--primary-soft); box-shadow: none;
}
.tp-add-proj:hover { background: #e4ebff; border-color: var(--primary); }
.tp-add-proj .ic { width: 14px; height: 14px; }

/* ---------- Requisitos de la contraseña ---------- */
.pass-reqs { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 3px; }
.pass-reqs li {
  font-size: 12.5px; color: var(--text-faint); display: flex; align-items: center; gap: 7px;
  transition: color .15s var(--ease);
}
/* El punto se vuelve un visto cuando la regla se cumple */
.pass-reqs li::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.pass-reqs li.ok { color: var(--ok); }
.pass-reqs li.ok::before {
  background: var(--ok) no-repeat center/9px 9px;
  border-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Registro: empresa o personal ---------- */
.auth-tipo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: 4px;
}
.auth-tipo button {
  border: none; background: transparent; color: var(--text-soft);
  padding: 8px 10px; border-radius: 7px; font-weight: 600; font-size: 13.5px;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.auth-tipo button:hover { color: var(--text); }
.auth-tipo button.active {
  background: var(--surface); color: var(--primary);
  box-shadow: 0 1px 2px rgba(13,18,32,.06), 0 2px 6px rgba(13,18,32,.05);
}
.auth-tipo button:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Selector de empresa (solo si perteneces a varias) ---------- */
.um-seccion {
  padding: 9px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.notif-item.um-empresa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-item.um-empresa.actual { font-weight: 600; }
.um-check { color: var(--primary); display: inline-flex; }
.um-sep { height: 1px; background: var(--border); margin: 6px 0; }

/* ---------- Pantalla de mantenimiento ---------- */
.mant-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1200px 600px at 15% -10%, #1e3a8f 0%, transparent 55%),
              linear-gradient(160deg, #0d1220 0%, #17203a 55%, #24408f 130%);
}
.mant-card {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 46px 42px; width: 100%; max-width: 460px; text-align: center; animation: pop .3s var(--ease);
}
.mant-card .logo { justify-content: center; display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; }
.mant-card h1 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
.mant-card p { color: var(--text-soft); font-size: 14px; margin-bottom: 22px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 8px 14px;
  font-weight: 600; font-size: 13.5px; box-shadow: 0 1px 2px rgba(13,18,32,.04);
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: #fbfcfd; border-color: var(--border-strong); box-shadow: var(--shadow); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
  background: linear-gradient(180deg, #3b6ae6, var(--primary)); border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(13,18,32,.10), 0 2px 8px rgba(47,95,222,.24);
}
.btn-primary:hover { background: linear-gradient(180deg, #3564e2, var(--primary-hover)); box-shadow: 0 2px 4px rgba(13,18,32,.10), 0 6px 16px rgba(47,95,222,.30); }
.btn-danger { color: var(--danger); }
.btn-block { width: 100%; justify-content: center; margin-top: 24px; padding: 11px; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-soft); box-shadow: none; }
.btn-ghost:hover { background: #f1f3f7; color: var(--text); box-shadow: none; }

/* ---------- Estructura ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); padding: 22px 14px;
  display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; z-index: 40;
  overflow-x: hidden; transition: width .18s var(--ease), padding .18s var(--ease);
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: #fff;
  padding: 2px 10px 22px; letter-spacing: -.03em;
}
.sidebar .brand .mark { width: 26px; height: 26px; }
.sidebar .brand .wordmark { color: #fff; }
.sidebar .brand .wordmark span { color: #7ea0ff; }
.sidebar a.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9.5px 12px; border-radius: var(--r-md);
  color: var(--sidebar-text); font-weight: 500; font-size: 13.5px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar a.nav-item svg.ic { width: 18px; height: 18px; }
.sidebar a.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar a.nav-item.active {
  background: linear-gradient(180deg, rgba(59,106,230,.95), var(--primary)); color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(47,95,222,.38), inset 0 1px 0 rgba(255,255,255,.14);
}
.sidebar .nav-org { margin-top: auto; padding: 14px 12px 4px; font-size: 12px; color: #667085; border-top: 1px solid rgba(255,255,255,.08); line-height: 1.6; }
.sidebar .nav-org b { color: #d0d5dd; }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .18s var(--ease); }

/* ---------- Panel lateral compacto (riel de iconos) ----------
   Tercer estado entre "ancho" y "escondido". Cuando la ventana se angosta —media
   pantalla en un monitor— el panel no desaparece: se encoge a los iconos. La
   navegación siempre está a un clic, nunca detrás de un botón de hamburguesa.
   La clase la pone app.js (aplicarModoPanel), según el ancho y la preferencia
   guardada del usuario. Va encerrado en min-width: 641px para que en el teléfono
   el cajón siempre se abra completo, aunque la clase quedara puesta. */
@media (min-width: 641px) {
  .layout.nav-mini { --sidebar-w: var(--sidebar-w-mini); }
  .layout.nav-mini .sidebar { padding: 22px 10px; align-items: center; }
  .layout.nav-mini .sidebar .brand { padding: 2px 0 20px; gap: 0; justify-content: center; }
  .layout.nav-mini .sidebar .brand .wordmark { display: none; }
  .layout.nav-mini .sidebar a.nav-item { width: 100%; justify-content: center; padding: 11px 0; }
  .layout.nav-mini .sidebar a.nav-item .nav-lbl { display: none; }
  .layout.nav-mini .sidebar .nav-org { display: none; }
}

.topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 28px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
.topbar .search { flex: 1; max-width: 440px; position: relative; }
.topbar .search input {
  width: 100%; padding: 9px 12px 9px 36px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: #f1f3f7; font-size: 13.5px; transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.topbar .search input:hover { background: #eceef3; }
.topbar .search input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: var(--ring); }
.topbar .search .icon { position: absolute; left: 12px; top: 10px; color: var(--text-faint); pointer-events: none; }
.search-results {
  position: absolute; top: 46px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-height: 420px; overflow-y: auto; z-index: 60;
}
.search-results .sr-item { padding: 11px 15px; cursor: pointer; border-bottom: 1px solid #f4f5f8; transition: background .12s var(--ease); }
.search-results .sr-item:hover { background: var(--primary-soft); }
.search-results .sr-item .sr-meta { font-size: 12px; color: var(--text-faint); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -2px; right: -2px; background: var(--danger); color: #fff; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(217,45,32,.4);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, #4a77e8, var(--primary));
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.avatar.sm { width: 25px; height: 25px; font-size: 10.5px; }

.content { padding: 28px 30px 48px; max-width: 1320px; width: 100%; }
.page-title { font-size: 23px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 4px; line-height: 1.2; }
.page-sub { color: var(--text-soft); margin-bottom: 22px; font-size: 13.5px; }
/* margin-bottom: en movil el boton baja y queda como ultimo elemento del
   encabezado; sin este margen se pegaba a las burbujas de filtro de abajo. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Filtros ---------- */
.filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.filters .f-label { font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.filters select, .filters input {
  padding: 7.5px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
  font-size: 13px; color: var(--text-soft); box-shadow: 0 1px 2px rgba(13,18,32,.03);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.filters select:hover, .filters input:hover { border-color: #c9ced8; }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.filters .f-clear { color: var(--text-faint); font-size: 12.5px; border: none; background: none; padding: 6px; }
.filters .f-clear:hover { color: var(--danger); }

/* ---------- Calendario global ---------- */
.cal-controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-tabs { margin-right: 4px; }
.cal-filtros { row-gap: 10px; }
.cal-titulo { font-size: 15px; letter-spacing: -.02em; margin-right: 6px; min-width: 130px; }
.cal-leyenda { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12px; color: var(--text-soft); flex-wrap: wrap; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cal-dot-tarea { background: var(--primary); }
.cal-dot-proyecto { background: var(--purple); }
.cal-dot-vencido { background: var(--amber); }
.cal-card { overflow: hidden; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.cal-head div { padding: 9px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 104px; padding: 7px 6px 9px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell-semana { min-height: 340px; }
.cal-fuera { background: var(--bg); }
.cal-fuera .cal-num { color: var(--text-faint); opacity: .55; }
/* Hoy: solo el numero en una pastilla azul (pintar toda la celda confundia) */
.cal-hoy .cal-num {
  color: #fff; font-weight: 700; background: var(--primary);
  border-radius: var(--r-pill); padding: 1px 8px; align-self: flex-start;
}
.cal-num { font-size: 12px; color: var(--text-soft); font-weight: 500; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.cal-ev {
  display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.25;
  padding: 3px 7px; border-radius: var(--r-sm); cursor: pointer; min-width: 0;
  transition: filter .12s var(--ease), box-shadow .12s var(--ease);
}
.cal-ev:hover { filter: brightness(.96); }
.cal-ev:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tarea { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.cal-done { opacity: .5; }
.cal-done .cal-txt { text-decoration: line-through; }
/* Cierre de proyecto: misma burbuja que las tareas, distinguido solo por el
   purpura y un poco mas de peso (el borde izquierdo se veia anticuado) */
.cal-proyecto { background: var(--purple-soft); color: var(--purple); font-weight: 600; }
.cal-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.cal-mas { font-size: 11.5px; color: var(--text-faint); font-weight: 500; padding: 1px 7px; cursor: pointer; border-radius: var(--r-sm); }
.cal-mas:hover { color: var(--primary); background: var(--primary-soft); }
/* Arrastrar para reprogramar */
.cal-tarea[draggable="true"] { cursor: grab; }
.cal-arrastrando { opacity: .4; }
.cal-cell.cal-drop { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }

/* ---------- Tarjetas / stats ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { padding: 18px 20px; position: relative; overflow: hidden; }
.stat .num { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--text-soft); font-size: 12.5px; margin-top: 4px; font-weight: 500; }
/* Halo de color tenue en la esquina, en vez de la barra superior dura */
.stat::after {
  content: ''; position: absolute; top: -40px; right: -40px; width: 96px; height: 96px; border-radius: 50%;
  background: var(--stat-tint, transparent); opacity: .10; pointer-events: none;
}
.stat.primary { --stat-tint: var(--primary); }
.stat.warn { --stat-tint: #f79009; }
.stat.warn .num { color: var(--warn); }
.stat.danger { --stat-tint: var(--danger); }
.stat.danger .num { color: var(--danger); }
.stat.ok { --stat-tint: #12b76a; }
.stat.ok .num { color: var(--ok); }
.stat.purple { --stat-tint: var(--purple); }
.stat.purple .num { color: var(--purple); }

/* minmax(0,1fr) + min-width:0 evitan que el contenido interno ensanche la página en pantallas angostas */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.grid-2 > * { min-width: 0; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.card h3 { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; }
.card h3 svg.ic { color: var(--text-faint); }
.card .card-body { padding: 14px 20px 18px; }

/* ---------- Insignias ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge.st-pendiente { background: #f2f4f7; color: #475467; }
.badge.st-en_progreso { background: var(--primary-soft); color: var(--primary); }
/* Ambar = algo llega tarde. Rojo = algo esta en riesgo o inactivo. */
.badge.st-atrasada { background: var(--warn-soft); color: var(--warn); }
.badge.st-inactivo { background: var(--danger-soft); color: var(--danger); }
.badge.st-en_revision { background: var(--purple-soft); color: var(--purple); }
.badge.st-completada { background: var(--ok-soft); color: var(--ok); }
.badge.pr-baja { background: #f2f4f7; color: #475467; }
.badge.pr-media { background: var(--primary-soft); color: var(--primary); }
.badge.pr-alta { background: var(--warn-soft); color: var(--warn); }
.badge.pr-urgente { background: var(--danger-soft); color: var(--danger); }
.badge.pj-planificado { background: #f2f4f7; color: #475467; }
.badge.pj-activo { background: var(--ok-soft); color: var(--ok); }
.badge.pj-en_riesgo { background: var(--danger-soft); color: var(--danger); }
.badge.pj-pausado { background: var(--warn-soft); color: var(--warn); }
.badge.pj-completado { background: var(--primary-soft); color: var(--primary); }
.badge.pj-cancelado { background: #f2f4f7; color: #98a2b3; }
.badge.tag { background: #f8f9fc; color: #475467; border: 1px solid var(--border); }

/* Selects editables con apariencia de insignia (edición directa tipo monday) */
select.badge-select {
  -webkit-appearance: none; appearance: none; border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 4px 23px 4px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
select.badge-select:hover { border-color: rgba(13,18,32,.10); box-shadow: 0 1px 3px rgba(13,18,32,.08); }
select.badge-select.st-pendiente { background-color: #f2f4f7; color: #475467; }
select.badge-select.st-en_progreso { background-color: var(--primary-soft); color: var(--primary); }
select.badge-select.st-atrasada { background-color: var(--warn-soft); color: var(--warn); }
select.badge-select.st-en_revision { background-color: var(--purple-soft); color: var(--purple); }
select.badge-select.st-completada { background-color: var(--ok-soft); color: var(--ok); }
select.badge-select.pr-baja { background-color: #f2f4f7; color: #475467; }
select.badge-select.pr-media { background-color: var(--primary-soft); color: var(--primary); }
select.badge-select.pr-alta { background-color: var(--warn-soft); color: var(--warn); }
select.badge-select.pr-urgente { background-color: var(--danger-soft); color: var(--danger); }
select.person-select, input.date-inline {
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 6px; font-size: 12.5px; background: transparent; color: var(--text-soft); cursor: pointer; max-width: 150px;
}
select.person-select:hover, input.date-inline:hover { border-color: var(--border-strong); background: #fff; }
input.date-inline.overdue { color: var(--danger); font-weight: 700; }

.due { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.due.done { color: var(--ok); font-weight: 600; }
.due.overdue { color: var(--danger); font-weight: 700; }
.due.today { color: var(--warn); font-weight: 700; }
.due.none { color: var(--warn); }

/* ---------- Tabla de tareas (vista lista) ---------- */
.task-table { width: 100%; border-collapse: collapse; }
.task-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700;
}
.task-table td { padding: 11px 14px; border-bottom: 1px solid #f4f5f8; vertical-align: middle; }
.task-table tr.task-row { transition: background .12s var(--ease); }
.task-table tr.task-row:hover { background: #fafbfd; }
.task-table tr.task-row:last-child td { border-bottom: none; }
.task-table .t-title { font-weight: 600; cursor: pointer; }
.task-table .t-title:hover { color: var(--primary); }
.task-table .t-title .subinfo { font-weight: 500; font-size: 11.5px; color: var(--text-faint); margin-left: 4px; }
.section-row td {
  background: #fafbfd; font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-soft); padding: 9px 14px;
  border-left: 3px solid var(--section-color, var(--border-strong)); border-bottom: 1px solid var(--border);
}
.check-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid #c8cdd8; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 11px; flex-shrink: 0;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease);
}
.check-btn:active { transform: scale(.88); }
.check-btn:hover { border-color: var(--ok); color: var(--ok); }
.check-btn.done { background: #12b76a; border-color: #12b76a; color: #fff; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.kanban-col { scroll-snap-align: start; }
.kanban-col {
  min-width: 276px; width: 276px; flex-shrink: 0; background: #f2f4f7; border-radius: var(--r-lg); padding: 12px;
  border-top: 3px solid var(--col-color, var(--border-strong)); transition: background .15s var(--ease);
}
.kanban-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft);
  padding: 4px 6px 10px; display: flex; align-items: center; gap: 8px;
}
.kanban-col h4 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-color, var(--border-strong)); }
.kanban-col h4 .count { margin-left: auto; color: var(--text-faint); font-weight: 600; }
.kanban-col.drag-over { outline: 2px dashed var(--primary); outline-offset: -4px; background: var(--primary-soft); }
.kanban-cards { min-height: 30px; display: flex; flex-direction: column; gap: 8px; }
.kcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 13px;
  cursor: grab; box-shadow: var(--shadow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.kcard:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kcard:active { cursor: grabbing; }
.kcard .kt { font-weight: 600; margin-bottom: 8px; font-size: 13.5px; }
.kcard .kmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kcard.dragging { opacity: .45; }

/* ---------- Proyectos ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.pcard { padding: 20px; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.pcard:hover { transform: translateY(-2px); border-color: #e2e5ec; box-shadow: var(--shadow-md); }
.pcard:active { transform: translateY(0); }
.pcard .pname { font-weight: 700; font-size: 15.5px; margin-bottom: 5px; letter-spacing: -.01em; }
.pcard .pdesc { color: var(--text-soft); font-size: 13px; margin-bottom: 12px; min-height: 18px; }
.progress-bar { height: 6px; border-radius: var(--r-pill); background: #edeff3; overflow: hidden; margin: 12px 0 8px; }
.progress-bar > div { height: 100%; background: linear-gradient(90deg, #3b6ae6, var(--primary)); border-radius: var(--r-pill); transition: width .3s var(--ease); }
.progress-bar.ok > div { background: #12b76a; }
.pcard .pfoot { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-soft); }

/* Barra de avance editable del proyecto */
/* El avance ya no se ajusta a mano: se muestra lo que dicen las tareas */
.progress-editor { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; max-width: 560px; }
.progress-editor .progress-bar { flex: 1; }
.progress-editor .pct { font-weight: 700; font-size: 15px; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.progress-editor .mode { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 560px) { .progress-editor .mode { white-space: normal; } }

/* ---------- Pestañas ---------- */
.tabs {
  display: flex; gap: 3px; margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: #f1f3f7; border-radius: var(--r-md); padding: 4px; width: fit-content; max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: none; background: none; padding: 7px 14px; font-weight: 600; color: var(--text-soft); font-size: 13px;
  white-space: nowrap; border-radius: var(--r-sm); transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(13,18,32,.06), 0 1px 3px rgba(13,18,32,.08); }

/* ---------- Panel de tarea ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(13, 18, 32, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 90; animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.task-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface);
  z-index: 100; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slideIn .22s var(--ease);
}
@keyframes slideIn { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.task-panel .tp-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.task-panel .tp-body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.tp-title-input {
  width: 100%; border: 1px solid transparent; border-radius: var(--r-md); font-size: 19px; font-weight: 700;
  padding: 7px 9px; margin-left: -9px; letter-spacing: -.02em; transition: background .15s var(--ease), box-shadow .15s var(--ease);
  font-family: inherit; line-height: 1.3; resize: none; overflow: hidden; display: block;
}
.tp-title-input:hover { background: #f7f8fa; }
.tp-title-input:focus { border-color: var(--primary); background: #fff; outline: none; box-shadow: var(--ring); }
.tp-grid { display: grid; grid-template-columns: 140px 1fr; gap: 10px 12px; align-items: center; margin: 16px 0; }
.tp-grid .lbl { color: var(--text-soft); font-size: 12.5px; font-weight: 600; }
.tp-grid select, .tp-grid input[type=date], .tp-grid input[type=number] {
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; max-width: 250px; font-size: 13px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tp-grid select:focus, .tp-grid input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.tp-section { margin-top: 24px; }
.tp-section > h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 10px; font-weight: 700; }
.tp-section > h4 .hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); }
.tp-desc {
  width: 100%; min-height: 76px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 11px 12px; background: #fff; resize: vertical;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tp-desc:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.subtask-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.subtask-row .st-title { flex: 1; }
.subtask-row .st-title.done { text-decoration: line-through; color: var(--text-faint); }
.inline-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.inline-add input, .inline-add select {
  flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 13px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.inline-add input:focus, .inline-add select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

.comment { display: flex; gap: 10px; padding: 10px 0; }
.comment .c-body { flex: 1; }
.comment .c-head { font-size: 12.5px; color: var(--text-faint); margin-bottom: 2px; }
.comment .c-head b { color: var(--text); }
.comment .c-text { white-space: pre-wrap; overflow-wrap: break-word; }
.comment .mention { color: var(--primary); font-weight: 600; }

.hist-item { padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.hist-item .h-when { color: var(--text-faint); font-size: 11.5px; }
.hist-item .h-change { color: var(--text-soft); }
.hist-item .h-change b { color: var(--text); }

.attach-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; flex-wrap: wrap; }
.attach-row svg.ic { color: var(--text-faint); }
.attach-row .a-meta { color: var(--text-faint); font-size: 12px; }
.file-origin { font-size: 11.5px; color: var(--text-faint); background: #f1f3f7; border-radius: var(--r-pill); padding: 2px 9px; }

.dep-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; flex-wrap: wrap; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px; }
.modal .modal-card {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 540px;
  max-height: calc(100vh - 96px); overflow-y: auto; animation: pop .18s var(--ease);
}
@keyframes pop { from { transform: scale(.97) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15.5px; }
.modal .modal-body { padding: 18px 22px; }
.modal label { display: block; font-weight: 600; font-size: 12.5px; margin: 13px 0 5px; }
/* Filas con casilla (preferencias de correo). La regla de arriba pone
   display:block a TODO label del modal, y eso dejaba el checkbox y el texto
   flotando cada uno por su lado: las filas se veian escalonadas. Esta regla
   tiene mas peso y las vuelve una cuadricula fija: casilla | texto. */
.modal label.pref-fila {
  display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: start;
  font-weight: 400; font-size: 13.5px; margin: 0 0 12px; cursor: pointer;
}
.modal label.pref-fila input { margin: 3px 0 0; width: 16px; height: 16px; justify-self: start; }
.modal label.pref-fila .pref-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.modal label.pref-fila .pref-texto b { font-weight: 600; }
.modal label.pref-fila .pref-texto .hint { margin: 0; }
.modal input, .modal select, .modal textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; font-size: 13.5px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.modal textarea { min-height: 70px; resize: vertical; }
.modal .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Notificaciones ---------- */
.notif-panel {
  position: fixed; top: 58px; right: 20px; width: min(400px, calc(100vw - 32px)); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 95;
  max-height: 70vh; overflow-y: auto; animation: pop .16s var(--ease);
}
.notif-panel .np-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid #f4f5f8; font-size: 13.5px; cursor: pointer; transition: background .12s var(--ease); }
.notif-item:hover { background: #f9fafb; }
.notif-item.unread { background: var(--primary-soft); }
.notif-item .n-when { color: var(--text-faint); font-size: 11.5px; margin-top: 2px; }

/* ---------- Equipo ---------- */
.team-table { width: 100%; border-collapse: collapse; }
.team-table th, .team-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid #f4f5f8; }
.team-table tbody tr { transition: background .12s var(--ease); }
.team-table tbody tr:hover { background: #fafbfd; }
.team-table tbody tr:last-child td { border-bottom: none; }
.team-table th { font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); letter-spacing: .07em; font-weight: 700; border-bottom: 1px solid var(--border); }

/* ---------- Reportes ---------- */
.bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.bar-row .bar-lbl { width: 140px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar-track { flex: 1; height: 16px; background: #f1f3f7; border-radius: var(--r-pill); overflow: hidden; display: flex; }
.bar-row .bar-fill { background: linear-gradient(90deg, #3b6ae6, var(--primary)); height: 100%; transition: width .3s var(--ease); }
.bar-row .bar-fill.ok { background: #12b76a; }
.bar-row .bar-fill.danger { background: var(--danger); }
.bar-row .bar-num { width: 44px; text-align: right; color: var(--text-soft); font-size: 12.5px; }
.report-note { font-size: 12px; color: var(--danger); margin: -2px 0 6px 150px; }

/* ---------- Archivos de proyecto ---------- */
.upload-box {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: 18px; display: flex; gap: 12px;
  align-items: center; justify-content: center; color: var(--text-soft); background: #fcfcfd; margin-bottom: 16px; flex-wrap: wrap;
}

/* ---------- Selector de miembros ---------- */
.member-picker {
  display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px; background: #fcfcfd;
}
.member-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: #fff; margin: 0 !important;
}
.member-chip:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.member-chip input { width: auto !important; accent-color: var(--primary); margin: 0; }

/* ---------- Cronograma (Timeline / Gantt) ---------- */
.gantt-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.gantt-row:hover .gantt-label { color: var(--primary); }
.gantt-label {
  width: 210px; flex-shrink: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gantt-label svg.ic { width: 13px; height: 13px; color: var(--danger); }
.gantt-track { flex: 1; position: relative; height: 30px; background: #f4f6f9; border-radius: var(--r-sm); }
.gantt-bar {
  position: absolute; top: 4px; bottom: 4px; background: linear-gradient(90deg, #3b6ae6, var(--primary)); border-radius: var(--r-sm); min-width: 14px;
  display: flex; align-items: center; padding: 0 3px; box-shadow: var(--shadow);
}
.gantt-bar.ok { background: #12b76a; }
.gantt-bar.danger { background: var(--danger); }
.gantt-bar .avatar.sm { width: 20px; height: 20px; font-size: 9px; background: rgba(255,255,255,.28); }
.gantt-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--danger); opacity: .6; z-index: 2; }
.gantt-tick { position: absolute; top: 4px; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* ---------- Plantillas de proyecto ---------- */
/* La plantilla es un acelerador opcional, no lo primero que se decide: por eso
   vive al final del formulario y como lista, no como una cuadricula que tapaba
   el campo del nombre y era incomoda en el celular. */
.tpl-select {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 9px 12px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tpl-select:hover { border-color: var(--primary); }
.tpl-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.tpl-desc-sel { font-size: 12px; color: var(--text-faint); margin-top: 6px; line-height: 1.45; }
.tpl-desc-sel:empty { display: none; }
.tpl-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 10px; }
.tpl-check input { width: auto; }

/* ---------- Mi día ---------- */
/* ---------- Mi día ---------- */
/* Dos columnas que se llenan: a la izquierda lo que haces, a la derecha lo que
   consultas (sugerencias y notas). Antes las notas colgaban bajo la lista y
   quedaban cada vez más lejos según crecía el día. */
.myday-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.myday-grid > * { min-width: 0; }
.md-col { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1000px) { .myday-grid { grid-template-columns: minmax(0, 1fr); } }

.md-item { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.md-item:last-child { border-bottom: none; }
.md-item .md-title { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; transition: color .18s var(--ease); }
.md-item .md-title.done { text-decoration: line-through; color: var(--text-faint); }

/* El botón de quitar solo aparece al pasar por encima: la lista se ve limpia.
   En táctil no hay "encima", así que ahí se muestra siempre. */
.md-quitar { opacity: 0; transition: opacity .14s var(--ease); }
.md-item:hover .md-quitar, .md-quitar:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 1000px) { .md-quitar { opacity: 1; } }

/* Entrada y salida suaves: la tarea nueva aparece, no da un salto */
@keyframes mdEntra { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.md-item.entrando { animation: mdEntra .2s var(--ease); }
.md-item.saliendo { opacity: .35; transform: translateX(6px); transition: opacity .16s var(--ease), transform .16s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .md-item.entrando { animation: none; }
  .md-item.saliendo { transition: none; }
}

/* Cuánto llevas del día, debajo de la lista */
.md-progreso { display: flex; align-items: center; gap: 11px; margin-top: 14px; font-size: 12px; color: var(--text-faint); }
.md-progreso:empty { display: none; }
.md-barra { flex: 1; height: 5px; background: var(--bg); border-radius: var(--r-pill); overflow: hidden; }
.md-barra > div { height: 100%; background: var(--ok); border-radius: var(--r-pill); transition: width .3s var(--ease); }

.md-vacio { padding: 26px 4px; }

/* Sugerencias: el título con más peso y la fila entera invitando al clic */
.md-sug-t { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-sug { border-radius: var(--r-md); padding-left: 8px; padding-right: 4px; margin: 0 -8px; transition: background .14s var(--ease); }
.md-sug:hover { background: var(--bg); }

/* Notas: sin bordes que compitan, como una hoja en blanco */
.md-nota {
  width: 100%; min-height: 170px; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; font: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical;
  background: var(--bg); color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.md-nota:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--ring); }
.md-nota::placeholder { color: var(--text-faint); }
.md-guardado { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.quick-add {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 7px 8px 7px 14px; background: #fff; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(13,18,32,.03);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
/* El título manda: ocupa el espacio libre. Los demás campos son fichas compactas. */
.quick-add > input:not([type=date]) { flex: 1 1 200px; min-width: 120px; border: none; padding: 8px 0; background: transparent; font-size: 14px; }
.quick-add > input:not([type=date])::placeholder { color: var(--text-faint); }
.quick-add input:focus { outline: none; }
.quick-add select, .quick-add input[type=date] {
  flex: 0 0 auto; max-width: 168px; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 9px; font-size: 12.5px; color: var(--text-soft); background: var(--bg);
  text-overflow: ellipsis; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.quick-add select:hover, .quick-add input[type=date]:hover { border-color: var(--border-strong); background: var(--surface); }
.quick-add select:focus, .quick-add input[type=date]:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--ring); }
.quick-add:focus-within { border-color: var(--primary); box-shadow: var(--ring); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; background: rgba(13, 18, 32, .94); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index: 200; font-size: 13.5px;
  animation: toastUp .22s var(--ease); display: flex; gap: 14px; align-items: center;
  border: 1px solid rgba(255,255,255,.09);
  transform: translateX(-50%);
}
@keyframes toastUp {
  from { transform: translate(-50%, 14px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.toast button { background: none; border: none; color: #8fb0ff; font-weight: 700; }
.toast button:hover { color: #b6cbff; }

/* Estados vacíos con más aire */
.empty { color: var(--text-faint); text-align: center; padding: 40px 16px; font-size: 13.5px; }

.mini-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.mini-list-item:hover { background: #f9fafb; }
.mini-list-item .m-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Responsive (móvil: iPhone / Android / iPad vertical) ---------- */
/* El botón de menú deja de ser exclusivo del teléfono: en escritorio pliega y
   despliega el panel lateral, y la elección se recuerda entre sesiones. */
.menu-btn { display: inline-flex; }
.sidebar-backdrop { display: none; }
.filters #flt-q { width: 180px; }
.bar-note { font-size: 12px; color: var(--text-faint); margin: -2px 0 8px 150px; }

/* Cajón deslizable: solo en pantallas de teléfono. Antes empezaba a los 800px y
   se llevaba por delante las ventanas de escritorio a media pantalla, que se
   quedaban sin navegación. De 641px en adelante el panel se queda anclado:
   se encoge a riel de iconos, pero no desaparece. */
@media (max-width: 640px) {
  /* Menú lateral deslizable con fondo oscuro para cerrarlo al tocar afuera */
  .sidebar {
    transform: translateX(-100%); transition: transform .2s ease; width: min(300px, 82vw);
    padding-top: max(20px, env(safe-area-inset-top)); padding-left: max(14px, env(safe-area-inset-left));
  }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(16, 24, 40, .4); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, .5); z-index: 39;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .sidebar.open + .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar a.nav-item { padding: 12px; }
  .main { margin-left: 0; }
}

/* Medidas para el dedo: en pantallas táctiles angostas (teléfono, tableta) y en
   cualquier pantalla diminuta. Con ratón sobran — solo restan densidad. */
@media (max-width: 800px) and (pointer: coarse), (max-width: 500px) {
  /* iOS hace zoom automático si un campo tiene letra menor a 16px */
  input, select, textarea { font-size: 16px; }
  .topbar .search input { font-size: 16px; }

  /* Objetivos táctiles más cómodos */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .check-btn { width: 24px; height: 24px; }
  .tabs button { padding: 11px 14px; }
}

@media (max-width: 800px) {
  .topbar {
    gap: 8px; padding: 8px 10px;
    padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right));
  }
  .topbar .search { max-width: none; }
  .topbar .search .icon { top: 11px; }
  .content {
    padding: 16px 12px 40px;
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  }
  .page-title { font-size: 19px; }

  /* Tablas de tareas: en pantallas angostas se oculta la columna Proyecto/Responsable
     para que el título respire. La prioridad se mantiene siempre visible: es la
     señal principal para decidir qué atender primero. Esos datos ocultos siguen
     disponibles al abrir la tarea. */
  .task-table:not(.cal-table) th:nth-child(3), .task-table:not(.cal-table) td:nth-child(3) { display: none; }
  .task-table th, .task-table td { padding: 9px 8px; }

  /* Panel de tarea a pantalla completa, etiquetas encima de cada campo */
  .task-panel { width: 100%; }
  .task-panel .tp-body { padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
  .tp-grid { grid-template-columns: 1fr; gap: 3px 0; }
  .tp-grid .lbl { margin-top: 10px; }
  .tp-grid select, .tp-grid input[type=date], .tp-grid input[type=number] { max-width: none; }

  /* Modales y paneles flotantes */
  .modal { padding: 14px; padding-top: max(14px, env(safe-area-inset-top)); }
  .modal .modal-card { max-height: calc(100dvh - 28px); }
  .form-row { grid-template-columns: 1fr; }
  .notif-panel { left: 8px; right: 8px; width: auto; top: 54px; max-height: 75dvh; }
  .toast {
    left: 12px; right: 12px; transform: none; justify-content: space-between;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Filtros y alta rápida en columna fluida */
  .filters #flt-q { flex: 1 1 150px; width: auto; }
  .filters select { flex: 1 1 40%; min-width: 0; }
  .quick-add { flex-wrap: wrap; padding: 8px 12px; }
  .quick-add input { flex: 1 1 100%; }
  .quick-add select, .quick-add input[type=date] { flex: 1 1 45%; }

  /* Kanban: columnas casi a lo ancho, se navega deslizando */
  .kanban-col { min-width: min(272px, 84vw); width: min(272px, 84vw); }

  /* Cronograma y reportes */
  .gantt-label { width: 120px; }
  .bar-row .bar-lbl { width: 96px; }
  .report-note, .bar-note { margin-left: 0; }

  .progress-editor { max-width: none; }
  .projects-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .auth-card { padding: 28px 20px; }

  /* Calendario en pantalla angosta: celdas más bajas y eventos compactos.
     El texto se corta antes, pero el toque abre el detalle completo. */
  .cal-cell { min-height: 78px; padding: 4px 3px 6px; }
  .cal-cell-semana { min-height: 220px; }
  .cal-ev { font-size: 10.5px; padding: 2px 4px; gap: 3px; }
  .cal-head div { padding: 7px 4px; font-size: 10px; }
  .cal-leyenda { margin-left: 0; }
  .cal-titulo { min-width: 0; }
}

/* Teléfonos (pantalla angosta): completar + título + prioridad + fecha en las listas
   (se oculta Estado, no Prioridad — ver nota arriba) */
@media (max-width: 600px) {
  .task-table:not(.cal-table) th:nth-child(4), .task-table:not(.cal-table) td:nth-child(4) { display: none; }
  input.date-inline { max-width: 96px; padding: 4px 2px; }
  /* En el teléfono el calendario se abre al tocar el campo, así que el iconito
     no hace falta: solo estaba encima de la fecha y la dejaba cortada. */
  input.date-inline::-webkit-calendar-picker-indicator { display: none; }
  .task-table .badge-select.pr-baja, .task-table .badge-select.pr-media,
  .task-table .badge-select.pr-alta, .task-table .badge-select.pr-urgente { max-width: 74px; }
  /* "Completada 13 ago" no cabe de una línea en un teléfono: mejor en dos que
     cortada a la mitad contra el borde. */
  .task-table .due { white-space: normal; }
  .task-table th, .task-table td { padding: 9px 6px; }
}

/* Teléfonos muy angostos */
@media (max-width: 380px) {
  .stat .num { font-size: 22px; }
  .content { padding-left: 10px; padding-right: 10px; }
}

/* ==================== Asistente con IA ==================== */
/* La portada: es lo primero que se ve, así que tiene aire y una sola nota de color. */
.ai-hero {
  position: relative; max-width: 720px; margin: 0 auto;
  padding: 46px 0 34px; text-align: center;
}
.ai-hero-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: min(680px, 96%); height: 320px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(52% 58% at 32% 42%, rgba(105, 65, 198, .16), transparent 70%),
    radial-gradient(48% 56% at 70% 46%, rgba(47, 95, 222, .16), transparent 70%);
  filter: blur(14px);
}
.ai-hero > *:not(.ai-hero-glow) { position: relative; z-index: 1; }
.ai-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--purple); background: var(--purple-soft);
  border-radius: var(--r-pill); padding: 5px 13px 5px 10px; margin-bottom: 18px;
}
.ai-eyebrow .ic { width: 14px; height: 14px; }
.ai-hero-title {
  font-size: clamp(30px, 5vw, 44px); font-weight: 700; line-height: 1.08;
  letter-spacing: -.032em; margin: 0 0 12px; text-wrap: balance; color: var(--text);
}
.ai-grad {
  background: linear-gradient(96deg, var(--primary) 8%, var(--purple) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai-hero-sub {
  font-size: 15.5px; color: var(--text-soft); line-height: 1.55;
  max-width: 520px; margin: 0 auto 26px; text-wrap: pretty;
}
/* El campo de escritura: una superficie sólida que se eleva al enfocarla. */
.ai-composer {
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow); text-align: left;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.ai-composer:focus-within {
  border-color: var(--primary); box-shadow: var(--ring), var(--shadow-md); transform: translateY(-1px);
}
/* Campo con resaltado: dos capas superpuestas. El textarea escribe (con letra
   transparente y solo el cursor visible) y la capa espejo pinta las palabras.
   Comparten ESTA regla a proposito: si la fuente, el relleno o el interlineado
   se separan aunque sea medio pixel, el color se corre de las palabras. */
.ai-campo { position: relative; }
.ai-campo textarea,
.ai-marcas {
  font: inherit; font-size: 16px; line-height: 1.5; letter-spacing: inherit;
  padding: 17px 19px 4px; border: 0; margin: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.ai-composer textarea {
  position: relative; z-index: 1;
  width: 100%; background: transparent; color: transparent; caret-color: var(--text);
  resize: none; overflow-y: auto; min-height: 62px; max-height: 260px; display: block;
}
.ai-marcas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; color: var(--text);
}
/* OJO: la marca NO puede llevar padding, margin ni cambiar el grosor de la
   letra. Cualquiera de las tres altera el ancho del texto y el espejo parte las
   lineas en otro sitio que el textarea, asi que el color se despega de las
   palabras. El "relleno" visual se hace con box-shadow, que no ocupa espacio. */
.ai-marcas mark {
  background: transparent; color: inherit; padding: 0; margin: 0;
  border-radius: 4px;
}
.ai-marcas .m-persona { background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.ai-marcas .m-fecha { background: var(--warn-soft); box-shadow: 0 0 0 2px var(--warn-soft); }
/* La seleccion se ve igual aunque la letra sea transparente */
.ai-composer textarea::selection { background: rgba(47, 95, 222, .22); }
.ai-composer textarea:focus { outline: none; }
.ai-composer textarea::placeholder { color: var(--text-faint); }
.ai-composer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px 12px 19px;
}
.ai-kbd-hint { font-size: 11.5px; color: var(--text-faint); }
.ai-send { border-radius: var(--r-pill); padding-left: 18px; padding-right: 18px; }
.ai-chips { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.ai-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  border-radius: var(--r-pill); padding: 7px 14px; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.ai-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ai-chip { display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px rgba(13,18,32,.04); }
/* El numero del atajo: dato real, por eso se destaca en ambar como el resto de
   lo que llega tarde en la app */
.ai-chip-n {
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--warn); background: var(--warn-soft);
  border-radius: var(--r-pill); padding: 1px 7px;
}

/* Pastilla de marca del asistente */
.ai-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--primary); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 15px 6px 11px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(13,18,32,.05), 0 4px 14px rgba(47,95,222,.10);
}
.ai-pill .ic { width: 14px; height: 14px; }

/* Boton de dictado: circulo con anillo que late mientras escucha */
.ai-acciones { display: inline-flex; align-items: center; gap: 10px; }
.ai-mic {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.ai-mic:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ai-mic:focus-visible { outline: none; box-shadow: var(--ring); }
.ai-mic.escuchando { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); animation: micLate 1.6s var(--ease) infinite; }
@keyframes micLate {
  0%   { box-shadow: 0 0 0 0 rgba(47, 95, 222, .30); }
  70%  { box-shadow: 0 0 0 9px rgba(47, 95, 222, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 95, 222, 0); }
}

/* "Así se ve": la frase de un lado, las tareas que salen del otro */
.ai-demo { margin: 34px auto 8px; max-width: 860px; }
.ai-demo-t {
  text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
  padding-top: 26px; border-top: 1px solid var(--border); margin-bottom: 18px;
}
.ai-demo-fila { display: grid; grid-template-columns: 1fr 28px 1.15fr; gap: 10px; align-items: center; }
.ai-demo-frase {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; font-size: 14px; color: var(--text-soft); line-height: 1.5;
}
.ai-demo-flecha { text-align: center; color: var(--text-faint); font-size: 17px; }
.ai-demo-tareas { display: grid; gap: 8px; }
.ai-demo-tarea {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 16px; font-size: 13.5px; box-shadow: var(--shadow);
}
.ai-demo-tarea .grow { flex: 1; min-width: 0; font-weight: 600; }
.ai-demo-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), #7aa2ff); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
}
.ai-demo-fecha { font-size: 12px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 720px) {
  .ai-demo-fila { grid-template-columns: 1fr; }
  .ai-demo-flecha { transform: rotate(90deg); }
}
.ai-thinking { color: var(--text-soft); padding: 18px; display: flex; align-items: center; gap: 11px; }
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  animation: ai-dot 1.1s var(--ease) infinite;
}
.ai-dots i:nth-child(2) { animation-delay: .16s; background: #4a54d8; }
.ai-dots i:nth-child(3) { animation-delay: .32s; background: var(--purple); }
@keyframes ai-dot { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .ai-dots i { animation: none; opacity: .7; }
  .ai-composer:focus-within { transform: none; }
}

/* ==================== Conexiones (Workplace) ==================== */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cx-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.cx-card.on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.cx-head { display: flex; align-items: center; gap: 12px; }
.cx-logo { width: 26px; height: 26px; flex-shrink: 0; }
.cx-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-nombre b { font-size: 15px; letter-spacing: -.01em; }
.cx-nombre span { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-estado {
  flex-shrink: 0; font-size: 11px; font-weight: 650; border-radius: var(--r-pill);
  padding: 3px 10px; background: var(--ok-soft); color: var(--ok);
}
.cx-servicios { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-svc {
  font-size: 11.5px; border-radius: var(--r-pill); padding: 3px 11px;
  background: var(--bg); color: var(--text-faint); border: 1px solid var(--border);
}
.cx-svc.si { background: var(--ok-soft); color: var(--ok); border-color: transparent; font-weight: 600; }
.cx-aviso {
  font-size: 12px; line-height: 1.45; color: var(--warn);
  background: var(--warn-soft); border-radius: var(--r-md); padding: 9px 12px;
}
.cx-acciones { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.cx-nota {
  margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 18px;
}
.cx-nota b { color: var(--text); }

/* ==================== Papelera ==================== */
.pap-lista { display: flex; flex-direction: column; }
.pap-fila {
  display: flex; align-items: center; gap: 11px; padding: 11px 2px;
  border-top: 1px solid var(--border);
}
.pap-fila:first-child { border-top: 0; }
.pap-ic { display: flex; flex-shrink: 0; color: var(--text-faint); }
.pap-ic .ic { width: 17px; height: 17px; }
.pap-txt { flex: 1; min-width: 0; }
.pap-t { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pap-d { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.pap-dias {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-faint);
  background: var(--bg); border-radius: var(--r-pill); padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.pap-dias.urge { background: var(--warn-soft); color: var(--warn); }
.pap-x {
  flex-shrink: 0; border: 0; background: none; color: var(--text-faint);
  padding: 5px; cursor: pointer; display: inline-flex; border-radius: var(--r-sm);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.pap-x:hover { color: var(--danger); background: var(--danger-soft); }
.pap-x .ic { width: 15px; height: 15px; }
.btn-icon { padding: 8px 10px; display: inline-flex; align-items: center; }
.btn-icon .ic { width: 17px; height: 17px; }
.btn-icon:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@media (max-width: 640px) { .pap-fila { flex-wrap: wrap; } }

/* Lead time y atrasadas en las tarjetas del listado de proyectos */
.pcard-lt {
  font-size: 11.5px; color: var(--text-faint); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.pcard-lt.lt-urge { color: var(--warn); font-weight: 600; }
.pcard-lt.lt-tarde { color: var(--danger); font-weight: 600; }
.pcard-tarde { color: var(--warn); font-weight: 700; }

/* ==================== Lead time del proyecto ==================== */
/* Cuántos días lleva contra cuántos debía llevar. La barra compara el tiempo
   consumido (relleno) con el avance real (marca): si el relleno se adelanta
   mucho a la marca, el proyecto va más lento que el reloj. */
.leadtime {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 16px; padding: 9px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--text-soft);
}
.lt-txt { font-weight: 550; color: var(--text); }
.leadtime.tarde .lt-txt { color: var(--danger); }
.leadtime.urge .lt-txt { color: var(--warn); }
.leadtime.listo .lt-txt { color: var(--ok); }
.lt-barra {
  position: relative; flex: 1; min-width: 120px; max-width: 260px; height: 6px;
  background: var(--bg); border-radius: var(--r-pill); overflow: hidden;
}
.lt-usado { position: absolute; inset: 0 auto 0 0; background: var(--border-strong); border-radius: var(--r-pill); }
.leadtime.tarde .lt-usado { background: var(--danger); }
.leadtime.urge .lt-usado { background: var(--warn); }
.leadtime.listo .lt-usado { background: var(--ok); }
.lt-marca {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text);
  border-radius: 1px; transform: translateX(-1px);
}
.lt-cifras { font-variant-numeric: tabular-nums; color: var(--text-faint); }
.lt-alerta {
  background: var(--warn-soft); color: var(--warn); border-radius: var(--r-pill);
  padding: 2px 10px; font-size: 11.5px; font-weight: 600;
}
@media (max-width: 640px) { .lt-barra { max-width: none; } }

/* ==================== Panel de IA del Home ==================== */
/* Un solo recuadro: arriba qué hacer ahora, abajo qué deberías saber.
   Degradado celeste que se disuelve en blanco, como pidió Nico. */
.pai {
  background: linear-gradient(122deg, #eef2ff 0%, var(--surface) 52%);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(13, 18, 32, .04), 0 10px 30px rgba(47, 95, 222, .07);
  margin-bottom: 20px; overflow: hidden;
}

/* --- Arriba: la recomendación --- */
.pai-ahora { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
.pai-main { flex: 1; min-width: 0; }
.pai-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 5px;
}
.pai-label .ic { width: 13px; height: 13px; }
.pai-title {
  font-size: 17px; font-weight: 650; letter-spacing: -.015em; color: var(--text);
  line-height: 1.3; cursor: pointer; text-wrap: balance;
}
.pai-title:hover { color: var(--primary); }
.pai-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pai-chip {
  background: rgba(255, 255, 255, .75); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 10px; font-size: 11.5px; color: var(--text-soft);
}
.pai-chip.chip-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.pai-why { font-size: 12.5px; color: var(--text-soft); margin-top: 7px; line-height: 1.45; }
.pai-actions { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.pai-vacio { padding: 18px 20px; font-size: 13.5px; color: var(--text-soft); }

/* Nivel de prioridad calculado. Antes era un anillo con el score crudo (0-100):
   un 25 se leia como "poca prioridad" cuando era la tarea mas prioritaria del
   usuario. Ahora dice la palabra, con los mismos colores que las insignias. */
.pai-nivel {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 82px; padding: 10px 14px; border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--border);
}
.pai-nivel-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.pai-nivel-l {
  font-size: 9.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.pai-nivel.pr-baja    { background: #f2f4f7;           border-color: transparent; }
.pai-nivel.pr-baja    .pai-nivel-t { color: #475467; }
.pai-nivel.pr-media   { background: var(--primary-soft); border-color: transparent; }
.pai-nivel.pr-media   .pai-nivel-t { color: var(--primary); }
.pai-nivel.pr-alta    { background: var(--warn-soft);    border-color: transparent; }
.pai-nivel.pr-alta    .pai-nivel-t { color: var(--warn); }
.pai-nivel.pr-urgente { background: var(--danger-soft);  border-color: transparent; }
.pai-nivel.pr-urgente .pai-nivel-t { color: var(--danger); }

/* --- Abajo: los avisos, una línea cada uno --- */
.pai-avisos {
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: saturate(140%) blur(2px);
}
.pai-aviso {
  display: flex; align-items: center; gap: 9px; padding: 8px 20px;
  border-top: 1px solid var(--border); font-size: 12.5px; min-width: 0;
}
.pai-aviso:first-child { border-top: 0; }
.pai-punto { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); }
.pai-aviso.grave .pai-punto { background: var(--danger); }
.pai-aviso.medio .pai-punto { background: var(--warn); }
.pai-a-t { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pai-a-d { flex: 1; min-width: 0; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai-a-ir {
  flex-shrink: 0; border: 1px solid var(--border); background: rgba(255, 255, 255, .8);
  color: var(--text-soft); border-radius: var(--r-pill); padding: 3px 11px; font-size: 11.5px; cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease);
}
.pai-a-ir:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pai-a-x {
  flex-shrink: 0; border: 0; background: none; color: var(--text-faint); padding: 3px;
  cursor: pointer; display: inline-flex; border-radius: var(--r-sm); opacity: 0;
  transition: opacity .14s var(--ease), color .14s var(--ease);
}
.pai-aviso:hover .pai-a-x, .pai-a-x:focus-visible { opacity: 1; }
.pai-a-x:hover { color: var(--text); }
.pai-a-x .ic { width: 13px; height: 13px; }

@media (max-width: 700px) {
  .pai-ahora { align-items: flex-start; }
  .pai-nivel { min-width: 70px; padding: 8px 11px; }
  .pai-nivel-t { font-size: 13px; }
  .pai-aviso { flex-wrap: wrap; padding: 9px 16px; }
  .pai-a-t { max-width: none; white-space: normal; }
  .pai-a-d { flex-basis: 100%; white-space: normal; }
  .pai-a-x { opacity: 1; }
}

/* La propuesta vive en la misma columna que la portada */
#ai-result { max-width: 720px; margin: 0 auto; }

/* Respuesta a una pregunta: conclusión, lo urgente, los datos, por qué, qué hacer */
.ai-answer { margin-top: 16px; }
.ai-answer-head { display: flex; align-items: flex-start; gap: 10px; }
.ai-answer-head .ic { color: var(--purple); flex-shrink: 0; margin-top: 3px; }
.ai-conclusion { font-size: 16.5px; font-weight: 600; line-height: 1.42; letter-spacing: -.012em; color: var(--text); }
.ai-prioridad {
  margin-top: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.45;
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--r-md); border-left: 3px solid currentColor;
}
.ai-items { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--border); }
.ai-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--border); font-size: 13.5px;
  cursor: pointer; transition: background .12s var(--ease);
}
.ai-item:hover { background: var(--bg); }
.ai-item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.ai-item-dot.u-vencida { background: var(--warn); }
.ai-item-dot.u-urgente { background: var(--warn); }
.ai-item-dot.u-pronto { background: var(--primary); }
.ai-item-nombre { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-item-meta { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.ai-item-fecha { font-size: 12px; color: var(--text-soft); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ai-item-fecha.u-vencida { color: var(--warn); font-weight: 600; }
.ai-item-fecha.u-urgente { color: var(--warn); font-weight: 600; }
.ai-item-mas { font-size: 12px; color: var(--text-faint); padding: 9px 4px 0; }
.ai-evidencia { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.ai-evidencia-t {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 6px;
}
.ai-evidencia ul { margin: 0; padding-left: 16px; }
.ai-evidencia li { font-size: 12.5px; color: var(--text-soft); line-height: 1.55; }
.ai-answer-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ai-item-meta { display: none; }
}

/* Historial: la lista de todo lo que le has pedido al asistente */
.ai-hist { max-width: 720px; margin: 40px auto 0; }
.ai-hist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ai-hist-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0; color: var(--text); }
.ai-hist-count { font-size: 12px; color: var(--text-faint); }
.ai-hist-empty {
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  padding: 22px; font-size: 13.5px; color: var(--text-faint); text-align: center;
}
.ai-hist-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.ai-hist-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-top: 1px solid var(--border); transition: background .13s var(--ease);
}
.ai-hist-row:first-child { border-top: 0; }
.ai-hist-row:hover { background: var(--bg); }
.ai-hist-main { flex: 1; min-width: 0; }
.ai-hist-text {
  font-size: 13.5px; color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-hist-meta { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.ai-hist-badge {
  font-size: 11px; font-weight: 600; border-radius: var(--r-pill); padding: 2.5px 9px; white-space: nowrap;
}
.hist-ok { background: var(--ok-soft); color: var(--ok); }
.hist-no { background: var(--bg); color: var(--text-faint); }
.hist-pend { background: var(--warn-soft); color: var(--warn); }
.hist-consulta { background: var(--primary-soft); color: var(--primary); }
.ai-hist-time { font-size: 11.5px; color: var(--text-faint); }
.ai-hist-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ai-hist-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  border-radius: var(--r-pill); padding: 5px 12px; font-size: 12px; cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease);
}
.ai-hist-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ai-hist-del { padding: 5px 8px; display: inline-flex; }
.ai-hist-del .ic { width: 15px; height: 15px; }
.ai-hist-del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@media (max-width: 640px) {
  .ai-hero { padding-top: 30px; }
  .ai-hist-row { flex-wrap: wrap; }
}
.ai-proposal { margin-top: 14px; }
.ai-summary { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.ai-summary .ic { color: var(--primary); }
.ai-task {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 8px;
  background: var(--surface);
}
.ai-task .ai-check { margin-top: 9px; width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.ai-task-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-title {
  width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); background: transparent;
}
.ai-title:hover, .ai-title:focus { border-color: var(--border-strong); background: var(--surface); outline: none; }
.ai-desc { font-size: 12.5px; color: var(--text-soft); padding: 0 6px; }
.ai-props { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-props select, .ai-props input[type="date"] {
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px;
  font: inherit; font-size: 12.5px; color: var(--text-soft); background: var(--bg); max-width: 180px;
}
.ai-proj-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-proj-head .ai-title { flex: 1; font-size: 17px; min-width: 200px; }
.ai-proj-head input[type="date"] { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px; }
.ai-section { margin: 14px 0 4px; }
.ai-section-name {
  font-weight: 700; font-size: 13px; margin-bottom: 8px; padding-left: 10px;
  border-left: 3px solid var(--section-color, var(--primary));
}
.ai-confirm { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.ai-done { padding: 18px; font-size: 15px; }

/* ==================== Pilas AI: ¿Que hago ahora? ==================== */
.ahora-card {
  display: flex; align-items: stretch; gap: 24px;
  background: linear-gradient(122deg, #eef2ff 0%, var(--surface) 46%);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 22px 26px; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(13,18,32,.04), 0 10px 30px rgba(47,95,222,.08);
}
.ahora-main { flex: 1; min-width: 0; }
.ahora-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 8px;
}
.ahora-label .ic { width: 14px; height: 14px; }
.ahora-title {
  font-size: 21px; font-weight: 700; letter-spacing: -.028em; line-height: 1.28;
  cursor: pointer; overflow-wrap: anywhere;
}
.ahora-title:hover { color: var(--primary); }
.ahora-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ahora-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--text-soft);
  box-shadow: 0 1px 2px rgba(13,18,32,.04);
}
.ahora-chip .ic { width: 13px; height: 13px; }
.ahora-chip.chip-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.ahora-why { margin-top: 10px; font-size: 13px; color: var(--text-soft); }
.ahora-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ahora-go { padding: 10px 22px; }
.ahora-empty { font-size: 13.5px; color: var(--text-soft); margin-top: 6px; }

/* Anillo de prioridad */
.ahora-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding-left: 24px; border-left: 1px solid var(--border); cursor: default;
}
.ahora-ring { position: relative; width: 74px; height: 74px; }
.ahora-ring svg { width: 74px; height: 74px; display: block; }
.ahora-ring .ring-bg { fill: none; stroke: var(--border); stroke-width: 4; }
.ahora-ring .ring-val { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; }
.ahora-ring .ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
.ring-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

@media (max-width: 800px) {
  .ahora-card { flex-direction: column; gap: 14px; padding: 18px; }
  .ahora-side { flex-direction: row; padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 12px; justify-content: flex-start; gap: 10px; }
  .ahora-ring, .ahora-ring svg { width: 54px; height: 54px; }
  .ahora-ring .ring-num { font-size: 16px; }
  .ahora-actions .btn { flex: 1; justify-content: center; }
}

/* Pie del panel de tarea: boton Guardar siempre visible */
.task-panel .tp-foot {
  border-top: 1px solid var(--border); background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 13px 20px; padding-bottom: max(13px, env(safe-area-inset-bottom));
  display: flex; justify-content: flex-end;
}

/* Etapas del tablero como etiquetas (modal de nuevo proyecto) */
.stage-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.stage-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-soft);
}
.stage-chip::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px;
  background: var(--section-color, var(--primary));
}

/* ==================== Home: paneles inferiores modernos ==================== */
.panel-soft { border-radius: var(--r-lg); overflow: hidden; }
.panel-soft > h3 {
  background: linear-gradient(180deg, #fbfcfe, var(--surface));
  font-size: 13px; letter-spacing: -.015em;
}
.panel-soft > h3 svg.ic { color: var(--primary); }

/* Próximos vencimientos: rieles de color por urgencia */
.up-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; margin-bottom: 6px; border-radius: var(--r-md);
  background: #f7f8fa; cursor: pointer; transition: background .15s var(--ease), transform .15s var(--ease);
}
.up-item:hover { background: var(--primary-soft); transform: translateX(2px); }
.up-item:last-child { margin-bottom: 0; }
.up-rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--border-strong); }
.up-rail.urge { background: var(--danger); }
.up-rail.hoy { background: var(--warn); }
.up-rail.pronto { background: var(--primary); }
.up-title { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-when { font-size: 12px; font-weight: 600; color: var(--text-faint); white-space: nowrap; min-width: 54px; text-align: right; }
.up-when.urge { color: var(--danger); }
.up-when.hoy { color: var(--warn); }
.up-when.pronto { color: var(--primary); }

/* Actividad reciente: linea de tiempo con puntos */
.act-feed { position: relative; padding-left: 18px; }
.act-feed::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--border); border-radius: 2px; }
.act-feed .hist-item { position: relative; border-bottom: none; padding: 7px 0; }
.act-feed .hist-item::before {
  content: ''; position: absolute; left: -18px; top: 13px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--primary);
}
.act-feed .hist-item:first-child::before { background: var(--primary); }

/* Flechas para reordenar tareas en la vista Lista */
.reorder-cell { white-space: nowrap; text-align: right; }
.reorder-btn {
  border: 1px solid transparent; background: transparent; color: var(--text-faint);
  border-radius: 6px; padding: 2px 4px; line-height: 0;
}
.reorder-btn:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); border-color: var(--border); }
.reorder-btn:disabled { opacity: .22; cursor: default; }
.reorder-btn svg.ic { width: 15px; height: 15px; stroke-width: 2.2; }
.task-row .reorder-cell { opacity: 0; transition: opacity .12s; }
.task-row:hover .reorder-cell, .task-row:focus-within .reorder-cell { opacity: 1; }
@media (hover: none) { .task-row .reorder-cell { opacity: 1; } }

/* Tarjetas de estadisticas clicables (Home) */
button.card.stat {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--border); cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
button.card.stat:hover { transform: translateY(-3px); border-color: #e2e5ec; box-shadow: var(--shadow-md); }
button.card.stat:active { transform: translateY(-1px); }
button.card.stat:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
button.card.stat .lbl::after {
  content: 'Ver \203A'; float: right; font-weight: 700; color: var(--text-faint); opacity: 0; transition: opacity .12s;
}
button.card.stat:hover .lbl::after { opacity: 1; }

/* Enlace para volver */
.back-link {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--text-faint); margin-bottom: 6px;
}
.back-link:hover { color: var(--primary); }
.back-link svg.ic { width: 15px; height: 15px; }

/* Pastillas de filtro (proyectos y tareas) */
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  border-radius: var(--r-pill); padding: 6.5px 15px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(13,18,32,.03);
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.pill b { font-weight: 700; margin-left: 3px; color: var(--text-faint); }
.pill:hover { border-color: #d5d9e2; background: #fbfcfd; box-shadow: var(--shadow); }
.pill.on {
  background: linear-gradient(180deg, #3b6ae6, var(--primary)); border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(13,18,32,.08), 0 3px 10px rgba(47,95,222,.28);
}
.pill.on b { color: rgba(255,255,255,.75); }

/* La tarjeta "Plan de hoy" se quito de Mi dia: hablaba de las tareas de
   PROYECTO mientras la lista de abajo mostraba las cosas del dia, asi que
   eran dos listas distintas en una pantalla. Esa inteligencia vive en Home.
   Sobrevive .plan-min porque la reusa "Dividir en pasos" del panel de tarea. */
.plan-min { color: var(--text-faint); font-weight: 500; font-size: 11.5px; }

/* Aviso de riesgo de proyecto (Pilas AI) */
.riesgo-card { padding: 16px 20px; margin-bottom: 18px; border-left: 3px solid var(--warn); background: linear-gradient(120deg, var(--warn-soft) 0%, var(--surface) 42%); }
.riesgo-card.riesgo-alto { border-left-color: var(--danger); background: linear-gradient(120deg, var(--danger-soft) 0%, var(--surface) 42%); }
.riesgo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.riesgo-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.riesgo-alto .riesgo-label { color: var(--danger); }
.riesgo-score { font-size: 11.5px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.riesgo-texto { font-size: 13.5px; color: var(--text-soft); }
.riesgo-texto b { color: var(--text); }
.riesgo-motivos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.riesgo-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.riesgo-card .btn { margin-top: 12px; }

/* Dividir tarea en pasos (Pilas AI) */
.split-cargando, .split-nota { font-size: 13px; color: var(--text-soft); padding: 12px 2px; }
.split-box { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin-top: 12px; background: linear-gradient(120deg, #f7f9ff 0%, var(--surface) 55%); }
.split-motivo { font-size: 12.5px; color: var(--text-soft); margin-bottom: 10px; }
.split-paso { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.split-paso input.split-ck { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.split-titulo {
  flex: 1; min-width: 0; border: 1px solid transparent; border-radius: var(--r-sm); padding: 5px 8px;
  font: inherit; font-size: 13.5px; background: transparent;
}
.split-titulo:hover { background: var(--surface); border-color: var(--border); }
.split-titulo:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: var(--ring); }
.split-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---------- App instalada (Android / iOS con Capacitor) ----------
   La clase .app-nativa la pone public/nativo.js. Son los detalles que separan
   "una web dentro de un marco" de algo que se siente como una app: sin rebote
   al llegar al final, sin menú de copiar al mantener pulsado un botón, y con
   aire abajo para la barra de gestos del teléfono. */
html.app-nativa, html.app-nativa body { overscroll-behavior-y: none; }
html.app-nativa .btn,
html.app-nativa .nav-item,
html.app-nativa .avatar,
html.app-nativa .check-btn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.app-nativa .content { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
html.app-nativa .kanban { -webkit-overflow-scrolling: touch; }
/* iPad e iPhone en horizontal: el teclado reduce la altura visible, y con vh el
   modal se pasa de largo. dvh mide lo que de verdad se ve. */
html.app-ios .modal .modal-card { max-height: calc(100dvh - 96px); }

/* ==================== EQUILIBRIO (rediseño 14 ago 2026) ====================
   Propuesta D del rediseño, elegida por Nico y auditada en la copia
   pilas-diseno: la base clásica + la respiración de "Aire" + el color con
   propósito de "Pulso". Vive como bloque de ajustes al final del archivo
   para que todo el rediseño se lea en un solo lugar.
   Nota: las franjas de urgencia por fila se probaron en la copia y Nico las
   descartó dos veces — NO reintroducirlas; la pastilla de prioridad y el
   color de la fecha ya cuentan la urgencia. */

:root {
  --bg: #f8f9fc;
  --shadow: 0 1px 2px rgba(13, 18, 32, .05), 0 6px 16px rgba(13, 18, 32, .05);
  --shadow-md: 0 2px 6px rgba(13, 18, 32, .05), 0 12px 28px rgba(13, 18, 32, .09);
}

/* --- Aire: las tarjetas flotan por sombra, el borde desaparece --- */
.card { border-color: transparent; box-shadow: var(--shadow); }
.kcard { border-color: transparent; box-shadow: var(--shadow); }
.kcard:hover { box-shadow: var(--shadow-md); }

/* --- Aire: respiración en escritorio (el móvil conserva sus medidas justas) --- */
@media (min-width: 801px) {
  .content { padding: 34px 38px 56px; }
  .page-title { font-size: 27px; letter-spacing: -.035em; }
  .page-sub { font-size: 14px; }
  .page-head { margin-bottom: 22px; }
  .stats-grid { gap: 16px; margin-bottom: 28px; }
  .grid-2 { gap: 20px; }
  .projects-grid { gap: 18px; }
  .stat { padding: 19px 20px 17px; }
  .stat .num { font-size: 30px; }
}

/* --- Pulso: filo de color arriba y número en color en las stat cards --- */
.stat { border-top: 3px solid var(--border-strong); }
.stat::after { display: none; }
.stat.primary { border-top-color: #2f5fde; }
.stat.primary .num { color: var(--primary); }
.stat.warn { border-top-color: #e08c2d; }
.stat.ok { border-top-color: #12a45e; }
.stat.purple { border-top-color: #8f6ae0; }
.stat.danger { border-top-color: #d92d20; }

/* --- Pulso: la barra de avance cuenta una historia (azul → verde) --- */
.progress-bar > div { background: linear-gradient(90deg, #2f5fde, #12a45e); }
.progress-bar.ok > div { background: #12b76a; }

/* --- Pulso: filo de color arriba de cada tarjeta de proyecto según su estado --- */
.pcard { border-top: 3px solid #2f5fde; }
.pcard:hover { border-color: transparent; border-top-color: #2f5fde; }
.pcard:has(.pj-en_riesgo), .pcard:has(.pj-en_riesgo):hover { border-top-color: #d92d20; }
.pcard:has(.pj-completado), .pcard:has(.pj-completado):hover { border-top-color: #12a45e; }
.pcard:has(.pj-pausado), .pcard:has(.pj-pausado):hover { border-top-color: #e08c2d; }
.pcard:has(.pj-planificado), .pcard:has(.pj-planificado):hover { border-top-color: #98a2b3; }
.pcard:has(.pj-cancelado), .pcard:has(.pj-cancelado):hover { border-top-color: #98a2b3; }

/* --- Aire: el gradiente celeste del panel de IA se vuelve la firma --- */
.pai {
  border-color: transparent;
  background: linear-gradient(122deg, #e9f0ff 0%, var(--surface) 58%);
  box-shadow: 0 1px 2px rgba(13, 18, 32, .04), 0 12px 34px rgba(47, 95, 222, .10);
}

/* Botón primario con un brillo sutil del azul de la casa */
.btn-primary { box-shadow: 0 1px 2px rgba(13, 18, 32, .08), 0 3px 10px rgba(47, 95, 222, .30); }

/* --- Asistente alineado a la firma celeste (fuera el morado) --- */
.ai-hero-glow {
  background:
    radial-gradient(52% 58% at 32% 42%, rgba(47, 95, 222, .13), transparent 70%),
    radial-gradient(48% 56% at 70% 46%, rgba(122, 162, 255, .18), transparent 70%);
}
.ai-eyebrow { color: var(--primary); background: var(--primary-soft); }
.ai-grad {
  background: linear-gradient(96deg, #2f5fde 8%, #7aa2ff 92%);
  -webkit-background-clip: text; background-clip: text;
}
.ai-composer { border-color: transparent; box-shadow: var(--shadow-md); }
.ai-composer:focus-within { border-color: var(--primary); }
.ai-dots i:nth-child(2) { background: #5b82e8; }
.ai-dots i:nth-child(3) { background: #7aa2ff; }

/* --- Equipos (estructura de la empresa) --- */
.muted { color: var(--text-faint); }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.teams-grid > * { min-width: 0; }
.team-card h3 { justify-content: space-between; }
.team-card h3 .team-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team-card .team-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.team-card .team-row label { color: var(--text-soft); min-width: 64px; }
.team-card .team-row select { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; }
.team-card .team-people { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.team-card .team-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.team-card .team-person .team-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team-card .team-person .btn-sm { padding: 2px 8px; }
.team-card .team-add { display: flex; gap: 8px; margin-top: 10px; }
.team-card .team-add select { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; }

/* ==================================================
   PANEL DE TAREA EN PESTANAS: General - Chat - Archivos
   El panel deja de ser una tira larga: los datos en General,
   la conversacion en Chat y los adjuntos en Archivos.
   ================================================== */
.task-panel [hidden] { display: none !important; }
.task-panel .tp-tabs { margin: 12px 18px 0; flex: none; }
.tp-cont {
  display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px;
  background: #e4e8f0; color: var(--text-soft); border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tabs button.active .tp-cont { background: var(--primary-soft); color: var(--primary); }

/* ---------- Chat: conversacion en burbujas ---------- */
.task-panel .tp-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-hilo { flex: 1; overflow-y: auto; padding: 16px 20px 10px; }

.chat-dia { text-align: center; margin: 16px 0 12px; }
.chat-dia span {
  font-size: 11.5px; font-weight: 600; color: var(--text-faint);
  background: #f1f3f7; padding: 3px 12px; border-radius: var(--r-pill);
}
/* Los cambios de la tarea se cuentan como lineas de sistema, igual que iMessage */
.chat-evento { text-align: center; font-size: 11.5px; color: var(--text-faint); margin: 10px auto; max-width: 86%; line-height: 1.55; }
.chat-evento b { color: var(--text-soft); font-weight: 600; }

.chat-fila { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.chat-fila.seguida { margin-top: 2px; }
.chat-fila.mia { flex-direction: row-reverse; }
.chat-av { width: 26px; flex: none; }
.chat-col { max-width: 76%; min-width: 0; display: flex; flex-direction: column; }
.chat-fila.mia .chat-col { align-items: flex-end; }
.chat-quien { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin: 0 0 3px 13px; }

.burbuja {
  padding: 9px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow);
}
.chat-fila:not(.mia) .burbuja { background: #f1f3f7; color: var(--text); border-bottom-left-radius: 5px; }
.chat-fila:not(.mia).seguida .burbuja { border-top-left-radius: 5px; }
.chat-fila.mia .burbuja { background: linear-gradient(180deg, #4a77e8, var(--primary)); color: #fff; border-bottom-right-radius: 5px; }
.chat-fila.mia.seguida .burbuja { border-top-right-radius: 5px; }
.burbuja .mention { color: var(--primary); font-weight: 600; }
.chat-fila.mia .burbuja .mention { color: #fff; background: rgba(255,255,255,.2); border-radius: var(--r-sm); padding: 0 4px; }

.chat-pie { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--text-faint); margin: 4px 13px 0; }
.chat-borrar {
  border: none; background: none; color: var(--text-faint); font-size: 11px; padding: 0;
  opacity: 0; transition: opacity .15s var(--ease), color .15s var(--ease);
}
.chat-fila:hover .chat-borrar, .chat-borrar:focus-visible { opacity: 1; color: var(--danger); }

.chat-vacio { text-align: center; padding: 40px 22px; max-width: 340px; margin: 0 auto; }
.chat-vacio .cv-icono { color: var(--primary); opacity: .45; }
.chat-vacio .cv-icono svg.ic { width: 34px; height: 34px; }
.chat-vacio .cv-titulo { font-weight: 700; margin: 10px 0 5px; }
.chat-vacio .cv-nota { font-size: 12.5px; color: var(--text-faint); line-height: 1.55; }

.task-panel .tp-foot-chat { flex-direction: column; align-items: stretch; gap: 7px; }
.chat-composer { display: flex; align-items: flex-end; gap: 9px; }
.chat-composer textarea {
  flex: 1; resize: none; max-height: 140px; overflow-y: auto; font-family: inherit; font-size: 14px; line-height: 1.45;
  padding: 10px 15px; border: 1px solid var(--border-strong); border-radius: 20px; background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-composer textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.chat-enviar {
  flex: none; width: 38px; height: 38px; border: none; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, #4a77e8, var(--primary)); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease);
}
.chat-enviar:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.chat-enviar svg.ic { width: 18px; height: 18px; vertical-align: 0; }
.chat-ayuda { font-size: 11px; color: var(--text-faint); text-align: center; }

/* ---------- Archivos: zona de arrastre y lista ---------- */
.arch-zona {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 26px 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  background: #fafbfd; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.arch-zona:hover, .arch-zona.sobre { border-color: var(--primary); background: var(--primary-soft); }
.arch-zona .az-ic { color: var(--primary); }
.arch-zona .az-ic svg.ic { width: 26px; height: 26px; vertical-align: 0; }
.arch-zona .az-txt { font-size: 13.5px; color: var(--text-soft); }
.arch-zona .az-nota { font-size: 12px; color: var(--primary); font-weight: 600; }
.arch-acciones { display: flex; justify-content: flex-end; margin-top: 10px; }

.arch-fila { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.arch-ic { color: var(--text-faint); flex: none; display: flex; }
.arch-datos { flex: 1; min-width: 0; }
.arch-nombre { font-size: 13.5px; font-weight: 600; display: block; overflow-wrap: anywhere; }
.arch-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.arch-bajar { color: var(--text-faint); flex: none; display: flex; padding: 6px; border-radius: var(--r-sm); }
.arch-bajar:hover { color: var(--primary); background: var(--primary-soft); }
.arch-vacio { text-align: center; color: var(--text-faint); font-size: 13px; padding: 24px 0; }

@media (max-width: 800px) {
  .task-panel .tp-tabs { margin: 10px 14px 0; }
  .chat-hilo { padding: 14px 14px 8px; }
  .chat-col { max-width: 82%; }
}

/* ==================================================
   MI DIA: boton de voz, completadas aparte y aviso de ayer
   ================================================== */

/* El microfono no tenia ni una linea de estilo: salia como boton crudo del
   navegador. Ahora es el mismo azul de la marca, redondo y con estado. */
.md-mic {
  flex: none; width: 32px; height: 32px; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); background: var(--primary-soft);
  transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.md-mic svg.ic { width: 17px; height: 17px; vertical-align: 0; }
.md-mic:hover {
  background: linear-gradient(145deg, #4a77e8, var(--primary)); color: #fff;
  transform: translateY(-1px); box-shadow: var(--shadow);
}
.md-mic:focus-visible { outline: none; box-shadow: var(--ring); }
/* Escuchando: azul lleno con un latido, para que se note que esta grabando */
.md-mic.escuchando {
  background: linear-gradient(145deg, #4a77e8, var(--primary)); color: #fff;
  animation: mdLatido 1.5s var(--ease) infinite;
}
@keyframes mdLatido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 95, 222, .40); }
  70% { box-shadow: 0 0 0 8px rgba(47, 95, 222, 0); }
}
@media (prefers-reduced-motion: reduce) { .md-mic.escuchando { animation: none; } }

/* El de las notas flota dentro del recuadro, abajo a la derecha */
.md-nota-caja { position: relative; }
/* La nota se siente hoja, no campo de formulario: sin borde en reposo, crece
   con el texto (lo hace app.js) y por eso no necesita barra de scroll. */
.md-nota-caja .md-nota {
  padding-bottom: 44px; border-color: transparent; resize: none; overflow: hidden;
  font-size: 14px; line-height: 1.7;
}
.md-nota-caja .md-nota:hover { border-color: var(--border); }
.md-mic-nota {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--surface); box-shadow: var(--shadow);
}

/* ---------- Completadas: fuera de la lista del dia ---------- */
.md-hechas { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 6px; }
.md-hechas-cab {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 4px;
  border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  transition: color .15s var(--ease);
}
.md-hechas-cab:hover { color: var(--text); }
.md-hechas-cab .mdh-flecha { display: flex; color: var(--text-faint); transition: transform .2s var(--ease); }
.md-hechas.abierta .md-hechas-cab .mdh-flecha { transform: rotate(180deg); }
.md-hechas-cab .mdh-num {
  background: var(--ok-soft); color: var(--ok); border-radius: var(--r-pill);
  padding: 1px 9px; font-size: 11.5px; font-weight: 700;
}
.md-hechas-lista { display: none; }
.md-hechas.abierta .md-hechas-lista { display: block; }
.md-hechas-lista .md-item { opacity: .75; }
.md-hechas-lista .md-item:hover { opacity: 1; }
.md-hora { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------- Aviso de pendientes de ayer ---------- */
/* Ambar, que en esta app significa "algo llega tarde" (el rojo es riesgo real) */
.md-arrastre {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  background: var(--warn-soft); border: 1px solid rgba(247, 144, 9, .22);
  border-radius: var(--r-lg); padding: 13px 16px; margin-bottom: 16px;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.md-arrastre .mda-ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247, 144, 9, .16); color: var(--warn);
}
.md-arrastre .mda-ic svg.ic { width: 18px; height: 18px; vertical-align: 0; }
.md-arrastre .mda-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 1px; }
.md-arrastre .mda-txt b { font-size: 13.5px; color: var(--warn); }
.md-arrastre .mda-txt span { font-size: 12.5px; color: var(--text-soft); }
.md-arrastre .mda-btn {
  background: var(--surface); border-color: rgba(247, 144, 9, .3); color: var(--warn); font-weight: 600;
}
.md-arrastre .mda-btn:hover { background: #fff; border-color: var(--warn); }
.md-arrastre.mda-fuera { opacity: 0; transform: translateY(-6px); }

/* ---------- Mis tareas: proyecto que lleva al proyecto ---------- */
.t-proj-cell { font-size: 12.5px; color: var(--text-soft); }
.t-proj { color: var(--text-soft); border-bottom: 1px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.t-proj:hover { color: var(--primary); border-bottom-color: currentColor; }
.t-proj-none { color: var(--text-faint); }

/* Boton para desplegar el resto de las completadas */
.task-table tr.mt-mas td { padding: 10px 14px; border-bottom: 1px solid var(--border); }

/* ==================================================
   Pilas AI — más inteligencia (rama ia-mejoras)
   ================================================== */

/* Lo aprendido del feedback, bajo la recomendación del Home */
.pai-aprendido { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; font-style: italic; }

/* Plan de hoy: notas (autopilot, estimar) */
.plan-nota { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-soft); margin-top: 10px; }
.est-titulo { pointer-events: none; background: transparent; }
.est-min { width: 64px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; text-align: right; }

/* Panel de tarea: duración */
.tp-dur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-dur input[type=number] { width: 72px; }
.tp-dur .hint { font-size: 12px; }

/* Predicción de entrega en la tarjeta de riesgo */
.riesgo-prediccion { font-size: 13px; color: var(--text); margin-top: 6px; font-weight: 500; }

/* Resumen de proyecto */
.resumen-ia { padding: 14px 20px; margin-bottom: 18px; }
.resumen-ia-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resumen-ia-body { margin-top: 8px; font-size: 13.5px; }
.resumen-ia-body.hint { font-size: 12.5px; }
.resumen-ia-texto { margin: 0 0 10px; line-height: 1.55; color: var(--text); }
.resumen-ia-alerta { background: var(--warn-soft); color: var(--text); border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 13px; }
.resumen-ia-sig ol { margin: 4px 0 8px 18px; padding: 0; }
.resumen-ia-sig li { margin: 2px 0; }

/* Posibles duplicados en la propuesta */
.ai-dup { font-size: 12px; color: var(--warn-text, #93500b); background: var(--warn-soft); border-radius: 6px; padding: 5px 8px; margin: 4px 0 6px; }
.ai-dup a { color: inherit; font-weight: 600; }

/* Modal de tarea: afinar */
.tm-title-row { display: flex; gap: 8px; align-items: center; }
.tm-title-row input { flex: 1; }
#tm-afinar-nota { margin: -6px 0 10px; }

/* Herramientas de Pilas AI */
.ai-tools { max-width: 980px; margin: 32px auto 0; }
.ai-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ai-tool { padding: 14px 16px; }
.ai-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ai-tool-body { font-size: 13.5px; }
.ai-tool-body.hint { font-size: 12.5px; }
.ai-tool-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.ai-tool-tab { border: 0; background: transparent; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text-soft); }
.ai-tool-tab.activa { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ai-tool-sel { font-size: 12.5px; max-width: 200px; }
.ai-tool .inline-add { margin-top: 0; }
.ai-tool .ai-items { margin-top: 8px; }
.retro-cifras { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.retro-cifras span { font-size: 12.5px; color: var(--text-soft); }
.retro-cifras b { font-size: 18px; color: var(--text); margin-right: 3px; }
.retro-frases { margin: 0 0 8px 16px; padding: 0; line-height: 1.5; }
.reasig-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.reasig-txt { flex: 1; min-width: 0; font-size: 13px; }
.salud-tipos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }

/* Acción masiva sobre los resultados de una consulta */
.ai-masiva { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.ai-masiva summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.ai-masiva-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 6px; }
.ai-masiva-form select, .ai-masiva-form input { font-size: 13px; }