/* =========================================================
   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;
  /* La barra no scrollea: lo hace solo la lista de navegacion, y sin
     barra visible. Marca, "ver como", sesion y pie quedan siempre fijos. */
  overflow: hidden;
  transition: background .3s ease, width .3s cubic-bezier(.2,.8,.2,1), padding .3s ease;
}
/* Bloques fijos: nunca se encogen para dejar sitio a la lista */
.sidebar-top,
.sidebar > .ver-como,
.sesion-chip,
.sidebar-foot { flex: none; }

.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);
}

/* --- Logo tipo wordmark (InnoTech Hub): es ancho y ya trae el nombre, así que
   se muestra a tamaño natural (no aplastado en un cuadro) y reemplaza al texto
   de marca para no duplicarlo. Sobre pastilla blanca para asegurar contraste. */
.sidebar-brand img,
.login-marca img,
.arte-marca img {
  width: auto; height: 32px; max-width: 100%;
  border-radius: 10px; padding: 6px 11px;
}
.sidebar-brand img { object-fit: contain; }
.sidebar-brand > div,
.login-marca > div,
.arte-marca > div { display: none; }
/* Barra plegada: el rail es angosto y el wordmark no cabe (se cortaba). Se
   muestra SOLO el ícono del logo recortando a la izquierda del SVG. */
html.sb-collapsed .sidebar-brand img {
  width: 38px; height: 38px; max-width: 38px;
  object-fit: cover; object-position: left center;
  padding: 4px;
}

/* 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 1 auto;
  min-height: 0;              /* imprescindible: deja que el hijo flex se encoja */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }
/* Si la lista desborda, un degradado al pie avisa de que sigue.
   Va con position:sticky y NO con mask-image: una mascara convertiria el
   nav en bloque contenedor y recortaria el panel flotante de proyectos,
   que es position:fixed. La clase la pone admin.js cuando hace falta. */
.sidebar-nav::after {
  content: '';
  position: sticky; bottom: 0;
  flex: none;
  height: 24px; margin-top: -24px;
  background: linear-gradient(to bottom, transparent, var(--n-bg));
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.sidebar-nav.hay-mas-abajo::after { opacity: 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); }
/* El item activo se marca solo con el borde iluminado, sin barra al lado */
.sidebar-link.active {
  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);
}
.sidebar-link.active i { color: var(--c-secondary) !important; }
.sidebar-link .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   Grupo "Proyectos" del menu.
   Desplegado: display:contents, o sea que rotulo y enlaces fluyen
   como si el contenedor no existiera (se ve igual que antes).
   Plegado: un solo boton que abre los enlaces en un panel flotante,
   asi la barra no crece con cada proyecto ni necesita scroll.
   ========================================================= */
.nav-grupo { display: contents; }
.nav-grupo-items { display: contents; }
.nav-grupo-btn,
.nav-grupo-cab,
.nav-grupo-n { display: none; }

html.sb-collapsed .nav-grupo { display: block; }
html.sb-collapsed .nav-grupo-btn {
  position: relative;
  display: flex; width: 100%;
  border: 0; background: transparent;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}
html.sb-collapsed .nav-grupo-n {
  display: block;
  position: absolute; top: 3px; right: 11px;
  min-width: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--c-secondary); color: #fff;
  font-size: .6rem; font-weight: 800; line-height: 16px; text-align: center;
}
/* El panel va en position:fixed para escapar del overflow:hidden de la barra */
html.sb-collapsed .nav-grupo-items {
  display: none;
  position: fixed;
  left: calc(var(--sidebar-w) + 10px);
  width: 262px;
  max-height: min(72vh, 540px);
  overflow-y: auto;
  padding: 10px;
  border-radius: 20px;
  background: var(--n-bg);
  border: 1px solid var(--c-border-soft);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .5), var(--sh-card);
  z-index: 60;
}
html.sb-collapsed .nav-grupo.abierto > .nav-grupo-items {
  display: flex; flex-direction: column; gap: 4px;
  animation: nav-grupo-in .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes nav-grupo-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
html.sb-collapsed .nav-grupo-cab {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--c-border-soft);
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-soft);
}
html.sb-collapsed .nav-grupo-cab i { color: var(--c-secondary); font-size: .85rem; }
/* Dentro del panel los enlaces vuelven a llevar texto */
html.sb-collapsed .nav-grupo-items .sidebar-link {
  justify-content: flex-start;
  padding: 10px 12px;
}
html.sb-collapsed .nav-grupo-items .sidebar-link .truncate { display: inline; }
html.sb-collapsed .nav-grupo-items .sidebar-link i { width: 18px; font-size: .95rem; }
.nav-grupo-vacio { margin: 6px 10px 10px; font-size: .78rem; color: var(--c-text-soft); }

.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); }

/* =========================================================
   Sesión y control de acceso
   ========================================================= */
/* A los usuarios de solo lectura se les ocultan las acciones de edición */
body[data-rol="lector"] .solo-admin { display: none !important; }

.sesion-chip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 9px 12px;
  border-radius: 13px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
}
/* --- Menu de cuenta: abajo solo el avatar; perfil y salir se despliegan --- */
.cuenta-menu { display: block; position: relative; }
.cuenta-menu .sesion-chip {
  width: 100%;
  border: 0;
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.cuenta-menu .sesion-chip:hover .sesion-info b { color: var(--c-secondary); }
.sesion-flecha {
  flex-shrink: 0;
  color: var(--c-text-soft); font-size: .7rem;
  transition: transform .2s ease;
}
.cuenta-menu.abierto .sesion-flecha { transform: rotate(180deg); }
.sesion-chip.en-perfil {
  box-shadow: var(--sh-inset-mini),
    0 0 0 1.5px color-mix(in srgb, var(--c-secondary) 40%, transparent);
}
.sesion-chip.en-perfil .sesion-info b { color: var(--c-secondary); }

/* El panel se despliega tambien con la barra desplegada, no solo plegada */
.cuenta-menu > .cuenta-panel {
  display: none;
  position: fixed;
  left: calc(var(--sidebar-w) + 10px);
  width: 232px;
  padding: 10px;
  border-radius: 18px;
  background: var(--n-bg);
  border: 1px solid var(--c-border-soft);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .5), var(--sh-card);
  z-index: 60;
}
.cuenta-menu.abierto > .cuenta-panel {
  display: flex; flex-direction: column; gap: 4px;
  animation: nav-grupo-in .18s cubic-bezier(.2,.8,.2,1);
}
.cuenta-cab {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--c-border-soft);
}
.cuenta-cab-txt { display: flex; flex-direction: column; min-width: 0; }
.cuenta-cab-txt b { font-size: .86rem; font-weight: 700; color: var(--c-text); }
.cuenta-cab-txt small { font-size: .7rem; color: var(--c-text-soft); font-weight: 600; }
.cuenta-form { margin: 0; }
.cuenta-panel .sidebar-link {
  justify-content: flex-start;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  font-family: 'Inter', sans-serif; font-size: .84rem;
  cursor: pointer;
}
.cuenta-panel .sidebar-link .truncate { display: inline; }
.cuenta-salir { color: var(--c-text-muted); background: transparent; }
.cuenta-salir:hover { color: var(--c-terracota); }
html.dark .cuenta-salir:hover { color: #ff9d5c; }
.sesion-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sesion-info b { font-size: .84rem; font-weight: 700; color: var(--c-text); }
.sesion-info small { font-size: .68rem; color: var(--c-text-soft); font-weight: 600; }
/* Plegada solo queda el avatar: nombre, rol y flecha sobran */
html.sb-collapsed .sesion-info,
html.sb-collapsed .sesion-flecha { display: none; }
html.sb-collapsed .cuenta-menu .sesion-chip { justify-content: center; padding: 9px 0; }

/* ---------- Pantalla de login (partida: arte + formulario) ----------
   El login siempre va en claro, sin importar el tema del panel: el lado
   izquierdo es la escena oscura animada y el derecho el formulario blanco. */
.login-body {
  display: block; padding: 0; min-height: 100vh;
  background: #fff;
}
.login-split {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 100vh;
}

/* --- Lado izquierdo: escena de flujo de tareas --- */
.login-arte {
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 52px 54px;
  background:
    radial-gradient(115% 85% at 10% 6%, rgba(43,118,247,.34), transparent 58%),
    radial-gradient(85% 70% at 88% 20%, rgba(64,207,255,.22), transparent 60%),
    radial-gradient(95% 85% at 78% 96%, rgba(43,182,115,.20), transparent 62%),
    linear-gradient(155deg, #081327 0%, #0b1a33 45%, #0d2440 100%);
  background-color: #0a1526;
  color: #fff;
  isolation: isolate;
}
.login-arte canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* Velo inferior: separa la escena del texto sin cortarla */
.login-arte::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top,
    rgba(7,17,33,.96) 0%, rgba(8,20,38,.86) 30%, rgba(9,23,44,.42) 66%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}
.arte-txt { position: relative; z-index: 1; max-width: 30rem; }
.arte-marca {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 10px 18px 10px 10px; margin-bottom: 26px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.9);
}
.arte-marca img {
  width: 44px; height: 44px; object-fit: contain;
  background: #fff; border-radius: 13px; padding: 5px;
}
.arte-marca strong {
  display: block; font-size: 1.05rem; font-weight: 800;
  color: #fff; letter-spacing: -.01em;
}
.arte-marca span {
  display: block; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #40CFFF;
}
.arte-txt h2 {
  margin: 0 0 14px;
  font-family: var(--f-display, inherit);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
}
.arte-txt h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #40CFFF 0%, #7AC943 55%, #2BB673 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.arte-txt p {
  margin: 0 0 26px;
  max-width: 27rem;
  font-size: .95rem; line-height: 1.65;
  color: rgba(255,255,255,.72);
}
/* Carrusel de chips: desfilan en bucle de derecha a izquierda */
.arte-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent);
}
.arte-pista {
  display: flex; align-items: center; gap: 10px;
  width: max-content;
  animation: arte-desfile 34s linear infinite;
}
.arte-marquee:hover .arte-pista { animation-play-state: paused; }
@keyframes arte-desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.arte-chip {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 9px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  color: rgba(255,255,255,.86);
}
.arte-chip i { font-size: .85rem; }
.arte-chip.c0 i { color: #40CFFF; }   /* celeste */
.arte-chip.c1 i { color: #2B76F7; }   /* azul */
.arte-chip.c2 i { color: #2BB673; }   /* verde */
.arte-chip.c3 i { color: #7AC943; }   /* verde lima */
@media (prefers-reduced-motion: reduce) {
  .arte-pista { animation: none; }
}

/* --- Lado derecho: el formulario --- */
.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  background: #fff;
}
.login-caja { width: 100%; max-width: 25rem; }
.login-marca { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.login-marca img {
  width: 46px; height: 46px; object-fit: contain;
  background: #fff; border-radius: 13px; padding: 5px;
  box-shadow: 0 4px 14px -6px rgba(16,32,64,.35);
  border: 1px solid #eceff5;
}
.login-marca strong { display: block; font-size: 1.1rem; font-weight: 800; color: #101828; }
.login-marca span {
  display: block; font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-secondary);
}
.login-caja h1 {
  margin: 0 0 7px;
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  color: #101828;
}
.login-sub { margin: 0 0 26px; font-size: .9rem; color: #667085; line-height: 1.55; }
.login-form { display: flex; flex-direction: column; gap: 16px; }

/* Campos en claro, planos (aquí no hay neumorfismo) */
.login-caja .campo > span {
  display: block; margin-bottom: 7px;
  font-size: .78rem; font-weight: 700; color: #344054;
}
.login-caja .input-prefijo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid #e0e4eb;
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.login-caja .input-prefijo:focus-within {
  border-color: var(--c-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-secondary) 14%, transparent);
}
.login-caja .input-prefijo > i {
  position: static; transform: none;
  color: #98a2b3; font-size: .9rem;
}
.login-caja .input-prefijo .input-meca { padding-left: 0; }
.login-caja .input-prefijo .input-meca,
.login-caja .campo .input-meca,
.login-caja .select-meca {
  flex: 1; min-width: 0;
  padding: 13px 0;
  background: none; border: none; box-shadow: none;
  font-size: .95rem; color: #101828;
}
.login-caja .input-prefijo .input-meca:focus { box-shadow: none; }
.login-caja .campo > .input-meca,
.login-caja .select-meca {
  padding: 13px 14px;
  background: #fff;
  border: 1.5px solid #e0e4eb;
  border-radius: 12px;
}
.login-caja .campo > .input-meca:focus,
.login-caja .select-meca:focus {
  border-color: var(--c-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-secondary) 14%, transparent);
}

/* Botón "Continuar con Google" */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 13px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #dadce0;
  color: #3c4043;
  font-size: .92rem; font-weight: 600;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-google:hover {
  border-color: #c6cad1;
  box-shadow: 0 8px 20px -12px rgba(16,32,64,.55);
  transform: translateY(-1px);
}
.login-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px;
  color: #98a2b3; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.login-sep::before, .login-sep::after {
  content: ''; flex: 1; height: 1px; background: #e7eaf0;
}
.login-btn {
  width: 100%; justify-content: center;
  margin-top: 8px; padding: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--c-success, #22a06b) 90%, #000);
}
.login-pie {
  margin: 24px 0 0; padding-top: 18px;
  border-top: 1px solid #eef1f5;
  font-size: .78rem; color: #667085; line-height: 1.55;
}
.login-pie i { color: var(--c-secondary); margin-right: 5px; }

/* --- "¿Quién eres?": elegir la propia ficha tras entrar con Google --- */
.login-identificar { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ident-persona {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #e6e9ef; border-radius: 14px;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.ident-persona:hover {
  border-color: var(--c-secondary);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--c-secondary) 80%, #000);
}
.ident-persona:active { transform: translateY(1px); }
.ident-persona .avatar { flex-shrink: 0; }
.ident-datos { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ident-datos strong { font-weight: 600; color: #1f2430; }
.ident-datos small { color: #667085; font-size: .78rem; }
.ident-persona > i { margin-left: auto; color: var(--c-secondary); }

/* Responsive: el arte se convierte en una franja superior y luego desaparece */
@media (max-width: 1040px) {
  .login-split { grid-template-columns: 1fr; }
  .login-arte {
    min-height: 15rem;
    padding: 34px 30px;
    align-items: center;
  }
  .arte-txt h2 { font-size: 1.45rem; }
  .arte-txt p { margin-bottom: 18px; font-size: .88rem; }
  .login-panel { padding: 44px 26px 56px; }
}
@media (max-width: 560px) {
  .login-arte { min-height: 11.5rem; padding: 26px 22px; }
  .arte-txt p { display: none; }
  /* El logo ya aparece sobre el formulario: no lo repetimos arriba */
  .arte-marca { display: none; }
  .arte-txt h2 { font-size: 1.25rem; margin-bottom: 16px; }
  .login-marca { margin-bottom: 26px; }
}

/* =========================================================
   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);
  /* Contexto propio de apilado: así el fondo decorativo (z-index negativo)
     queda por encima del color del body y por debajo del contenido. Sin esto
     el body lo taparía por completo. */
  position: relative;
  isolation: isolate;
}

/* =========================================================
   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; }

/* Plegado no caben "PROYECTOS" ni "CONFIGURACION" (se partian a media
   palabra): el rotulo se vuelve un separador y el texto queda solo para
   lectores de pantalla. */
html.sb-collapsed .sidebar-label {
  width: 24px; height: 2px;
  margin: 10px auto 6px;
  padding: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-text-soft) 38%, transparent);
  font-size: 0; line-height: 0;
  overflow: hidden; white-space: nowrap;
}
html.sb-collapsed.dark .sidebar-label { background: rgba(255, 255, 255, .14); }
/* El primero no necesita separador: va pegado al selector de "ver como" */
html.sb-collapsed .sidebar-nav > .sidebar-label:first-child { margin-top: 2px; }

/* Plegado cabe menos: se aprieta un poco para que no haga falta scroll */
html.sb-collapsed .sidebar-nav { gap: 3px; padding-top: 10px; }
html.sb-collapsed .sidebar-link {
  justify-content: center;
  padding: 10px 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;
}
/* El título tiene que ganarle al fondo animado: más cuerpo, y una barra de
   acento a la izquierda que lo separa del grafo. */
.page-title {
  margin: 0;
  font-size: clamp(1.55rem, 1.25rem + .9vw, 2rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  color: var(--c-text);
}
.page-head > div:first-child { position: relative; padding-left: 14px; }
.page-head > div:first-child::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-secondary), var(--c-verde-esmeralda));
}
.page-sub { margin: 6px 0 0; color: var(--c-text-soft); font-size: .9rem; }
/* Detrás del título, un velo del color del panel: el fondo no se le cruza */
.page-head {
  position: relative; isolation: isolate;
}
.page-head::after {
  content: ''; position: absolute; inset: -14px -18px; z-index: -1;
  border-radius: 20px;
  background: radial-gradient(80% 120% at 0% 50%,
    color-mix(in srgb, var(--n-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--n-bg) 55%, transparent) 55%,
    transparent 100%);
}

/* =========================================================
   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);
  /* Solo se animan transform y border-color: animar box-shadow obliga al
     navegador a repintar toda la tarjeta (4 capas con desenfoques de hasta
     30px) en cada fotograma, y con un grid lleno de tarjetas se nota. */
  transition: transform .25s ease, border-color .25s 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(170px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
/* Los KPI comparten .card-base con las tarjetas de proyecto y se confundían
   con ellas. Se aplanan: sin relieve, fondo teñido de su color y una barra
   lateral. Quedan como una tira de resumen, no como una tarjeta más. */
.stat-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px 13px 13px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 9%, var(--n-bg));
  border: 1px solid color-mix(in srgb, var(--pc, var(--c-secondary)) 20%, transparent);
  border-left: 4px solid var(--pc, var(--c-secondary));
  box-shadow: none;
}
.stat-card:hover { transform: none; box-shadow: none; }
html.dark .stat-card {
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 16%, var(--n-bg));
}
/* El icono deja de ser un bloque de color: basta el tono sobre el fondo */
.stat-card .stat-icon {
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 18%, transparent);
  color: var(--pc, var(--c-secondary));
  box-shadow: none;
  width: 36px; height: 36px; border-radius: 11px; font-size: .95rem;
}
.stat-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pc, var(--c-secondary));
  color: #fff; font-size: 1rem;
  box-shadow: var(--sh-mini), var(--clay-pop);
}
.stat-card b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.stat-card small { color: var(--c-text-soft); font-size: .74rem; font-weight: 600; }

/* =========================================================
   Grid de proyectos (dashboard)
   ========================================================= */
.proyectos-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}
/* Como mucho tres por fila: con auto-fill entraban cuatro y quedaban estrechas */
@media (min-width: 1080px) {
  .proyectos-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Fondo del tablero: grafo de ramas ----
   Decorativo y discreto: dos carriles de punta a punta y tres ramas que los
   unen. Fijo al viewport y detrás de todo (el contenedor del panel se pinta
   fuera de <main>: ahí dentro, un fixed se mide contra el contenedor —que
   lleva animación con transform— y no contra la pantalla.
   Va tenue a propósito: con más trazos, más grosor y todos los pulsos a la vez
   el fondo competía con las tarjetas y cansaba la vista. */
.fondo-ramas {
  /* Va suelto en el body: z-index 0 lo deja sobre el fondo de la página, y el
     contenido (que sí está posicionado y viene después) queda por encima. */
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  pointer-events: none;
  color: var(--c-secondary);
  opacity: .16;
}
html.dark .fondo-ramas { opacity: .2; }

/* Los colores ya no viven aquí: cada trazo llega con el suyo desde index.php
   (color del proyecto o acento de Ajustes), así el fondo sigue a la marca. */
.fr-lineas path {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}

/* El pulso: un tramo corto que recorre el carril. Solo en los dos carriles
   largos y muy lento, para que se note como respiración y no como tráfico.
   pathLength="1" iguala el tamaño del pulso en trazos de distinta longitud. */
.fr-pulsos use {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: .05 1;
  animation: fr-pulso 34s linear infinite;
}
.fr-pulsos use:nth-child(2) { animation-duration: 42s; animation-delay: -20s; }
@keyframes fr-pulso { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }

/* Nodos quietos: el parpadeo de todos a destiempo era lo que más mareaba. */
.fr-nodos circle { fill: currentColor; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .fr-pulsos { display: none; }
}

/* El color del proyecto (--pc, el que se elige en «Editar proyecto») manda en
   toda la tarjeta, no solo en el icono: franja superior, tinte de fondo y aro
   al pasar por encima. Así el tablero se distingue de un vistazo. */
.proyecto-admin-card {
  overflow: hidden; display: flex; flex-direction: column;
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc, var(--c-secondary)) 10%, transparent) 0%, transparent 60%),
    var(--n-bg);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Franja de color arriba: fina, pero suficiente para identificar el proyecto */
.proyecto-admin-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg,
    var(--pc, var(--c-secondary)),
    color-mix(in srgb, var(--pc, var(--c-secondary)) 45%, #fff));
}
.proyecto-admin-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-card), 0 0 0 1.5px color-mix(in srgb, var(--pc, var(--c-secondary)) 40%, transparent);
}
html.dark .proyecto-admin-card {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc, var(--c-secondary)) 16%, transparent) 0%, transparent 60%),
    var(--n-bg);
}

.pac-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 0;
}
.pac-icon {
  width: 46px; height: 46px;
  border-radius: 15px;
  background: var(--pc, var(--c-secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
  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: 13px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pac-body h2 { margin: 0; font-size: 1.05rem; 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: .82rem; line-height: 1.5;
  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;
  flex-wrap: wrap; row-gap: 12px;              /* si no cabe, "Ver tablero" baja de línea */
  padding-top: 15px;
  border-top: 1px dashed var(--c-border);
}
.pac-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.pac-links .btn-meca { white-space: nowrap; }   /* nunca cortar el texto del botón */
/* "Ver tablero" y el chip del repo también toman el color del proyecto */
.pac-links .btn-outline {
  color: var(--pc, var(--c-secondary));
  box-shadow: var(--sh-mini), inset 0 0 0 1.5px color-mix(in srgb, var(--pc, var(--c-secondary)) 22%, transparent);
}
.pac-links .btn-outline:hover {
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 10%, transparent);
}
.pac-repo:hover { color: var(--pc, var(--c-secondary)); }
/* La barra de avance ya recibe el color por estilo en línea; el hueco se tiñe
   un poco para que el 1% no parezca un fallo de pintado. */
.pac-progress .progress-wrap {
  background: color-mix(in srgb, var(--pc, var(--c-secondary)) 8%, var(--n-bg));
}
.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); }
/* Sin parpadeo infinito: en un tablero con muchas tareas altas eran
   decenas de elementos animandose a la vez, sin aportar nada. */
.prio-dot.prio-alta  { background: var(--c-terracota); }
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;
  /* Las rayas quedan fijas: animar background-position repinta la barra en
     cada fotograma, para siempre, aunque nadie la mire. */
}
.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; }

/* Mismo botón para los otros proveedores: GitLab (naranja de marca) y, si no
   se reconoce el host, una versión neutra con el acento del panel. */
.btn-gitlab, .btn-repo {
  background: #fc6d26;
  color: #fff !important;
  font-weight: 700;
  border: 0;
  box-shadow: 5px 5px 12px color-mix(in srgb, #fc6d26 30%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
  transition: background .2s ease, transform .2s ease;
}
.btn-gitlab:hover, .btn-repo:hover { background: #fd8a4f; transform: translateY(-1px); }
.btn-gitlab:active, .btn-repo:active { box-shadow: var(--sh-inset-mini); transform: none; }
.btn-repo {
  background: var(--c-secondary);
  box-shadow: 5px 5px 12px color-mix(in srgb, var(--c-secondary) 30%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
}
.btn-repo:hover { background: color-mix(in srgb, var(--c-secondary) 80%, #fff); }

/* 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; }

/* Subselector de "Tareas": segmentado compacto embutido */
.subvista-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 13px;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
}
.subvista-toggle[hidden] { display: none; }
.subvista-tit {
  padding: 0 8px 0 6px;
  font-size: .72rem; font-weight: 700; color: var(--c-text-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.subvista-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 0; border-radius: 10px;
  background: transparent;
  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, background .2s ease;
}
.subvista-btn:hover { color: var(--c-text); }
.subvista-btn.active {
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-secondary);
}
.tab-badge-neutro { background: var(--c-text-soft) !important; }
@media (max-width: 620px) {
  .subvista-tit { display: none; }
}
.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 {
  position: relative; overflow: hidden;
  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.kb-fija { cursor: default; }
.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; flex-wrap: wrap; }
.cal-nav .accion-btn { text-decoration: none; }
.cal-nav .cal-sync { display: inline-flex; margin: 0; }
.cal-nav .cal-sync .accion-btn { gap: 7px; }
.cal-nav .cal-sync .fa-google { color: #2BB673; }
.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);
  border-left: 3px solid var(--tc, var(--c-secondary));   /* arranque de la barra */
}
.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; }

/* Continuación de una tarea que dura varios días: una línea de color que
   va desde el día de inicio hasta el de fin (con banderita en el último). */
.cal-ev-linea {
  min-height: 9px; height: 9px; padding: 0;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--tc, var(--c-secondary)) 45%, var(--n-bg));
  box-shadow: none;
  border-radius: 3px;
  /* Se estira a los bordes de la celda para que "conecte" entre días */
  margin: 0 -8px;
}
.cal-ev-linea.cal-medio { border-radius: 0; }
.cal-ev-linea.cal-fin {
  margin-right: 0; border-radius: 0 6px 6px 0;
  background: var(--tc, var(--c-secondary));
}
.cal-ev-linea.cal-fin i { font-size: .55rem; color: #fff; margin-right: 4px; }
.cal-ev-linea:hover { transform: none; }
.cal-ev-linea.cal-venc { background: var(--c-terracota); }

.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-icono.reu-meet.reu-proxima { background: linear-gradient(135deg, #00897B, #1A73E8); }
/* Chip de plataforma en la meta de la reunión */
.reu-plat { padding: 2px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.reu-plat.plat-zoom { background: rgba(45,140,255,.16); color: #2D8CFF; }
.reu-plat.plat-meet { background: rgba(26,115,232,.16); color: #1A73E8; }
html.dark .reu-plat.plat-meet { color: #7BAAF7; }
/* Dentro de .campo (columna) el toggle se estiraría a todo el ancho */
.nr-plat { display: inline-flex; align-self: flex-start; }
.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); }
/* Aviso de "aún no hay plataforma" en Ajustes → Reuniones */
.reu-vacio {
  border-left: 3px solid var(--c-naranja, #F7931E);
  background: color-mix(in srgb, #F7931E 10%, transparent);
  align-items: flex-start;
}
.reu-vacio > i { color: #F7931E; margin-top: 3px; }
.reu-vacio a { font-weight: 700; }

.reu-repite {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 800;
  background: color-mix(in srgb, var(--c-verde-esmeralda) 16%, transparent);
  color: var(--c-verde-esmeralda);
}
.reu-invitados { display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; }

/* Repetición semanal: todo en una línea bajo la casilla — fichas L M X J V S D
   y la fecha de fin. Sin caja ni títulos, para no alargar el modal. */
.repetir-caja { gap: 10px; }
.repetir-detalle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-left: 41px;                     /* alineado con el texto de la casilla */
}
/* Sin esto, el display de arriba le gana al atributo hidden y el bloque
   se queda visible con la casilla desmarcada. */
.repetir-detalle[hidden] { display: none; }

.dias-semana { display: flex; gap: 6px; }
.dia-chip { cursor: pointer; }
.dia-chip input { display: none; }
.dia-chip span {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
  font-size: .78rem; font-weight: 800; color: var(--c-text-soft);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dia-chip input:checked + span {
  background: var(--c-secondary, #2B76F7); color: #fff;
  box-shadow: var(--clay-pop);
}

.repetir-hasta { display: inline-flex; align-items: center; gap: 8px; }
.repetir-hasta > span { font-size: .8rem; font-weight: 700; color: var(--c-text-soft); }
.repetir-hasta .input-meca { width: 158px; padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 560px) {
  .repetir-detalle { margin-left: 0; }
  .repetir-hasta { width: 100%; }
  .repetir-hasta .input-meca { flex: 1; width: auto; }
}
.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; }
/* "Ver grabación": botón lleno tipo play, resalta cuando ya hay grabación.
   Doble clase para ganarle al fondo de .accion-btn (declarado más abajo). */
.accion-btn.accion-grab {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: #fff !important; font-weight: 700; border: 0;
  padding: 8px 14px;
  box-shadow: 5px 5px 12px color-mix(in srgb, #7C3AED 30%, var(--n-sh-d)), -4px -4px 10px var(--n-sh-l), var(--clay-pop);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.accion-btn.accion-grab i { color: #fff !important; }
.accion-btn.accion-grab:hover { color: #fff !important; transform: translateY(-1px); filter: brightness(1.07); }
.accion-btn.accion-grab:active { transform: translateY(0); box-shadow: var(--sh-inset-mini); }

/* "Transcripción" para Claude: píldora con tinte cálido y el logo chico */
.accion-btn.accion-claude {
  background: color-mix(in srgb, #D97757 16%, var(--n-bg));
  color: #b3502f !important; font-weight: 700;
  box-shadow: var(--sh-mini);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
html.dark .accion-btn.accion-claude { color: #e8a487 !important; background: color-mix(in srgb, #D97757 22%, var(--n-bg)); }
.accion-btn.accion-claude img { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: none; }
.accion-btn.accion-claude:hover { color: #b3502f !important; transform: translateY(-1px); filter: brightness(1.04); }
html.dark .accion-btn.accion-claude:hover { color: #f0b89e !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));
}
/* Sin ficha que abrir (solo el admin ve la de los demás) */
.tabla-equipo tr.fila-sin-ficha { cursor: default; }
.tabla-equipo tr.fila-sin-ficha:hover td:first-child { box-shadow: none; }
.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); }
/* El boton de copiar se estiliza solo: no depende de ir acompanado
   de .accion-btn, para que se vea igual en la tabla y en la ficha. */
.btn-copiar {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 9px;
  border: 0; border-radius: 10px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-muted);
  font-size: .8rem; font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.btn-copiar:hover { color: var(--c-secondary); }
.btn-copiar:active { box-shadow: var(--sh-inset-mini); }
.btn-copiar.mini { padding: 5px 8px; font-size: .72rem; }
/* Confirmacion breve al copiar */
.btn-copiar.copiado { color: var(--c-verde-esmeralda); box-shadow: var(--sh-inset-mini); }

/* =========================================================
   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); }
/* Dentro del chip (que es una pildora) el boton de copiar tambien es redondo */
.cuenta-chip .btn-copiar { border-radius: 999px; }
.cuenta-chip .btn-copiar:hover { color: var(--av-c1); }
/* Chip de solo texto: el padding base es asimetrico porque esta pensado
   para los que llevan boton de copiar a la derecha. */
.cuenta-chip.cuenta-txt {
  gap: 8px;
  padding: 7px 15px;
  color: var(--c-text); font-size: .82rem; font-weight: 700;
}
.cuenta-chip.cuenta-txt i { color: var(--c-text-soft); font-size: .8rem; }
.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; }

/* =========================================================
   Editor de repositorios (crear / editar proyecto)
   ========================================================= */
/* ---- Modal "Avisar al equipo": a quién y con qué tareas ---- */
.dlg-avisar { width: min(720px, calc(100vw - 40px)); }
.dlg-avisar .dlg-form { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 20px; }
.av-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.av-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--c-text); }
.av-head p { margin: 5px 0 0; font-size: .84rem; color: var(--c-text-soft); }

/* Sin correos no se puede enviar: se avisa arriba, no tras varios clics */
.av-alerta {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--c-terracota) 12%, transparent);
  color: var(--c-text); font-size: .82rem; line-height: 1.5;
}
.av-alerta i { color: var(--c-terracota); margin-top: 2px; }
.av-alerta a { color: var(--c-secondary); font-weight: 700; }

.av-barra { display: flex; align-items: center; gap: 8px; }
.av-barra-tit {
  flex: 1; font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-soft);
}
.av-marcar {
  border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  background: rgba(var(--c-secondary-rgb), .1); color: var(--c-secondary);
  font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 700;
  transition: background .2s ease;
}
.av-marcar:hover { background: rgba(var(--c-secondary-rgb), .2); }

.av-lista { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow-y: auto; padding-right: 4px; }
.av-persona {
  border-radius: 16px; background: var(--n-bg); box-shadow: var(--sh-inset-mini);
  transition: box-shadow .2s ease, opacity .2s ease;
}
/* Elegido: aro de acento. Descartado: se apaga, para verlo de un vistazo. */
.av-persona:has(.av-todo:checked) { box-shadow: var(--sh-inset-mini), 0 0 0 1.5px rgba(var(--c-secondary-rgb), .35); }
.av-persona.av-fuera { opacity: .45; }
.av-persona.av-sincorreo { opacity: .6; }
.av-cab { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.av-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-quien b { font-size: .9rem; color: var(--c-text); }
.av-quien small { font-size: .74rem; color: var(--c-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-quien small i { color: var(--c-terracota); margin-right: 3px; }
.av-quien small a { color: var(--c-secondary); font-weight: 700; }
.av-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.av-n {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(var(--c-secondary-rgb), .12); color: var(--c-secondary);
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.av-meta small { font-size: .68rem; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.av-abrir {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--c-text-soft); font-size: .78rem;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.av-abrir:hover { color: var(--c-secondary); background: rgba(var(--c-secondary-rgb), .1); }
.av-persona.av-abierta .av-abrir { transform: rotate(180deg); color: var(--c-secondary); }

.av-tareas {
  list-style: none; margin: 0; padding: 2px 13px 12px 52px;
  display: flex; flex-direction: column; gap: 3px;
}
.av-tareas[hidden] { display: none; }
.av-tareas label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 9px; border-radius: 10px; font-size: .82rem; color: var(--c-text);
}
.av-tareas label:hover { background: rgba(var(--c-secondary-rgb), .07); }
.av-t-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-tareas small { flex: none; color: var(--c-text-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* Casilla propia: la nativa desentona con el resto del panel */
.av-marca { position: relative; display: inline-flex; flex: none; }
.av-marca input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.av-marca-caja {
  width: 19px; height: 19px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
  color: #fff; font-size: .62rem;
  transition: background .18s ease, box-shadow .18s ease;
}
.av-marca-caja i { opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.av-marca input:checked + .av-marca-caja { background: var(--c-secondary); box-shadow: none; }
.av-marca input:checked + .av-marca-caja i { opacity: 1; transform: scale(1); }
.av-marca input:indeterminate + .av-marca-caja {
  background: rgba(var(--c-secondary-rgb), .28);
  box-shadow: inset 0 0 0 2px var(--c-secondary);
}
.av-marca input:disabled + .av-marca-caja { opacity: .4; }
.av-marca input:focus-visible + .av-marca-caja { box-shadow: 0 0 0 2.5px rgba(var(--c-secondary-rgb), .35); }

.av-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--c-border-soft);
}
.av-resumen {
  padding: 6px 13px; border-radius: 999px;
  background: rgba(var(--c-secondary-rgb), .1); color: var(--c-secondary);
  font-size: .8rem; font-weight: 700;
}
.av-resumen.av-nada { background: color-mix(in srgb, var(--c-text-soft) 14%, transparent); color: var(--c-text-soft); }
.av-acciones { display: flex; gap: 10px; margin-left: auto; }
.av-acciones .btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Marca en la fila de la tarea: lleva documentos adjuntos */
.adj-tag {
  color: var(--c-secondary) !important;
  background: rgba(var(--c-secondary-rgb), .1);
}

/* ---- Documentos de respaldo de una tarea (modales de tarea y detalle) ---- */
.campo-adjuntos { display: flex; flex-direction: column; gap: 8px; }
.adj-lista, .adj-nuevos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adj-lista[hidden], .adj-nuevos[hidden] { display: none; }
.adj-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
  font-size: .84rem; color: var(--c-text);
}
.adj-item > i:first-child { color: var(--c-secondary); flex: none; }
.adj-item a, .adj-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-item a { color: var(--c-text); text-decoration: none; }
.adj-item a:hover { color: var(--c-secondary); text-decoration: underline; }
/* Marcado para quitar: sigue ahí hasta que se guarda, por si es un descuido */
.adj-item.adj-fuera { opacity: .5; }
.adj-item.adj-fuera a { text-decoration: line-through; }
.adj-nuevo { background: color-mix(in srgb, var(--c-verde-esmeralda) 10%, transparent); box-shadow: none; }
.adj-nuevo > i:first-child { color: var(--c-verde-esmeralda); }
.adj-peso { flex: none; color: var(--c-text-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }
.adj-quitar {
  flex: none; width: 28px; height: 28px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--c-text-soft);
  transition: color .2s ease, background .2s ease;
}
.adj-quitar:hover { color: var(--c-terracota); background: rgba(var(--c-secondary-rgb), .08); }
.adj-elegir {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 9px 14px; border-radius: 12px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--c-secondary) 45%, transparent);
  color: var(--c-secondary); font-size: .84rem; font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.adj-elegir:hover { background: rgba(var(--c-secondary-rgb), .08); }
.adj-elegir input[type="file"] { display: none; }
/* Contenido de la previsualización (lo usa el panel del detalle) */
.adj-visor-frame { width: 100%; height: 100%; border: 0; background: #fff; }

/* Chips del detalle de la tarea (solo lectura) */
.dt-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; }
.adj-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 7px 12px; border-radius: 999px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text); text-decoration: none; font-size: .82rem; font-weight: 600;
  transition: color .2s ease, box-shadow .2s ease;
}
.adj-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-chip > i:first-child { color: var(--c-secondary); }
.adj-chip > i:last-child { color: var(--c-text-soft); font-size: .74rem; }
.adj-chip:hover { color: var(--c-secondary); box-shadow: var(--sh-mini), 0 0 0 1.5px rgba(var(--c-secondary-rgb), .35); }

.repos-editor { display: flex; flex-direction: column; gap: 10px; }
.repos-filas { display: flex; flex-direction: column; gap: 8px; }
.repo-fila {
  display: grid;
  grid-template-columns: 130px 130px 1fr 150px auto;
  gap: 8px; align-items: center;
}
.repo-fila .repo-tipo,
.repo-fila .repo-rama,
.repo-fila .input-meca { padding: 10px 12px; font-size: .88rem; }
/* Mientras se piden las ramas al proveedor */
.repo-fila.repo-cargando .repo-rama { opacity: .6; cursor: progress; }
.repo-quitar {
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 10px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text-soft); cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.repo-quitar:hover { color: var(--c-terracota); }
.repo-quitar:active { box-shadow: var(--sh-inset-mini); }
.repo-agregar { align-self: flex-start; }
@media (max-width: 980px) {
  /* La rama baja a su propia línea antes de que los campos se estrujen */
  .repo-fila { grid-template-columns: 130px 130px 1fr auto; }
  .repo-fila .repo-rama { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .repo-fila { grid-template-columns: 1fr 1fr; }
  .repo-fila .repo-url, .repo-fila .repo-rama { grid-column: 1 / -1; }
}

/* =========================================================
   Aportes del equipo (commits por persona, en Métricas)
   ========================================================= */
/* Barra de carga superior (verde) y spinner en botones */
.nav-progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--c-verde-lima), var(--c-verde-esmeralda));
  box-shadow: 0 0 8px var(--c-verde-esmeralda);
  opacity: 0;
}
.nav-progreso.activa { opacity: 1; animation: nav-prog 2.2s ease-out forwards; }
@keyframes nav-prog {
  0% { width: 0; } 25% { width: 45%; } 60% { width: 75%; } 100% { width: 92%; }
}
.btn-primary.btn-cargando, .btn-meca.btn-cargando, .accion-btn.btn-cargando {
  position: relative; color: transparent !important; pointer-events: none;
}
.btn-cargando > i, .btn-cargando > * { visibility: hidden; }
.btn-cargando::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; visibility: visible;
  background: #fff;                          /* color del spinner (blanco en botones llenos) */
  --spk: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23000'><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.13'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.19' transform='rotate(30 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.25' transform='rotate(60 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.32' transform='rotate(90 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.4' transform='rotate(120 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.48' transform='rotate(150 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.56' transform='rotate(180 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.64' transform='rotate(210 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.73' transform='rotate(240 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.82' transform='rotate(270 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='.91' transform='rotate(300 12 12)'/><rect x='10.9' y='2' width='2.2' height='6' rx='1.1' opacity='1' transform='rotate(330 12 12)'/></g></svg>");
  -webkit-mask: var(--spk) center / contain no-repeat;
          mask: var(--spk) center / contain no-repeat;
  animation: spin 1s steps(12) infinite;
}
.btn-outline.btn-cargando::after,
.accion-btn.btn-cargando::after { background: var(--c-verde-esmeralda); }
@keyframes spin { to { transform: rotate(360deg); } }

.ap-total { font-size: .8rem; font-weight: 600; color: var(--c-text-soft); margin-left: 8px; }
.ap-cargando { margin-left: 8px; color: var(--c-verde-esmeralda); }
.ap-filtros { flex-wrap: wrap; align-items: center; gap: 8px; }

/* Dos tarjetas de métricas lado a lado (Observaciones + Carga).
   Gap amplio: con menos, las sombras neumórficas se tocan y parecen montadas. */
.met-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  align-items: start;
  margin-top: 22px;
}
.met-2col > section { margin: 0; }

/* Un heatmap por repositorio, lado a lado para llenar el ancho */
.ap-mapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px 26px;
  margin-top: 16px;
  align-items: start;   /* que las tarjetas no se estiren dejando hueco */
}
.ap-mapas[hidden] { display: none; }
.ap-mapas .hm-leyenda { grid-column: 1 / -1; margin-top: 0; }
.ap-repo {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--n-bg);
  box-shadow: var(--sh-inset-mini);
}
.ap-repo-cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ap-repo-nom { font-size: .86rem; font-weight: 700; color: var(--c-text); display: inline-flex; align-items: center; gap: 7px; }
.ap-repo-nom i { color: var(--c-verde-esmeralda); }
.ap-repo-n { font-size: 1rem; font-weight: 800; color: var(--c-verde-esmeralda); }
/* Rama que se está mirando, junto al nombre del repo */
.ap-repo-rama {
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-verde-esmeralda) 14%, transparent);
  color: var(--c-verde-esmeralda);
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
}

/* Uno o dos repos: la rejilla automática (auto-fit de 360px) los dejaba en una
   columna estrecha, porque la leyenda ocupa todas las pistas e impide que las
   vacías se colapsen. Con pocos repos se reparten el ancho completo. */
.ap-mapas.ap-uno { grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .ap-mapas.ap-dos { grid-template-columns: repeat(2, 1fr); }
}
/* Un solo repo: mapa a la izquierda y cifras a la derecha. El ancho que sobra
   se llena con información, no estirando las celdas. */
.ap-mapas.ap-uno .ap-repo {
  display: grid;
  /* El mapa ocupa su ancho natural (depende del rango) y al lado van las cifras
     y los últimos commits, que son los que llenan el alto: con solo las cifras,
     en «30 d» quedaba media tarjeta en blanco. */
  /* minmax(0, auto), no «auto» a secas: el mapa lleva un ancho fijo en línea
     (depende del rango) y con «auto» ese ancho se vuelve un mínimo que no cede,
     así que en «1 año» empujaba la columna derecha fuera de la tarjeta. */
  grid-template-columns: minmax(0, auto) minmax(300px, 1fr);
  gap: 4px 26px; align-items: stretch;
  padding: 16px 18px;
}
.ap-mapas.ap-uno .ap-repo-cab { grid-column: 1 / -1; }
.ap-mapas.ap-uno .hm-envoltura { max-width: 100%; align-self: start; min-width: 0; }

/* Columna derecha: solo las cifras, en 2×2 y estiradas al alto del mapa, para
   que ninguna de las dos columnas deje una franja en blanco debajo. */
.ap-mapas.ap-uno .ap-resumen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-content: stretch; height: 100%;
}
.ap-mapas.ap-uno .ap-dato { justify-content: center; }
@media (max-width: 860px) {
  .ap-mapas.ap-uno .ap-resumen { height: auto; grid-auto-rows: auto; }
}

/* «30 d»: tira de días a lo ancho y las cifras en una fila debajo. La rejilla
   de 7 filas para un mes salía diminuta y obligaba a estirar los tiles. */
.ap-mapas.ap-corto .ap-repo { grid-template-columns: 1fr; gap: 14px; }
.ap-mapas.ap-corto .ap-resumen {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: auto; height: auto;
}
/* Barras por día: la altura es el número de commits (30 cuadros del mismo
   verde no decían nada; una barra alta sí se entiende sola). */
.ap-tira { display: flex; gap: 10px; width: 100%; }
.ap-tira-eje {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 124px; padding-bottom: 2px; flex: none;
  font-size: .62rem; font-weight: 700; color: var(--c-text-soft);
  font-variant-numeric: tabular-nums;
}
.ap-tira-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-barras {
  display: grid; gap: 4px; align-items: end;
  height: 124px; padding-bottom: 2px;
  border-bottom: 1.5px solid var(--c-border-soft);
}
.ap-barra {
  position: relative; display: block; width: 100%;
  height: var(--h); min-height: 4px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #34c759 0%, #26a641 100%);
  transition: filter .15s ease;
  /* En barras bajas el número no cabe: se recorta en vez de salirse encima */
  overflow: hidden;
}
.ap-barra:hover { filter: brightness(1.12); }
.ap-barra.cero { background: color-mix(in srgb, var(--c-text-soft) 16%, transparent); }
/* El número dentro de la barra, si cabe */
.ap-barra b {
  position: absolute; top: 4px; left: 0; right: 0;
  font-size: .58rem; font-weight: 800; color: #fff; text-align: center;
}
.ap-barra.cero b { display: none; }
.ap-tira-dias {
  display: grid; gap: 4px;
  font-size: .64rem; font-weight: 600; text-align: center;
  color: var(--c-text-soft); font-variant-numeric: tabular-nums;
}
/* La leyenda Menos/Más es del mapa de calor, no de las barras */
.ap-mapas.ap-corto .hm-leyenda { display: none; }
@media (max-width: 860px) {
  .ap-mapas.ap-uno .ap-repo { grid-template-columns: 1fr; }
}
/* Las cifras se reparten el ancho sobrante: en fila cuando hay sitio (rangos
   cortos, mapa pequeño) y en columna cuando el mapa se lo come (un año). */
.ap-resumen {
  display: grid; gap: 8px; align-content: start; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.ap-dato { min-width: 0; }
.ap-dato small, .ap-dato b, .ap-dato span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-dato {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 11px; border-radius: 12px;
  background: color-mix(in srgb, var(--c-verde-esmeralda) 8%, transparent);
}
.ap-dato small {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-soft);
}
.ap-dato b { font-size: 1.05rem; font-weight: 800; color: var(--c-text); line-height: 1.2; }
.ap-dato span { font-size: .7rem; color: var(--c-text-soft); }

/* Aviso de que se alcanzó el tope de commits leídos */
.ap-tope {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: .74rem; color: var(--c-text-soft);
}
.ap-tope i { color: var(--c-secondary); margin-right: 5px; }

/* Rótulos de mes sobre el mapa */
.hm-envoltura { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.hm-meses {
  display: grid; gap: 4px; height: 12px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-soft);
}
.hm-meses span { grid-row: 1; white-space: nowrap; }

/* Heatmap de aportes: llena el ancho disponible (celdas cuadradas, sin scroll) */
.hm-grid.hm-grande {
  grid-template-rows: repeat(7, auto);
  grid-auto-columns: 1fr;
  gap: 4px;
  width: 100%;
  overflow: visible;
}
.hm-grid.hm-grande .hm-celda {
  width: 100%; height: auto; aspect-ratio: 1;
  border-radius: 4px;
}

/* Escala verde (estilo GitHub), adaptable a claro/oscuro */
.hm-celda.hm-verde.hm-0, .hm-verde .hm-celda.hm-0 { background: color-mix(in srgb, var(--c-text-soft) 12%, var(--n-bg)); }
.hm-celda.hm-verde.hm-1, .hm-verde .hm-celda.hm-1 { background: color-mix(in srgb, #26a641 30%, var(--n-bg)); }
.hm-celda.hm-verde.hm-2, .hm-verde .hm-celda.hm-2 { background: color-mix(in srgb, #26a641 55%, var(--n-bg)); }
.hm-celda.hm-verde.hm-3, .hm-verde .hm-celda.hm-3 { background: color-mix(in srgb, #26a641 78%, var(--n-bg)); }
.hm-celda.hm-verde.hm-4, .hm-verde .hm-celda.hm-4 { background: #26a641; }
/* El selector de persona más ancho para que no corte los nombres */
.met-aportes .tabla-filtros .ms { min-width: 200px; }
.met-aportes .tabla-filtros .ms-trigger { width: 100%; }
/* La clase .actividad-msj fija display:flex y pisaba el atributo [hidden] */
/* Ojo: sin esto, un display de autor gana al que aporta el atributo hidden y
   el bloque sigue ocupando su hueco (y sus márgenes) aunque no se vea nada. */
.ap-vacio[hidden], .ap-mapa[hidden], .ap-lista[hidden],
.ap-leaderboard[hidden] { display: none !important; }

/* Diálogo de commits a pantalla completa, paginado */
.dlg-commits { width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); }
.dlg-commits .dlg-form { gap: 12px; }
.apc-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  max-height: 66vh; overflow-y: auto;
}
.apc-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--c-border-soft);
}
.apc-pag { font-size: .8rem; font-weight: 600; color: var(--c-text-soft); }
.apc-prev[disabled], .apc-next[disabled] { opacity: .4; cursor: default; box-shadow: var(--sh-mini); }

/* Leaderboard: barra por persona, clicable para filtrar */
.ap-leaderboard { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 18px; }
.ap-lb-fila {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 7px 10px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.ap-lb-fila:hover { background: color-mix(in srgb, var(--c-secondary) 8%, transparent); }
.ap-lb-fila.activo { background: var(--n-bg); box-shadow: var(--sh-inset-mini); }
.ap-lb-n { flex: none; font-size: .86rem; font-weight: 700; color: var(--c-text); min-width: 0; }
.ap-lb-barra { flex: 1; height: 9px; border-radius: 999px; background: var(--c-bg-soft); overflow: hidden; }
.ap-lb-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-verde-lima), var(--c-verde-esmeralda)); }
.ap-lb-num { flex: none; font-size: .9rem; font-weight: 800; color: var(--c-text); min-width: 26px; text-align: right; }

/* Avatares chicos */
.ap-av {
  flex: none; width: var(--sz); height: var(--sz); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--sz) * .38); font-weight: 700; color: #fff;
  background: var(--c, var(--c-secondary)); overflow: hidden;
}
.ap-av img { width: 100%; height: 100%; object-fit: cover; }
.ap-av-x { background: var(--c-text-soft); }

/* Lista de commits */
.ap-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-commit {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 8px; border-bottom: 1px solid var(--c-border-soft);
}
.ap-commit:last-child { border-bottom: 0; }
.ap-commit-txt { min-width: 0; }
.ap-msg { display: block; font-size: .88rem; color: var(--c-text); line-height: 1.4; word-break: break-word; }
.ap-commit small { color: var(--c-text-soft); font-size: .74rem; }
.ap-commit small a { color: var(--c-secondary); text-decoration: none; font-family: ui-monospace, Menlo, monospace; }
.ap-tarea {
  display: inline-block; padding: 0 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--c-secondary) 15%, transparent);
  color: var(--c-secondary); font-weight: 700; cursor: help;
}

/* =========================================================
   Intercambios de tareas
   ========================================================= */
.inter-intro { margin: 0 18px 4px; }
.inter-lista { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; }
.inter-item {
  padding: 14px 16px;
  /* Rutas y nombres de clase largos, en notas o títulos, se parten en vez de
     salirse de la tarjeta */
  overflow-wrap: anywhere;
  border-radius: 16px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  border-left: 3px solid var(--c-border-soft);
}
.inter-item.inter-pendiente { border-left-color: var(--c-naranja); }
.inter-item.inter-aceptado  { border-left-color: var(--c-verde-esmeralda); }
.inter-item.inter-rechazado { border-left-color: var(--c-terracota); }
.inter-item.inter-cancelado { opacity: .68; }

.inter-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.inter-estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 800;
}
.inter-estado.est-pendiente { background: rgba(247,147,30,.14); color: var(--c-naranja); }
.inter-estado.est-aceptado  { background: rgba(43,182,115,.14); color: var(--c-verde-esmeralda); }
.inter-estado.est-rechazado { background: rgba(198,107,45,.14); color: var(--c-terracota); }
.inter-estado.est-cancelado { background: var(--c-bg-soft); color: var(--c-text-soft); }
.inter-motivo { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--c-text-muted); }
.inter-motivo i { color: var(--c-secondary); }
.inter-fecha { margin-left: auto; font-size: .72rem; color: var(--c-text-soft); }

.inter-cuerpo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* El ancho de 210px era un mínimo infranqueable: con dos lados, la flecha y
   los huecos, en una tarjeta estrecha el texto se salía del recuadro. Ahora es
   la medida a la que se reparten, pero pueden encogerse por debajo. */
.inter-lado { display: flex; align-items: center; gap: 10px; flex: 1 1 210px; min-width: 0; }
.inter-lado > div { min-width: 0; }
.inter-lado small { display: block; font-size: .7rem; color: var(--c-text-soft); font-weight: 600; }
.inter-lado b { display: block; font-size: .88rem; color: var(--c-text); }
.inter-flecha { color: var(--c-secondary); font-size: 1rem; flex: none; }

.inter-nota {
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 11px; background: var(--c-bg-soft);
  font-size: .84rem; color: var(--c-text-muted); line-height: 1.5;
}
.inter-nota i { color: var(--c-text-soft); margin-right: 6px; }
.inter-respuesta { border-left: 2px solid var(--c-secondary); }

.inter-acciones { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.inter-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.inter-form .input-sm { padding: 8px 12px; font-size: .82rem; min-width: 0; flex: 1 1 200px; max-width: 100%; }

/* 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;
  /* Sin esto el aspa se apoya en la línea base y queda descentrada */
  display: inline-flex; align-items: center; justify-content: center;
  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);
}

/* =========================================================
   Modal en formato apaisado con stepper (asistente por pasos).
   El riel de pasos va vertical a la izquierda; en pantallas
   estrechas se vuelve una tira horizontal arriba.
   ========================================================= */
/* Alto fijo: al añadir archivos (o al cambiar de paso) el modal crecía y todo
   bailaba. Ahora mide siempre lo mismo y lo que se pasa se recorre por dentro. */
.dlg-wizard {
  width: min(940px, calc(100vw - 40px));
  height: min(calc(100dvh - 80px), 660px);
}
.dlg-wizard .wz { height: 100%; min-height: 0; }
.dlg-wizard .wz-cuerpo { min-height: 0; }
/* El paso activo es lo único que se desplaza; cabecera y pie se quedan fijos */
.dlg-wizard .wz-panel.activo { overflow-y: auto; min-height: 0; padding-right: 4px; }
.dlg-wizard .wz-cuerpo > header,
.dlg-wizard .wz-pie { flex: none; }
.dlg-wizard .wz,
.wz-inline {
  display: grid;
  grid-template-columns: 274px 1fr;
  align-items: stretch;
  gap: 0; padding: 0;
  min-height: 540px;
}

/* ----- Riel de pasos ----- */
.wz-riel {
  display: flex; flex-direction: column; gap: 26px;
  padding: 28px 24px;
  background: color-mix(in srgb, var(--c-secondary) 6%, var(--n-bg));
  border-right: 1px solid var(--c-border-soft);
  border-radius: 24px 0 0 24px;
}
.wz-marca { display: flex; flex-direction: column; gap: 9px; }
.wz-marca .wz-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-secondary); font-size: 1.05rem;
}
.wz-marca h3 { margin: 0; font-size: 1.22rem; font-weight: 800; color: var(--c-text); }
.wz-marca p { margin: 0; font-size: .8rem; font-weight: 500; color: var(--c-text-soft); line-height: 1.45; }

.wz-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-paso {
  position: relative;
  display: flex; align-items: flex-start; gap: 13px;
  width: 100%; text-align: left;
  padding: 11px 12px;
  border: 0; border-radius: 14px;
  background: transparent;
  color: var(--c-text-muted);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.wz-paso:hover { background: color-mix(in srgb, var(--c-secondary) 9%, transparent); }
.wz-paso .wz-num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  font-size: .8rem; font-weight: 800;
  color: var(--c-text-soft);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wz-paso .wz-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-paso b { font-size: .87rem; font-weight: 700; color: inherit; }
.wz-paso small { font-size: .72rem; font-weight: 500; color: var(--c-text-soft); line-height: 1.35; }
/* Linea que une los pasos */
.wz-paso::before {
  content: ''; position: absolute;
  left: 25.5px; top: 45px; bottom: -3px; width: 2px;
  background: var(--c-border-soft);
  border-radius: 2px;
}
.wz-paso:last-child::before { display: none; }

.wz-paso.activo { background: var(--n-bg); box-shadow: var(--sh-mini); color: var(--c-text); }
.wz-paso.activo .wz-num { background: var(--c-secondary); color: #fff; box-shadow: none; }
.wz-paso.hecho .wz-num { background: var(--c-verde-esmeralda); color: #fff; box-shadow: none; }
.wz-paso.hecho b { color: var(--c-text); }

/* ----- Cuerpo ----- */
.wz-cuerpo { display: flex; flex-direction: column; padding: 24px 30px 22px; min-width: 0; }
.wz-cuerpo > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.wz-cuerpo > header h4 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--c-text); }
.wz-cuerpo > header p { margin: 4px 0 0; font-size: .8rem; color: var(--c-text-soft); }

.wz-panel { display: none; flex-direction: column; gap: 18px; flex: 1; min-width: 0; }
.wz-panel.activo { display: flex; animation: wz-panel-in .22s ease; }
@keyframes wz-panel-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wz-panel .campo > span { font-size: .82rem; }
.wz-panel .input-meca,
.wz-panel .ms-trigger,
.wz-panel .select-meca { padding: 12px 15px; font-size: .92rem; }
.wz-panel textarea.input-meca { min-height: 96px; }

.wz-pie {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--c-border-soft);
}
.wz-contador { font-size: .76rem; font-weight: 600; color: var(--c-text-soft); }
.wz-pie .wz-acciones { margin-left: auto; display: flex; gap: 10px; }
.wz-oculto { display: none !important; }

/* Tarea programada: aún no arranca */
.celda-fecha.fecha-programada { color: var(--c-secondary); font-weight: 700; }

/* Atajos de fecha de inicio */
.wz-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wz-atajos-tit { font-size: .76rem; font-weight: 700; color: var(--c-text-muted); margin-right: 2px; }
.chip-atajo {
  padding: 7px 13px;
  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: 600;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.chip-atajo:hover { color: var(--c-secondary); }
.chip-atajo:active { box-shadow: var(--sh-inset-mini); }
.chip-atajo.activo { color: var(--c-secondary); box-shadow: var(--sh-inset-mini); }
.chip-atajo-off { color: var(--c-text-soft); }
.chip-atajo-off:hover { color: var(--c-terracota); }
.wz-duracion { margin: 0; }
.wz-duracion.duracion-mal { color: var(--c-terracota); font-weight: 700; }
html.dark .wz-duracion.duracion-mal { color: #ff9d5c; }

/* Resumen de revision del ultimo paso */
.wz-resumen { display: flex; flex-direction: column; gap: 2px; }
.wz-resumen div {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 2px;
  border-bottom: 1px dashed var(--c-border-soft);
  font-size: .86rem;
}
.wz-resumen div:last-child { border-bottom: 0; }
.wz-resumen dt { flex: none; width: 130px; color: var(--c-text-soft); font-weight: 600; font-size: .78rem; }
.wz-resumen dd { margin: 0; color: var(--c-text); font-weight: 600; }
.wz-resumen dd.vacio { color: var(--c-text-soft); font-weight: 500; font-style: italic; }

/* ----- Estrecho: el riel pasa a tira horizontal arriba ----- */
/* Version en linea (pagina Mi perfil): el asistente vive dentro de una card */
.perfil-card { padding: 0; overflow: hidden; }
.perfil-card:hover { transform: none; }
.wz-inline { border-radius: inherit; }
.wz-inline .wz-riel { border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* La vista previa de la persona, dentro del riel */
.persona-preview.pp-riel {
  flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 0 0 6px;
}
.persona-preview.pp-riel .pp-info { align-items: center; }
.persona-preview.pp-riel .pp-nombre { font-size: 1.05rem; }
.perfil-aviso { color: var(--c-naranja); font-weight: 600; }

@media (max-width: 820px) {
  /* Apilado (riel arriba) el alto fijo aprieta demasiado: vuelve a crecer con
     el contenido y es el diálogo entero el que se desplaza. */
  .dlg-wizard { height: auto; max-height: calc(100dvh - 40px); }
  .dlg-wizard .wz { height: auto; }
  .dlg-wizard .wz-panel.activo { overflow: visible; }
  .dlg-wizard .wz,
  .wz-inline { grid-template-columns: 1fr; min-height: 0; }
  .persona-preview.pp-riel { flex-direction: row; text-align: left; }
  .persona-preview.pp-riel .pp-info { align-items: flex-start; }
  .wz-riel {
    flex-direction: row; align-items: center; gap: 14px;
    padding: 16px 18px;
    border-right: 0; border-bottom: 1px solid var(--c-border-soft);
    border-radius: 24px 24px 0 0;
    overflow-x: auto;
  }
  .wz-marca { display: none; }
  .wz-pasos { flex-direction: row; gap: 6px; }
  .wz-paso { padding: 8px 10px; white-space: nowrap; }
  .wz-paso small { display: none; }
  .wz-paso::before { left: auto; right: -4px; top: 50%; bottom: auto; width: 8px; height: 2px; transform: translateY(-50%); }
  .wz-cuerpo { padding: 20px 20px 18px; }
}
@media (max-width: 520px) {
  .wz-paso b { display: none; }
  .wz-paso { padding: 6px; }
}

.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; }

/* =========================================================
   Menos movimiento si el sistema lo pide (Windows: "Mostrar animaciones",
   macOS: "Reducir movimiento"). Tambien alivia equipos justos de GPU.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card-base:hover { transform: none; }
  .dlg-meca::backdrop { backdrop-filter: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
/* En escritorio el envoltorio del menú es transparente (no cambia el layout) */
.sidebar-menu { display: contents; }
.sidebar-burger { display: none; }

@media (max-width: 900px) {
  :root, html.sb-collapsed { --sidebar-w: 0px; }
  .sidebar-toggle { display: none; }

  /* La barra superior: solo el logo y las tres rayitas */
  .sidebar, html.sb-collapsed .sidebar {
    position: sticky; top: 0; z-index: 60;
    width: 100%; height: auto;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 10px 14px; gap: 10px; overflow: visible;
    border-bottom: 1px solid var(--c-border-soft);
  }
  .sidebar-top, html.sb-collapsed .sidebar-top {
    flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  }
  .sidebar-brand, html.sb-collapsed .sidebar-brand { width: auto; padding: 6px 10px; }
  .sidebar-brand > div, html.sb-collapsed .sidebar-brand > div { display: block; }
  .admin-main { margin-left: 0; padding: 22px 16px 48px; }
  .ph-main { gap: 16px; }

  /* Botón de las tres rayitas (hamburguesa → X) */
  .sidebar-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 11px;
    border: none; border-radius: 13px; cursor: pointer;
    background: var(--n-bg); box-shadow: var(--sh-mini);
  }
  .sidebar-burger span {
    display: block; height: 2.5px; border-radius: 2px;
    background: var(--c-text-muted);
    transition: transform .26s cubic-bezier(.3,1.3,.5,1), opacity .2s ease;
  }
  .sidebar-burger span:nth-child(1) { width: 20px; }
  .sidebar-burger span:nth-child(2) { width: 14px; }
  .sidebar-burger span:nth-child(3) { width: 20px; }
  .menu-abierto .sidebar-burger { box-shadow: var(--sh-inset-mini); }
  .menu-abierto .sidebar-burger span { background: var(--c-secondary); width: 20px; }
  .menu-abierto .sidebar-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-abierto .sidebar-burger span:nth-child(2) { opacity: 0; }
  .menu-abierto .sidebar-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Fondo tenue al abrir */
  .sidebar.menu-abierto::after {
    content: ''; position: fixed; inset: 0; z-index: 90;
    background: rgba(8, 14, 26, .38);
    -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
    animation: sheet-fade .18s ease;
  }

  /* --- Menú flotante estilo Apple: sale del botón, anclado arriba-derecha --- */
  .sidebar-menu {
    display: none;
    position: fixed; top: 62px; right: 10px; left: auto;
    width: min(320px, 92vw); max-height: calc(100vh - 78px); overflow-y: auto;
    z-index: 95;
    padding: 8px; gap: 2px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--n-bg) 92%, transparent);
    border: 1px solid var(--c-border-soft);
    box-shadow: 0 28px 64px -22px rgba(0,0,0,.5), var(--sh-card);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    transform-origin: top right;
  }
  .sidebar.menu-abierto .sidebar-menu {
    display: flex; flex-direction: column;
    animation: pop-apple .26s cubic-bezier(.3,1.35,.5,1);
  }

  /* Contenido del menú: vertical, con texto */
  .sidebar-menu .sidebar-nav {
    flex-direction: column; align-items: stretch; overflow: visible;
    min-height: auto; gap: 2px; padding: 2px;
  }
  .sidebar-menu .sidebar-link {
    justify-content: flex-start; width: 100%;
    padding: 12px 13px; font-size: .9rem; border-radius: 13px; white-space: nowrap;
  }
  .sidebar-menu .sidebar-link .truncate { display: inline; }
  .sidebar-menu .sidebar-label {
    display: block; width: auto; height: auto; background: none;
    margin: 0; padding: 12px 12px 5px; font-size: .64rem; line-height: 1;
    letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft);
  }
  .sidebar-menu .ver-como { margin: 2px; }
  /* Grupos (proyectos): se listan planos dentro del menú */
  .sidebar-menu .nav-grupo:not(.cuenta-menu),
  .sidebar-menu .nav-grupo-items:not(.cuenta-panel) { display: contents; }
  .sidebar-menu .nav-grupo-btn, .sidebar-menu .nav-grupo-cab, .sidebar-menu .nav-grupo-n { display: none; }

  /* Cuenta: como lista plana dentro del menú (sin drawer ni chip plegable) */
  .sidebar-menu .cuenta-menu { display: block; }
  .sidebar-menu .cuenta-menu > .sesion-chip { display: none; }
  .sidebar-menu .cuenta-panel {
    display: flex !important; position: static !important;
    inset: auto !important; width: auto !important;
    flex-direction: column; gap: 2px;
    padding: 6px 0 2px; margin-top: 6px;
    border: none; border-top: 1px solid var(--c-border-soft); border-radius: 0;
    box-shadow: none; animation: none !important;
    background: none; z-index: auto;
  }
  .sidebar-menu .cuenta-panel::before { display: none; }
  .sidebar-menu .cuenta-cab { padding: 8px 12px 10px; }

  /* Pie: tema + créditos dentro del menú */
  .sidebar-menu .sidebar-foot {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 10px 12px 4px; margin-top: 4px;
    border-top: 1px solid var(--c-border-soft);
  }
  .sidebar-menu .sidebar-foot > span { display: inline; }

  /* Anula el modo "solo ícono" de sb-collapsed DENTRO del menú flotante:
     todo se ve expandido, con su texto. */
  html.sb-collapsed .sidebar-menu .sidebar-link,
  .sidebar-menu .sidebar-link { justify-content: flex-start !important; width: 100% !important; padding: 12px 13px !important; }
  html.sb-collapsed .sidebar-menu .sidebar-link .truncate,
  .sidebar-menu .sidebar-link .truncate,
  .sidebar-menu .vc-abrir .truncate { display: inline !important; }
  .sidebar-menu .sidebar-link i { width: 22px !important; font-size: .95rem !important; }
  html.sb-collapsed .sidebar-menu .nav-grupo:not(.cuenta-menu),
  html.sb-collapsed .sidebar-menu .nav-grupo-items:not(.cuenta-panel) { display: contents !important; }
  html.sb-collapsed .sidebar-menu .nav-grupo-btn,
  .sidebar-menu .nav-grupo-btn,
  .sidebar-menu .nav-grupo-cab,
  .sidebar-menu .nav-grupo-n { display: none !important; }
  html.sb-collapsed .sidebar-menu .sidebar-label,
  .sidebar-menu .sidebar-label {
    display: block !important; width: auto !important; height: auto !important;
    background: none !important; margin: 0 !important; padding: 12px 12px 5px !important;
    font-size: .64rem !important; line-height: 1 !important;
  }
  html.sb-collapsed .sidebar-menu .ver-como,
  .sidebar-menu .ver-como { display: flex !important; width: auto !important; margin: 2px 2px 6px !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
  .sidebar-menu .ver-como .vc-abrir {
    justify-content: flex-start !important; width: 100% !important;
    padding: 12px 13px !important; border-radius: 13px !important;
  }
  .sidebar-menu .ver-como .vc-abrir i { width: 22px !important; }
}
@keyframes pop-apple {
  from { opacity: 0; transform: scale(.9) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.menu-abierto .sidebar-menu { animation: sheet-fade .15s ease; }
}

/* =========================================================
   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; }
}

/* ---------- Respaldo de la configuración (exportar / importar) ---------- */
.respaldo-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px;
}
.respaldo-archivo {
  flex: 1 1 220px; min-width: 0;
  position: relative;
  display: block;
  cursor: pointer;
}
.respaldo-archivo input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.respaldo-archivo > span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  border: 2px dashed color-mix(in srgb, var(--c-secondary) 40%, var(--c-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-secondary) 5%, var(--c-bg-hundido));
  color: var(--c-text-soft);
  font-size: .88rem; font-weight: 600;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.respaldo-archivo:hover > span {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
/* Al elegir archivo, admin.js marca el label con .tiene-archivo */
.respaldo-archivo.tiene-archivo > span {
  border-style: solid;
  border-color: color-mix(in srgb, var(--c-success) 60%, transparent);
  background: color-mix(in srgb, var(--c-success) 10%, transparent);
  color: var(--c-success);
}
@media (max-width: 560px) {
  .respaldo-acciones > * { flex: 1 1 100%; }
}

/* Aviso en el login cuando todavía no hay administrador */
.login-pie-alerta { color: #b54708; border-top-color: #fde8c8; }
.login-pie-alerta i { color: #f79009; }
.login-pie-alerta code {
  padding: 2px 6px; border-radius: 6px;
  background: #fff5e6; border: 1px solid #fde8c8;
  font-size: .74rem; color: #b54708;
}

/* ---------- Interruptor de acceso (admin / solo lectura) ---------- */
.sw-acceso {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px;
  border: none; border-radius: 999px;
  background: var(--n-bg);
  box-shadow: var(--sh-mini);
  color: var(--c-text-soft);
  font-size: .76rem; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}
.sw-acceso:hover { box-shadow: var(--sh-soft); }
.sw-acceso:active { box-shadow: var(--sh-inset-mini); }
.sw-pista {
  position: relative;
  width: 34px; height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text-soft) 26%, transparent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
  transition: background .22s ease;
}
.sw-bola {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.sw-acceso.on { color: var(--c-success); }
.sw-acceso.on .sw-pista { background: var(--c-success); }
.sw-acceso.on .sw-bola { transform: translateX(14px); }
.sw-aviso {
  display: block; margin-top: 4px;
  font-size: .68rem; color: var(--c-warning);
}
.sw-aviso i { margin-right: 3px; }

/* ================= Planificar: importar tareas por JSON ================= */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.plan-card { padding: 22px; }
.plan-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.plan-toolbar h2 { font-size: 1rem; }
.plan-acc { display: flex; gap: 8px; }
.plan-file { cursor: pointer; }
.plan-text {
  width: 100%; min-height: 380px; resize: vertical;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.55; tab-size: 2;
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.plan-botones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.plan-botones button { flex: 1 1 auto; justify-content: center; }

.plan-ayuda { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.plan-ayuda li { font-size: .86rem; color: var(--c-text-muted); line-height: 1.5; }
.plan-ayuda b { color: var(--c-text); }
.plan-nota { margin: 16px 0 0; font-size: .82rem; color: var(--c-text-soft); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  font-size: .76rem; font-weight: 600; color: var(--c-text-muted);
}

.plan-errores { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.plan-errores li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--c-danger) 9%, transparent);
  color: var(--c-danger); font-size: .84rem; line-height: 1.45;
}

.plan-lista { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.plan-fila {
  padding: 11px 13px; border-radius: 12px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  border-left: 3px solid var(--c-text-soft);
}
.plan-fila.ok    { border-left-color: var(--c-success); }
.plan-fila.aviso { border-left-color: var(--c-warning); }
.plan-fila.mala  { border-left-color: var(--c-danger); }
.plan-fila-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-fila-top b { font-size: .88rem; color: var(--c-text); }
.plan-fila.ok    .plan-fila-top > i { color: var(--c-success); }
.plan-fila.aviso .plan-fila-top > i { color: var(--c-warning); }
.plan-fila.mala  .plan-fila-top > i { color: var(--c-danger); }
.plan-tag {
  padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--c-secondary) 14%, transparent); color: var(--c-secondary);
}
.plan-tag-p { font-size: .74rem; color: var(--c-text-soft); }
.plan-tag-p i { font-size: .68rem; margin-right: 3px; }
.plan-tag-act {
  padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--c-naranja, #F7931E) 18%, transparent); color: var(--c-naranja, #F7931E);
}
.plan-tag-act i { font-size: .66rem; margin-right: 3px; }
.plan-check {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
  font-size: .84rem; color: var(--c-text-soft); cursor: pointer; line-height: 1.4;
}
.plan-check input { margin-top: 2px; flex: none; accent-color: var(--c-verde-esmeralda); }

/* Campo de logo del panel (Ajustes → Identidad) */
.logo-campo { margin-top: 16px; }
.logo-config { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.logo-prev {
  flex: none; width: 62px; height: 62px; border-radius: 16px; padding: 8px;
  display: grid; place-items: center; background: var(--n-bg); box-shadow: var(--sh-inset-mini);
}
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-config-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.logo-quitar { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--c-text-soft); cursor: pointer; }
.logo-quitar input { accent-color: var(--c-verde-esmeralda); }
.plan-aviso { display: block; margin-top: 4px; font-size: .76rem; color: var(--c-warning); }
.plan-mal   { display: block; margin-top: 4px; font-size: .76rem; color: var(--c-danger); }

@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- Select de acceso en la tabla de equipo ---------- */
.celda-acceso .inline-form { display: inline-block; margin: 0; }
.select-acceso.es-admin + .ms-trigger .ms-label { color: var(--c-success); font-weight: 700; }
.select-acceso.es-lector + .ms-trigger .ms-label { color: var(--c-text-soft); }
.acceso-yo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-secondary) 12%, transparent);
  color: var(--c-secondary); font-size: .78rem; font-weight: 700;
}
.acceso-yo i { font-size: .74rem; }

/* ---------- Modal de detalle de tarea (solo lectura) ---------- */
.dlg-detalle { max-width: 520px; width: 92vw; }
/* Con documentos, la ficha se ensancha y el primero se ve ya a la derecha.
   El alto no se fija a ojo: el modal toma el que haya y la previsualización se
   queda con todo lo que sobre. */
.dlg-detalle.dt-con-docs {
  max-width: 1000px; width: 95vw;
  height: min(calc(100dvh - 88px), 760px);
}
.dt-con-docs .dt-body { height: 100%; display: flex; flex-direction: column; }
.dt-con-docs .dt-cols { flex: 1; min-height: 0; }
.dt-con-docs .dt-info { min-height: 0; overflow-y: auto; }
/* La ficha es corta: columna estrecha y datos en vertical (etiqueta encima),
   que llena mejor y evita que un nombre largo saque scroll horizontal. */
.dt-con-docs .dt-cols { grid-template-columns: 320px minmax(0, 1fr); }
.dt-con-docs .dt-datos > div { grid-template-columns: 1fr; gap: 3px; }
.dt-con-docs .dt-datos { gap: 14px; }
.dt-datos dd { min-width: 0; overflow-wrap: anywhere; }
.dt-adjuntos { flex-direction: column; align-items: flex-start; }
.dt-adjuntos .adj-chip { max-width: 100%; }
/* Cuánto queda para la fecha límite, bajo los chips de estado */
.dt-restante {
  display: inline-flex; align-items: center; margin-top: 10px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(var(--c-secondary-rgb), .1); color: var(--c-secondary);
  font-size: .78rem; font-weight: 700;
}
.dt-restante[hidden] { display: none; }
.dt-restante.urgente { background: color-mix(in srgb, var(--c-terracota) 14%, transparent); color: var(--c-terracota); }
/* El adjunto que no se previsualiza se marca como descarga */
.dt-adjuntos .adj-chip.adj-bajar .adj-chip-acc { color: var(--c-text-soft); }
/* Con dos columnas, la × de la cabecera izquierda quedaba en mitad del modal:
   se ancla arriba a la derecha del diálogo, que es donde se busca. */
.dt-con-docs .dt-body { position: relative; }
.dt-con-docs .dt-head .dlg-close { position: absolute; top: 20px; right: 22px; z-index: 2; }
.dt-con-docs .dt-previa-cab { padding-right: 46px; }
.dt-cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
.dt-con-docs .dt-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.dt-info { min-width: 0; display: flex; flex-direction: column; }
.dt-info .dt-datos { flex: 1; }
.dt-previa { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-previa[hidden] { display: none; }
/* Alto suficiente para que la × (36px, anclada arriba a la derecha) quepa en
   la banda de la cabecera y no invada el documento. La descarga va junto al
   nombre, no pegada a la ×. */
.dt-previa-cab {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-start; min-height: 38px;
}
.dt-previa-nom {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto;
  font-size: .84rem; font-weight: 700; color: var(--c-text);
}
.dt-previa-nom i { color: var(--c-secondary); flex: none; }
.dt-previa-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dt-previa-cuerpo {
  /* Sin alto fijo: ocupa lo que quede en la columna, que es todo el alto del
     modal menos su cabecera. Así un PDF se lee de verdad. */
  flex: 1; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; overflow: hidden;
  background: var(--n-bg); box-shadow: var(--sh-inset-mini);
}
/* En la ficha, los documentos son la lista de la izquierda: el activo se marca */
.dt-adjuntos .adj-chip.activo {
  color: var(--c-secondary);
  box-shadow: var(--sh-mini), 0 0 0 1.5px rgba(var(--c-secondary-rgb), .4);
}
@media (max-width: 900px) {
  /* Apilado: la ficha arriba y el documento debajo, con el modal recorriéndose */
  .dlg-detalle.dt-con-docs { max-width: 560px; height: auto; }
  .dt-con-docs .dt-body { height: auto; display: block; }
  .dt-con-docs .dt-cols { grid-template-columns: 1fr; }
  .dt-con-docs .dt-info { overflow: visible; }
  .dt-previa-cuerpo { height: 60vh; min-height: 260px; }
}
.dt-body { padding: 24px 26px 22px; }   /* antes 4px: todo quedaba pegado al borde y se cortaba */
.dt-head { display: flex; align-items: flex-start; gap: 12px; }
.dt-head-txt { flex: 1; min-width: 0; }
.dt-proyecto {
  display: inline-block; margin-bottom: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-secondary);
}
.dt-titulo { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--c-text); }
/* Los chips son los mismos badges de color del tablero (estado + prioridad) */
.dt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; }
.dt-chips .badge-estado,
.dt-chips .badge-prio { font-size: .82rem; }
.dt-desc {
  margin: 16px 0 0; padding: 13px 15px;
  border-radius: 13px; background: var(--c-bg-hundido);
  font-size: .9rem; line-height: 1.6; color: var(--c-text-muted); white-space: pre-wrap;
}
.dt-datos { margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.dt-datos > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; }
.dt-datos > div[hidden] { display: none; }
.dt-datos dt { font-size: .82rem; font-weight: 700; color: var(--c-text-soft); }
.dt-datos dt i { margin-right: 6px; color: var(--c-secondary); }
.dt-datos dd { margin: 0; font-size: .9rem; color: var(--c-text); }
.dt-dep-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; }
.dt-dep-tag.ok   { color: var(--c-success); }
.dt-dep-tag.bloq { color: var(--c-warning); }
.dt-foot { margin-top: 22px; display: flex; justify-content: flex-end; }
/* Señal de que las tarjetas son clicables */
.fila-tarea, .kb-card, .flujo-nodo { cursor: pointer; }
@media (max-width: 480px) { .dt-datos > div { grid-template-columns: 1fr; gap: 2px; } }

/* =========================================================================
   Carga suave: skeletons reutilizables + entrada de página
   ========================================================================= */

/* Entrada suave del contenido para que la página no "salte" al pintar */
.admin-main { animation: page-in .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* Skeleton base: bloque gris con brillo que barre (placeholder de carga).
   Reutilizable: <span class="sk" style="width:..;height:.."></span> */
.sk {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-text-soft) 15%, var(--n-bg));
}
.sk::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, #fff 42%, transparent), transparent);
  animation: sk-brillo 1.25s ease-in-out infinite;
}
html.dark .sk::after {
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, #fff 12%, transparent), transparent);
}
@keyframes sk-brillo { to { transform: translateX(100%); } }

/* Piezas prefabricadas */
.sk-line  { height: 14px; }
.sk-title { height: 22px; width: 40%; }
.sk-fade  { animation: page-in .3s ease both; }

/* Skeleton concreto de "Aportes del equipo" (leaderboard + mapas) */
.ap-skeleton { margin-top: 4px; }
.ap-sk-lb { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.ap-sk-lb .sk-fila { height: 46px; border-radius: 13px; }
.ap-sk-mapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}
.ap-sk-mapas .sk-mapa { height: 168px; border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .admin-main, .sk-fade { animation: none; }
  .sk::after { animation: none; }
}

/* Tarjeta "Conectar mi Google Calendar" en Mi perfil */
.gcal-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 20px; padding: 20px 22px;
}
.gcal-info { display: flex; align-items: center; gap: 15px; min-width: 0; }
.gcal-icono {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, #2BB673, #2B76F7);
}
.gcal-card h2 { margin: 0 0 3px; font-size: 1.05rem; font-weight: 800; color: var(--c-text); }
.gcal-estado { margin: 0; font-size: .88rem; color: var(--c-text-muted); }
.gcal-estado.ok { color: var(--c-success); }
.gcal-estado i { margin-right: 5px; }
.gcal-card .btn-meca { flex: none; }
@media (max-width: 560px) { .gcal-card .btn-meca { width: 100%; justify-content: center; } }

/* ================= Documentación (previsualizador de PDF) ================= */
.docs-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.docs-lista { display: flex; flex-direction: column; gap: 10px; }
.doc-item {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px; border: none; border-radius: 15px; cursor: pointer;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  transition: box-shadow .2s ease, transform .2s ease;
}
.doc-item:hover { transform: translateY(-1px); box-shadow: var(--sh-soft); }
.doc-item.activo { box-shadow: var(--sh-inset-mini), 0 0 0 2px var(--c-secondary); }
.doc-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-secondary) 12%, transparent);
  color: var(--c-secondary); font-size: 1rem;
}
.doc-txt b { display: block; font-size: .92rem; color: var(--c-text); }
.doc-txt small { display: block; margin-top: 3px; font-size: .78rem; color: var(--c-text-soft); line-height: 1.45; }

.doc-descargas { margin-top: 6px; padding: 14px; border-radius: 15px; background: var(--c-bg-hundido); }
.doc-desc-lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); margin-bottom: 10px; }
.doc-desc-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.doc-desc-nom { flex: 1; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 9px; text-decoration: none;
  background: color-mix(in srgb, #e5484d 10%, var(--n-bg));
  border: 1px solid color-mix(in srgb, #e5484d 28%, transparent);
  box-shadow: var(--sh-mini);
  font-size: .74rem; font-weight: 700; color: #e5484d;
}
.doc-btn:hover { box-shadow: var(--sh-soft); background: color-mix(in srgb, #e5484d 16%, var(--n-bg)); }
.doc-btn-md {
  color: var(--c-secondary);
  background: color-mix(in srgb, var(--c-secondary) 9%, var(--n-bg));
  border-color: color-mix(in srgb, var(--c-secondary) 24%, transparent);
}
.doc-btn-md:hover { background: color-mix(in srgb, var(--c-secondary) 15%, var(--n-bg)); }

.doc-claude-nota {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 6px; padding: 12px 14px; border-radius: 14px;
  background: #fff5f0; border: 1px solid #f6ddd0;
  font-size: .8rem; line-height: 1.5; color: #8a6d5f;
}
html.dark .doc-claude-nota { background: color-mix(in srgb, #d97757 14%, var(--c-bg-soft)); border-color: color-mix(in srgb,#d97757 30%,transparent); color: var(--c-text-muted); }
.doc-claude-nota code { background: #fff; padding: 1px 5px; border-radius: 5px; font-size: .74rem; }

.docs-visor { padding: 16px; display: flex; flex-direction: column; }
.docs-visor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.docs-visor-top b { font-size: 1rem; color: var(--c-text); }
.docs-visor-acc { display: flex; gap: 8px; }
.docs-frame {
  width: 100%; height: 78vh; min-height: 480px;
  border: none; border-radius: 13px; background: #f1f3f7;
  box-shadow: var(--sh-inset-mini);
}

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-frame { height: 68vh; }
}

/* ================= Tema "Claude" para Documentación ================= */
.docs-layout { --claude: #d97757; --claude-hi: #e8926a; --claude-lo: #c8663f; }

/* Alineación de la barra del visor (los botones ya no quedan "muy arriba") */
.docs-visor { padding: 18px; border: 1px solid color-mix(in srgb, var(--claude) 22%, var(--c-border)); }
.docs-visor-top {
  align-items: center; min-height: 40px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--claude) 16%, var(--c-border));
}
.docs-visor-acc { align-items: center; }

/* Botones con la identidad de Claude */
#doc-bajar.btn-primary {
  background: linear-gradient(135deg, var(--claude-hi), var(--claude));
  border: none; color: #fff;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--claude) 90%, #000);
}
#doc-bajar.btn-primary:hover { background: linear-gradient(135deg, var(--claude), var(--claude-lo)); transform: translateY(-1px); }
#doc-abrir.btn-outline {
  border: 1.5px solid color-mix(in srgb, var(--claude) 42%, transparent);
  color: var(--claude); background: color-mix(in srgb, var(--claude) 7%, transparent);
}
#doc-abrir.btn-outline:hover { border-color: var(--claude); background: color-mix(in srgb, var(--claude) 13%, transparent); }

/* Tarjetas de la lista: acento naranja */
.doc-item { border: 1px solid transparent; }
.doc-item.activo {
  border-color: color-mix(in srgb, var(--claude) 55%, transparent);
  box-shadow: var(--sh-inset-mini), 0 0 0 2px var(--claude), 0 10px 24px -16px var(--claude);
}
.doc-item:has(img[src$="claude.svg"]) .doc-ico {
  background: color-mix(in srgb, var(--claude) 14%, transparent);
}
.docs-frame { border: 1px solid color-mix(in srgb, var(--claude) 14%, var(--c-border)); }


/* --- Movimiento del SVG de Claude --- */
img[src$="claude.svg"] {
  animation: claude-bob 2.6s ease-in-out infinite;
  transform-origin: 50% 65%;
  will-change: transform;
}
.doc-item:hover img[src$="claude.svg"],
.doc-claude-nota:hover img[src$="claude.svg"] { animation-duration: .55s; }
@keyframes claude-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-2.5px) rotate(-5deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  70%      { transform: translateY(-2.5px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { img[src$="claude.svg"] { animation: none; } }

/* ---------- MecaTip: tooltip estilo Apple (botones de ícono) ---------- */
.meca-tip {
  position: fixed; z-index: 9999; pointer-events: none;
  max-width: 240px;
  padding: 6px 10px; border-radius: 9px;
  background: rgba(28, 32, 42, .94);
  color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.3;
  white-space: normal; text-align: center; letter-spacing: .01em;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(3px) scale(.96); transform-origin: center bottom;
  transition: opacity .14s ease, transform .16s cubic-bezier(.34,1.4,.5,1);
}
.meca-tip.abajo { transform-origin: center top; transform: translateY(-3px) scale(.96); }
.meca-tip.visible { opacity: 1; transform: translateY(0) scale(1); }
.meca-tip::after {
  content: ''; position: absolute; left: var(--tip-x, 50%); bottom: -4px;
  width: 8px; height: 8px; margin-left: -4px;
  background: inherit; border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: inset -.5px -.5px 0 rgba(255,255,255,.06);
}
.meca-tip.abajo::after { bottom: auto; top: -4px; }
@media (prefers-reduced-motion: reduce) {
  .meca-tip { transition: opacity .1s ease; transform: none; }
  .meca-tip.abajo { transform: none; }
}

@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= Mi perfil (cards + edición inline) ================= */
.pf-hero {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 24px 26px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.pf-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 100% 0, color-mix(in srgb, var(--av-c1) 16%, transparent), transparent 55%);
  pointer-events: none;
}
.pf-hero-foto { position: relative; cursor: pointer; flex-shrink: 0; }
.pf-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pf-hero-avatar { box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--av-c1) 80%, #000); }
.pf-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-secondary); color: #fff; font-size: .78rem;
  border: 3px solid var(--c-bg); box-shadow: var(--sh-mini);
  transition: transform .2s ease;
}
.pf-hero-foto:hover .pf-cam { transform: scale(1.1); }
.pf-hero-id { flex: 1; min-width: 200px; position: relative; }
.pf-hero-id h1 { margin: 0 0 4px; font-size: 1.7rem; color: var(--c-text); letter-spacing: -.02em; }
.pf-hero-rol { margin: 0 0 12px; font-size: .92rem; color: var(--c-text-muted); font-weight: 600; }
.pf-hero-rol i { color: var(--av-c1); margin-right: 5px; }
.pf-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  font-size: .76rem; font-weight: 700; color: var(--c-text-muted);
}
.pf-chip i { color: var(--c-success); }
.pf-chip.off { color: var(--c-text-soft); }
.pf-chip.off i { color: var(--c-warning); }
.pf-hero-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  position: relative;
}
.pf-hero-stats span {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px; border-radius: 15px;
  background: var(--c-bg-hundido); min-width: 74px;
  font-size: .7rem; font-weight: 600; color: var(--c-text-soft);
}
.pf-hero-stats b { font-size: 1.35rem; color: var(--c-text); font-family: var(--f-display, inherit); }

/* Ícono del calendario (SVG) */
.gcal-icono-svg { display: inline-flex; align-items: center; justify-content: center; }
.gcal-icono-svg img { filter: drop-shadow(0 6px 14px rgba(60,144,255,.35)); }

/* Grid de cards */
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin-top: 22px; }
.pf-card { padding: 20px 22px; }
.pf-card-tit { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 1rem; font-weight: 700; font-family: var(--f-display, inherit); color: var(--c-text); }

/* Fila editable */
.pf-fila {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0;
}
.pf-fila + .pf-fila { border-top: 1px solid var(--c-border-soft); }
.pf-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-secondary) 11%, transparent);
  color: var(--c-secondary); font-size: .92rem;
}
.pf-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); }
.pf-valor { font-size: .95rem; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-vacio { color: var(--c-text-soft); font-weight: 500; font-style: normal; }
.pf-input { margin-top: 3px; padding: 9px 12px; font-size: .92rem; }
.pf-lapiz {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--n-bg); box-shadow: var(--sh-mini);
  color: var(--c-text-soft); font-size: .8rem;
  transition: color .2s ease, box-shadow .2s ease;
}
.pf-lapiz:hover { color: var(--c-secondary); box-shadow: var(--sh-soft); }
.pf-fila.editando .pf-lapiz, .pf-lapiz.activo { color: var(--c-secondary); box-shadow: var(--sh-inset-mini); }
.pf-fila.editando .pf-ic { background: color-mix(in srgb, var(--c-secondary) 18%, transparent); }
.pf-fila-color { align-items: flex-start; }
.pf-fila-color .pf-cuerpo { gap: 8px; }
.pf-nota { margin: 12px 0 0; font-size: .8rem; color: var(--c-text-soft); line-height: 1.5; }
.pf-nota i { color: var(--c-secondary); margin-right: 4px; }

.pf-clave { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.pf-clave[hidden], .pf-guardar[hidden] { display: none !important; }

/* Barra de guardar flotante */
.pf-guardar {
  position: sticky; bottom: 16px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding: 12px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--n-bg) 90%, transparent);
  border: 1px solid var(--c-border-soft);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.4), var(--sh-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: pf-sube .28s cubic-bezier(.2,.9,.2,1);
}
@keyframes pf-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.pf-guardar-txt { font-size: .86rem; font-weight: 700; color: var(--c-text-muted); }
.pf-guardar-txt i { color: var(--c-warning); margin-right: 6px; }
.pf-guardar-acc { display: flex; gap: 8px; }

@media (max-width: 860px) { .pf-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pf-hero { padding: 20px; }
  .pf-hero-stats { width: 100%; }
  .pf-hero-stats span { flex: 1; }
}

/* Bloque "Trabaja con tu Claude" en el perfil */
.pf-claude {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 18px 22px; margin-bottom: 24px;
  border-color: color-mix(in srgb, #d97757 30%, var(--n-bg)) !important;
}
.pf-claude-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pf-claude-ic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #d97757 12%, transparent);
}
.pf-claude-ic img { animation: claude-bob 2.6s ease-in-out infinite; transform-origin: 50% 65%; }
.pf-claude h2 { margin: 0 0 3px; font-size: 1.05rem; color: var(--c-text); }
.pf-claude p { margin: 0; font-size: .84rem; color: var(--c-text-soft); line-height: 1.5; max-width: 56ch; }
.pf-claude-acc { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-claude .btn-primary {
  background: linear-gradient(135deg, #e8926a, #d97757); border: none;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, #d97757 90%, #000);
}
.pf-claude .btn-outline { border-color: color-mix(in srgb, #d97757 42%, transparent); color: #c8663f; }
@media (max-width: 640px) { .pf-claude-acc { width: 100%; } .pf-claude-acc .btn-meca { flex: 1; justify-content: center; } }

/* Tarjeta del kanban mientras guarda su nuevo estado (skeleton shimmer) */
.kb-card.kb-guardando { pointer-events: none; }
.kb-card.kb-guardando::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  background: linear-gradient(100deg,
    transparent 25%,
    color-mix(in srgb, var(--c-secondary) 22%, transparent) 50%,
    transparent 75%);
  background-size: 220% 100%;
  animation: kb-shimmer 1s linear infinite;
  pointer-events: none;
}
@keyframes kb-shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }

/* ============================================================
   Login InnoTech Hub — celeste + verde, plano, wordmark arriba.
   Override del login neumórfico anterior (gana por orden de fuente).
   ============================================================ */
:root{
  --it-celeste:#0EA5E9; --it-celeste-2:#38BDF8;
  --it-verde:#16A34A;   --it-verde-2:#22C55E;
  --it-tinta:#0f2b32;   --it-borde:#e2e8f0;
}

/* Lado marca: verde (degradado mono suave, profundo para que el canvas se lea) */
.login-arte{
  background: linear-gradient(165deg,#053d2e 0%,#0a7350 55%,#0e8a5b 100%) !important;
  background-color:#064e3b !important;
}
.login-arte::after{ background: linear-gradient(to top, rgba(5,50,40,.92), transparent 55%) !important; }

/* Wordmark arriba, grande, sobre pastilla blanca (contraste garantizado) */
.arte-marca{
  background: rgba(255,255,255,.97) !important; border:none !important;
  box-shadow:0 12px 34px -18px rgba(0,0,0,.65) !important;
  padding:13px 20px !important; border-radius:16px !important; margin-bottom:30px !important;
}
.arte-marca img{ width:auto !important; height:34px !important; max-width:210px !important;
  background:none !important; padding:0 !important; border-radius:0 !important; }

/* Lado formulario: más plano y con el wordmark arriba */
.login-panel{ background:#fff !important; }
.login-marca{ margin-bottom:30px !important; }
.login-marca img{ width:auto !important; height:30px !important; max-width:200px !important;
  background:none !important; box-shadow:none !important; border:none !important; padding:0 !important; }
.login-caja h1{ color:var(--it-tinta) !important; }
.login-sub{ color:#5b7079 !important; }

/* Inputs planos, foco celeste (sin neumorfismo) */
.login-caja .input-prefijo,
.login-caja .campo > .input-meca,
.login-caja .select-meca{
  border:1.5px solid var(--it-borde) !important; box-shadow:none !important;
  border-radius:12px !important; background:#fff !important;
}
.login-caja .input-prefijo:focus-within,
.login-caja .campo > .input-meca:focus,
.login-caja .select-meca:focus{
  border-color:var(--it-celeste) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--it-celeste) 18%, transparent) !important;
}
.login-caja .input-prefijo > i{ color:var(--it-celeste) !important; }

/* Botón Entrar: celeste sólido, plano (sin degradado) */
.login-btn{
  background:var(--it-celeste) !important;
  border:none !important;
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--it-celeste) 75%, #000) !important;
}
.login-btn:hover{ background:#0b93d1 !important; }

/* Google y separador: planos, acento celeste */
.btn-google{ box-shadow:none !important; border:1.5px solid var(--it-borde) !important; border-radius:12px !important; }
.btn-google:hover{ border-color:var(--it-celeste) !important; background:#f8fbfe !important; }
.login-sep span{ color:#93a3ab !important; }
.login-pie i{ color:var(--it-celeste) !important; }

/* Selector "¿Quién eres?": acento celeste al pasar */
.ident-persona:hover{ border-color:var(--it-celeste) !important;
  box-shadow:0 10px 24px -16px color-mix(in srgb, var(--it-celeste) 80%, #000) !important; }
.ident-persona > i{ color:var(--it-celeste) !important; }

/* ============================================================
   Barra lateral InnoTech — celeste en claro y oscuro, iconos
   blancos, activos SOLO con el icono en verde (sin cajas ni bordes).
   ============================================================ */
.sidebar, html.dark .sidebar{
  background: linear-gradient(180deg,#4C97EE 0%,#3A81DF 100%) !important;
  box-shadow: 8px 0 30px -20px rgba(2,40,70,.55) !important;
}
/* Rótulos de sección */
.sidebar .sidebar-label, html.dark .sidebar .sidebar-label{
  color: rgba(255,255,255,.72) !important; background: transparent !important;
}
html.sb-collapsed .sidebar-label, html.sb-collapsed.dark .sidebar-label{
  background: rgba(255,255,255,.18) !important; color:#fff !important;
}
/* Enlaces: texto e icono BLANCOS, sin caja ni borde */
.sidebar .sidebar-link, html.dark .sidebar .sidebar-link{
  color:#fff !important; background:transparent !important;
  box-shadow:none !important; border:none !important;
}
.sidebar .sidebar-link i, html.dark .sidebar .sidebar-link i{ color:#fff !important; }
/* Hover: leve realce translúcido (afordancia), sin borde neumórfico */
.sidebar .sidebar-link:hover, html.dark .sidebar .sidebar-link:hover{
  background: rgba(255,255,255,.16) !important; box-shadow:none !important; color:#fff !important;
}
/* ACTIVO: solo el icono en verde, sin caja/borde. Texto en blanco fuerte. */
.sidebar .sidebar-link.active, html.dark .sidebar .sidebar-link.active{
  background: rgba(255,255,255,.14) !important; box-shadow:none !important;
  color:#fff !important; font-weight:700 !important;
}
.sidebar .sidebar-link.active i, html.dark .sidebar .sidebar-link.active i{
  color:#2FE486 !important;   /* verde InnoTech */
}
/* Botón "ocultar menú" y flechas en blanco */
.sidebar .sidebar-toggle, html.dark .sidebar .sidebar-toggle{ color:#fff !important; box-shadow:none !important; }
.sidebar .sidebar-toggle:hover{ color:#eafff5 !important; }
/* Chip "Ver como" translúcido sobre celeste */
.sidebar .vc-abrir, html.dark .sidebar .vc-abrir{
  background: rgba(255,255,255,.16) !important; box-shadow:none !important; color:#fff !important;
}
.sidebar .vc-abrir *{ color:#fff !important; }
.sidebar .vc-quitar{ color:#fff !important; }
/* Contador de proyectos (grupo plegado) */
html.sb-collapsed .nav-grupo-n{ background:#2FE486 !important; color:#06324a !important; }
/* Pie: iconos blancos */
.sidebar .sidebar-foot i, html.dark .sidebar .sidebar-foot i{ color:#eafff5 !important; }
/* Menú de cuenta (abajo): texto/roles/avatar legibles sobre celeste */
.sidebar .sesion-chip, .sidebar .cuenta-menu .sidebar-link{ color:#fff !important; box-shadow:none !important; background:transparent !important; }
.sidebar .sesion-chip *, .sidebar .cuenta-menu .sidebar-link i{ color:#fff !important; }
.sidebar .sesion-info small{ color:rgba(255,255,255,.75) !important; }
.sidebar .sesion-chip:hover, .sidebar .cuenta-menu .sidebar-link:hover{ background:rgba(255,255,255,.16) !important; }
/* "Nuevo proyecto" (borde punteado) → blanco translúcido */
.sidebar .sidebar-link-new{ border:1px dashed rgba(255,255,255,.5) !important; color:#fff !important; }
.sidebar .sidebar-link-new:hover{ border-color:#2FE486 !important; color:#2FE486 !important; background:transparent !important; }
.sidebar .sidebar-link-new:hover i{ color:#2FE486 !important; }

/* --- Paneles flotantes del menú: NO van sobre el celeste ---
   El desplegable de cuenta (escritorio) y el menú completo (móvil) son hijos
   de .sidebar en el HTML, pero se dibujan sobre el fondo de la página. Las
   reglas de arriba les ponían texto e iconos blancos y en modo claro quedaban
   blanco sobre blanco (invisibles). Aquí vuelven a los colores del tema. */
html .sidebar .cuenta-panel .sidebar-link,
html.dark .sidebar .cuenta-panel .sidebar-link{
  color: var(--c-text) !important; background: transparent !important;
}
html .sidebar .cuenta-panel .sidebar-link i,
html.dark .sidebar .cuenta-panel .sidebar-link i{ color: var(--c-text-soft) !important; }
html .sidebar .cuenta-panel .sidebar-link:hover,
html.dark .sidebar .cuenta-panel .sidebar-link:hover{
  background: color-mix(in srgb, var(--c-secondary) 12%, transparent) !important;
  color: var(--c-text) !important;
}
html .sidebar .cuenta-panel .sidebar-link.active,
html.dark .sidebar .cuenta-panel .sidebar-link.active{
  background: color-mix(in srgb, var(--c-secondary) 14%, transparent) !important;
  color: var(--c-secondary) !important;
}
html .sidebar .cuenta-panel .sidebar-link.active i,
html.dark .sidebar .cuenta-panel .sidebar-link.active i{ color: var(--c-secondary) !important; }
/* Cerrar sesión: apagado, y en terracota al pasar por encima */
html .sidebar .cuenta-panel .cuenta-salir,
html .sidebar .cuenta-panel .cuenta-salir i{ color: var(--c-text-muted) !important; }
html .sidebar .cuenta-panel .cuenta-salir:hover,
html .sidebar .cuenta-panel .cuenta-salir:hover i{ color: var(--c-terracota) !important; }
html.dark .sidebar .cuenta-panel .cuenta-salir:hover,
html.dark .sidebar .cuenta-panel .cuenta-salir:hover i{ color: #ff9d5c !important; }

@media (max-width: 900px) {
  /* Móvil: el menú entero es un panel flotante claro, mismo problema */
  html .sidebar .sidebar-menu .sidebar-link,
  html.dark .sidebar .sidebar-menu .sidebar-link{
    color: var(--c-text) !important; background: transparent !important;
  }
  html .sidebar .sidebar-menu .sidebar-link i,
  html.dark .sidebar .sidebar-menu .sidebar-link i{ color: var(--c-text-soft) !important; }
  html .sidebar .sidebar-menu .sidebar-link:hover,
  html.dark .sidebar .sidebar-menu .sidebar-link:hover{
    background: color-mix(in srgb, var(--c-secondary) 12%, transparent) !important;
    color: var(--c-text) !important;
  }
  html .sidebar .sidebar-menu .sidebar-link.active,
  html.dark .sidebar .sidebar-menu .sidebar-link.active{
    background: color-mix(in srgb, var(--c-secondary) 14%, transparent) !important;
    color: var(--c-secondary) !important;
  }
  html .sidebar .sidebar-menu .sidebar-link.active i,
  html.dark .sidebar .sidebar-menu .sidebar-link.active i{ color: var(--c-secondary) !important; }
  /* Chip "Ver como", pie y cuenta dentro del menú móvil */
  html .sidebar .sidebar-menu .vc-abrir,
  html .sidebar .sidebar-menu .vc-abrir *,
  html .sidebar .sidebar-menu .vc-quitar,
  html .sidebar .sidebar-menu .sidebar-foot i,
  html .sidebar .sidebar-menu .sesion-chip,
  html .sidebar .sidebar-menu .sesion-chip *{ color: var(--c-text) !important; }
  html .sidebar .sidebar-menu .vc-abrir{
    background: color-mix(in srgb, var(--c-secondary) 12%, transparent) !important;
  }
  html .sidebar .sidebar-menu .sesion-info small,
  html .sidebar .sidebar-menu .cuenta-cab-txt small{ color: var(--c-text-soft) !important; }
  html .sidebar .sidebar-menu .sidebar-link-new{
    border-color: color-mix(in srgb, var(--c-secondary) 45%, transparent) !important;
    color: var(--c-secondary) !important;
  }
  html .sidebar .sidebar-menu .sidebar-link-new i{ color: var(--c-secondary) !important; }
  /* Rótulos ("GENERAL", "PROYECTOS"…) y pie del menú */
  html .sidebar .sidebar-menu .sidebar-label,
  html.dark .sidebar .sidebar-menu .sidebar-label{
    color: var(--c-text-soft) !important; background: transparent !important;
  }
  html .sidebar .sidebar-menu .sidebar-foot,
  html .sidebar .sidebar-menu .sidebar-foot > span,
  html.dark .sidebar .sidebar-menu .sidebar-foot,
  html.dark .sidebar .sidebar-menu .sidebar-foot > span{ color: var(--c-text-soft) !important; }
  html .sidebar .sidebar-menu .theme-toggle,
  html.dark .sidebar .sidebar-menu .theme-toggle{
    background: color-mix(in srgb, var(--c-secondary) 14%, transparent) !important;
  }
  html .sidebar .sidebar-menu .theme-toggle .tt-luna{ color: var(--c-text-soft) !important; }
}

/* Marca en la barra celeste: sin caja/glow neumórfico detrás (se veía feo);
   queda solo la pastilla blanca del logo. Y el botón de plegar, translúcido. */
.sidebar .sidebar-brand, html.dark .sidebar .sidebar-brand{
  background:transparent !important; box-shadow:none !important; border:none !important; padding:0 !important;
}
.sidebar .sidebar-brand:active{ box-shadow:none !important; }
.sidebar .sidebar-toggle, html.dark .sidebar .sidebar-toggle{
  background:rgba(255,255,255,.18) !important; box-shadow:none !important;
}
.sidebar .sidebar-toggle:hover{ background:rgba(255,255,255,.30) !important; color:#fff !important; }

/* Títulos de página en azul marino InnoTech (#150089). Solo en claro:
   en oscuro se mantienen claros para poder leerlos. */
.page-title{ color:#150089 !important; }
html.dark .page-title{ color:var(--c-text) !important; }

/* "Ver como" en la barra celeste: borde translúcido (sin borde azul raro) */
.sidebar .vc-abrir, html.dark .sidebar .vc-abrir{
  border:1.5px solid rgba(255,255,255,.35) !important;
}
.sidebar .vc-abrir:hover{ border-color:#fff !important; }

/* El botón de quitar "Ver como" traía fondo claro y glow neumórfico del tema
   base: sobre la barra celeste era una mancha blanca, y con la × blanca encima
   no se veía nada. Se iguala al botón de plegar: translúcido y plano. */
.sidebar .vc-quitar, html.dark .sidebar .vc-quitar{
  background: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  color:#fff !important;
}
.sidebar .vc-quitar:hover{ background: rgba(255,255,255,.30) !important; }

/* Panel flotante de Proyectos (barra plegada).
   Vive dentro de .sidebar, así que heredaba el `color:#fff !important` de la
   barra celeste — pero su fondo es claro, y en modo claro quedaba blanco sobre
   blanco. Aquí dentro mandan los colores de texto normales, que funcionan en
   los dos temas porque el panel usa --n-bg. */
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link,
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link i,
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link-new,
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link-new i{
  color: var(--c-text) !important;
  background: transparent !important;
}
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link:hover,
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link-new:hover{
  background: color-mix(in srgb, var(--c-secondary) 12%, transparent) !important;
  color: var(--c-secondary) !important;
}
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link:hover i,
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link-new:hover i{
  color: var(--c-secondary) !important;
}
/* El proyecto en el que estás, marcado con el verde InnoTech */
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link.active{
  background: color-mix(in srgb, var(--c-secondary) 14%, transparent) !important;
  color: var(--c-secondary) !important; font-weight: 700 !important;
}
html.sb-collapsed .sidebar .nav-grupo-items .sidebar-link.active i{
  color:#12b866 !important;      /* verde InnoTech, oscurecido para leerse en claro */
}
html.dark .sidebar .nav-grupo-items .sidebar-link.active i{ color:#2FE486 !important; }
/* Cabecera "PROYECTOS" y el aviso de lista vacía */
html.sb-collapsed .sidebar .nav-grupo-cab{ color: var(--c-text-soft) !important; }
html.sb-collapsed .sidebar .nav-grupo-cab i{ color: var(--c-secondary) !important; }
html.sb-collapsed .sidebar .nav-grupo-vacio{ color: var(--c-text-soft) !important; }

/* Avatar de la cuenta: su relieve neumórfico (--sh-mini + --clay-pop) lleva un
   realce claro que sobre el celeste se ve como un halo blanco difuso. Se
   cambia por un aro blanco limpio y una sombra real. */
.sidebar .sesion-chip .avatar, html.dark .sidebar .sesion-chip .avatar{
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.22) !important;
}

/* Interruptor de tema: la rama no lo reestilizó y seguía con el fondo claro del
   tema base, o sea una pastilla blanca sobre la barra celeste. */
.sidebar .theme-toggle, html.dark .sidebar .theme-toggle{
  background: rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}
.sidebar .theme-toggle:hover{ background: rgba(255,255,255,.26) !important; }
.sidebar .theme-toggle .tt-knob{
  background:#fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
}
/* "Equipo dev": heredaba --c-text-soft, un gris pensado para fondo claro, que
   sobre el celeste queda apagado. Blanco translúcido, como el resto del pie. */
.sidebar .sidebar-foot, html.dark .sidebar .sidebar-foot{ color: rgba(255,255,255,.82) !important; }
.sidebar .sidebar-foot > span{ color: rgba(255,255,255,.82) !important; }

/* El sol y la luna se pintan aquí porque .sidebar-foot i los deja verde menta */
.sidebar .theme-toggle .tt-sol{ color:#FFC24D !important; }
.sidebar .theme-toggle .tt-luna{ color: rgba(255,255,255,.85) !important; }
html.dark .sidebar .theme-toggle .tt-sol{ color: rgba(255,255,255,.55) !important; }
html.dark .sidebar .theme-toggle .tt-luna{ color: var(--c-cian) !important; }