/* WaySuccess Studio — panel de gestión para agencias de contenido
   Diseño y desarrollo: Adrian Linares · https://adrianlinaresdev.com */
:root {
  --bg-sidebar: #f7f6f3;
  --bg-content: #ffffff;
  --bg-hover: #efefed;
  --borde: #e9e9e7;
  --texto: #37352f;
  --texto-tenue: #6d6c68;
  /* Los acentos van al tono exacto que alcanza 4,5:1 sobre su propio fondo
     teñido; los anteriores se quedaban entre 3,5 y 4,5, por debajo de AA. */
  --azul: #1583de;
  --azul-fondo: #e6f4fd;
  --verde: #2e794e;
  --verde-fondo: #ddf3e4;
  --amarillo: #97620a;
  --amarillo-fondo: #fbf0d3;
  --rojo: #bd3c24;
  --rojo-fondo: #fbe4e0;
  --gris-fondo: #f1f1ef;
  --sombra: 0 1px 2px rgba(15, 15, 15, 0.05), 0 1px 1px rgba(15, 15, 15, 0.04);
  --sombra-media: 0 4px 12px rgba(15, 15, 15, 0.08), 0 1px 2px rgba(15, 15, 15, 0.06);
  --sombra-grande: 0 12px 32px rgba(15, 15, 15, 0.14), 0 2px 6px rgba(15, 15, 15, 0.06);
  --radio: 8px;
  --transicion: 140ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Escala de espaciado (base 4) ---
     Antes había catorce valores sueltos (3, 5, 7, 18, 20...) y como casi todo
     acababa en 18px, nada se agrupaba: la separación entre dos cifras de la
     misma tarjeta era igual que la que había entre secciones distintas. Con
     una escala, el espacio vuelve a significar algo: pegado = va junto,
     separado = es otra cosa. */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 12px;
  --espacio-lg: 16px;
  --espacio-xl: 24px;
  --espacio-2xl: 32px;
  --espacio-3xl: 48px;

  /* --- Series de datos ---
     Van aparte del azul de marca a propósito. En las gráficas de cliente,
     TikTok y YouTube salían en #1e9bec y #0f72d8: los mismos azules que los
     botones, así que una barra parecía pulsable. Y dos tonos del mismo azul
     es justo el par que no distingue quien tiene deuteranopia. Cuatro tonos
     distintos arreglan las dos cosas de una vez. */
  --serie-1: #0e7490;
  --serie-2: #7048c8;
  --serie-3: #0f8f6f;
  --serie-4: #b26212;

  /* Marca WaySuccess: los tres azules del logo — claro arriba-izquierda,
     profundo abajo-derecha — y el degradado que los une. Todo acento de
     marca sale de aquí para que la app se lea como un solo sistema.

     NOTA DE CONTRASTE (decisión tomada a propósito): el texto blanco sobre
     #1e9bec da 3,02:1 y sobre #3fc6f5 da 1,98:1, por debajo del 4,5 que pide
     WCAG AA. Se mantiene el azul de marca porque es una herramienta interna
     y la identidad pesa más aquí. Si algún día hay que cumplir AA, la vía es
     --marca-degradado-boton arrancando en #0f72d8 (4,75:1). */
  --marca-claro: #3fc6f5;
  --marca: #1e9bec;
  --marca-profundo: #0a6ad6;
  --marca-degradado: linear-gradient(140deg, #3fc6f5 0%, #1e9bec 45%, #0a6ad6 100%);
  /* En piezas anchas y bajas (botones, barras) el ángulo de 140° comprime
     las paradas y se ve como una banda cortada: para esas va casi horizontal. */
  --marca-degradado-ancho: linear-gradient(100deg, #3fc6f5 0%, #1e9bec 52%, #0a6ad6 100%);
  /* Para botones con texto blanco se arranca en el azul medio, no en el
     claro: sobre #3fc6f5 el blanco no se lee en absoluto. */
  --marca-degradado-boton: linear-gradient(100deg, #1e9bec 0%, #0a6ad6 100%);
  /* Azul de relleno para botones. Va aparte de --marca-profundo porque ese es
     un color de TEXTO y en tema oscuro se aclara: si el botón lo usara como
     fondo, acabaría en azul claro con letras blancas encima. */
  --marca-solido: #0f72d8;
  /* El mismo azul, pero para TEXTO. Va aparte porque en oscuro tiene que
     aclararse y --marca-solido no puede: es el fondo de los botones. */
  --marca-texto: #0f72d8;
  --marca-halo: 0 4px 14px rgba(30, 155, 236, 0.28);

  /* Colores de plataforma, para tags/acentos reconocibles de un vistazo. */
  --pf-instagram: #bd3477;
  --pf-instagram-fondo: #fbe7f1;
  --pf-tiktok: #1f2937;
  --pf-tiktok-fondo: #dfe3ea;
  --pf-youtube: #c92828;
  --pf-youtube-fondo: #fbe4e4;
  --pf-facebook: #1257a8;
  --pf-facebook-fondo: #e4eefb;
  --pf-linkedin: #0a66a3;
  --pf-linkedin-fondo: #e2effa;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--bg-content);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

/* Foco visible y consistente en toda la app (teclado y lectores de pantalla). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Enlace para saltar al contenido (teclado) ---
   Fuera de la vista hasta que recibe el foco; no se usa display:none ni
   visibility:hidden porque eso lo sacaría del orden de tabulación. --- */
.salto-contenido {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  transform: translateY(-160%);
  background: var(--marca-solido); color: #fff;
  padding: 10px 16px; border-radius: var(--radio);
  font-size: 13px; font-weight: 600; box-shadow: var(--sombra-grande);
  transition: transform var(--transicion);
}
.salto-contenido:focus { transform: translateY(0); }
/* El contenido recibe el foco al saltar, pero sin dibujarle un recuadro
   alrededor de toda la página. */
.pagina:focus { outline: none; }

/* --- Layout general --- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  /* Se queda fija a la vista mientras el contenido hace scroll. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow-y: auto;
}

/* --- Barra y menú móvil (ocultos en escritorio) --- */
.topbar-movil { display: none; }
.fondo-sidebar { display: none; }
.btn-hamburguesa {
  background: none; border: none; padding: 7px; margin: -7px 0 -7px -7px;
  cursor: pointer; display: flex; color: var(--texto); border-radius: var(--radio);
  transition: background var(--transicion);
}
.btn-hamburguesa:hover { background: var(--bg-hover); }
.btn-hamburguesa svg { width: 22px; height: 22px; }
.marca-movil { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }

.sidebar .marca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 18px;
  font-weight: 700;
  font-size: 15px;
}
/* El sello de marca es circular y en degradado, como el logo. */
.sidebar .marca .logo-cuadro,
.marca-movil .logo-cuadro {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--marca-degradado); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  box-shadow: var(--marca-halo);
}

.nav-grupo { margin-bottom: 14px; }
.nav-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-tenue); padding: 4px 8px; font-weight: 600;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--radio);
  font-size: 14px; color: var(--texto); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--texto-tenue); transition: color var(--transicion); }
.nav-link:hover { background: var(--bg-hover); }
/* La sección activa se marca con una barra de marca a la izquierda, como
   el trazo ascendente del logo. */
.nav-link.activo {
  background: var(--azul-fondo); color: var(--marca-profundo); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--marca);
}
.nav-link.activo svg { color: var(--marca); }

.nav-badge {
  margin-left: auto;
  background: var(--rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
}

.sidebar-pie {
  margin-top: auto;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}
.usuario-pie { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.usuario-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--marca-degradado);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.usuario-avatar img { width: 100%; height: 100%; object-fit: cover; }
.usuario-info { min-width: 0; }
.usuario-nombre { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sin capitalize: los roles ya traen su etiqueta con el formato correcto
   ("Portal de cliente", no "Portal De Cliente"). */
.usuario-rol { font-size: 11px; color: var(--texto-tenue); }
.salir-link {
  font-size: 12px; color: var(--texto-tenue); padding: 5px 8px; display: block;
  border-radius: var(--radio); transition: background var(--transicion), color var(--transicion);
}
.salir-link:hover { color: var(--texto); background: var(--bg-hover); }

/* --- Contenido --- */
.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 32px; border-bottom: 1px solid var(--borde);
}
.topbar h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.topbar .subtitulo { color: var(--texto-tenue); font-size: 13px; margin-top: 2px; }
.topbar > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }

.pagina { padding: 28px 32px 60px; max-width: 1180px; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radio);
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: var(--gris-fondo); color: var(--texto);
  transition: background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
/* El texto no parte en varias líneas dentro del botón: en las celdas
   estrechas del móvil, "Google Calendar" se rompía en tres renglones. */
.btn { white-space: nowrap; }
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
/* Cada variante repite su fondo en :hover a propósito. `.btn:hover` tiene
   especificidad (0,2,0) y gana a `.btn-primario` (0,1,0), así que si la
   variante no lo redeclara, al pasar el ratón el botón se quedaba con el gris
   de `--bg-hover` y el texto blanco encima: ilegible.
   background-origin en border-box evita que el degradado se repita bajo el
   borde transparente de 1px y deje un corte en el canto. */
.btn-primario,
.btn-primario:hover {
  background: var(--marca-degradado-boton); color: #fff;
  background-origin: border-box; background-repeat: no-repeat;
}
/* Se oscurece, no se aclara: con texto blanco encima, aclarar bajaba el
   contraste justo cuando el botón recibe la atención. */
.btn-primario:hover { filter: brightness(0.93); box-shadow: var(--marca-halo); }

.btn-azul, .btn-azul:hover { background: var(--marca-solido); color: #fff; }
.btn-azul:hover { filter: brightness(0.93); box-shadow: var(--marca-halo); }

.btn-peligro, .btn-peligro:hover { background: var(--rojo-fondo); color: var(--rojo); }
.btn-peligro:hover { filter: brightness(0.96); }

.btn-verde, .btn-verde:hover { background: var(--verde-fondo); color: var(--verde); }
.btn-verde:hover { filter: brightness(0.96); }
.btn-secundario { background: var(--gris-fondo); color: var(--texto); }
.btn-pequeno { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Tarjetas / cards --- */
.card {
  background: var(--bg-content); border: 1px solid var(--borde);
  border-radius: 10px; padding: var(--espacio-lg) var(--espacio-xl); margin-bottom: var(--espacio-xl);
  box-shadow: var(--sombra);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.card h2, .card h3 { margin: 0 0 var(--espacio-md); font-size: 14px; font-weight: 700; }

/* Las rejillas separan piezas hermanas: van más juntas (--espacio-md) que las
   secciones apiladas (--espacio-xl), que es lo que crea el ritmo. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-md); }
/* Dentro de una rejilla la tarjeta ya no arrastra su margen inferior: lo
   gestiona el gap, y si no, las filas quedaban con doble separación. */
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card { margin-bottom: 0; }
/* Los hijos de una rejilla traen min-width:auto, así que no se encogen por
   debajo del ancho natural de su contenido: una tabla dentro de una tarjeta
   ensanchaba su columna y hacía que TODA la página se desplazara en
   horizontal en el móvil. Con min-width:0 la tarjeta respeta la columna y es
   la tabla la que hace su propio scroll dentro de .tabla-wrap. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } }

/* --- Tira de resumen ---
   Sustituye a la fila de tarjetas KPI. Seis tarjetas iguales afirman que las
   seis cifras pesan lo mismo y merecen cada una su caja; en la práctica son
   contexto de fondo, y se comían entre 130 y 260px de alto justo encima de la
   tabla que es el trabajo de verdad. Aquí van en una sola banda de ~68px,
   separadas por filetes. La cifra que sí dispara una decisión (alertas,
   clientes en riesgo) se tiñe; las demás se quedan neutras, porque si todo
   grita no se oye nada. */
.tira-resumen {
  display: flex; flex-wrap: wrap;
  background: var(--bg-content); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra);
  margin-bottom: var(--espacio-xl); overflow: hidden;
}
.tira-dato {
  flex: 1 1 148px; min-width: 0;
  padding: var(--espacio-md) var(--espacio-lg);
  border-left: 1px solid var(--borde);
}
.tira-dato:first-child { border-left: 0; }
.tira-etiqueta {
  font-size: 11.5px; color: var(--texto-tenue); font-weight: 500;
  display: block; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tira-cifra {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  display: block; overflow-wrap: break-word;
}
.tira-nota { font-size: 11.5px; color: var(--texto-tenue); display: block; margin-top: 2px; }
.tira-dato.tono-rojo .tira-cifra { color: var(--rojo); }
.tira-dato.tono-amarillo .tira-cifra { color: var(--amarillo); }
.tira-dato.tono-verde .tira-cifra { color: var(--verde); }
/* Un dato que además lleva a algún sitio se comporta como enlace. */
a.tira-dato { text-decoration: none; color: inherit; transition: background var(--transicion); }
a.tira-dato:hover { background: var(--gris-fondo); }

@media (max-width: 640px) {
  .tira-dato { flex-basis: 50%; }
  /* Con dos por fila, el filete izquierdo sobra en la primera de cada fila. */
  .tira-dato:nth-child(odd) { border-left: 0; }
  .tira-dato:nth-child(n + 3) { border-top: 1px solid var(--borde); }
}

.metrica-grande { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.metrica-etiqueta { font-size: 12px; color: var(--texto-tenue); margin-bottom: var(--espacio-xs); }
.metrica-delta { font-size: 12px; font-weight: 600; }
.metrica-delta.subio { color: var(--verde); }
.metrica-delta.bajo { color: var(--rojo); }
/* Cero no es subir. En verde, una cartera entera parada se leía como que
   todos los clientes crecían. */
.metrica-delta.sin-cambio { color: var(--texto-tenue); }

/* --- Tabla estilo "database view" de Notion --- */
.tabla-wrap {
  border: 1px solid var(--borde); border-radius: 10px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  /* Sombra de desplazamiento: aparece en el borde solo cuando queda tabla por
     ver, y desaparece al llegar al final. Sin ella, en móvil no había forma de
     saber que quedaban columnas a la derecha. Es puro CSS: las capas "local"
     viajan con el scroll y tapan a las "scroll", que son las que dan sombra. */
  background:
    linear-gradient(to right, var(--bg-content) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-content) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 15, 15, .13), rgba(15, 15, 15, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 15, 15, .13), rgba(15, 15, 15, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Columna de desglose: la que se sacrifica primero cuando no cabe todo.
   En la tabla de Score son Ejecución/Performance/Retención, que son el
   detalle; lo que hay que ver sí o sí es el score final y su lectura. */
@media (max-width: 720px) {
  .col-secundaria { display: none; }
}
table.tabla-notion { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla-notion th {
  text-align: left; padding: 9px 14px; background: var(--gris-fondo);
  color: var(--texto-tenue); font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
table.tabla-notion td { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
table.tabla-notion tr:last-child td { border-bottom: none; }
table.tabla-notion tr:hover td { background: var(--bg-hover); }
table.tabla-notion a.fila-link { display: block; }
table.tabla-zebra tbody tr.fila-par td { background: var(--gris-fondo); }
table.tabla-zebra tbody tr:hover td { background: var(--bg-hover); }
table.tabla-notion td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla-notion th.col-num { text-align: right; }
.titulo-truncado {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 260px;
}

/* --- Tags / pills de estado --- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 600;
}
.tag-gris { background: var(--gris-fondo); color: var(--texto-tenue); }
.tag-azul { background: var(--azul-fondo); color: var(--marca-profundo); }
.tag-verde { background: var(--verde-fondo); color: var(--verde); }
.tag-amarillo { background: var(--amarillo-fondo); color: var(--amarillo); }
.tag-rojo { background: var(--rojo-fondo); color: var(--rojo); }

.plataforma-tag { text-transform: capitalize; }
.tag-plataforma-instagram { background: var(--pf-instagram-fondo); color: var(--pf-instagram); }
.tag-plataforma-tiktok { background: var(--pf-tiktok-fondo); color: var(--pf-tiktok); }
.tag-plataforma-youtube { background: var(--pf-youtube-fondo); color: var(--pf-youtube); }
.tag-plataforma-facebook { background: var(--pf-facebook-fondo); color: var(--pf-facebook); }
.tag-plataforma-linkedin { background: var(--pf-linkedin-fondo); color: var(--pf-linkedin); }

.tag-punto::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* --- Galería de clientes (tarjetas estilo Notion) --- */
.clientes-galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.cliente-card {
  display: flex; flex-direction: column;
  background: var(--bg-content); border: 1px solid var(--borde); border-radius: 10px;
  overflow: hidden; box-shadow: var(--sombra);
  transition: box-shadow var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.cliente-card:hover { box-shadow: var(--sombra-media); transform: translateY(-1px); }
.cliente-card-portada {
  height: 84px; flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  background: var(--marca-degradado);
}
.cliente-card-portada .logo-cuadro {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
.cliente-card-cuerpo { padding: 12px 16px; flex: 1; }
.cliente-card-titulo { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.cliente-card-icono {
  width: 20px; height: 20px; border-radius: 5px; background: var(--gris-fondo);
  color: var(--texto-tenue); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.cliente-card-plataformas { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cliente-card-estado { display: flex; align-items: center; gap: 8px; }
.cliente-card-pie {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  border-top: 1px solid var(--borde); font-size: 12px; color: var(--texto-tenue);
}
.cliente-card-meta { display: flex; align-items: center; gap: 4px; }
.cliente-card-meta svg { width: 14px; height: 14px; }
.cliente-card-meta.texto-tenue { margin-left: auto; }
.cliente-card-alerta { color: var(--rojo); font-weight: 600; }

/* --- Calendario de reuniones --- */
.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendario-grid-wrap { overflow-x: auto; margin-top: 14px; }
.calendario-grid {
  display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
}
.calendario-diasemana {
  background: var(--gris-fondo); color: var(--texto-tenue); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 6px; text-align: center;
}
.calendario-celda {
  background: var(--bg-content); min-height: 108px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.calendario-celda.fuera-de-mes { background: var(--gris-fondo); }
.calendario-celda.fuera-de-mes .calendario-numero { color: var(--texto-tenue); }
.calendario-celda.hoy { box-shadow: inset 0 0 0 2px var(--azul); }
.calendario-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--texto);
  transition: background var(--transicion);
}
.calendario-numero:hover { background: var(--bg-hover); }
.calendario-celda.hoy .calendario-numero { background: var(--marca-profundo); color: #fff; }
.calendario-evento {
  display: block; font-size: 12px; line-height: 1.5; padding: 3px 6px; border-radius: 5px;
  background: var(--azul-fondo); color: var(--marca-profundo); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--azul); transition: background var(--transicion), color var(--transicion);
}
.calendario-evento-hora { font-weight: 700; }
a.calendario-evento:hover { background: var(--azul); color: #fff; }
.calendario-evento-interna { background: var(--gris-fondo); color: var(--texto-tenue); border-left-color: var(--texto-tenue); }
a.calendario-evento-interna:hover { background: var(--texto-tenue); color: var(--bg-content); }
.calendario-mas {
  font-size: 11px; font-weight: 600; color: var(--texto-tenue); padding: 0 6px;
  transition: color var(--transicion);
}
.calendario-mas:hover { color: var(--azul); text-decoration: underline; }
.calendario-eventos-escritorio { display: flex; flex-direction: column; gap: 4px; }
.calendario-puntos-movil { display: none; }

/* --- Pestañas secundarias (ej. Score AM: General / Fórmulas) --- */
.tabs-secundarias { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--borde); }
.tab-secundaria {
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--texto-tenue);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transicion), border-color var(--transicion);
}
.tab-secundaria:hover { color: var(--texto); }
.tab-secundaria.activo { color: var(--azul); border-bottom-color: var(--azul); }

/* --- Formularios --- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; margin-top: 14px; }
label:first-child { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="time"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: 14px; font-family: inherit; background: var(--bg-content); color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover,
input[type="date"]:hover, input[type="number"]:hover, select:hover, textarea:hover {
  border-color: var(--texto-tenue);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.18);
}
textarea { resize: vertical; min-height: 70px; }
.campo-ayuda { font-size: 12px; color: var(--texto-tenue); margin-top: 4px; }
.check-linea { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.check-linea input { width: auto; }
.check-linea label { margin: 0; }

.form-acciones { margin-top: 20px; display: flex; gap: 10px; }

.buscador { max-width: 320px; margin-bottom: 18px; }

/* --- Barra de progreso (ciclo/meta) --- */
.barra-progreso { background: var(--gris-fondo); border-radius: 999px; height: 8px; overflow: hidden; }
.barra-progreso > div { height: 100%; background: var(--marca-degradado-ancho); }
.barra-progreso.completo > div { background: var(--verde); }

/* --- Notas tipo CRM --- */
.nota { border-bottom: 1px solid var(--borde); padding: 10px 0; }
.nota:last-child { border-bottom: none; }
.nota-meta { font-size: 12px; color: var(--texto-tenue); margin-bottom: 3px; }
.nota-texto { font-size: 13px; }

/* --- Alertas --- */
.alerta-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 10px;
}
.alerta-punto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.alerta-punto.alta { background: var(--rojo); }
.alerta-punto.media { background: var(--amarillo); }
.alerta-punto.baja { background: var(--texto-tenue); }
.alerta-texto { flex: 1; font-size: 13px; }
.alerta-fecha { font-size: 11px; color: var(--texto-tenue); margin-top: 2px; }

/* --- Login --- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 12% 12%, rgba(63, 198, 245, 0.20), transparent 48%),
    radial-gradient(circle at 88% 88%, rgba(10, 106, 214, 0.16), transparent 48%),
    var(--bg-sidebar);
}
.login-card {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: 40px 36px; width: 360px; box-shadow: var(--sombra-grande);
}
.login-card .logo-cuadro {
  width: 46px; height: 46px; font-size: 20px; margin-bottom: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  background: var(--marca-degradado); color: #fff; box-shadow: var(--marca-halo);
}
.login-card h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -0.01em; }
.login-card p.subtitulo { color: var(--texto-tenue); font-size: 13px; margin: 0 0 22px; }
.login-error { color: var(--rojo); font-size: 13px; margin: 12px 0 0; }
.login-demo {
  margin-top: 22px; padding: 12px 14px; border-radius: 8px; background: var(--gris-fondo);
  font-size: 12px; color: var(--texto-tenue); line-height: 1.7;
}

/* --- Charts --- */
.chart-wrap { position: relative; height: 260px; }

/* --- Utilidades --- */
.texto-tenue { color: var(--texto-tenue); }
/* Nota breve de "aquí no hay nada", dentro de una sección o una fila de
   tabla. Para una pantalla entera sin datos se usa .estado-vacio. */
.vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--espacio-sm); padding: var(--espacio-xl) var(--espacio-lg);
  text-align: center; color: var(--texto-tenue); font-size: 13px; line-height: 1.6;
}
td.vacio { display: table-cell; }
.fila-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fila-titulo h2, .fila-titulo h3 { margin: 0; }
.chips-filtro { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* ============================================================
   Responsive — móvil y tablet
   ============================================================ */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  .topbar-movil {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--borde);
    background: var(--bg-content); position: sticky; top: 0; z-index: 30;
  }

  .fondo-sidebar {
    display: block; position: fixed; inset: 0; background: rgba(15, 15, 15, 0.4);
    opacity: 0; pointer-events: none; transition: opacity var(--transicion);
    z-index: 40;
  }
  .fondo-sidebar.visible { opacity: 1; pointer-events: auto; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: 78vw; max-width: 300px;
    transform: translateX(-100%);
    transition: transform var(--transicion);
    box-shadow: var(--sombra-grande);
  }
  .sidebar.abierto { transform: translateX(0); }
  .sidebar .marca { display: none; }

  .contenido { min-width: 0; width: 100%; }

  .topbar { padding: 14px 18px; }
  .topbar h1 { font-size: 19px; }
  .pagina { padding: 18px 18px 44px; }

  .card { padding: 15px 16px; }

  .form-acciones { flex-wrap: wrap; }

  /* --- Columna de acciones fija ---
     En las tablas anchas los botones viven en la última columna, que en el
     móvil queda fuera de la pantalla: parecían cortados y había que arrastrar
     la tabla a ciegas para llegar a ellos. Se quedan pegados al borde
     derecho, siempre visibles, mientras el resto de columnas se desliza.
     La clase la pone app.js solo en las tablas cuya última columna tiene
     botones, para no fijar por error una columna de datos. */
  table.tabla-acciones th:last-child,
  table.tabla-acciones td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--bg-content);
    box-shadow: -7px 0 9px -7px rgba(0, 0, 0, 0.28);
  }
  table.tabla-acciones thead th:last-child { background: var(--gris-fondo); }
  table.tabla-acciones.tabla-zebra tbody tr.fila-par td:last-child { background: var(--gris-fondo); }
  table.tabla-acciones tbody tr:hover td:last-child { background: var(--bg-hover); }
  /* Las filas que ocupan todo el ancho (edición en línea, estado vacío) no
     tienen columna de acciones que fijar. */
  table.tabla-acciones td[colspan] { position: static; box-shadow: none; }
}

@media (max-width: 540px) {
  html, body { font-size: 14px; }
  .login-card { width: 100%; padding: 26px 22px; }
  .login-wrap { padding: 20px; }
  table.tabla-notion th, table.tabla-notion td { padding: 8px 10px; }
  .form-acciones { flex-direction: column; align-items: stretch; }
  .form-acciones .btn { width: 100%; justify-content: center; }

  /* Las acciones de la cabecera (Descargar PDF, Editar, Desactivar...) se
     reparten el ancho en vez de quedar desordenadas al saltar de línea. */
  .topbar > div:last-child { width: 100%; }
  .topbar > div:last-child > .btn,
  .topbar > div:last-child > form { flex: 1 1 auto; }
  .topbar > div:last-child > form > .btn { width: 100%; justify-content: center; }
  .topbar > div:last-child > .btn { justify-content: center; }

  /* Las pestañas se deslizan en horizontal en vez de apilarse en varias
     filas y empujar el contenido hacia abajo. */
  .pestanas-cliente {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .pestanas-cliente::-webkit-scrollbar { display: none; }
  .pestana-cliente { flex-shrink: 0; }

  /* El anillo ocupaba casi todo el ancho útil de la tarjeta. */
  .anillo { width: 128px; height: 128px; }
  .anillo-centro strong { font-size: 24px; }
}

/* --- Pantallas táctiles: objetivos de toque cómodos ---
   Se detecta por el tipo de puntero, no por el ancho: una tablet ancha
   también se toca con el dedo, y un escritorio estrecho no. La referencia de
   44px es la de las guías de Apple y Google. --- */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding: 10px 16px; }
  .btn-pequeno { min-height: 38px; padding: 8px 12px; font-size: 13px; }
  .nav-link { padding: 11px 8px; }
  .salir-link { padding: 9px 8px; }
  .pestana-cliente { min-height: 42px; }
  select, textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="datetime-local"] {
    min-height: 44px;
  }
  /* En las tablas los pares Editar/Eliminar se separan un poco más para no
     tocar el equivocado. */
  table.tabla-notion .btn-pequeno { margin: 2px 0; }
}

/* --- Calendario en móvil: sin scroll horizontal, celdas compactas con
   puntos de color en vez del texto de cada reunión (igual que las apps de
   calendario nativas); tocar el día lleva a la agenda completa de ese día. --- */
@media (max-width: 640px) {
  .calendario-cabecera { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 8px; }
  .calendario-cabecera h2 { font-size: 15px; order: -1; flex-basis: 100%; }
  .calendario-grid-wrap { overflow-x: visible; }
  .calendario-grid { grid-template-columns: repeat(7, 1fr); }
  .calendario-diasemana { font-size: 9px; padding: 6px 1px; letter-spacing: 0; }
  .calendario-celda {
    min-height: 44px; padding: 3px 1px; align-items: center; justify-content: flex-start; gap: 3px;
  }
  /* En el dedo, 24px es justo el mínimo y el número es lo único que se
     puede tocar: la celda no lleva enlace. Se agranda hasta llenar la celda. */
  .calendario-numero { width: 32px; height: 32px; }
  /* La casilla mide 13px; lo que se toca es la etiqueta entera, así que es
     ella la que tiene que dar la altura mínima cómoda. */
  .check-linea { min-height: 44px; }
  .calendario-eventos-escritorio { display: none; }
  .calendario-puntos-movil { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
  .calendario-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--azul); flex-shrink: 0; }
  .calendario-punto-interna { background: var(--texto-tenue); }
}

/* --- Calendarios con contenido dentro: agenda en móvil ---
   Los de Contenido y Leads no llevan puntos, llevan fichas con texto. En una
   rejilla de siete columnas dentro de 390px cada celda queda en 39px: la ficha
   se salía de su día y pisaba la columna siguiente, y las semanas vacías
   gastaban cien píxeles cada una. Se apilan en una lista y se enseñan solo los
   días que tienen algo, que es como funcionan las agendas del teléfono. --- */
@media (max-width: 640px) {
  .calendario-agenda { display: block; border: 0; }
  /* La cabecera de días de la semana no significa nada apilada. */
  .calendario-agenda .calendario-diasemana { display: none; }
  .calendario-agenda .calendario-celda {
    display: grid; grid-template-columns: 44px 1fr; gap: var(--espacio-md);
    align-items: start; min-height: 0; padding: var(--espacio-md) var(--espacio-sm);
    border: 0; border-bottom: 1px solid var(--borde); text-align: left;
  }
  .calendario-agenda .calendario-celda:last-child { border-bottom: 0; }
  /* Un día sin nada no aporta una fila: solo se muestran los que tienen algo.
     El :has() es la única forma de saberlo sin tocar la plantilla. */
  .calendario-agenda .calendario-celda:not(:has(.pieza)):not(:has(.dia-leads)) {
    display: none;
  }
  /* El día de la semana lo daba la columna; apilado hay que escribirlo, y
     colgando del propio número para que no se despegue cuando la ficha de al
     lado estira la fila. */
  .calendario-agenda .calendario-numero {
    grid-column: 1; grid-row: 1;
    width: auto; height: auto; justify-self: start; align-self: start;
    display: block; text-align: left;
    font-size: 19px; font-weight: 700; line-height: 1.1;
  }
  .calendario-agenda .calendario-numero::after {
    content: attr(data-dia); display: block; margin-top: 2px;
    font-size: 11px; font-weight: 600; color: var(--texto-tenue);
    text-transform: uppercase; letter-spacing: .04em;
  }
  /* Sin grid-row fijo: si un día tiene tres piezas, cada una toma su propia
     fila de la columna 2 en vez de amontonarse todas en la misma. */
  .calendario-agenda .pieza,
  .calendario-agenda .dia-leads { grid-column: 2; width: 100%; }
  .calendario-agenda .pieza + .pieza { margin-top: var(--espacio-sm); }
  /* Hoy se marca con el color, no con un recuadro que aquí no encaja. */
  .calendario-agenda .calendario-celda.hoy {
    outline: 0; background: var(--azul-fondo); border-radius: 8px;
  }
  .calendario-agenda .calendario-celda.fuera-de-mes { opacity: .55; }
}

/* ============================================================
   Accesibilidad — preferencias por usuario (ver rutas/cuenta.py)
   Se leen de atributos data-* en <html>, fijados desde base.html.
   ============================================================ */

/* --- Tema oscuro (elegido, o "sistema" cuando el SO está en oscuro) --- */
html[data-tema="oscuro"],
html[data-tema="sistema"] {
  /* Neutros con una pizca de azul en vez de gris puro: el gris neutro sobre
     pantalla se ve apagado y sucio, y hace que los acentos parezcan sucios. */
  --bg-sidebar: #1b1e24;
  --bg-content: #16181d;
  --bg-hover: #242832;
  --borde: #2e333d;
  --texto: #e6e8ec;
  --texto-tenue: #99a1ae;
  --gris-fondo: #21252d;

  /* Los acentos de TEXTO se aclaran. Los del tema claro (#2f7a4f, #c4432b,
     #9f6a12) están pensados para fondo blanco: sobre las pastillas oscuras
     se quedaban en 2,5-3:1 y era justo lo que se veía embarrado. */
  --azul: #6cb8f5;
  --azul-fondo: #14273b;
  --verde: #5ddb96;
  --verde-fondo: #12301f;
  --amarillo: #f0c261;
  --amarillo-fondo: #362a11;
  --rojo: #ff8d7c;
  --rojo-fondo: #38201d;

  --marca: #3fb4f3;
  --marca-profundo: #86d0fa;
  --marca-halo: 0 4px 14px rgba(30, 155, 236, 0.40);

  /* Las plataformas también: sus fondos del tema claro no se redefinían, así
     que las etiquetas salían como pastillas rosas y rojas brillantes encima
     de la interfaz oscura. */
  --pf-instagram: #f591c6;  --pf-instagram-fondo: #341a2b;
  --pf-tiktok: #e4e8f0;     --pf-tiktok-fondo: #313a4a;
  --pf-youtube: #ff9090;    --pf-youtube-fondo: #351f1f;
  --pf-facebook: #7fb4f0;   --pf-facebook-fondo: #16253c;

  /* Series de las gráficas: los tonos del tema claro son medios y sobre el
     fondo oscuro se apagan (el morado bajaba a 2.92). Mismos matices, más
     claros, para que las líneas se distingan entre sí y del fondo. */
  --serie-1: #38bdd8;
  --serie-2: #a78bfa;
  --serie-3: #34d399;
  --serie-4: #f0a844;
  /* Azul de texto: aquí sí se aclara, porque no es fondo de nada. */
  --marca-texto: #6cb8f7;
  --pf-linkedin: #74bdec;   --pf-linkedin-fondo: #14283a;
}
/* "sistema" hereda el bloque oscuro de arriba; si el equipo está en claro hay
   que devolver TODAS las variables que aquél redefine. Si se añade una nueva
   al tema oscuro, tiene que aparecer también aquí o el tema claro la arrastra. */
@media (prefers-color-scheme: light) {
  html[data-tema="sistema"] {
    --bg-sidebar: #f7f6f3;
    --bg-content: #ffffff;
    --bg-hover: #efefed;
    --borde: #e9e9e7;
    --texto: #37352f;
    --texto-tenue: #6d6c68;
    --gris-fondo: #f1f1ef;

    --azul: #1583de;
    --azul-fondo: #e6f4fd;
    --verde: #2e794e;
    --verde-fondo: #ddf3e4;
    --amarillo: #97620a;
    --amarillo-fondo: #fbf0d3;
    --rojo: #bd3c24;
    --rojo-fondo: #fbe4e0;

    --marca-claro: #3fc6f5;
    --marca: #1e9bec;
    --marca-profundo: #0a6ad6;
    --marca-halo: 0 4px 14px rgba(30, 155, 236, 0.28);

    --pf-instagram: #bd3477;  --pf-instagram-fondo: #fbe7f1;
    --pf-tiktok: #1f2937;     --pf-tiktok-fondo: #dfe3ea;
    --pf-youtube: #c92828;    --pf-youtube-fondo: #fbe4e4;
    --pf-facebook: #1257a8;   --pf-facebook-fondo: #e4eefb;
    --serie-1: #0e7490;  --serie-2: #7048c8;
    --serie-3: #0f8f6f;  --serie-4: #b26212;
    --marca-texto: #0f72d8;
    --pf-linkedin: #0a66a3;   --pf-linkedin-fondo: #e2effa;
  }
}
/* Enumerar los tipos dejaba fuera los que no estaban en la lista: url y
   datetime-local seguían saliendo blancos sobre la interfaz oscura. Ahora se
   excluyen los tres que NO deben pintarse (casilla, radio y archivo) y todo
   lo demás queda cubierto, incluidos los tipos que se añadan luego. */
html[data-tema="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea,
html[data-tema="sistema"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-tema="sistema"] select, html[data-tema="sistema"] textarea {
  background: var(--bg-content);
  color: var(--texto);
}
html[data-tema="oscuro"] .login-wrap, html[data-tema="sistema"] .login-wrap { background: var(--bg-sidebar); }
html[data-tema="oscuro"] .login-card, html[data-tema="sistema"] .login-card { background: var(--bg-content); }
html[data-tema="oscuro"] .log, html[data-tema="sistema"] .log,
html[data-tema="oscuro"] #config-textarea, html[data-tema="sistema"] #config-textarea {
  background: var(--gris-fondo);
  color: var(--texto);
}

/* --- Tamaño de texto --- */
html[data-tamano-fuente="grande"] body { font-size: 17px; }
html[data-tamano-fuente="extra_grande"] body { font-size: 19px; }
html[data-tamano-fuente="grande"] .metrica-grande { font-size: 30px; }
html[data-tamano-fuente="extra_grande"] .metrica-grande { font-size: 34px; }

/* --- Alto contraste --- */
html[data-alto-contraste="si"] { --texto-tenue: var(--texto); }
html[data-alto-contraste="si"]:not([data-tema="oscuro"]):not([data-tema="sistema"]) {
  --texto: #000000;
  --borde: #000000;
}
html[data-alto-contraste="si"][data-tema="oscuro"],
html[data-alto-contraste="si"][data-tema="sistema"] {
  --texto: #ffffff;
  --borde: #ffffff;
}
html[data-alto-contraste="si"] .btn { outline: 1.5px solid currentColor; }
html[data-alto-contraste="si"] .tag { outline: 1px solid currentColor; }
html[data-alto-contraste="si"] .nav-link.activo { outline: 1.5px solid var(--azul); }
html[data-alto-contraste="si"] .calendario-evento { outline: 1px solid currentColor; }
html[data-alto-contraste="si"] .calendario-celda.hoy { box-shadow: inset 0 0 0 3px var(--azul); }
html[data-alto-contraste="si"] .calendario-punto { outline: 1px solid var(--texto); width: 6px; height: 6px; }
html[data-alto-contraste="si"] .cliente-card { outline: 1px solid var(--borde); }

/* --- Reducir movimiento --- */
html[data-reducir-movimiento="si"] *,
html[data-reducir-movimiento="si"] *::before,
html[data-reducir-movimiento="si"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* --- Subrayar enlaces --- */
html[data-subrayar-enlaces="si"] a { text-decoration: underline; }
html[data-subrayar-enlaces="si"] .nav-link,
html[data-subrayar-enlaces="si"] .btn,
html[data-subrayar-enlaces="si"] table.tabla-notion tr[onclick] {
  text-decoration: none;
}

/* --- Colapsar / mostrar el sidebar (escritorio) --- */
.btn-colapsar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radio); color: var(--texto-tenue);
  transition: background var(--transicion), color var(--transicion);
}
.btn-colapsar:hover { background: var(--bg-hover); color: var(--texto); }
.btn-colapsar svg { width: 18px; height: 18px; }

.btn-mostrar-sidebar {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 45;
  width: 34px; height: 34px; align-items: center; justify-content: center;
  background: var(--bg-content); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); cursor: pointer; box-shadow: var(--sombra);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.btn-mostrar-sidebar:hover { background: var(--bg-hover); box-shadow: var(--sombra-media); }
.btn-mostrar-sidebar svg { width: 20px; height: 20px; }

.app-shell.sidebar-colapsado .sidebar { display: none; }
.app-shell.sidebar-colapsado .btn-mostrar-sidebar { display: flex; }

/* En móvil el sidebar usa la hamburguesa; ocultamos estos controles. */
@media (max-width: 860px) {
  .btn-colapsar,
  .app-shell.sidebar-colapsado .btn-mostrar-sidebar { display: none; }
  .app-shell.sidebar-colapsado .sidebar { display: flex; }
}

/* --- Pestañas de secciones dentro del detalle de cliente ---
   Inspiradas en las tarjetas de cliente (chip de icono, borde suave,
   leve elevación al pasar el mouse) pero como píldoras horizontales. */
.pestanas-cliente {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.pestana-cliente {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--bg-content); color: var(--texto-tenue); cursor: pointer;
  font-size: 13px; font-weight: 600; box-shadow: var(--sombra);
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
.pestana-cliente:hover { color: var(--texto); box-shadow: var(--sombra-media); transform: translateY(-1px); }
.pestana-cliente .pestana-icono {
  width: 22px; height: 22px; border-radius: 6px; background: var(--gris-fondo);
  color: var(--texto-tenue); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background var(--transicion), color var(--transicion);
}
.pestana-cliente .pestana-icono svg { width: 14px; height: 14px; }
.pestana-cliente.activo {
  background: var(--azul-fondo); color: var(--marca-profundo); border-color: var(--azul);
}
.pestana-cliente.activo .pestana-icono { background: var(--marca-degradado); color: #fff; }

/* --- Estado vacío ---
   Una pantalla sin datos no debería ser una frase suelta en medio de la nada:
   se explica qué va a aparecer ahí y se ofrece el camino para llenarla. --- */
/* --- Pestañas de sección ---
   Van justo debajo de las de cliente y sin distinguirlas se leían como una
   segunda lista de clientes. Se agrupan en un solo control segmentado: un
   carril con las opciones dentro, que es el gesto habitual para "estoy
   viendo lo mismo de otra manera". --- */
.pestanas-seccion {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px;
  padding: 4px; border-radius: 12px; background: var(--gris-fondo);
  border: 1px solid var(--borde);
}
.pestana-seccion {
  padding: 7px 14px; border-radius: 9px; border: 0; background: transparent;
  color: var(--texto-tenue); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.pestana-seccion:hover { background: var(--bg-content); color: var(--texto); }
.pestana-seccion.activo {
  background: var(--bg-content); color: var(--marca-texto);
  box-shadow: var(--sombra);
}
html[data-alto-contraste="si"] .pestana-seccion.activo { outline: 1.5px solid var(--azul); }

@media (max-width: 640px) {
  .pestanas-seccion {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .pestanas-seccion::-webkit-scrollbar { display: none; }
  .pestana-seccion { flex-shrink: 0; }
}
@media (pointer: coarse) { .pestana-seccion { min-height: 40px; } }

.panel-cliente { display: none; }
.panel-cliente.activo { display: block; animation: aparecer-panel var(--transicion); }
@keyframes aparecer-panel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

html[data-alto-contraste="si"] .pestana-cliente { outline: 1px solid var(--borde); }
html[data-alto-contraste="si"] .pestana-cliente.activo { outline: 1.5px solid var(--azul); }

/* --- Filtro de fechas para las gráficas --- */
.filtro-fechas {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-bottom: 16px;
}
.filtro-fechas label {
  margin: 0; font-size: 12px; font-weight: 600; color: var(--texto-tenue);
  display: flex; flex-direction: column; gap: 4px;
}
.filtro-fechas input[type="date"] { font-size: 13px; }
.filtro-fechas .filtro-presets { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   PULIDO VISUAL
   ============================================================ */

/* --- Números tabulares: las cifras se alinean en columnas y no "bailan"
   al actualizarse. Clave en una app llena de métricas. --- */
.metrica-grande, .metrica-delta,
table.tabla-notion td, .barra-progreso + p, .puntaje {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Chips (listas de clientes asignados, etiquetas encadenadas) --- */
.chips-lista { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-enlace { transition: background var(--transicion), color var(--transicion); }
.chip-enlace:hover { background: var(--azul-fondo); color: var(--azul); }

/* --- Estados vacíos con más presencia --- */
/* --- Tablas: cabecera fija en las tablas largas (historial de semanas) --- */
.tabla-wrap.tabla-alta {
  max-height: 62vh; overflow-y: auto;
}
.tabla-wrap.tabla-alta table.tabla-notion th {
  position: sticky; top: 0; z-index: 2;
}
/* Separador sutil bajo la cabecera fija (el border-bottom se pierde al hacer sticky). */
.tabla-wrap.tabla-alta table.tabla-notion th::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--borde);
}
table.tabla-notion tr { transition: background var(--transicion); }

/* --- Barra de progreso: animada y con matiz según el avance --- */
.barra-progreso { height: 9px; }
.barra-progreso > div {
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
}

/* --- Tarjetas: elevación coherente al pasar el mouse --- */
.card:hover { box-shadow: var(--sombra-media); }

/* --- Barras de desplazamiento discretas --- */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borde); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: content-box; }

/* --- Selección de texto con el azul de la marca --- */
::selection { background: rgba(30, 155, 236, 0.24); }

/* --- Anillo de progreso de la meta semanal --- */
.anillo { position: relative; width: 150px; height: 150px; margin: 4px auto 2px; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 11; }
.anillo-pista { stroke: var(--gris-fondo); }
.anillo-valor {
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  /* Arranca vacío y se dibuja hasta el valor que trae en su style inline. */
  animation: anillo-dibujar 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes anillo-dibujar { from { stroke-dashoffset: 326.7; } }
.anillo-completo .anillo-valor { stroke: var(--verde) !important; }

.anillo-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: none;
}
.anillo-centro strong {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.anillo-centro span { font-size: 12px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.anillo-completo .anillo-centro strong { color: var(--verde); }

/* Celebración al alcanzar la meta: un pulso breve, sin estridencias. */
.anillo-completo::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--verde);
  animation: anillo-celebra 1.8s cubic-bezier(0.2, 0.8, 0.3, 1) 700ms 2;
  opacity: 0;
}
@keyframes anillo-celebra {
  0% { opacity: 0.7; transform: scale(0.94); }
  70% { opacity: 0; transform: scale(1.10); }
  100% { opacity: 0; transform: scale(1.10); }
}

/* --- Barra de carga superior (navegación parcial) --- */
.barra-carga {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  pointer-events: none; z-index: 200; opacity: 0;
  transition: opacity 180ms ease;
}
.barra-carga > i {
  display: block; height: 100%; width: 0;
  background: var(--marca-degradado-ancho);
  box-shadow: 0 0 8px rgba(30, 155, 236, 0.55);
}
/* Avanza rápido hasta 70% y ahí espera: da sensación de progreso sin mentir
   sobre cuánto falta, porque no se conoce el tamaño de la respuesta. */
.barra-carga.cargando { opacity: 1; }
.barra-carga.cargando > i { animation: barra-avanza 1.6s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; }
.barra-carga.listo { opacity: 1; }
.barra-carga.listo > i { width: 100%; transition: width 180ms ease; }
@keyframes barra-avanza { from { width: 0; } to { width: 72%; } }

/* La región que se está reemplazando se atenúa y recibe un barrido de luz
   (skeleton): informa de que algo viene en camino sin mover el layout. */
.region-cargando { position: relative; opacity: 0.5; transition: opacity 140ms ease; }
.region-cargando::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(30, 155, 236, 0.10) 50%,
    transparent 80%);
  background-size: 220% 100%;
  animation: barrido 1.1s ease-in-out infinite;
}
@keyframes barrido { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* --- Avisos flotantes (toasts) --- */
.avisos-flotantes {
  position: fixed; right: 18px; bottom: 18px; z-index: 210;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none; max-width: min(380px, calc(100vw - 36px));
}
.aviso-flotante {
  pointer-events: auto;
  background: var(--bg-content); color: var(--texto);
  border: 1px solid var(--borde); border-left: 3px solid var(--marca);
  border-radius: var(--radio); box-shadow: var(--sombra-grande);
  padding: 10px 14px; font-size: 13px; line-height: 1.45;
  animation: aviso-entra 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.aviso-flotante.tono-ok { border-left-color: var(--verde); }
.aviso-flotante.tono-error { border-left-color: var(--rojo); }
.aviso-flotante.saliendo { animation: aviso-sale 240ms ease forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(6px) scale(0.98); } }

@media (max-width: 640px) {
  .avisos-flotantes { left: 12px; right: 12px; bottom: 12px; align-items: stretch; max-width: none; }
}

/* Respeta la preferencia de accesibilidad de reducir movimiento: nada de lo
   anterior es informativo por sí mismo, así que se muestra en su estado final
   en vez de animarse. */
html[data-reducir-movimiento="si"] .barra-carga > i,
html[data-reducir-movimiento="si"] .aviso-flotante,
html[data-reducir-movimiento="si"] .region-cargando::after,
html[data-reducir-movimiento="si"] .anillo-completo::after { animation: none; }
html[data-reducir-movimiento="si"] .barra-carga.cargando > i { width: 72%; }
html[data-reducir-movimiento="si"] .anillo-valor { animation: none; }

/* --- Login con más aire y jerarquía --- */
.login-card { width: 380px; padding: 42px 38px; }
.login-demo { border: 1px solid var(--borde); background: transparent; }
.login-demo strong { color: var(--texto); }

/* --- Modo oscuro: las sombras claras no se ven, se refuerzan los bordes --- */
html[data-tema="oscuro"], html[data-tema="sistema"] {
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sombra-media: 0 4px 14px rgba(0, 0, 0, 0.55);
  --sombra-grande: 0 14px 36px rgba(0, 0, 0, 0.6);
}
html[data-tema="oscuro"] ::selection, html[data-tema="sistema"] ::selection {
  background: rgba(35, 131, 226, 0.4);
}
html[data-tema="oscuro"] .login-card, html[data-tema="sistema"] .login-card {
  background: var(--bg-sidebar);
}

/* --- Barra superior fija en escritorio: el título y las acciones siguen
   a la vista al recorrer páginas largas. --- */
@media (min-width: 861px) {
  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg-content);
    backdrop-filter: saturate(180%) blur(6px);
  }
}

/* --- Score AM: la cifra acompañada de una barra para leer el nivel
   de un vistazo, sin tener que interpretar el número. --- */
.score-celda { display: flex; align-items: center; gap: 9px; min-width: 116px; }
.score-num { font-weight: 600; min-width: 34px; font-variant-numeric: tabular-nums; }
.barra-mini {
  flex: 1; min-width: 46px; height: 6px; border-radius: 999px;
  background: var(--gris-fondo); overflow: hidden;
}
.barra-mini > i {
  display: block; height: 100%; border-radius: 999px; background: var(--azul);
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.barra-mini > i.tono-verde { background: var(--verde); }
.barra-mini > i.tono-azul { background: var(--azul); }
.barra-mini > i.tono-amarillo { background: var(--amarillo); }
.barra-mini > i.tono-rojo { background: var(--rojo); }
.barra-mini > i.tono-gris { background: var(--texto-tenue); }

/* Cifra grande de KPI coloreada según la banda alcanzada. */
.metrica-grande.tono-verde { color: var(--verde); }
.metrica-grande.tono-azul { color: var(--azul); }
.metrica-grande.tono-amarillo { color: var(--amarillo); }
.metrica-grande.tono-rojo { color: var(--rojo); }

/* Formulario compacto dentro de una celda (upsell). */
.form-celda {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.form-celda label { margin: 0; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.form-celda input[type="checkbox"] { width: auto; margin: 0; }
.form-celda select, .form-celda input[type="text"] {
  width: auto; font-size: 12px; padding: 4px 8px; margin: 0;
}
.form-celda input[type="text"] { width: 88px; }

/* --- Avisos (confirmación / error), en vez de repetir estilos en línea --- */
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--borde); border-left: 3px solid var(--azul);
  background: var(--bg-content); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px; font-size: 13px;
  box-shadow: var(--sombra);
}
.aviso-error { border-left-color: var(--rojo); color: var(--rojo); }
.aviso-ok { border-left-color: var(--verde); }
/* Ni error ni confirmación: algo que conviene saber pero no ha fallado. */
.aviso-atencion { border-left-color: var(--amarillo); }

/* --- Estado vacío ---
   Una pantalla sin datos no debería ser una frase suelta en medio de la nada:
   dice qué va a aparecer ahí y ofrece el camino para llenarla. La variante
   "ok" es para cuando vacío es justo lo que se busca (cero alertas), que no
   es lo mismo que faltar datos y no debe leerse en gris de ausencia. */
.estado-vacio { text-align: center; padding: var(--espacio-2xl) var(--espacio-lg); }
.estado-vacio h2 { margin: 0 0 var(--espacio-sm); font-size: 15px; }
.estado-vacio p {
  margin: 0 auto var(--espacio-lg); max-width: 46ch;
  color: var(--texto-tenue); font-size: 13.5px; line-height: 1.55;
}
.estado-vacio p:last-child { margin-bottom: 0; }
.estado-ok { border-color: color-mix(in srgb, var(--verde) 32%, var(--borde)); }
.estado-ok h2 { color: var(--verde); }
.estado-ok h2::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 15px; height: 8px; margin-right: var(--espacio-sm);
  border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg) translateY(-2px);
}

/* --- Lista de definición para fichas de estado ---
   Se usaba en Métricas y Configuración sin ninguna regla, así que salía con
   el sangrado por defecto del navegador: la etiqueta a un lado y el valor
   metido hacia dentro, como un documento sin maquetar. */
.detalle { margin: 0; display: grid; gap: var(--espacio-md); }
.detalle dt {
  font-size: 11.5px; font-weight: 600; color: var(--texto-tenue);
  margin: 0 0 2px;
}
.detalle dd { margin: 0; font-size: 13.5px; line-height: 1.5; }
@media (min-width: 720px) {
  /* Con sitio, etiqueta y valor en dos columnas: se leen en pares en vez de
     como una lista larga. */
  .detalle { grid-template-columns: minmax(120px, 34%) 1fr; align-items: baseline; }
  .detalle dt { margin: 0; }
}

/* Contador junto al título de una sección, para no repetirlo en el texto. */
.contador-seccion {
  display: inline-block; margin-left: var(--espacio-sm);
  padding: 1px 8px; border-radius: 999px;
  background: var(--gris-fondo); color: var(--texto-tenue);
  font-size: 12px; font-weight: 600; vertical-align: middle;
}

/* --- Alertas --- */
.alerta-cliente {
  font-weight: 700; color: var(--texto); text-decoration: none;
  margin-right: var(--espacio-xs);
}
a.alerta-cliente:hover { color: var(--marca-texto); text-decoration: underline; }
.alerta-mensaje { color: var(--texto); }
.alerta-atendida { opacity: .55; }

/* --- Celda de identidad en tablas de piezas ---
   Cliente y título juntos. En columnas separadas, un nombre largo partía la
   fila en tres líneas y hundía las publicaciones visibles de quince a nueve. */
/* Acotada: si crece, empuja la columna de acciones fuera del contenedor y el
   botón de eliminar queda cortado. El título trunca con puntos suspensivos y
   el completo sigue en el title. */
.celda-pieza { min-width: 170px; max-width: 250px; }
.pieza-cliente {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-tenue);
  text-decoration: none; margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pieza-cliente:hover { color: var(--marca-texto); text-decoration: underline; }
.pieza-titulo {
  display: block; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pieza-titulo a { color: inherit; text-decoration: none; }
.pieza-titulo a:hover { text-decoration: underline; color: var(--marca-texto); }

/* El desglose es detalle de una fila, no algo que se compare entre filas:
   sigue ahí y sigue legible, pero deja de competir con lo que sí importa. */
.col-detalle {
  font-size: 12.5px; color: var(--texto-tenue);
  padding-left: var(--espacio-sm); padding-right: var(--espacio-sm);
}
th.col-detalle { font-weight: 500; }
/* En pantallas estrechas el desglose es lo primero que sobra: son las cuatro
   columnas menos importantes, y esconderlas deja visible la de acciones en
   vez de dejar el botón de eliminar fuera del borde. El dato no se pierde,
   sigue en la fila de edición. */
@media (max-width: 1400px) {
  .col-detalle { display: none; }
}

/* --- Bloque plegable ---
   <details> nativo: sin JS, accesible con teclado, y recuerda su estado
   mientras dure la página. Para acciones ocasionales que no deben ocupar
   sitio encima de lo que se mira a diario. */
.plegable {
  background: var(--bg-content); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra); margin-bottom: var(--espacio-md);
}
.plegable > summary {
  padding: var(--espacio-md) var(--espacio-xl);
  font-size: 14px; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: var(--espacio-sm);
  border-radius: 10px;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid var(--texto-tenue); border-bottom: 2px solid var(--texto-tenue);
  transform: rotate(-45deg); transition: transform var(--transicion);
}
.plegable[open] > summary::before { transform: rotate(45deg); }
.plegable > summary:hover { background: var(--gris-fondo); }
.plegable-cuerpo { padding: 0 var(--espacio-xl) var(--espacio-lg); }

/* --- Barra de filtros ---
   Antes cada filtro vivía en su propia tarjeta con título "Filtrar": 110px
   de caja para dos desplegables. Ahora es una fila. */
.barra-filtros {
  display: flex; flex-wrap: wrap; gap: var(--espacio-md);
  align-items: flex-end; margin-bottom: var(--espacio-md);
}
.barra-filtros label {
  margin: 0; font-size: 11.5px; font-weight: 600; color: var(--texto-tenue);
  display: flex; flex-direction: column; gap: var(--espacio-xs); min-width: 170px;
}
.barra-filtros select { font-size: 13px; }

/* ============================================================
   ESTADOS DE INTERACCIÓN
   Había 33 reglas de hover y prácticamente nada más: sin foco visible no se
   puede usar con teclado, sin deshabilitado ni carga se envía dos veces el
   mismo formulario, y sin error de campo el fallo solo se ve arriba del todo.
   ============================================================ */

/* --- Foco ---
   :focus-visible y no :focus, para que el anillo salga al tabular pero no al
   hacer clic con el ratón. */
a:focus-visible, button:focus-visible, select:focus-visible,
textarea:focus-visible, input:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--marca-texto);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sobre fondo azul el anillo azul desaparece: ahí va blanco. */
.btn-primario:focus-visible, .pestana-cliente.activo:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 114, 216, .45);
}

/* --- Activo (mientras se mantiene pulsado) --- */
.btn:active:not(:disabled), .pestana-seccion:active, .pestana-cliente:active {
  transform: translateY(1px);
}

/* --- Deshabilitado ---
   Se cubre también aria-disabled porque un <a> no admite el atributo
   disabled y en la app hay acciones que son enlaces. */
.btn:disabled, .btn[aria-disabled="true"],
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover {
  filter: none;
  transform: none;
}
input:disabled, select:disabled, textarea:disabled { background: var(--gris-fondo); }

/* --- Carga ---
   El botón conserva su ancho para que la fila no dé un salto al enviarse. */
.btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: #fff;
  animation: girar 620ms linear infinite;
}
.btn:not(.btn-primario):not(.btn-azul)[aria-busy="true"]::after { color: var(--texto); }
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Error de campo --- */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--rojo);
  background: var(--rojo-fondo);
}
input[aria-invalid="true"]:focus-visible { outline-color: var(--rojo); }
.campo-error {
  display: flex; align-items: flex-start; gap: var(--espacio-xs);
  color: var(--rojo); font-size: 12px; font-weight: 600; margin-top: var(--espacio-xs);
}
.campo-error::before { content: "!";
  flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--rojo); color: #fff; font-size: 10px; line-height: 14px;
  text-align: center; font-weight: 700;
}

/* --- Vacío ---
   Se refuerza el que ya existía: antes era una frase suelta y centrada en
   mitad de la nada, sin decir qué va a aparecer ahí. */
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation-duration: 2s; }
  .btn:active:not(:disabled) { transform: none; }
}

/* --- Código en línea y campos de fórmula --- */
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em; background: var(--gris-fondo); color: var(--texto);
  padding: 1px 5px; border-radius: 4px;
}
textarea.mono, input.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

/* --- Respeta la preferencia del sistema de reducir animaciones --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Cuentas de redes del cliente: una fila por cuenta --- */
.fila-cuenta {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.fila-cuenta select { width: 148px; flex-shrink: 0; margin-top: 0; }
.fila-cuenta input { flex: 1; min-width: 0; margin-top: 0; }
@media (max-width: 540px) {
  .fila-cuenta { flex-wrap: wrap; }
  .fila-cuenta select, .fila-cuenta input { width: 100%; flex: none; }
}

/* --- Calendario de contenido: piezas dentro de cada día --- */
.pieza {
  display: block; margin-top: 4px; padding: 5px 7px;
  background: var(--bg-content); border: 1px solid var(--borde);
  border-radius: 6px; font-size: 11.5px; line-height: 1.35;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.pieza:hover { border-color: var(--marca); box-shadow: var(--sombra); }
.pieza-cliente {
  display: block; font-weight: 700; color: var(--marca-profundo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pieza-titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--texto);
}
.pieza-etiquetas { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.pieza-etiquetas .tag { font-size: 10px; padding: 0 5px; }

/* Las casillas de un día crecen con su contenido, a diferencia del
   calendario de reuniones, que solo muestra puntos. */
.calendario-celda { min-height: 104px; align-items: stretch; }

/* Campos de tipo lista múltiple en el formulario de contenido. */
.casillas-opciones { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.casilla-opcion {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--texto); font-weight: 500;
}
.casilla-opcion input { width: auto; margin: 0; }
.inactivo-campo { opacity: 0.6; }

/* --- Fase del proceso: destacada en la pieza del calendario --- */
.pieza { border-left-width: 3px; }
.pieza-fase-gris     { border-left-color: var(--texto-tenue); }
.pieza-fase-azul     { border-left-color: var(--azul); }
.pieza-fase-verde    { border-left-color: var(--verde); }
.pieza-fase-amarillo { border-left-color: var(--amarillo); }
.pieza-fase-rojo     { border-left-color: var(--rojo); }

.pieza-fase {
  display: inline-block; margin-top: 3px; padding: 1px 7px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.pieza-fase.tono-gris     { background: var(--gris-fondo);     color: var(--texto-tenue); }
.pieza-fase.tono-azul     { background: var(--azul-fondo);     color: var(--azul); }
.pieza-fase.tono-verde    { background: var(--verde-fondo);    color: var(--verde); }
.pieza-fase.tono-amarillo { background: var(--amarillo-fondo); color: var(--amarillo); }
.pieza-fase.tono-rojo     { background: var(--rojo-fondo);     color: var(--rojo); }

/* --- Banda de fase en la ficha de una pieza --- */
.fase-banda {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px; margin-bottom: 18px;
  border: 1px solid var(--borde); background: var(--bg-content);
  border-left: 5px solid var(--texto-tenue);
}
.fase-banda.tono-azul     { border-left-color: var(--azul);     background: var(--azul-fondo); }
.fase-banda.tono-verde    { border-left-color: var(--verde);    background: var(--verde-fondo); }
.fase-banda.tono-amarillo { border-left-color: var(--amarillo); background: var(--amarillo-fondo); }
.fase-banda.tono-rojo     { border-left-color: var(--rojo);     background: var(--rojo-fondo); }
.fase-banda strong { font-size: 18px; }
.fase-etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue); }
.fase-punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* --- Ficha de lectura --- */
dl.ficha { display: grid; grid-template-columns: 190px 1fr; gap: 10px 16px; margin: 0; font-size: 13.5px; }
dl.ficha dt { color: var(--texto-tenue); font-weight: 600; }
dl.ficha dd { margin: 0; }
.texto-multilinea { white-space: pre-wrap; }
@media (max-width: 640px) {
  dl.ficha { grid-template-columns: 1fr; gap: 2px 0; }
  dl.ficha dd { margin-bottom: 10px; }
}

/* --- Opciones de un campo de lista: una fila por opción --- */
.fila-opcion { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fila-opcion input { flex: 1; min-width: 0; margin-top: 0; }
.fila-opcion select { width: 130px; flex-shrink: 0; margin-top: 0; }
@media (max-width: 540px) {
  .fila-opcion { flex-wrap: wrap; }
  .fila-opcion input, .fila-opcion select { width: 100%; flex: none; }
}

/* --- Ventana emergente (ficha de contenido) --- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(15, 15, 15, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--transicion);
}
.modal-fondo.visible { opacity: 1; pointer-events: auto; }
.modal-caja {
  background: var(--bg-content); border-radius: 14px;
  box-shadow: var(--sombra-grande); border: 1px solid var(--borde);
  width: min(860px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(10px) scale(0.99); transition: transform var(--transicion);
}
.modal-fondo.visible .modal-caja { transform: none; }
.modal-cabecera {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--borde);
}
.modal-titulo { font-size: 17px; font-weight: 700; margin: 0; }
.modal-sub { font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }
.modal-cerrar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--texto-tenue); padding: 4px; border-radius: var(--radio);
  display: flex; flex-shrink: 0;
}
.modal-cerrar:hover { background: var(--bg-hover); color: var(--texto); }
.modal-cerrar svg { width: 20px; height: 20px; }
.modal-cuerpo { padding: 18px 20px; overflow-y: auto; }
/* Dentro del popup las tarjetas de la ficha no repiten marco ni sombra. */
.modal-cuerpo .card { border: none; box-shadow: none; padding: 0; margin-bottom: 18px; }
.modal-cuerpo .grid-2 { grid-template-columns: 1fr; gap: 18px; }
.modal-pie {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--borde);
}
@media (max-width: 640px) {
  .modal-fondo { padding: 0; align-items: flex-end; }
  .modal-caja { max-height: 92vh; border-radius: 14px 14px 0 0; }
}
html[data-reducir-movimiento="si"] .modal-fondo,
html[data-reducir-movimiento="si"] .modal-caja { transition: none; }

/* Punto de color del campo en la ficha, para reconocerlo de un vistazo. */
.punto-campo {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; background: var(--texto-tenue);
}
.punto-campo.tono-azul     { background: var(--azul); }
.punto-campo.tono-verde    { background: var(--verde); }
.punto-campo.tono-amarillo { background: var(--amarillo); }
.punto-campo.tono-rojo     { background: var(--rojo); }

/* --- Calendario de leads: lo que rindió cada día --- */
.dia-leads {
  margin-top: 4px; padding: 5px 7px; border-radius: 6px;
  border: 1px solid var(--borde); border-left: 3px solid var(--texto-tenue);
  background: var(--bg-content); font-size: 11px; line-height: 1.4;
}
.dia-leads-azul  { border-left-color: var(--azul); }
.dia-leads-verde { border-left-color: var(--verde); }
.dia-leads-gris  { border-left-color: var(--texto-tenue); opacity: .75; }
.dia-leads .tag { font-size: 10px; padding: 0 5px; }
.dia-dolor {
  display: block; margin: 3px 0 2px; color: var(--texto-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dia-cifras {
  display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 2px 0 3px;
  font-variant-numeric: tabular-nums;
}

/* Vista previa de una plantilla de correo: texto tal cual saldrá, sin que las
   líneas largas obliguen a desplazar la página. */
.vista-previa {
  margin-top: var(--espacio-md); padding: var(--espacio-lg);
  background: var(--gris-fondo); border: 1px solid var(--borde);
  border-radius: 10px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word;
}

/* En claro, el día de hoy es un círculo azul oscuro con el número en blanco.
   En oscuro ese azul se aclara y el blanco encima se queda en 2.14 de
   contraste: justo el día que más se mira es el que peor se lee. */
html[data-tema="oscuro"] .calendario-celda.hoy .calendario-numero,
html[data-tema="sistema"] .calendario-celda.hoy .calendario-numero {
  color: var(--bg-content);
}
@media (prefers-color-scheme: light) {
  html[data-tema="sistema"] .calendario-celda.hoy .calendario-numero { color: #fff; }
}

/* La celda que sustituye a las cuatro columnas del desglose se centra sobre
   ellas; alineada a la derecha parecia el valor de "Guardados". */
table.tabla-notion td.col-detalle[colspan] { text-align: center; }

/* --- Elegir cliente en Leads ---
   En escritorio caben las pastillas; en el móvil, con treinta clientes, se
   apilaban en quince filas y tapaban la pantalla entera. Ahí se cambia por
   un desplegable, que es un toque en vez de un muro. --- */
.selector-cliente-movil { display: none; }
@media (max-width: 720px) {
  .pestanas-cliente-escritorio { display: none; }
  .selector-cliente-movil {
    display: flex; align-items: center; gap: var(--espacio-sm);
    margin-bottom: var(--espacio-md);
  }
  .selector-cliente-movil label {
    font-size: 12px; font-weight: 600; color: var(--texto-tenue);
    margin: 0; white-space: nowrap;
  }
  .selector-cliente-movil select { flex: 1; min-height: 44px; }
}

/* Aviso que ocupa el sitio de una gráfica cuando no hay nada medido. Un
   lienzo vacío con eje de 0 a 1 se lee como "todo a cero", que es distinto. */
.grafica-sin-datos {
  margin: 0; padding: var(--espacio-xl) var(--espacio-lg);
  text-align: center; color: var(--texto-tenue); font-size: 13px;
  line-height: 1.5; background: var(--gris-fondo); border-radius: 10px;
}

/* --- Franja del modo demostración ---
   Ámbar y en todas las pantallas: el fallo caro de este modo es confundir un
   dato inventado con uno real, así que no puede pasar desapercibido. --- */
.franja-demo {
  display: flex; align-items: center; gap: var(--espacio-sm);
  flex-wrap: wrap;
  padding: var(--espacio-sm) var(--espacio-xl);
  background: var(--amarillo-fondo); color: var(--amarillo);
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
}
.franja-demo strong { font-weight: 700; }
.franja-demo span { color: var(--texto); }
.franja-demo form { margin-left: auto; }
.franja-demo button {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; min-height: 32px;
}
.franja-demo button:hover { background: rgba(0, 0, 0, 0.06); }
@media (max-width: 720px) {
  .franja-demo { padding: var(--espacio-sm) var(--espacio-md); }
  .franja-demo form { margin-left: 0; width: 100%; }
  .franja-demo button { width: 100%; min-height: 40px; }
}

/* --- Hoja mensual de Leads ---
   Es una rejilla de doce columnas editables, así que las celdas van sin
   marco: con un recuadro por cada una la tabla se vuelve ilegible. --- */
.tabla-mensual .celda-mes {
  width: 100%; min-width: 62px; padding: 4px 6px; text-align: right;
  border: 1px solid transparent; background: transparent;
  border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.tabla-mensual .celda-mes:hover { border-color: var(--borde); }
.tabla-mensual .celda-mes:focus {
  border-color: var(--azul); background: var(--bg-content); outline: 0;
}
.tabla-mensual .fila-grupo td {
  background: var(--gris-fondo); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--texto-tenue);
}
.enlace-quitar {
  border: 0; background: transparent; color: var(--texto-tenue);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px;
  min-height: 24px;
}
.enlace-quitar:hover { color: var(--rojo); }
@media (max-width: 720px) {
  .tabla-mensual .celda-mes { min-width: 54px; }
}

/* --- Aviso en ventana ---
   Para lo que hay que leer antes de seguir. Sustituye a mandar al usuario a
   una página de error, que además le hacía perder lo que estaba escribiendo. */
.popup-aviso {
  border: 1px solid var(--borde); border-radius: 14px;
  padding: var(--espacio-xl); max-width: 440px; width: calc(100% - 32px);
  background: var(--bg-content); color: var(--texto);
  box-shadow: var(--sombra-grande);
}
.popup-aviso::backdrop { background: rgba(15, 15, 15, 0.45); }
.popup-aviso h2 { margin: 0 0 var(--espacio-sm); font-size: 16px; }
.popup-aviso p { margin: 0 0 var(--espacio-lg); font-size: 14px; line-height: 1.55; }
.popup-aviso form { margin: 0; display: flex; justify-content: flex-end; }

/* --- Carpeta de clientes inactivos ---
   Las bajas no se borran, pero tampoco tienen por qué competir por la
   atención con los que están en marcha. Se pliegan aparte. --- */
.carpeta-inactivos { margin-top: var(--espacio-2xl); }
.carpeta-inactivos > summary {
  display: flex; align-items: center; gap: var(--espacio-sm);
  padding: var(--espacio-md); cursor: pointer; list-style: none;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--gris-fondo); font-weight: 600; font-size: 14px;
  min-height: 48px;
}
.carpeta-inactivos > summary::-webkit-details-marker { display: none; }
.carpeta-inactivos > summary:hover { background: var(--bg-hover); }
.carpeta-inactivos > summary:focus-visible {
  outline: 2px solid var(--marca-texto); outline-offset: 2px;
}
.carpeta-icono { display: inline-flex; color: var(--texto-tenue); }
.carpeta-icono svg { width: 18px; height: 18px; }
/* La flecha dice si está abierta o cerrada sin depender del triángulo nativo,
   que en Safari no se puede quitar ni girar. */
.carpeta-inactivos > summary::after {
  content: "›"; margin-left: auto; font-size: 20px; line-height: 1;
  color: var(--texto-tenue); transition: transform var(--transicion);
}
.carpeta-inactivos[open] > summary::after { transform: rotate(90deg); }
.carpeta-inactivos[open] > summary { border-radius: 12px 12px 0 0; }
.clientes-galeria-apagada {
  padding: var(--espacio-md); border: 1px solid var(--borde); border-top: 0;
  border-radius: 0 0 12px 12px;
}
/* Apagadas, pero legibles: al pasar por encima vuelven a su color entero. */
.clientes-galeria-apagada .cliente-card { opacity: 0.72; }
.clientes-galeria-apagada .cliente-card:hover,
.clientes-galeria-apagada .cliente-card:focus-visible { opacity: 1; }

/* Crédito del autor, al pie de Configuración y Accesibilidad. */
.credito-autor { text-align: center; margin: var(--espacio-2xl) 0 var(--espacio-md); font-size: 12px; color: var(--texto-tenue); }
.credito-autor a { color: var(--marca-texto); text-decoration: none; }
.credito-autor a:hover { text-decoration: underline; }

/* Texto de ayuda debajo de un campo o formulario. */
.ayuda { font-size: 12px; color: var(--texto-tenue); line-height: 1.5; }

/* =========================================================================
   Organigrama y Biblioteca
   ========================================================================= */

/* --- Conmutador de vista (árbol / tabla), en la barra superior --- */
.vista-toggle { display: inline-flex; gap: 2px; background: var(--gris-fondo);
  border-radius: var(--radio); padding: 3px; }
.vista-toggle a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--texto-tenue);
  text-decoration: none; transition: background var(--transicion), color var(--transicion);
}
.vista-toggle a svg { width: 15px; height: 15px; }
.vista-toggle a:hover { color: var(--texto); }
.vista-toggle a.activo { background: var(--bg-content); color: var(--marca-profundo);
  box-shadow: var(--sombra); }

/* --- Botones sólo-icono (editar/eliminar en las tarjetas) --- */
.btn-iconico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 7px; cursor: pointer;
  background: var(--gris-fondo); color: var(--texto-tenue);
  transition: background var(--transicion), color var(--transicion);
}
.btn-iconico:hover { background: var(--azul-fondo); color: var(--marca-profundo); }
.btn-iconico svg { width: 15px; height: 15px; }
.btn-iconico-peligro:hover { background: var(--rojo-fondo); color: var(--rojo); }
.btn-iconico form, .biblio-card-acciones form { margin: 0; }

/* --- Organigrama: vista árbol --- */
.org-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--espacio-lg);
}
.org-nodo {
  display: flex; flex-direction: column; gap: var(--espacio-sm);
  background: var(--bg-content); border: 1px solid var(--borde);
  border-radius: 10px; padding: var(--espacio-md); box-shadow: var(--sombra);
}
.org-cabeza { display: flex; align-items: center; gap: var(--espacio-sm); }
.org-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca-degradado); color: #fff; font-weight: 700; font-size: 14px;
}
.org-avatar img { width: 100%; height: 100%; object-fit: cover; }
.org-cabeza-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.org-cabeza-txt strong { font-size: 14px; }
.org-rol { font-size: 11.5px; color: var(--texto-tenue); }
.org-conteo { margin-left: auto; flex-shrink: 0; }
.org-clientes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.org-vacio { font-size: 12.5px; }
.org-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px;
  background: var(--gris-fondo); border-radius: 20px; font-size: 12.5px;
}
.org-chip > a { color: var(--texto); text-decoration: none; font-weight: 500; }
.org-chip > a:hover { color: var(--marca-profundo); text-decoration: underline; }
.org-chip-suelto { padding: 4px 12px; }
.org-chip-suelto:hover { background: var(--azul-fondo); }
.org-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--texto-tenue); font-size: 15px; line-height: 1;
  transition: background var(--transicion), color var(--transicion);
}
.org-chip-x:hover { background: var(--rojo-fondo); color: var(--rojo); }
.org-asignar { display: flex; gap: 6px; margin-top: 2px; }
.org-asignar select { flex: 1; min-width: 0; }
.org-fila-empleado { display: flex; align-items: center; gap: 8px; }
.org-fila-empleado .org-avatar { width: 28px; height: 28px; font-size: 12px; }
.org-sin-asignar { margin-top: var(--espacio-lg); }
.org-sin-asignar h2 { font-size: 15px; margin: 0 0 var(--espacio-sm); }

/* --- Biblioteca --- */
.biblio-acciones-top { display: flex; gap: var(--espacio-sm); }
.miga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; margin-bottom: var(--espacio-lg); }
.miga a { color: var(--texto-tenue); text-decoration: none; }
.miga a:hover { color: var(--marca-profundo); text-decoration: underline; }
.miga-sep { color: var(--texto-tenue); }
.miga-actual { color: var(--texto); font-weight: 600; }

.biblio-card { position: relative; }
.biblio-card-main {
  display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none;
}
.biblio-portada { height: 118px; overflow: hidden; background: var(--gris-fondo); flex-shrink: 0; }
.biblio-portada img { width: 100%; height: 100%; object-fit: cover; }
.biblio-icono {
  height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--gris-fondo); color: var(--texto-tenue);
}
.biblio-icono svg { width: 34px; height: 34px; }
.biblio-icono-carpeta { background: var(--amarillo-fondo); color: var(--amarillo); }
.biblio-icono-enlace { background: var(--azul-fondo); color: var(--marca-profundo); }
.biblio-icono-video { background: var(--amarillo-fondo); color: var(--amarillo); }
.biblio-icono-documento { background: var(--gris-fondo); color: var(--texto-tenue); }
.biblio-card-txt { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.biblio-card-txt strong { font-size: 14px; line-height: 1.3; }
.biblio-meta { font-size: 12px; }
.biblio-desc {
  font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.biblio-tipo { align-self: flex-start; margin-top: auto; }
.biblio-card-acciones {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 4px;
  opacity: 0; transition: opacity var(--transicion);
}
.biblio-card:hover .biblio-card-acciones,
.biblio-card:focus-within .biblio-card-acciones { opacity: 1; }
.biblio-card-acciones .btn-iconico {
  background: var(--bg-content); box-shadow: var(--sombra); width: 28px; height: 28px;
}
@media (hover: none) { .biblio-card-acciones { opacity: 1; } }

/* --- Modales con <dialog> (crear/editar en la Biblioteca) --- */
dialog.modal {
  border: 1px solid var(--borde); border-radius: 14px; padding: var(--espacio-xl);
  max-width: 520px; width: calc(100% - 32px);
  background: var(--bg-content); color: var(--texto); box-shadow: var(--sombra-grande);
}
dialog.modal::backdrop { background: rgba(15, 15, 15, 0.45); }
dialog.modal h2 { margin: 0 0 var(--espacio-lg); font-size: 17px; }
dialog.modal label { display: block; margin-bottom: var(--espacio-md); font-size: 13px; font-weight: 600; }
dialog.modal label input, dialog.modal label select { margin-top: 4px; font-weight: 400; }
dialog.modal .grid-2 { margin-bottom: 0; }
.modal-acciones { display: flex; justify-content: flex-end; gap: var(--espacio-sm);
  margin-top: var(--espacio-lg); }

/* =========================================================================
   Organigrama por Account Manager · Checklist · Notificaciones
   ========================================================================= */

/* --- Organigrama: árbol agrupado por AM (como la hoja de referencia) --- */
.org-grupos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--espacio-lg); align-items: start;
}
.org-grupo { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
  box-shadow: var(--sombra); background: var(--bg-content); }
.org-grupo-cabeza { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  color: #fff; font-size: 15px; }
.org-grupo-cabeza .org-avatar { background: rgba(255, 255, 255, 0.28); color: #fff; }
.org-grupo-conteo { margin-left: auto; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.22); padding: 2px 9px; border-radius: 20px; }
.org-grupo-cabeza-vacia { background: var(--gris-fondo); color: var(--texto); }
.org-grupo-cabeza-vacia .org-grupo-conteo { background: var(--bg-content); color: var(--texto-tenue); }
.org-tabla-grupo { width: 100%; }
.org-grupo-vacio { padding: 14px; margin: 0; font-size: 13px; }

.org-asignar-mini { display: inline-flex; margin: 0; }
.org-asignar-mini select { font-size: 12px; padding: 4px 8px; min-height: 0;
  color: var(--texto-tenue); background: var(--gris-fondo); border-style: dashed; }
/* Cuando ya hay alguien asignado, el "+" se guarda y aparece al pasar el cursor,
   para que la fila se lea limpia. En táctil se muestra siempre. */
.org-asignar-oculta { visibility: hidden; }
tr:hover .org-asignar-oculta { visibility: visible; }
@media (hover: none) { .org-asignar-oculta { visibility: visible; } }

/* --- Checklist diario --- */
.checklist-lista { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.checklist-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--borde);
  transition: background var(--transicion), border-color var(--transicion); }
.checklist-item:hover { border-color: var(--azul); }
.checklist-item input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.checklist-item:has(input:checked) { background: var(--verde-fondo); border-color: var(--verde); }
.checklist-nombre { font-size: 14px; }

/* --- Notificaciones --- */
.notif-lista { display: flex; flex-direction: column; gap: 8px; }
.notif-item { display: flex; gap: 12px; padding: 14px 16px; background: var(--bg-content);
  border: 1px solid var(--borde); border-radius: 10px; }
.notif-no-leida { border-left: 3px solid var(--azul); }
.notif-punto { width: 8px; height: 8px; border-radius: 50%; background: transparent;
  margin-top: 6px; flex-shrink: 0; }
.notif-no-leida .notif-punto { background: var(--azul); }
.notif-cuerpo { flex: 1; min-width: 0; }
.notif-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.notif-fecha { font-size: 12px; white-space: nowrap; }
.notif-texto { margin: 6px 0 0; font-size: 13px; white-space: pre-line; color: var(--texto); }
.notif-acciones { display: flex; gap: 8px; margin-top: 10px; }
.notif-acciones form { margin: 0; }

/* --- Biblioteca: espacio en disco --- */
.biblio-disco { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-content); border: 1px solid var(--borde); border-radius: 10px;
  margin-bottom: var(--espacio-lg); }
.biblio-disco-icono { width: 22px; height: 22px; color: var(--texto-tenue); flex-shrink: 0; }
.biblio-disco-cuerpo { flex: 1; min-width: 0; }
.biblio-disco-txt { display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; }
.biblio-disco-barra { height: 8px; background: var(--gris-fondo); border-radius: 20px; overflow: hidden; }
.biblio-disco-barra span { display: block; height: 100%; background: var(--marca-degradado-boton);
  border-radius: 20px; }
.biblio-disco-lleno .biblio-disco-barra span { background: var(--rojo); }

/* --- Roles: emite/recibe notificaciones --- */
.rol-notif { display: flex; align-items: center; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--borde); }
.rol-notif:last-child { border-bottom: none; }
.rol-notif-txt { flex: 1; min-width: 0; }
.rol-notif-check { display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; white-space: nowrap; margin: 0; cursor: pointer; }
.rol-notif-check input { width: auto; }