/* =========================================================
   Mecapacito Admin - Panel del equipo de programacion
   Estilo NEUMORFISTA: superficies del mismo color que el fondo,
   relieve con doble sombra (clara + oscura), colores planos de la
   paleta Mecapacito como acentos. Modo oscuro con html.dark.
   ========================================================= */

:root {
  /* Variables que en el sitio inyecta SiteSettings; aqui las fijamos */
  --c-primary: var(--c-azul-cobalto);
  --c-primary-rgb: 26, 75, 153;
  --c-secondary: var(--c-azul-electrico);
  --c-secondary-rgb: 43, 118, 247;
  --c-accent: var(--c-amarillo);
  --c-accent-rgb: 255, 215, 0;

  --sidebar-w: 264px;

  /* ----- Tokens neumorfismo (claro) ----- */
  --n-bg: #e5eaf3;          /* base: fondo Y superficies */
  --n-sh-d: #c2cbdb;        /* sombra oscura */
  --n-sh-l: #ffffff;        /* sombra clara */
  --n-radius: 20px;

  --sh-card:  9px 9px 20px var(--n-sh-d), -9px -9px 20px var(--n-sh-l);
  --sh-soft:  5px 5px 12px var(--n-sh-d), -5px -5px 12px var(--n-sh-l);
  --sh-mini:  3px 3px 7px  var(--n-sh-d), -3px -3px 7px  var(--n-sh-l);
  --sh-inset: inset 4px 4px 9px var(--n-sh-d), inset -4px -4px 9px var(--n-sh-l);
  --sh-inset-mini: inset 2px 2px 5px var(--n-sh-d), inset -2px -2px 5px var(--n-sh-l);

  /* ----- Tokens claymorphism: brillo interior + sombra baja ----- */
  --clay-hi: rgba(255, 255, 255, .65);   /* highlight interior sup-izq */
  --clay-lo: rgba(30, 55, 100, .06);     /* sombra interior inf-der */
  --clay-pop: inset 2px 2px 5px rgba(255,255,255,.35), inset -3px -3px 6px rgba(0,0,0,.18);
}

/* ----- Modo oscuro ----- */
html.dark {
  --n-bg: #262c3a;
  --n-sh-d: #1a1f2a;
  --n-sh-l: #313a4c;

  /* Neutrales de mecapacito.css re-mapeados */
  --c-bg: var(--n-bg);
  --c-bg-soft: #2b3343;
  --c-text: #e9edf6;
  --c-text-muted: #b6c0d2;
  --c-text-soft: #8e99ae;
  --c-border: rgba(255, 255, 255, .09);
  --c-border-soft: rgba(255, 255, 255, .06);

  --clay-hi: rgba(255, 255, 255, .06);
  --clay-lo: rgba(0, 0, 0, .25);

  /* Sombras recalibradas: menos "agujero negro", relieve mas fino */
  --sh-card:  9px 9px 22px rgba(0, 0, 0, .38), -6px -6px 16px rgba(255, 255, 255, .035);
  --sh-soft:  5px 5px 12px rgba(0, 0, 0, .32), -4px -4px 10px rgba(255, 255, 255, .035);
  --sh-mini:  3px 3px 7px  rgba(0, 0, 0, .28), -2px -2px 6px  rgba(255, 255, 255, .035);
  --sh-inset:      inset 4px 4px 9px rgba(0, 0, 0, .32), inset -3px -3px 8px rgba(255, 255, 255, .045);
  --sh-inset-mini: inset 2px 2px 5px rgba(0, 0, 0, .26), inset -2px -2px 5px rgba(255, 255, 255, .045);
}

/* En oscuro los bordes tintados brillaban demasiado: tinte minimo y neutro */
html.dark .card-base {
  border-color: color-mix(in srgb, var(--card-c) 10%, rgba(255, 255, 255, .07));
}
html.dark .card-base:hover {
  border-color: color-mix(in srgb, var(--card-c) 24%, rgba(255, 255, 255, .08));
}
html.dark .proyecto-hero {
  border-color: color-mix(in srgb, var(--pc, var(--c-secondary)) 14%, rgba(255, 255, 255, .07));
}
html.dark .dlg-meca {
  border-color: rgba(255, 255, 255, .09);
}
html.dark .estado-tile {
  border-color: color-mix(in srgb, currentColor 16%, rgba(255, 255, 255, .06));
}

/* Inputs y selects en oscuro: superficie propia, no un hueco negro */
html.dark .input-meca,
html.dark .select-meca {
  background-color: var(--c-bg-soft);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05);
}
html.dark .input-meca:focus,
html.dark .select-meca:focus {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .22), 0 0 0 2.5px rgba(var(--c-secondary-rgb), .45);
}
html.dark .persona-preview,
html.dark .icon-galeria,
html.dark .ajuste-iconos-preview {
  background: rgba(0, 0, 0, .12);
}

* { box-sizing: border-box; }
body { margin: 0; }

/* ----- Scrollbars del design system ----- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c-text-soft) 35%, var(--n-bg)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-text-soft) 32%, var(--n-bg));
  border-radius: 999px;
  border: 3px solid var(--n-bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-secondary); }
*::-webkit-scrollbar-corner { background: transparent; }

.admin-body {
  background: var(--n-bg);
  min-height: 100vh;
  transition: background .3s ease;
}

/* =========================================================
   Sidebar (misma superficie, relieve sutil)
   ========================================================= */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--n-bg);
  box-shadow: var(--sh-card);
  padding: 22px 18px;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  transition: background .3s ease, width .3s cubic-bezier(.2,.8,.2,1), padding .3s ease;
}

.sidebar-top {
  display: flex; align-items: center; gap: 10px;
}
.sidebar-top .sidebar-brand { flex: 1; min-width: 0; }

.sidebar-toggle {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 0; border-radius: 50%;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem;
  transition: color .2s ease, box-shadow .2s ease;
}
.sidebar-toggle:hover { color: var(--c-secondary); }
.sidebar-toggle:active { box-shadow: var(--sh-inset-mini); }
.sidebar-toggle i { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--c-text);
  padding: 12px 14px;
  border-radius: 18px;
  box-shadow: var(--sh-soft);
  transition: box-shadow .25s ease;
}
.sidebar-brand:active { box-shadow: var(--sh-inset-mini); }
.sidebar-brand img {
  width: 44px; height: 44px; object-fit: contain;
  background: #fff;
  border-radius: 13px; padding: 5px;
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .25);
  transition: transform .3s ease;
}
html.dark .sidebar-brand img {
  background: #dfe6f2;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
html.dark .sidebar-brand { border: 1px solid rgba(255, 255, 255, .06); }
html.sb-collapsed .sidebar-brand { padding: 8px; border-radius: 16px; }
.sidebar-brand:hover img { transform: rotate(-6deg) scale(1.06); }
.sidebar-brand strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
}
.sidebar-brand span {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-secondary);
}

/* Chip global "Ver como" en el sidebar */
.ver-como {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
}
.vc-abrir {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid color-mix(in srgb, var(--c-secondary) 22%, var(--n-bg));
  border-radius: 13px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.vc-abrir i { color: var(--c-secondary); }
.vc-abrir:hover { border-color: var(--c-secondary); color: var(--c-text); }
.vc-abrir:active { box-shadow: var(--sh-inset-mini); }
html.dark .vc-abrir { border-color: rgba(255, 255, 255, .14); }
html.dark .vc-abrir:hover { border-color: color-mix(in srgb, var(--c-secondary) 60%, transparent); }
.ver-como.activo .vc-abrir {
  border-color: color-mix(in srgb, var(--c-secondary) 45%, var(--n-bg));
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text);
}
.vc-abrir .avatar { box-shadow: none; flex-shrink: 0; }
.vc-abrir .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-quitar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-soft);
  font-size: .78rem;
  transition: color .2s ease, box-shadow .2s ease;
}
.vc-quitar:hover { color: var(--c-terracota); }
.vc-quitar:active { box-shadow: var(--sh-inset-mini); }
html.sb-collapsed .ver-como { flex-direction: column; align-items: center; gap: 8px; }
html.sb-collapsed .ver-como .truncate { display: none; }
html.sb-collapsed .vc-abrir {
  flex: initial;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
html.sb-collapsed .vc-abrir .avatar { margin: 0; }

.sidebar-nav { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; flex: 1; }
.sidebar-label {
  padding: 14px 12px 6px;
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-text-soft);
}
.sidebar-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: 13px;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: .89rem; font-weight: 600;
  transition: box-shadow .22s ease, color .22s ease;
}
.sidebar-link i { width: 18px; text-align: center; font-size: .95rem; }
.sidebar-link:hover { box-shadow: var(--sh-mini); color: var(--c-text); }
.sidebar-link.active {
  position: relative;
  box-shadow: var(--sh-inset-mini),
    0 0 0 1.5px color-mix(in srgb, var(--c-secondary) 40%, transparent),
    0 0 18px -3px color-mix(in srgb, var(--c-secondary) 75%, transparent);
  color: var(--c-secondary);
}
/* Barra de neón a un lado del ítem activo */
.sidebar-link.active::before {
  content: "";
  position: absolute; left: 6px; top: 22%; bottom: 22%;
  width: 3px; border-radius: 999px;
  background: var(--c-secondary);
  box-shadow: 0 0 8px 1px var(--c-secondary), 0 0 16px 2px color-mix(in srgb, var(--c-secondary) 65%, transparent);
  animation: neon-pulse 2.2s ease-in-out infinite;
}
@keyframes neon-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
html.sb-collapsed .sidebar-link.active::before { left: 3px; top: 28%; bottom: 28%; }
.sidebar-link.active i { color: var(--c-secondary) !important; }
.sidebar-link .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-link-new {
  margin-top: 8px;
  border: 1.5px dashed var(--c-text-soft);
  color: var(--c-naranja);
}
.sidebar-link-new:hover { border-color: var(--c-naranja); color: var(--c-naranja); }

.sidebar-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 6px 4px;
  font-size: .72rem; font-weight: 600; color: var(--c-text-soft);
}
.sidebar-foot i { color: var(--c-verde-esmeralda); }

/* ----- Toggle de tema (switch neumorfico) ----- */
.theme-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 74px; height: 34px;
  padding: 0 9px;
  border: 0; border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle .tt-sol  { color: var(--c-naranja); font-size: .85rem; z-index: 3; }
.theme-toggle .tt-luna { color: var(--c-text-soft); font-size: .82rem; z-index: 3; }
.theme-toggle .tt-knob {
  position: absolute; top: 4px; left: 5px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
html.dark .theme-toggle .tt-knob { transform: translateX(38px); }
html.dark .theme-toggle .tt-luna { color: var(--c-cian); }
html.dark .theme-toggle .tt-sol  { color: var(--c-text-soft); }

/* =========================================================
   Main
   ========================================================= */
.admin-main {
  margin-left: var(--sidebar-w);
  padding: 36px clamp(16px, 3.5vw, 44px) 64px;
  max-width: 1560px;
  transition: margin-left .3s cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   Sidebar colapsado (riel de iconos)
   ========================================================= */
html.sb-collapsed { --sidebar-w: 96px; }

html.sb-collapsed .sidebar { padding: 22px 14px; }
html.sb-collapsed .sidebar-top { flex-direction: column-reverse; gap: 12px; }
html.sb-collapsed .sidebar-toggle i { transform: rotate(180deg); }
html.sb-collapsed .sidebar-brand {
  padding: 10px;
  justify-content: center;
  flex: initial;
  width: 100%;
}
html.sb-collapsed .sidebar-brand > div { display: none; }

html.sb-collapsed .sidebar-label {
  padding: 12px 0 4px;
  text-align: center;
  overflow: hidden; white-space: nowrap;
  font-size: .58rem;
}
html.sb-collapsed .sidebar-link {
  justify-content: center;
  padding: 12px 0;
}
html.sb-collapsed .sidebar-link .truncate { display: none; }
html.sb-collapsed .sidebar-link i { width: auto; font-size: 1.05rem; }

html.sb-collapsed .sidebar-foot {
  flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 0 4px;
}
html.sb-collapsed .sidebar-foot > span { display: none; }
html.sb-collapsed .theme-toggle { width: 62px; padding: 0 8px; }
html.sb-collapsed.dark .theme-toggle .tt-knob { transform: translateX(26px); }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.page-title { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--c-text); }
.page-sub { margin: 6px 0 0; color: var(--c-text-soft); font-size: .95rem; }

/* =========================================================
   Botones
   ========================================================= */
.btn-meca {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 19px;
  border-radius: 13px;
  border: 0; cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  text-decoration: none;
  transition: box-shadow .22s ease, transform .22s ease, color .22s ease, background .22s ease;
}

/* Primario: acento plano azul con relieve */
/* Botón primario (guardar / crear / confirmar) — SIEMPRE en verde */
.btn-primary.btn-meca {
  background: var(--c-verde-esmeralda);
  color: #fff; font-weight: 700;
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--c-verde-esmeralda) 30%, var(--n-sh-d)),
    -5px -5px 12px var(--n-sh-l),
    var(--clay-pop);
}
.btn-primary.btn-meca:hover { background: #1e8f5c; transform: translateY(-1px); }
.btn-primary.btn-meca:active { box-shadow: var(--sh-inset-mini); transform: none; }

/* Secundario: superficie neumorfica con texto de acento */
.btn-outline.btn-meca {
  border: 0;
  background: var(--n-bg);
  color: var(--c-secondary); font-weight: 700;
  box-shadow: var(--sh-soft);
}
.btn-outline.btn-meca:hover { color: var(--c-azul-cobalto); }
.btn-outline.btn-meca:active { box-shadow: var(--sh-inset-mini); }

/* Ghost (se usa en el hero del proyecto): ahora tambien neumorfico */
.btn-ghost.btn-meca {
  border: 1px solid var(--c-border-soft);
  background: var(--n-bg);
  color: var(--c-text-muted); font-weight: 600;
  box-shadow: var(--sh-mini);
}
.btn-ghost.btn-meca:hover {
  color: var(--c-text);
  background: var(--n-bg);
  border-color: color-mix(in srgb, var(--pc, var(--c-secondary)) 45%, var(--n-bg));
}
.btn-ghost.btn-meca:active { box-shadow: var(--sh-inset-mini); }
html.dark .btn-ghost.btn-meca {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: var(--c-text);
}
html.dark .btn-ghost.btn-meca:hover {
  background: rgba(255, 255, 255, .1);
  border-color: color-mix(in srgb, var(--pc, var(--c-secondary)) 65%, transparent);
  color: #fff;
}

.btn-sm { padding: 8px 14px; font-size: .8rem; border-radius: 11px; }
.btn-peligro:hover { color: var(--c-terracota) !important; }

/* =========================================================
   Cards base (override de mecapacito.css)
   ========================================================= */
/* Neumorfismo + claymorphism: borde tintado con el color de la card
   (--card-c), sombra exterior tenida y brillo interior de arcilla. */
.card-base {
  --card-c: var(--pc, var(--c-secondary));
  --sh-clay:
    10px 10px 24px color-mix(in srgb, var(--card-c) 16%, var(--n-sh-d)),
    -9px -9px 20px var(--n-sh-l),
    inset 2.5px 2.5px 5px var(--clay-hi),
    inset -2.5px -2.5px 5px var(--clay-lo);
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--card-c) 22%, var(--n-bg));
  border-radius: 24px;
  box-shadow: var(--sh-clay);
  transition: box-shadow .3s ease, transform .3s ease, background .3s ease, border-color .3s ease;
}
.card-base:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-c) 40%, var(--n-bg));
  box-shadow:
    14px 14px 30px color-mix(in srgb, var(--card-c) 24%, var(--n-sh-d)),
    -10px -10px 24px var(--n-sh-l),
    inset 2.5px 2.5px 5px var(--clay-hi),
    inset -2.5px -2.5px 5px var(--clay-lo);
}

/* =========================================================
   Stats
   ========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  margin-bottom: 34px;
}
.stat-card { display: flex; align-items: center; gap: 15px; padding: 20px 22px; }
.stat-icon {
  width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pc, var(--c-secondary));
  color: #fff; font-size: 1.15rem;
  box-shadow: var(--sh-mini), var(--clay-pop);
}
.stat-card b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.stat-card small { color: var(--c-text-soft); font-size: .78rem; font-weight: 600; }

/* =========================================================
   Grid de proyectos (dashboard)
   ========================================================= */
.proyectos-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

.proyecto-admin-card { overflow: hidden; display: flex; flex-direction: column; }

.pac-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 0;
}
.pac-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--pc, var(--c-secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
  box-shadow: var(--sh-soft), var(--clay-pop);
  transition: transform .35s ease;
}
.proyecto-admin-card:hover .pac-icon { transform: rotate(-6deg) scale(1.05); }

.pac-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pac-body h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.pac-body h2 a { color: var(--c-text); text-decoration: none; transition: color .2s ease; }
.pac-body h2 a:hover { color: var(--pc, var(--c-secondary)); }
.pac-desc {
  margin: 0; color: var(--c-text-soft); font-size: .87rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}

.pac-progress { display: flex; align-items: center; gap: 10px; }
.progress-wrap {
  flex: 1; height: 10px; border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  overflow: hidden;
}
.progress-bar { height: 100%; border-radius: 999px; transition: width .5s ease; }
.progress-num { font-size: .78rem; font-weight: 800; color: var(--c-text-muted); }

.pac-estados { display: flex; gap: 8px; flex-wrap: wrap; }
.pac-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  box-shadow: var(--sh-inset-mini);
  background: var(--n-bg) !important;
}

.pac-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 15px;
  border-top: 1px dashed var(--c-border);
}
.pac-links { display: flex; align-items: center; gap: 10px; }
.pac-repo {
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-bg);
  color: var(--c-text-muted);
  font-size: 1.05rem;
  box-shadow: var(--sh-mini);
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pac-repo:hover { color: var(--c-text); transform: translateY(-2px); }
.pac-repo:active { box-shadow: var(--sh-inset-mini); }

/* =========================================================
   Avatares (color plano, sin degradado)
   ========================================================= */
.avatar {
  width: var(--sz, 40px); height: var(--sz, 40px);
  border-radius: 50%;
  background: var(--av-c1, var(--c-azul-cobalto));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--sh-mini), var(--clay-pop);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: calc(var(--sz, 40px) * .38);
  letter-spacing: -.02em;
}
.avatar-empty { background: var(--n-bg); color: var(--c-text-soft); font-size: calc(var(--sz, 40px) * .36); box-shadow: var(--sh-inset-mini); }
.avatar-more { background: var(--c-petroleo); font-size: calc(var(--sz, 40px) * .34); font-weight: 800; }
html.dark .avatar-more { background: var(--c-bg-soft); color: var(--c-text-muted); }

.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar {
  margin-left: -9px;
  border: 2.5px solid var(--n-bg);
  transition: transform .2s ease;
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar:hover { transform: translateY(-3px) scale(1.08); z-index: 2; }

/* =========================================================
   Badges de estado / prioridad
   ========================================================= */
.badge-estado, .badge-prio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  white-space: nowrap;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
}

/* Colores de texto por estado (claro) */
.estado-pendiente { color: #0b7ea8; }
.estado-progreso  { color: var(--c-azul-electrico); }
.estado-revision  { color: #c26f0e; }
.estado-hecho     { color: var(--c-verde-esmeralda); }

/* Estados de proyecto */
.pestado-activo     { color: var(--c-verde-esmeralda); }
.pestado-pausado    { color: #c26f0e; }
.pestado-completado { color: var(--c-azul-cobalto); }
html.dark .pestado-completado { color: #7fabff; }

/* Colores por estado (oscuro: mas brillantes) */
html.dark .estado-pendiente { color: var(--c-cian); }
html.dark .estado-progreso  { color: #7fabff; }
html.dark .estado-revision  { color: #ffb35c; }
html.dark .estado-hecho     { color: #57d99a; }

/* Prioridades */
.badge-prio.prio-baja  { color: #4e8a24; }
.badge-prio.prio-media { color: #a8860a; }
.badge-prio.prio-alta  { color: var(--c-terracota); }
html.dark .badge-prio.prio-baja  { color: var(--c-verde-lima); }
html.dark .badge-prio.prio-media { color: var(--c-amarillo); }
html.dark .badge-prio.prio-alta  { color: #ff9d5c; }

.prio-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.prio-dot.prio-baja  { background: var(--c-verde-lima); }
.prio-dot.prio-media { background: var(--c-amarillo); }
.prio-dot.prio-alta  { background: var(--c-terracota); animation: pulse-dot 1.6s ease-in-out infinite; }
html.dark .prio-dot.prio-alta { background: #ff9d5c; }

/* =========================================================
   Hero del proyecto (superficie neumorfica + acento --pc)
   ========================================================= */
.proyecto-hero {
  position: relative;
  border-radius: 28px;
  padding: 24px 30px 30px;
  /* Ambiente sutil del color del proyecto para que no se vea plano */
  background:
    radial-gradient(720px 320px at 88% -30%, color-mix(in srgb, var(--pc, var(--c-secondary)) 14%, transparent), transparent 72%),
    radial-gradient(520px 280px at -8% 130%, color-mix(in srgb, var(--pc, var(--c-secondary)) 8%, transparent), transparent 70%),
    var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--pc, var(--c-secondary)) 25%, var(--n-bg));
  box-shadow:
    12px 12px 28px color-mix(in srgb, var(--pc, var(--c-secondary)) 18%, var(--n-sh-d)),
    -9px -9px 20px var(--n-sh-l),
    inset 2.5px 2.5px 5px var(--clay-hi),
    inset -2.5px -2.5px 5px var(--clay-lo);
  color: var(--c-text);
  overflow: hidden;
  margin-bottom: 28px;
  isolation: isolate;
}
.ph-watermark {
  position: absolute; right: -30px; bottom: -40px;
  font-size: 13rem; color: var(--pc, var(--c-secondary));
  opacity: .07;
  transform: rotate(-10deg);
  z-index: 0;
}
html.dark .proyecto-hero {
  background:
    radial-gradient(720px 320px at 88% -30%, color-mix(in srgb, var(--pc, var(--c-secondary)) 22%, transparent), transparent 72%),
    radial-gradient(520px 280px at -8% 130%, color-mix(in srgb, var(--pc, var(--c-secondary)) 12%, transparent), transparent 70%),
    var(--n-bg);
}
html.dark .ph-watermark { opacity: .14; }
.ph-top, .ph-main { position: relative; z-index: 1; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-text-soft); text-decoration: none;
  font-size: .84rem; font-weight: 700;
  transition: color .2s ease, transform .2s ease;
}
.ph-back:hover { color: var(--pc, var(--c-secondary)); transform: translateX(-2px); }
.ph-actions { display: flex; align-items: center; gap: 10px; }
.ph-actions form { margin: 0; }

.ph-main {
  display: flex; align-items: center; gap: 24px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.ph-icon {
  width: 78px; height: 78px; border-radius: 26px; flex-shrink: 0;
  background: var(--pc, var(--c-secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 2rem;
  box-shadow: var(--sh-soft), var(--clay-pop);
}
.ph-info { flex: 1; min-width: 240px; }
.ph-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-fecha { font-size: .78rem; color: var(--c-text-soft); display: inline-flex; gap: 6px; align-items: center; }
.ph-info h1 { margin: 10px 0 4px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; color: var(--c-text); }
.ph-info p { margin: 0; color: var(--c-text-muted); font-size: .93rem; max-width: 560px; }

/* Avance abajo a la derecha del hero: barra semaforo, larga y delgada */
.ph-avance-abajo {
  position: relative; z-index: 1;
  margin-top: 18px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px;
}
.ph-avance-abajo small { color: var(--c-text-soft); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pam-num { font-size: .98rem; font-weight: 800; line-height: 1; }

.barra-semaforo {
  width: min(340px, 55%);
  height: 12px;
  border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  padding: 2.5px;
}
.barra-semaforo span {
  display: block; height: 100%;
  min-width: 7px;
  border-radius: 999px;
  box-shadow: var(--clay-pop);
  transition: width .6s ease, background .3s ease;
}
.sem-rojo span     { background: #E63946; }
.sem-amarillo span { background: var(--c-amarillo); }
.sem-verde span    { background: var(--c-verde-esmeralda); }
.sem-txt-rojo      { color: #E63946; }
.sem-txt-amarillo  { color: #C7A500; }
html.dark .sem-txt-amarillo { color: var(--c-amarillo); }
.sem-txt-verde     { color: var(--c-verde-esmeralda); }

/* Barra de carga estilo clay: pista hundida + relleno con relieve y rayas */
.barra-carga {
  height: 22px;
  border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  padding: 4px;
  margin-top: 4px;
}
.bc-fill {
  display: block;
  height: 100%;
  min-width: 14px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 16px),
    var(--pc, var(--c-secondary));
  background-size: 45px 100%, 100% 100%;
  box-shadow: var(--clay-pop);
  transition: width .6s ease;
  animation: bc-rayas 1.4s linear infinite;
}
.bc-fill[style*="width:0%"] { min-width: 0; background: transparent; box-shadow: none; animation: none; }
@keyframes bc-rayas { to { background-position: 45px 0, 0 0; } }

/* Boton GitHub (morado marca) */
.btn-github {
  background: #6e5494;
  color: #fff !important;
  font-weight: 700;
  border: 0;
  box-shadow: 5px 5px 12px color-mix(in srgb, #6e5494 30%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
  transition: background .2s ease, transform .2s ease;
}
.btn-github:hover { background: #8365b1; transform: translateY(-1px); }
.btn-github:active { box-shadow: var(--sh-inset-mini); transform: none; }

/* Barra de avance en el borde superior del hero */
.ph-barra {
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 14%, transparent);
  z-index: 2;
}
.ph-barra span {
  display: block; height: 100%;
  background: var(--pc, var(--c-secondary));
  border-radius: 0 6px 6px 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pc, var(--c-secondary)) 60%, transparent);
  transition: width .6s ease;
}

/* =========================================================
   Tiles resumen de estados
   ========================================================= */
.estados-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}
.estado-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, currentColor 30%, var(--n-bg));
  box-shadow:
    7px 7px 16px color-mix(in srgb, currentColor 16%, var(--n-sh-d)),
    -6px -6px 14px var(--n-sh-l),
    inset 2px 2px 4px var(--clay-hi);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.et-icono {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 14%, var(--n-bg));
  box-shadow: var(--sh-inset-mini);
  font-size: 1.1rem;
}
.et-datos {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-align: right; min-width: 0;
}
.et-datos b { font-size: 1.65rem; font-weight: 800; line-height: 1.05; color: var(--c-text); }
.et-datos small {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.estado-tile:hover { transform: translateY(-3px); }
.estado-tile.tile-activo {
  box-shadow: var(--sh-inset);
  border-color: color-mix(in srgb, currentColor 55%, var(--n-bg));
  transform: none;
}
.estado-tile.tile-activo .et-datos b { color: currentColor; }

/* =========================================================
   Vista de flujo (dependencias) + actividad GitHub + dep-tags
   ========================================================= */
.vista-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.vista-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.vista-toggle .tab-btn { padding: 9px 18px; font-size: .82rem; }
.btn-quien { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; font-size: .82rem; }
.btn-quien .avatar { box-shadow: none; }

/* Modal "ver como": cuadricula de tarjetas de perfil */
.dlg-ver-como { width: min(760px, calc(100vw - 40px)); }
.vc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr));
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
}
.vc-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 14px 16px;
  border-radius: 18px;
  background: var(--n-bg);
  border: 1.5px solid var(--c-border-soft);
  box-shadow: var(--sh-mini);
  text-decoration: none;
  text-align: center;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.vc-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--av-c1, var(--c-secondary)) 45%, var(--n-bg));
}
.vc-card.active {
  box-shadow: var(--sh-inset-mini);
  border-color: color-mix(in srgb, var(--av-c1, var(--c-secondary)) 55%, var(--n-bg));
  transform: none;
}
.vc-card .avatar { margin-bottom: 9px; border: 3px solid var(--n-bg); }
.vc-card b { font-size: .92rem; font-weight: 800; color: var(--c-text); line-height: 1.25; }
.vc-card small { font-size: .74rem; font-weight: 600; color: var(--c-text-soft); }
.vc-equipo {
  margin-top: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--av-c1, var(--c-secondary)) 75%, var(--c-text));
  background: color-mix(in srgb, var(--av-c1, var(--c-secondary)) 12%, var(--n-bg));
  border: 1px solid color-mix(in srgb, var(--av-c1, var(--c-secondary)) 22%, var(--n-bg));
}
.vc-chip {
  position: absolute; top: 10px; right: 10px;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-inset-mini);
  font-size: .72rem; font-weight: 800;
  color: color-mix(in srgb, var(--av-c1, var(--c-secondary)) 75%, var(--c-text));
}

/* Metricas: carga por persona */
.metricas-cuerpo { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.carga-fila {
  display: grid;
  grid-template-columns: auto minmax(110px, 200px) 1fr auto;
  align-items: center; gap: 14px;
}
.carga-nombre { font-size: .88rem; font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carga-barra {
  height: 16px; border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  padding: 3px;
}
.carga-barra span {
  display: block; height: 100%;
  min-width: 10px;
  border-radius: 999px;
  background: var(--pc, var(--c-secondary));
  box-shadow: var(--clay-pop);
  transition: width .5s ease;
}
.carga-num { font-size: .95rem; font-weight: 800; color: var(--c-text); min-width: 22px; text-align: right; }

/* Flujo: tareas de otras personas atenuadas al filtrar */
.flujo-nodo.nodo-ajeno { opacity: .32; filter: saturate(.5); }

.dep-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  box-shadow: var(--sh-inset-mini);
}
.dep-tag i { font-size: .62rem; }
.dep-tag.dep-ok { color: var(--c-verde-esmeralda); }
.dep-tag.dep-bloqueada { color: var(--c-naranja); }
html.dark .dep-tag.dep-bloqueada { color: #ffb35c; }

.flujo-card { padding-bottom: 8px; }
.flujo-wrap {
  position: relative;
  overflow-x: auto;
  padding: 22px;
}
.flujo-lineas {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
}
.flujo-cols {
  position: relative; z-index: 1;
  display: flex; gap: 56px;
  align-items: flex-start;
  min-width: max-content;
}
.flujo-col {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 230px; max-width: 270px;
}
.flujo-col h4 {
  margin: 0 0 2px;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-soft);
}
.flujo-nodo {
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--pc, var(--c-secondary)) 22%, var(--n-bg));
  box-shadow: var(--sh-mini);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .2s ease, border-color .2s ease;
}
.flujo-nodo:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc, var(--c-secondary)) 50%, var(--n-bg)); }
.flujo-nodo b { font-size: .88rem; font-weight: 700; color: var(--c-text); line-height: 1.35; }
.flujo-nodo.nodo-hecho { opacity: .62; }
.flujo-nodo.nodo-hecho b { text-decoration: line-through; }
.fn-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-meta .badge-estado { padding: 3px 9px; font-size: .66rem; }
.fn-meta .prio-dot { margin-top: 0; }

/* Kanban */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(235px, 1fr);
  gap: 16px;
  padding: 20px 22px 24px;
  overflow-x: auto;
}
.kb-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.kb-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-radius: 13px;
  box-shadow: var(--sh-inset-mini);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.kb-count {
  margin-left: auto;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--c-text);
}
.kb-cards {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 70px;
  padding: 5px;
  border-radius: 14px;
  border: 1.5px dashed transparent;
  transition: border-color .2s ease, background .2s ease;
}
.kb-cards.drag-over {
  border-color: color-mix(in srgb, var(--pc, var(--c-secondary)) 45%, var(--n-bg));
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 7%, transparent);
}
.kb-card {
  background: var(--n-bg);
  border: 1.5px solid var(--c-border-soft);
  border-radius: 13px;
  padding: 12px 14px;
  box-shadow: var(--sh-mini);
  display: flex; flex-direction: column; gap: 9px;
  cursor: grab;
  transition: transform .2s ease, border-color .2s ease;
}
.kb-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc, var(--c-secondary)) 35%, var(--n-bg)); }
.kb-card:active { cursor: grabbing; }
.kb-card.dragging { opacity: .45; transform: rotate(2deg); }
.kb-card b { font-size: .85rem; font-weight: 700; color: var(--c-text); line-height: 1.35; }
.kb-meta { display: flex; align-items: center; gap: 8px; }
.kb-meta .prio-dot { margin-top: 0; }
.kb-meta small { color: var(--c-text-soft); font-size: .7rem; display: inline-flex; gap: 4px; align-items: center; }

/* Paginador */
.paginador {
  display: flex; justify-content: flex-end; align-items: center; gap: 7px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--c-border-soft);
}
.pg-btn {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1.5px solid transparent; border-radius: 10px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: .8rem; font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pg-btn:hover:not(:disabled) { color: var(--c-secondary); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-btn.active {
  box-shadow: var(--sh-inset-mini);
  color: var(--c-secondary);
  border-color: color-mix(in srgb, var(--c-secondary) 30%, var(--n-bg));
}

/* =========================================================
   Calendario del proyecto
   ========================================================= */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 18px 24px 12px;
}
.cal-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-text); }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .accion-btn { text-decoration: none; }
.cal-scroll { overflow-x: auto; padding: 0 24px; }
.cal-dows, .cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px; min-width: 680px;
}
.cal-dow {
  text-align: center; padding: 6px 0;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-soft);
}
.cal-grid { padding-bottom: 4px; }
.cal-cell {
  min-height: 96px;
  border-radius: 12px;
  box-shadow: var(--sh-inset-mini);
  padding: 7px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.cal-cell.vacia { box-shadow: none; }
.cal-cell.hoy { box-shadow: var(--sh-inset-mini), 0 0 0 1.5px var(--c-secondary); }
.cal-num { font-size: .78rem; font-weight: 800; color: var(--c-text-muted); }
.cal-cell.hoy .cal-num {
  align-self: flex-start;
  background: var(--c-secondary); color: #fff;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-ev {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 0; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: var(--sh-mini);
  transition: transform .15s ease;
}
.cal-ev:hover { transform: translateX(2px); }
.cal-ev .prio-dot { margin-top: 0; }
.cal-ev-tarea { background: var(--n-bg); color: var(--c-text); }
.cal-ev-tarea.cal-venc { color: var(--c-terracota); box-shadow: var(--sh-mini), inset 0 0 0 1.5px color-mix(in srgb, var(--c-terracota) 40%, transparent); }
html.dark .cal-ev-tarea.cal-venc { color: #ff9d5c; }
.cal-ev-reunion { background: rgba(45,140,255,.14); color: #2D8CFF; }
.cal-leyenda {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 14px 24px 20px;
  font-size: .74rem; font-weight: 600; color: var(--c-text-soft);
}
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda .prio-dot { margin-top: 0; }
.cal-venc-ley { color: var(--c-terracota); }
html.dark .cal-venc-ley { color: #ff9d5c; }

/* =========================================================
   Reuniones (Zoom)
   ========================================================= */
.tab-badge-zoom { background: #2D8CFF; }
.btn-zoom {
  background: #2D8CFF; color: #fff !important; font-weight: 700; border: 0;
  box-shadow: 5px 5px 12px color-mix(in srgb, #2D8CFF 28%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
  transition: background .2s ease, transform .2s ease;
}
.btn-zoom:hover { background: #1f7ae8; transform: translateY(-1px); }

.reu-lista { display: flex; flex-direction: column; gap: 12px; padding: 0 24px 24px; }
.reu-item {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px;
  border-radius: 16px;
  background: var(--n-bg);
  border: 1.5px solid var(--c-border-soft);
  box-shadow: var(--sh-mini);
  flex-wrap: wrap;
}
.reu-icono {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  box-shadow: var(--sh-mini), var(--clay-pop);
}
.reu-proxima { background: #2D8CFF; }
.reu-pasada  { background: var(--c-text-soft); }
.reu-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.reu-info b { font-size: 1rem; font-weight: 800; color: var(--c-text); }
.reu-meta { font-size: .78rem; color: var(--c-text-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reu-estado { padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.reu-estado.e-proxima { background: rgba(45,140,255,.15); color: #2D8CFF; }
.reu-estado.e-pasada  { background: rgba(100,116,139,.16); color: var(--c-text-soft); }
.reu-invitados { display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; }
.reu-invitados small { font-size: .74rem; color: var(--c-text-soft); font-weight: 600; }
.reu-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.accion-grab { color: #c26f0e !important; }
html.dark .accion-grab { color: #ffb35c !important; }

.obs-reunion {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(45,140,255,.12);
  color: #2D8CFF; text-decoration: none;
  font-size: .74rem; font-weight: 700;
}
.obs-reunion:hover { text-decoration: underline; }

/* =========================================================
   Observaciones (revisión / QA)
   ========================================================= */
/* Sello de entrega en el hero */
.badge-entrega {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  font-size: .74rem; font-weight: 800;
  text-decoration: none;
}
.badge-entrega.listo { background: rgba(43,182,115,.14); color: var(--c-verde-esmeralda); }
.badge-entrega.alerta { background: rgba(247,147,30,.15); color: #c26f0e; }
html.dark .badge-entrega.listo { color: #57d99a; }
html.dark .badge-entrega.alerta { color: #ffb35c; }
.badge-entrega.alerta:hover { text-decoration: underline; }

/* Badge numerico en las pestañas de vista */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--c-naranja); color: #fff;
  font-size: .68rem; font-weight: 800;
}

/* Tag de observaciones en la fila de tarea */
.obs-tag { color: var(--c-naranja) !important; text-decoration: none; }
html.dark .obs-tag { color: #ffb35c !important; }
.obs-tag:hover { text-decoration: underline; }

/* Cabecera / intro de la vista */
.obs-intro {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 24px 16px;
  padding: 12px 16px;
  border-radius: 13px;
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text-muted); font-size: .84rem; line-height: 1.5;
}
.obs-intro i { color: var(--c-secondary); margin-top: 2px; }
.obs-intro b { color: var(--c-text); }

.obs-filtros { display: inline-flex; gap: 8px; }
.chip-filtro {
  padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.chip-filtro:hover { color: var(--c-text); }
.chip-filtro.active { box-shadow: var(--sh-inset-mini); color: var(--c-secondary); }

/* Compositores rápidos (anotar en reuniones, hasta 3 en paralelo) */
.obs-composers { display: flex; flex-direction: column; gap: 14px; margin: 0 24px 18px; }
.obs-composer {
  position: relative;
  padding: 16px;
  border-radius: 18px;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--pc, var(--c-secondary)) 22%, var(--n-bg));
  box-shadow: var(--sh-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
  animation: oc-in .2s ease;
}
@keyframes oc-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.oc-cerrar {
  position: absolute; top: -10px; right: -10px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text-soft); font-size: .72rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: color .2s ease, box-shadow .2s ease;
}
.oc-cerrar:hover { color: var(--c-terracota); }
.obs-composers.oc-solo .oc-cerrar { display: none; }
#obs-add-nota:disabled { opacity: .45; cursor: default; }
.obs-composer.oc-drag {
  border-color: var(--pc, var(--c-secondary));
  border-style: dashed;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc, var(--c-secondary)) 15%, transparent);
}
.oc-top { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.oc-top .ms, .oc-top .oc-select { flex: 1; min-width: 180px; }
.oc-campo { position: relative; }
.oc-texto {
  width: 100%;
  border: 0; outline: none; resize: vertical;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--c-text);
  font-family: 'Inter', sans-serif; font-size: .92rem; line-height: 1.5;
}
html.dark .oc-texto { background: var(--c-bg-soft); }
.oc-texto::placeholder { color: var(--c-text-soft); }
.oc-texto:focus { box-shadow: var(--sh-inset-mini), 0 0 0 2.5px color-mix(in srgb, var(--pc, var(--c-secondary)) 30%, transparent); }

.oc-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.oc-previews:empty { display: none; }
.oc-prev { position: relative; }
.oc-prev-img img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 11px; box-shadow: var(--sh-mini); display: block;
}
.oc-prev-doc {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; padding-right: 30px;
  border-radius: 11px; background: var(--n-bg); box-shadow: var(--sh-mini);
  font-size: .8rem; font-weight: 600; color: var(--c-text); max-width: 220px;
}
.oc-prev-doc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-prev-doc i { color: var(--c-secondary); }
.oc-prev button {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: var(--c-terracota); color: #fff;
  font-size: .64rem; cursor: pointer;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,.4);
  display: inline-flex; align-items: center; justify-content: center;
}
.oc-prev-doc button { top: 50%; right: 8px; transform: translateY(-50%); background: transparent; color: var(--c-text-soft); box-shadow: none; }

.oc-pie { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.oc-adjuntar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 11px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text-muted); font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.oc-adjuntar:hover { color: var(--c-secondary); }
.oc-adjuntar:active { box-shadow: var(--sh-inset-mini); }
.oc-hint { font-size: .74rem; color: var(--c-text-soft); font-weight: 600; }
.oc-hint i { margin-right: 4px; }
.oc-pie .btn-primary { margin-left: auto; }

/* Lista de observaciones */
.obs-lista { display: flex; flex-direction: column; gap: 14px; padding: 0 24px 24px; }
.obs-item {
  border-radius: 16px;
  background: var(--n-bg);
  border: 1.5px solid var(--c-border-soft);
  box-shadow: var(--sh-mini);
  padding: 18px 22px;
  border-left: 4px solid var(--av-c1, var(--c-secondary));
}
.obs-item.obs-res { opacity: .72; }
.obs-item[hidden] { display: none; }

.obs-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.obs-autor { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.obs-autor b { font-size: .9rem; font-weight: 800; color: var(--c-text); }
.obs-meta { font-size: .72rem; color: var(--c-text-soft); font-weight: 600; }
.obs-equipo { color: color-mix(in srgb, var(--av-c1) 75%, var(--c-text)); }
.obs-destino {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: var(--sh-inset-mini);
  font-size: .74rem; font-weight: 700; color: var(--c-text-muted);
}
.obs-estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800;
}
.obs-estado.e-pend { background: rgba(247,147,30,.15); color: #c26f0e; }
.obs-estado.e-res  { background: rgba(43,182,115,.14); color: var(--c-verde-esmeralda); }
html.dark .obs-estado.e-pend { color: #ffb35c; }
html.dark .obs-estado.e-res  { color: #57d99a; }

.obs-texto { margin: 12px 0 0; color: var(--c-text); font-size: .9rem; line-height: 1.6; }

.obs-adjuntos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.obs-img {
  width: 120px; height: 120px; border-radius: 12px; overflow: hidden;
  box-shadow: var(--sh-mini);
  transition: transform .2s ease;
}
.obs-img:hover { transform: scale(1.05); }
.obs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obs-doc {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 11px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  text-decoration: none; color: var(--c-text);
  font-size: .82rem; font-weight: 600; max-width: 260px;
}
.obs-doc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-doc .fa-file-pdf { color: #e2483d; font-size: 1.1rem; }
.obs-doc .fa-file-word { color: #2b7cd3; font-size: 1.1rem; }
.obs-doc .fa-download { color: var(--c-text-soft); margin-left: auto; font-size: .8rem; }
.obs-doc:hover { color: var(--c-secondary); }

.obs-acciones {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--c-border-soft);
}
.accion-btn.accion-hecho:hover { color: var(--c-naranja); }

/* Métricas de observaciones (por equipo) */
.obs-metrica {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr auto;
  align-items: center; gap: 16px;
}
.om-equipo { font-size: .86rem; font-weight: 700; color: var(--c-text); }
.om-equipo i { color: var(--c-secondary); margin-right: 6px; }
.om-barra {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
}
.om-barra span { display: block; }
.om-pend { background: var(--c-naranja); }
.om-res  { background: var(--c-verde-esmeralda); }
.om-nums { font-size: .78rem; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; }
.om-num-pend { color: #c26f0e; }
.om-num-res  { color: var(--c-verde-esmeralda); }
html.dark .om-num-pend { color: #ffb35c; }

/* Mapa de actividad del repositorio (heatmap) */
.actividad-card { margin-top: 22px; }
.actividad-cuerpo { padding: 20px 24px 24px; }
.hm-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 13px);
  gap: 3.5px;
  width: max-content; max-width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
}
.hm-celda {
  width: 13px; height: 13px;
  border-radius: 3.5px;
  background: color-mix(in srgb, var(--c-text-soft) 12%, var(--n-bg));
}
.hm-1 { background: color-mix(in srgb, var(--pc, var(--c-secondary)) 25%, var(--n-bg)); }
.hm-2 { background: color-mix(in srgb, var(--pc, var(--c-secondary)) 48%, var(--n-bg)); }
.hm-3 { background: color-mix(in srgb, var(--pc, var(--c-secondary)) 72%, var(--n-bg)); }
.hm-4 { background: var(--pc, var(--c-secondary)); }
.hm-leyenda {
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px;
  color: var(--c-text-soft); font-size: .72rem;
}
.hm-leyenda small { margin: 0 5px; }
.actividad-msj {
  margin: 0; padding: 16px;
  border-radius: 13px;
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text-muted); font-size: .88rem;
  display: flex; align-items: center; gap: 10px;
}
.actividad-msj i { color: var(--c-secondary); }

/* =========================================================
   Tabla de tareas
   ========================================================= */
.tabla-card { padding: 0; overflow: hidden; }
.tabla-card:hover {
  transform: none;
  box-shadow: var(--sh-clay);
  border-color: color-mix(in srgb, var(--card-c) 22%, var(--n-bg));
}

.tabla-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 20px 24px;
  border-bottom: 1px solid var(--c-border-soft);
}
.tabla-toolbar h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 10px; }
.tabla-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 27px; padding: 0 9px;
  border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  color: var(--c-secondary);
  font-size: .78rem; font-weight: 800;
}
.tabla-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filtro-clear {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-terracota); font-size: .8rem; font-weight: 700;
  text-decoration: none;
}
html.dark .filtro-clear { color: #ff9d5c; }
.filtro-clear:hover { text-decoration: underline; }

.tabla-scroll { overflow-x: auto; }
.tabla-meca { width: 100%; border-collapse: collapse; min-width: 760px; }
.tabla-meca thead th {
  text-align: left;
  padding: 13px 20px;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-soft);
  border-bottom: 1px solid var(--c-border-soft);
  white-space: nowrap;
}
.tabla-meca tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border-soft);
  vertical-align: middle;
  font-size: .88rem;
  color: var(--c-text-muted);
}
.tabla-meca tbody tr { transition: background .15s ease; }
.tabla-meca tbody tr:hover { background: rgba(var(--c-secondary-rgb), .05); }
.tabla-meca tbody tr:last-child td { border-bottom: 0; }

.fila-hecha b { text-decoration: line-through; color: var(--c-text-soft); }
.fila-hecha { opacity: .68; }

.celda-tarea { display: flex; gap: 11px; align-items: flex-start; min-width: 240px; }
.celda-tarea b { color: var(--c-text); font-weight: 700; display: block; }
.celda-tarea small {
  color: var(--c-text-soft); display: block; margin-top: 2px; line-height: 1.4;
  max-width: 340px;
}

.celda-persona { display: flex; align-items: center; gap: 10px; }
.cp-info span { display: block; font-weight: 600; color: var(--c-text); font-size: .84rem; line-height: 1.2; }
.cp-info small { color: var(--c-text-soft); font-size: .74rem; display: inline-flex; gap: 4px; align-items: center; }
.cp-nadie { color: var(--c-text-soft); font-size: .82rem; font-style: italic; }

.celda-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--c-text-muted); white-space: nowrap; }
.celda-muted { color: var(--c-text-soft); }
.fecha-vencida { color: var(--c-terracota); font-weight: 700; }
html.dark .fecha-vencida { color: #ff9d5c; }

.celda-acciones { white-space: nowrap; text-align: right; }
.accion-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 11px;
  border: 0; border-radius: 10px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-size: .8rem; font-weight: 600; font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.accion-btn:hover { color: var(--c-secondary); }
.accion-btn:active { box-shadow: var(--sh-inset-mini); }
.accion-btn.accion-peligro:hover { color: var(--c-terracota); }
html.dark .accion-btn.accion-peligro:hover { color: #ff9d5c; }

.inline-form { display: inline-block; margin: 0; }

/* =========================================================
   Inputs y selects (hundidos)
   ========================================================= */
.input-meca {
  border: 0;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  border-radius: 12px;
  color: var(--c-text);
}
.input-meca:focus {
  border: 0;
  box-shadow: var(--sh-inset-mini), 0 0 0 3px rgba(var(--c-secondary-rgb), .25);
}
.input-meca::placeholder { color: var(--c-text-soft); }

.select-meca {
  appearance: none;
  padding: 11px 38px 11px 15px;
  border: 0;
  border-radius: 12px;
  background: var(--n-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23848fa3' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text);
  font-family: 'Inter', sans-serif;
  font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: box-shadow .2s ease;
  max-width: 100%;
}
.select-meca:focus {
  outline: none;
  box-shadow: var(--sh-inset-mini), 0 0 0 3px rgba(var(--c-secondary-rgb), .25);
}
.select-sm { padding: 9px 32px 9px 13px; font-size: .8rem; }

/* =========================================================
   MecaDate — selector de fecha con estilo del panel
   ========================================================= */
.md { position: relative; display: block; width: 100%; }
.md-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 15px;
  border: 0; border-radius: 12px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text);
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-align: left;
}
html.dark .md-trigger { background: var(--c-bg-soft); }
.md-open .md-trigger { box-shadow: var(--sh-inset-mini), 0 0 0 2.5px rgba(var(--c-secondary-rgb), .3); }
.md-ph { color: var(--c-text-soft); font-weight: 500; }
.md-ico { color: var(--c-secondary); flex-shrink: 0; }

.md-pop {
  position: fixed; z-index: 320;
  width: 288px;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--c-secondary) 22%, var(--n-bg));
  border-radius: 16px;
  box-shadow: 0 28px 56px -22px rgba(0, 0, 0, .55);
  padding: 14px;
  animation: ms-in .16s ease;
}
.md-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.md-head b { font-size: .92rem; font-weight: 800; color: var(--c-text); }
.md-nav {
  width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text-muted); font-size: .78rem; cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.md-nav:hover { color: var(--c-secondary); }
.md-nav:active { box-shadow: var(--sh-inset-mini); }
.md-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.md-dows span { text-align: center; font-size: .68rem; font-weight: 800; color: var(--c-text-soft); padding: 4px 0; }
.md-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.md-d {
  aspect-ratio: 1; border: 0; border-radius: 9px;
  background: transparent; color: var(--c-text);
  font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.md-d.md-vacia { cursor: default; }
.md-d:not(.md-vacia):hover { background: rgba(var(--c-secondary-rgb), .12); }
.md-d.hoy { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-secondary) 55%, var(--n-bg)); color: var(--c-secondary); }
.md-d.sel {
  background: var(--c-secondary); color: #fff;
  box-shadow: 0 6px 14px -6px var(--c-secondary);
}
.md-hora {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--c-border-soft);
  font-size: .8rem; font-weight: 700; color: var(--c-text-muted);
}
.md-hora i { color: var(--c-secondary); }
.md-time {
  margin-left: auto;
  border: 0; border-radius: 9px;
  padding: 8px 10px;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
  color: var(--c-text); font-family: 'Inter', sans-serif; font-size: .82rem;
}
html.dark .md-time { background: var(--c-bg-soft); color-scheme: dark; }
.md-pie {
  display: flex; justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--c-border-soft);
}
.md-pie button {
  border: 0; background: transparent; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 700;
}
.md-borrar { color: var(--c-terracota); }
.md-hoy { color: var(--c-secondary); }

/* =========================================================
   MecaSelect (buscador + multi) — realza los .select-meca
   ========================================================= */
.ms { position: relative; display: block; width: 100%; }
.ms.ms-sm { display: inline-block; width: auto; }
.ms > select.select-meca { display: none !important; }

.ms-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border: 0; border-radius: 12px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text);
  font-family: 'Inter', sans-serif; font-size: .86rem; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: box-shadow .2s ease;
}
html.dark .ms-trigger { background: var(--c-bg-soft); }
.ms-sm .ms-trigger { padding: 9px 12px; font-size: .8rem; }
.ms-open .ms-trigger { box-shadow: var(--sh-inset-mini), 0 0 0 2.5px rgba(var(--c-secondary-rgb), .3); }
.ms-label { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; overflow: hidden; }
.ms-multi .ms-label { padding: 1px 0; }
.ms-label > :not(.ms-chip):not(.ms-ph) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-ph { color: var(--c-text-soft); font-weight: 500; }
.ms-caret { color: var(--c-text-soft); font-size: .72rem; transition: transform .2s ease; flex-shrink: 0; }
.ms-open .ms-caret { transform: rotate(180deg); }

.ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-secondary) 14%, var(--n-bg));
  color: color-mix(in srgb, var(--c-secondary) 80%, var(--c-text));
  font-size: .76rem; font-weight: 700;
  max-width: 100%;
}
.ms-chip i { cursor: pointer; font-size: .68rem; opacity: .7; }
.ms-chip i:hover { opacity: 1; color: var(--c-terracota); }

/* Panel flotante (se posiciona con JS, fixed) */
.ms-panel {
  position: fixed; z-index: 300;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--c-secondary) 20%, var(--n-bg));
  border-radius: 14px;
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .5);
  padding: 8px;
  animation: ms-in .16s ease;
}
@keyframes ms-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ms-search { position: relative; margin-bottom: 6px; }
.ms-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-soft); font-size: .78rem; }
.ms-search input {
  width: 100%;
  border: 0; border-radius: 10px;
  padding: 9px 12px 9px 32px;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
  color: var(--c-text); font-family: 'Inter', sans-serif; font-size: .82rem;
}
html.dark .ms-search input { background: var(--c-bg-soft); }
.ms-search input:focus { outline: none; box-shadow: var(--sh-inset-mini), 0 0 0 2px rgba(var(--c-secondary-rgb), .3); }
.ms-opts { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ms-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 9px;
  font-size: .85rem; font-weight: 600; color: var(--c-text-muted);
  cursor: pointer;
}
.ms-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-opt i { opacity: 0; color: var(--c-secondary); font-size: .8rem; }
.ms-opt:hover { background: rgba(var(--c-secondary-rgb), .08); color: var(--c-text); }
.ms-opt.sel { color: var(--c-secondary); background: rgba(var(--c-secondary-rgb), .1); }
.ms-opt.sel i { opacity: 1; }
.ms-opt.dis { opacity: .4; cursor: default; }

/* Select tipo pildora (estado en tabla): hundido + texto de color */
.select-pill {
  border-radius: 999px;
  padding: 8px 34px 8px 15px;
  font-size: .78rem; font-weight: 700;
}
.select-pill.estado-pendiente { color: #0b7ea8; }
.select-pill.estado-progreso  { color: var(--c-azul-electrico); }
.select-pill.estado-revision  { color: #c26f0e; }
.select-pill.estado-hecho     { color: var(--c-verde-esmeralda); }
html.dark .select-pill.estado-pendiente { color: var(--c-cian); }
html.dark .select-pill.estado-progreso  { color: #7fabff; }
html.dark .select-pill.estado-revision  { color: #ffb35c; }
html.dark .select-pill.estado-hecho     { color: #57d99a; }
.select-pill option { color: var(--c-text); }

/* =========================================================
   Equipo - vista maestro-detalle (lista + card seleccionada)
   ========================================================= */
.equipo-master-detail {
  display: flex; flex-direction: column;
  gap: 26px;
}

/* Filas de la tabla de equipo: clic navega a la ficha */
.tabla-equipo tr.fila-colab { cursor: pointer; }
.tabla-equipo tr.fila-colab:hover td:first-child {
  box-shadow: inset 3.5px 0 0 var(--av-c1, var(--c-secondary));
}
.tabla-equipo thead th i { margin-right: 5px; color: var(--c-text-soft); }

/* Chip copiable (git / correo) */
.chip-copiar { display: inline-flex; align-items: center; gap: 7px; }
.chip-copiar code {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 9px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  font-family: ui-monospace, Menlo, monospace;
  font-size: .78rem; font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}
.chip-copiar code i { color: var(--av-c1, var(--c-text-soft)); font-size: .82rem; }
html.dark .chip-copiar code { background: var(--c-bg-soft); }
.btn-copiar { padding: 6px 9px; }
.btn-copiar.mini { padding: 5px 8px; font-size: .72rem; }

/* =========================================================
   Ficha de colaborador (pantalla propia)
   ========================================================= */
.colab-hero {
  --card-c: var(--av-c1);
  padding: 20px 28px 26px;
  margin-bottom: 24px;
}
.colab-hero:hover { transform: none; }
.colab-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-text-soft); text-decoration: none;
  font-size: .84rem; font-weight: 700;
  transition: color .2s ease, transform .2s ease;
}
.colab-back:hover { color: var(--av-c1); transform: translateX(-2px); }
.colab-hero-main {
  display: flex; align-items: center; gap: 26px;
  margin-top: 18px; flex-wrap: wrap;
}
.colab-id { flex: 1; min-width: 220px; }
.colab-id h1 { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--c-text); }
.colab-id .mc-rol { margin: 8px 0 0; }
.colab-cuentas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cuenta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 14px;
  border-radius: 999px;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--av-c1) 25%, var(--n-bg));
  box-shadow: var(--sh-mini);
}
.cuenta-chip a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--c-text); text-decoration: none;
  font-size: .82rem; font-weight: 700;
}
.cuenta-chip a i { color: var(--av-c1); }
.cuenta-chip a:hover { color: var(--av-c1); }
.cuenta-chip.cuenta-off {
  padding: 7px 15px;
  color: var(--c-text-soft); font-size: .82rem; font-weight: 600;
  border-style: dashed;
}
.cuenta-chip.cuenta-off i { margin-right: 6px; }
.colab-acciones { display: flex; align-items: center; gap: 10px; }
.colab-acciones form { margin: 0; }

/* Chip de proyecto en la tabla de tareas de la ficha */
.chip-proyecto {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 12%, var(--n-bg));
  border: 1px solid color-mix(in srgb, var(--pc, var(--c-secondary)) 25%, var(--n-bg));
  color: color-mix(in srgb, var(--pc, var(--c-secondary)) 75%, var(--c-text));
  font-size: .8rem; font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease;
}
.chip-proyecto:hover { transform: translateY(-1px); }

/* Lista compacta */
.equipo-lista {
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.equipo-lista:hover { transform: none; }
.el-head {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 10px;
  font-size: .78rem; font-weight: 800;
  color: var(--c-text-soft);
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px dashed var(--c-border);
  margin-bottom: 2px;
}

.persona-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1.5px solid transparent;
  border-radius: 15px;
  background: var(--n-bg);
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.persona-row:hover { box-shadow: var(--sh-mini); transform: translateX(2px); }
.persona-row.active {
  box-shadow: var(--sh-inset-mini);
  border-color: color-mix(in srgb, var(--av-c1) 40%, var(--n-bg));
}
.pr-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-info b {
  font-size: .89rem; font-weight: 700; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-info small {
  font-size: .72rem; font-weight: 600; color: var(--c-text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-chip {
  min-width: 26px; height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-inset-mini);
  font-size: .74rem; font-weight: 800;
  color: color-mix(in srgb, var(--av-c1) 75%, var(--c-text));
}
.pr-flecha {
  font-size: .68rem; color: var(--c-text-soft);
  transition: transform .22s ease, color .22s ease;
}
.persona-row.active .pr-flecha { transform: translateX(2px); color: var(--av-c1); }

/* Card de detalle */
.persona-card {
  --card-c: var(--av-c1);
  padding: 26px 28px 22px;
  display: flex; flex-direction: column; gap: 20px;
  animation: persona-in .35s cubic-bezier(.2,.8,.2,1);
}
.persona-card[hidden] { display: none; }
.persona-card:hover { transform: none; }
@keyframes persona-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pc-head {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.pc-id { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc-id h2 { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--c-text); }
.pc-id .mc-rol { margin: 4px 0 0; }
.pc-id .mc-git { margin-top: 10px; }
.pc-stats { display: flex; gap: 12px; }
.pc-stats .mc-stat { min-width: 92px; text-align: center; }

/* Tareas del colaborador */
.pc-tareas {
  border-top: 1px dashed var(--c-border);
  padding-top: 16px;
}
.pc-tareas h3 {
  margin: 0 0 12px;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-soft);
  display: flex; align-items: center; gap: 8px;
}
.pc-tareas h3 i { color: var(--av-c1); }
.pc-tareas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pc-tareas li {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 13px;
  box-shadow: var(--sh-inset-mini);
}
.pc-tareas li .prio-dot { margin-top: 0; }
.pc-tarea-titulo {
  font-size: .88rem; font-weight: 700; color: var(--c-text);
  text-decoration: none;
  flex: 1; min-width: 140px;
}
.pc-tarea-titulo:hover { color: var(--av-c1); }
.pc-tarea-proyecto { font-size: .74rem; color: var(--c-text-soft); display: inline-flex; gap: 5px; align-items: center; }
.pc-sin-tareas {
  margin: 0; padding: 14px;
  border-radius: 13px;
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text-soft); font-size: .86rem;
  display: flex; align-items: center; gap: 9px;
}
.pc-sin-tareas i { color: var(--c-verde-esmeralda); }
.pc-mas-tareas { display: block; margin-top: 9px; color: var(--c-text-soft); font-size: .76rem; font-weight: 600; }

.pc-acciones {
  display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px dashed var(--c-border);
  padding-top: 14px;
}

/* (legado) grid de cards del equipo */
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}
.miembro-card {
  --card-c: var(--av-c1, var(--c-secondary));
  padding: 26px 20px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

/* Zona del avatar: anillo hundido + anillo punteado que gira al hover */
.mc-avatar-zone { position: relative; }
.mc-avatar-ring {
  width: 116px; height: 116px;
  border-radius: 50%;
  background: var(--n-bg);
  box-shadow: var(--sh-inset);
  display: flex; align-items: center; justify-content: center;
}
.mc-ring-anim {
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 2.5px dashed color-mix(in srgb, var(--av-c1) 55%, var(--n-bg));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.miembro-card:hover .mc-ring-anim {
  opacity: 1;
  animation: meca-spin 16s linear infinite;
}

.miembro-card h2 { margin: 16px 0 0; font-size: 1.08rem; font-weight: 800; color: var(--c-text); }

/* Rol como pill tintado con el color del colaborador */
.mc-rol {
  margin: 8px 0 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--av-c1) 12%, var(--n-bg));
  border: 1px solid color-mix(in srgb, var(--av-c1) 22%, var(--n-bg));
  font-size: .78rem; font-weight: 700;
  color: color-mix(in srgb, var(--av-c1) 75%, var(--c-text));
}

/* Mini estadisticas hundidas */
.mc-stats {
  margin-top: 14px;
  display: flex; gap: 10px;
  width: 100%;
  justify-content: center;
}
.mc-stat {
  flex: 1; max-width: 104px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 8px 8px;
  border-radius: 14px;
  box-shadow: var(--sh-inset-mini);
}
.mc-stat b { font-size: 1.1rem; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.mc-stat small {
  font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-soft);
}

.mc-git {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--n-bg);
  border: 1.5px solid color-mix(in srgb, var(--av-c1) 35%, var(--n-bg));
  box-shadow: 4px 4px 10px color-mix(in srgb, var(--av-c1) 18%, var(--n-sh-d)), -3px -3px 7px var(--n-sh-l);
  color: var(--c-text); text-decoration: none;
  font-size: .78rem; font-weight: 700;
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mc-git i { color: var(--av-c1); }
.mc-git:hover { transform: translateY(-2px); color: var(--av-c1); }
.mc-git:active { box-shadow: var(--sh-inset-mini); }

.mc-tareas {
  margin-top: 13px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; color: var(--c-text-muted);
}
.mc-tareas i { color: var(--c-secondary); }

.mc-acciones {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed var(--c-border);
  width: 100%;
  display: flex; justify-content: center; gap: 10px;
}

/* =========================================================
   Formulario de persona: preview en vivo estilo card
   ========================================================= */
.dlg-persona { width: min(600px, calc(100vw - 40px)); }

.persona-preview {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset);
  margin-bottom: 2px;
}

.pp-avatar {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
}
.pp-file { display: none; }
.pp-avatar-circle {
  transition: transform .25s ease;
}
.pp-avatar:hover .pp-avatar-circle { transform: scale(1.04); }
.pp-avatar .pp-img { width: 100%; height: 100%; object-fit: cover; }
.pp-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-secondary);
  color: #fff; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-mini), var(--clay-pop);
  border: 3px solid var(--n-bg);
  transition: transform .25s ease, background .25s ease;
}
.pp-avatar:hover .pp-cam { transform: scale(1.12) rotate(-8deg); background: var(--c-azul-cobalto); }

.pp-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pp-nombre {
  font-size: 1.15rem; font-weight: 800; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-rol { font-size: .82rem; font-weight: 600; color: var(--c-text-soft); }
.pp-rol i { color: var(--c-secondary); margin-right: 4px; }
.pp-git {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text);
  font-size: .74rem; font-weight: 700;
}
.pp-ayuda { margin-top: 3px; }
.pp-ayuda i { color: var(--c-secondary); }

@media (max-width: 520px) {
  .persona-preview { flex-direction: column; text-align: center; }
  .pp-info { align-items: center; }
  .pp-git { align-self: center; }
  .pp-nombre { white-space: normal; }
}

/* =========================================================
   Dialogs / modales
   ========================================================= */
.dlg-meca {
  border: 1.5px solid color-mix(in srgb, var(--c-secondary) 22%, var(--n-bg));
  border-radius: 26px;
  padding: 0;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--n-bg);
  color: var(--c-text);
  box-shadow:
    0 50px 100px -40px rgba(0, 0, 0, .5),
    inset 2.5px 2.5px 5px var(--clay-hi),
    inset -2.5px -2.5px 5px var(--clay-lo);
}
.dlg-meca::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}
.dlg-meca[open] { animation: dlg-in .25s cubic-bezier(.2,.8,.2,1); }
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dlg-form { display: flex; flex-direction: column; gap: 15px; padding: 26px 28px 24px; }

/* Modales de tarea más amplios y cómodos */
.dlg-tarea { width: min(680px, calc(100vw - 40px)); }
.dlg-tarea .dlg-form { gap: 18px; padding: 30px 34px 28px; }
.dlg-tarea .dlg-form header h3 { font-size: 1.3rem; }
.dlg-tarea .campo > span { font-size: .82rem; }
.dlg-tarea .input-meca,
.dlg-tarea .ms-trigger,
.dlg-tarea .select-meca { padding: 13px 15px; font-size: .92rem; }
.dlg-tarea textarea.input-meca { min-height: 90px; }
.dlg-tarea .campo-doble { gap: 18px; }
.dlg-form header {
  display: flex; align-items: center; justify-content: space-between;
  margin: -4px 0 2px;
}
.dlg-form header h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-text); display: flex; gap: 10px; align-items: center; }
.dlg-close {
  width: 36px; height: 36px; border: 0; border-radius: 11px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.dlg-close:hover { color: var(--c-terracota); }
.dlg-close:active { box-shadow: var(--sh-inset-mini); }
.dlg-form footer {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 6px; padding-top: 18px;
  border-top: 1px solid var(--c-border-soft);
}

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span { font-size: .78rem; font-weight: 700; color: var(--c-text-muted); }
.campo textarea { resize: vertical; }
.campo .select-meca { width: 100%; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 520px) { .campo-doble { grid-template-columns: 1fr; } }
.campo-ayuda { color: var(--c-text-soft); font-size: .72rem; font-weight: 500; }

.input-file { padding: 9px 12px; font-size: .82rem; }
.input-file::file-selector-button {
  border: 0; border-radius: 8px;
  background: var(--c-secondary);
  color: #fff;
  font-weight: 700; font-size: .78rem;
  padding: 6px 12px; margin-right: 10px;
  cursor: pointer;
}

.input-prefijo { position: relative; }
.input-prefijo i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-soft);
}
.input-prefijo .input-meca { padding-left: 40px; }

/* Selector de iconos */
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-picker label { cursor: pointer; }
.icon-picker input { display: none; }
.icon-picker i {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-size: .95rem;
  transition: color .18s ease, box-shadow .18s ease;
}
.icon-picker input:checked + i {
  box-shadow: var(--sh-inset-mini);
  color: var(--c-secondary);
}
.icon-picker label:hover i { color: var(--c-secondary); }

/* Selector de colores (planos) */
.color-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.color-picker label { cursor: pointer; }
.color-picker input { display: none; }
.color-picker span {
  display: inline-block;
  width: 34px; height: 34px;
  border-radius: 50%;
  box-shadow: var(--sh-mini);
  border: 3px solid var(--n-bg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.color-picker input:checked + span {
  transform: scale(1.15);
  box-shadow: var(--sh-mini), 0 0 0 2.5px var(--c-secondary);
}
.color-picker label:hover span { transform: scale(1.08); }

/* Componente reutilizable UI::colorPicker(): fila principal + desplegable */
.cp-meca { flex-direction: column; align-items: stretch; gap: 12px; }
.cp-fila-principal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.color-picker .cp-sep {
  width: 1.5px; height: 26px;
  border: 0; border-radius: 0;
  box-shadow: none;
  background: var(--c-border);
  margin: 0 4px;
}
.cp-mas summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  font-size: .75rem; font-weight: 700;
  color: var(--c-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color .2s ease, box-shadow .2s ease;
}
.cp-mas summary::-webkit-details-marker { display: none; }
.cp-mas summary:hover { color: var(--c-secondary); }
.cp-mas summary i { font-size: .68rem; transition: transform .25s ease; }
.cp-mas[open] summary { box-shadow: var(--sh-inset-mini); color: var(--c-secondary); }
.cp-mas[open] summary i { transform: rotate(180deg); }
.cp-mas .cp-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 2px 2px;
  animation: cp-grid-in .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes cp-grid-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Swatch de color personalizado (input type=color) */
.color-picker .cp-custom { position: relative; display: inline-flex; }
.color-picker .cp-custom input[type="color"] {
  display: inline-block;   /* la regla generica oculta los inputs del picker */
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px dashed var(--c-text-soft);
  padding: 0;
  background: var(--n-bg);
  cursor: pointer;
  box-shadow: var(--sh-mini);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.color-picker .cp-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.color-picker .cp-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-picker .cp-custom input[type="radio"]:checked + input[type="color"] {
  transform: scale(1.15);
  border-style: solid;
  border-color: var(--n-bg);
  box-shadow: var(--sh-mini), 0 0 0 2.5px var(--c-secondary);
}
.color-picker .cp-custom:hover input[type="color"] { transform: scale(1.08); border-color: var(--c-secondary); }

/* =========================================================
   Tabs (Ajustes y reutilizables)
   ========================================================= */
.tabs-meca {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 26px;
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--n-bg);
  box-shadow: var(--sh-soft);
  color: var(--c-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: .86rem; font-weight: 700;
  cursor: pointer;
  transition: box-shadow .22s ease, color .22s ease, border-color .22s ease;
}
.tab-btn:hover { color: var(--c-text); }
.tab-btn.active {
  box-shadow: var(--sh-inset-mini);
  color: var(--c-secondary);
  border-color: color-mix(in srgb, var(--c-secondary) 30%, var(--n-bg));
}
.tab-panel[hidden] { display: none; }

/* =========================================================
   Galeria de iconos (clic para elegir)
   ========================================================= */
.icon-galeria {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--sh-inset-mini);
  max-height: 340px;
  overflow-y: auto;
}
.ig-btn {
  width: 46px; height: 46px;
  border: 1.5px solid transparent;
  border-radius: 13px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  transition: box-shadow .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.ig-btn:hover { color: var(--c-secondary); transform: translateY(-2px); }
.ig-btn.sel {
  box-shadow: var(--sh-inset-mini);
  color: var(--c-secondary);
  border-color: color-mix(in srgb, var(--c-secondary) 35%, var(--n-bg));
  transform: none;
}
.icon-extra { display: flex; gap: 10px; align-items: center; }
.icon-extra .input-meca { max-width: 260px; }

.ajuste-card-ancha { grid-column: 1 / -1; }
.ajuste-nota { margin-top: 18px; }
.ajuste-nota i { color: var(--c-secondary); margin-right: 6px; }
.ajustes-form { display: block; }

/* =========================================================
   Ajustes (parametrizacion del panel)
   ========================================================= */
/* Todas las cards de Ajustes: rectangulares, uniformes y a lo ancho */
.ajustes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.ajuste-card {
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.ajuste-card:hover { transform: none; }
.ajuste-card h2 {
  margin: 0 0 2px; font-size: 1.02rem; font-weight: 800; color: var(--c-text);
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px dashed var(--c-border-soft);
}
.ajuste-ayuda { margin: -4px 0 2px; font-size: .8rem; color: var(--c-text-soft); line-height: 1.5; }
.ajuste-ayuda a { color: var(--c-secondary); }
.ajuste-ayuda code {
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  border-radius: 6px; padding: 1px 7px;
  font-size: .74rem;
}

.ajuste-fila {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
}
.ajuste-fila > i { text-align: center; color: var(--c-text-muted); }

/* Filas de catalogo ampliable: icono | nombre | color | (final) | quitar */
.ajuste-lista { display: flex; flex-direction: column; gap: 10px; }
.fila-cat { grid-template-columns: 122px minmax(100px, 1fr) auto auto auto; }
.fila-cat.fila-cat-4 { grid-template-columns: 122px minmax(100px, 1fr) auto auto; }
.fila-cat.fila-cat-3 { grid-template-columns: 122px minmax(100px, 1fr) auto; }
.fila-cat .input-meca { min-width: 0; }
.input-icono {
  font-size: .68rem !important;
  padding: 11px 9px !important;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: -.01em;
  color: var(--c-text-soft) !important;
}
.chk-final {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-soft);
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.chk-final input { display: none; }
.chk-final:has(input:checked) {
  box-shadow: var(--sh-inset-mini);
  color: var(--c-verde-esmeralda);
}
.btn-agregar-fila { align-self: flex-start; }

/* Checkbox estilizado (activar correos) */
.chk-linea {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .88rem; font-weight: 700; color: var(--c-text);
  cursor: pointer;
}
.chk-linea input { display: none; }
.chk-caja {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: color .2s ease;
}
.chk-linea input:checked + .chk-caja { color: var(--c-verde-esmeralda); }

/* Subtítulo dentro de la card de correo */
.correo-sub {
  margin: 8px 0 2px; font-size: .95rem; font-weight: 800; color: var(--c-text);
  display: flex; align-items: center; gap: 9px;
  padding-top: 14px; border-top: 1px dashed var(--c-border-soft);
}
.chk-con-campo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.campo-inline { flex-direction: row; align-items: center; gap: 10px; }
.campo-inline > span { font-size: .78rem; color: var(--c-text-soft); white-space: nowrap; }

/* Fila de correo de prueba */
.correo-prueba {
  display: flex; gap: 10px; align-items: center;
  padding-top: 6px;
  border-top: 1px dashed var(--c-border);
}
.correo-prueba .input-meca { flex: 1; }

/* Chips en la card de persona */
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pc-chips .mc-git { margin-top: 0; }
.mc-git-off { opacity: .55; border-style: dashed !important; }
.ajustes-guardar {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 4px;
}
.ajuste-fila input[type="color"],
.mc-fila input[type="color"],
.input-color-linea {
  width: 44px; height: 44px;
  border: 0; border-radius: 13px;
  padding: 5px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
  cursor: pointer;
  transition: transform .18s ease;
}
.ajuste-fila input[type="color"]:hover,
.mc-fila input[type="color"]:hover { transform: scale(1.06); }
.ajuste-fila input[type="color"]::-webkit-color-swatch,
.mc-fila input[type="color"]::-webkit-color-swatch,
.input-color-linea::-webkit-color-swatch { border: none; border-radius: 9px; }
.ajuste-fila input[type="color"]::-webkit-color-swatch-wrapper,
.mc-fila input[type="color"]::-webkit-color-swatch-wrapper,
.input-color-linea::-webkit-color-swatch-wrapper { padding: 0; }
.input-color-linea { width: 100%; height: 42px; }
html.dark .ajuste-fila input[type="color"],
html.dark .mc-fila input[type="color"],
html.dark .input-color-linea { background: var(--c-bg-soft); }

.ajuste-iconos-preview {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: var(--sh-inset-mini);
  color: var(--c-text-muted);
  font-size: 1.05rem;
}
.ajustes-guardar {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  padding-top: 4px;
}

/* =========================================================
   Estado vacio
   ========================================================= */
.empty-state { text-align: center; padding: 60px 24px; color: var(--c-text-soft); }
.empty-icon {
  width: 88px; height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--n-bg);
  box-shadow: var(--sh-inset);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--c-secondary);
}
.empty-state h3 { margin: 0 0 6px; color: var(--c-text); font-size: 1.2rem; font-weight: 800; }
.empty-state p { margin: 0; font-size: .9rem; }

/* =========================================================
   MC Toasts (componente de alertas Mecapacito)
   ========================================================= */
.mc-toasts {
  position: fixed; top: 20px; right: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 12px;
  width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.mc-toast {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 42px 16px 16px;
  border-radius: 16px;
  background: var(--n-bg);
  border: 1.5px solid var(--c-border);
  box-shadow: var(--sh-card);
  overflow: hidden;
  pointer-events: auto;
  animation: mc-toast-in .4s cubic-bezier(.2,.8,.2,1);
}
.mc-toast.out { animation: mc-toast-out .3s ease forwards; }
@keyframes mc-toast-in  { from { opacity: 0; transform: translateX(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mc-toast-out { to { opacity: 0; transform: translateY(-10px) scale(.97); } }

.mc-toast > i { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.mc-toast-txt { font-size: .86rem; font-weight: 600; color: var(--c-text); line-height: 1.5; }

.mc-toast-x {
  position: absolute; top: 9px; right: 9px;
  width: 26px; height: 26px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--c-text-soft);
  font-size: .72rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.mc-toast-x:hover { background: rgba(var(--c-secondary-rgb), .12); color: var(--c-text); }

.mc-toast-barra {
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: 100%;
  border-radius: 0 3px 3px 0;
  animation: mc-barra linear forwards;   /* duracion la pone JS */
}
@keyframes mc-barra { from { width: 100%; } to { width: 0; } }
.mc-toast:hover .mc-toast-barra { animation-play-state: paused; }

.mc-success { border-color: color-mix(in srgb, var(--c-verde-esmeralda) 40%, var(--n-bg)); }
.mc-success > i, .mc-success .mc-toast-barra { color: var(--c-verde-esmeralda); background-color: var(--c-verde-esmeralda); }
.mc-error { border-color: color-mix(in srgb, var(--c-terracota) 45%, var(--n-bg)); }
.mc-error > i, .mc-error .mc-toast-barra { color: var(--c-terracota); background-color: var(--c-terracota); }
html.dark .mc-error > i, html.dark .mc-error .mc-toast-barra { color: #ff9d5c; background-color: #ff9d5c; }
.mc-info { border-color: color-mix(in srgb, var(--c-secondary) 35%, var(--n-bg)); }
.mc-info > i, .mc-info .mc-toast-barra { color: var(--c-secondary); background-color: var(--c-secondary); }
.mc-toast > i { background: none !important; }

/* =========================================================
   MC Confirm (dialogo de confirmacion)
   ========================================================= */
.mc-confirm { width: min(420px, calc(100vw - 40px)); }
.mc-confirm-cuerpo {
  padding: 30px 28px 24px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
}
.mc-confirm-icono {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--n-bg);
  box-shadow: var(--sh-inset);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--c-secondary);
  margin-bottom: 10px;
}
.mc-confirm-icono.es-peligro { color: var(--c-terracota); }
html.dark .mc-confirm-icono.es-peligro { color: #ff9d5c; }
.mc-confirm-cuerpo h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--c-text); }
.mc-confirm-cuerpo p { margin: 4px 0 0; font-size: .9rem; color: var(--c-text-muted); line-height: 1.55; }
.mc-confirm-cuerpo footer {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed var(--c-border-soft);
  width: 100%;
}

/* Boton solido de peligro (para confirmar eliminaciones) */
.btn-peligro-solido {
  background: var(--c-terracota);
  color: #fff; font-weight: 700;
  box-shadow: 5px 5px 12px color-mix(in srgb, var(--c-terracota) 25%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
}
.btn-peligro-solido:hover { background: #a85622; }

/* Boton verde (Restaurar defaults) */
.btn-verde { color: var(--c-verde-esmeralda) !important; }
.btn-verde:hover { color: #1e8a5a !important; }
html.dark .btn-verde:hover { color: #57d99a !important; }

/* Fila de catalogo simple (roles): input + quitar */
.fila-cat.fila-cat-2 { grid-template-columns: 1fr auto; }

/* =========================================================
   mc-tabla: tabla con encabezado celeste y filas separadas
   ========================================================= */
.mc-tabla { display: flex; flex-direction: column; gap: 14px; }

.mc-tabla-head {
  --th-bg: var(--c-cian);
  --th-fg: var(--c-petroleo);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 14px 14px 22px;
  border-radius: 16px;
  background: var(--th-bg);
  color: var(--th-fg);
  font-size: .84rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 6px 6px 14px color-mix(in srgb, var(--th-bg) 28%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
}
.mc-tabla-head span { display: inline-flex; align-items: center; gap: 10px; font-size: inherit; }

/* Variantes de color del encabezado */
.mc-head-azul    { --th-bg: var(--c-azul-electrico); --th-fg: #fff; }
.mc-head-naranja { --th-bg: var(--c-naranja);        --th-fg: #2D3E50; }
.mc-head-verde   { --th-bg: var(--c-verde-esmeralda);--th-fg: #fff; }
.mc-head-morado  { --th-bg: #6C5CE7;                 --th-fg: #fff; }

.mc-tabla-add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  color: var(--c-petroleo);
  font-family: 'Inter', sans-serif;
  font-size: .8rem; font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35);
  transition: background .2s ease, transform .2s ease;
}
.mc-tabla-add:hover { background: #fff; transform: translateY(-1px); }

.mc-tabla-cuerpo { display: flex; flex-direction: column; gap: 10px; }

.mc-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 10px 7px 20px;
  border-radius: 14px;
  background: var(--n-bg);
  border: 1.5px solid transparent;
  box-shadow: var(--sh-mini);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mc-fila.editando {
  border-color: color-mix(in srgb, var(--c-cian) 55%, var(--n-bg));
  box-shadow: var(--sh-inset-mini);
}

/* Variantes con mas columnas (catalogos con icono/color/bandera) */
.mc-fila.mf-estado { grid-template-columns: 132px 1fr auto auto auto; padding-left: 10px; }
.mc-fila.mf-prio   { grid-template-columns: 132px 1fr auto auto;       padding-left: 10px; }
.mc-fila.mf-simple { grid-template-columns: 132px 1fr auto;            padding-left: 10px; }
.mc-fila .input-meca { min-width: 0; }
@media (max-width: 560px) {
  .mc-fila.mf-estado, .mc-fila.mf-prio, .mc-fila.mf-simple { grid-template-columns: 96px 1fr auto; }
  .mc-fila.mf-estado input[type="color"], .mc-fila.mf-estado .chk-final,
  .mc-fila.mf-prio input[type="color"] { display: none; }
}

/* El dato: negrita, sin caja; al editar toma acento */
.mc-fila-dato {
  width: 100%; min-width: 0;
  border: 0; outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--c-text);
  padding: 13px 0;
  cursor: text;
}
.mc-fila-dato[readonly] { cursor: default; }
.mc-fila.editando .mc-fila-dato { color: var(--c-secondary); }
.mc-fila-dato::placeholder { color: var(--c-text-soft); font-weight: 600; }

/* =========================================================
   Stepper (catalogos): pasos numerados con linea conectora
   ========================================================= */
.stepper {
  display: flex; align-items: center;
  gap: 4px; row-gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.paso {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 0; border-radius: 13px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: color .2s ease;
}
.paso:hover { color: var(--c-text); }
.paso-num {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .84rem; font-weight: 800;
  color: var(--c-text-muted);
  transition: box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.paso-txt {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 700;
}
.paso.active { color: var(--c-secondary); }
.paso.active .paso-num {
  box-shadow: var(--sh-inset-mini);
  color: var(--c-secondary);
  border-color: color-mix(in srgb, var(--c-secondary) 35%, var(--n-bg));
}
.paso.hecho .paso-num { color: var(--c-verde-esmeralda); }
.paso-linea {
  flex: 1 0 20px; max-width: 54px;
  height: 2px; border-radius: 999px;
  background: var(--c-border);
}
@media (max-width: 860px) {
  .paso:not(.active) .paso-txt { display: none; }
  .paso-linea { max-width: 26px; }
}

.paso-panel[hidden] { display: none; }
.paso-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}
.paso-indicador { font-size: .78rem; font-weight: 800; color: var(--c-text-soft); letter-spacing: .05em; text-transform: uppercase; }

/* Tarjetas de colores de marca (identidad) */
.tarjetas-color {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.tarjeta-color {
  position: relative;
  height: 130px;
  border-radius: 20px;
  background: var(--tc, var(--c-secondary));
  box-shadow: var(--sh-soft), var(--clay-pop);
  border: 3px solid var(--n-bg);
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.tarjeta-color:hover { transform: translateY(-3px) scale(1.01); }
.tarjeta-color.claro { color: #22304a; text-shadow: 0 1px 4px rgba(255, 255, 255, .35); }
.tarjeta-color input[type="color"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.tc-icono {
  position: absolute; top: 14px; right: 16px;
  font-size: 1.3rem; opacity: .85;
}
.tc-nombre { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.tc-hex { font-size: 1.35rem; font-weight: 800; font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  :root, html.sb-collapsed { --sidebar-w: 0px; }

  /* En movil el sidebar es barra superior: el colapso no aplica */
  .sidebar-toggle { display: none; }
  html.sb-collapsed .sidebar { padding: 12px 16px; }
  html.sb-collapsed .sidebar-top { flex-direction: row; }
  html.sb-collapsed .sidebar-brand { width: auto; padding: 8px 12px; }
  html.sb-collapsed .sidebar-brand > div { display: block; }
  html.sb-collapsed .sidebar-link { padding: 11px 14px; justify-content: flex-start; }
  html.sb-collapsed .sidebar-link .truncate { display: inline; }
  html.sb-collapsed .sidebar-foot { flex-direction: row; padding: 0; }
  html.sb-collapsed .theme-toggle { width: 74px; padding: 0 9px; }
  html.sb-collapsed.dark .theme-toggle .tt-knob { transform: translateX(38px); }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column; align-items: stretch;
    padding: 12px 14px;
    gap: 10px;
    overflow: visible;
  }
  .sidebar-top { flex-direction: row; align-items: center; }
  .sidebar-top .sidebar-brand { flex: 1; }
  .sidebar-top .sidebar-foot-movil { display: flex; }
  .sidebar-brand { padding: 8px 12px; }

  /* Menu como chips deslizables en horizontal (nunca fuerza el ancho) */
  .sidebar-nav {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 6px;
    gap: 7px;
    align-items: center;
    scrollbar-width: thin;
  }
  .sidebar-link { padding: 9px 13px; font-size: .82rem; border-radius: 11px; flex-shrink: 0; white-space: nowrap; }
  .sidebar-link-new { margin-top: 0; }
  .sidebar-label { display: none; }
  .sidebar-foot { padding: 0; justify-content: flex-end; }
  .sidebar-foot > span { display: none; }
  .admin-main { margin-left: 0; padding: 24px 18px 50px; }
  .ph-main { gap: 16px; }
}

/* =========================================================
   Modo celular (pantallas chicas)
   ========================================================= */
@media (max-width: 640px) {
  .admin-main { padding: 18px 14px 44px; overflow-x: clip; }
  .ph-info { min-width: 0; }
  .page-title { font-size: 1.45rem; }
  .page-sub { font-size: .86rem; }
  .page-head { margin-bottom: 20px; gap: 12px; }
  .page-actions { width: 100%; }

  .proyecto-hero { padding: 18px 18px 22px; border-radius: 22px; }
  .ph-top { gap: 10px; }
  .ph-actions { flex-wrap: wrap; }
  .ph-main { margin-top: 14px; gap: 14px; }
  .ph-icon { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 18px; }
  .ph-info h1 { font-size: 1.3rem; }
  .ph-info p { font-size: .86rem; }
  .ph-avance { width: 100%; min-width: 0; }

  .estados-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .estado-tile { padding: 12px 14px; gap: 10px; }
  .et-icono { width: 38px; height: 38px; border-radius: 11px; font-size: .95rem; }
  .et-datos b { font-size: 1.3rem; }

  .tabla-toolbar { padding: 14px 16px; }
  .tabla-toolbar h2 { font-size: 1rem; }
  .stats-grid { gap: 12px; }
  .stat-card { padding: 14px 16px; }

  .pc-head { gap: 16px; }
  .pc-stats { width: 100%; }
  .pc-stats .mc-stat { flex: 1; max-width: none; }
  .persona-card { padding: 20px 18px 16px; }
  .persona-preview { padding: 14px; }

  .mc-tabla-head { padding: 11px 10px 11px 16px; font-size: .7rem; letter-spacing: .05em; }
  .mc-tabla-add { padding: 8px 13px; font-size: .72rem; }
  .mc-fila { padding-left: 14px; }

  .dlg-form { padding: 20px 18px 18px; gap: 12px; }
  .tabs-meca { gap: 8px; margin-bottom: 18px; }
  .tab-btn { padding: 9px 14px; font-size: .78rem; }
  .mc-toasts { top: 12px; right: 12px; width: calc(100vw - 24px); }
  .flujo-cols { gap: 40px; }
  .actividad-cuerpo { padding: 14px 16px 18px; }
}