/* ──────────────────────────────────────────────────────────────────────────
   static/colmena.css — el estilo "colmena" del módulo de Empleados, para el
   resto de las páginas de Reclut.ai.

   Copia lo visual del centro de mando (static/empleados/mando.js, secciones
   5.4 y 6.4 de docs/roadmap-rediseno-empleados.md) sin su lógica: zona oscura
   con panal y circuito, ceja, título, botones, pestañas hexagonales y cajas de
   indicadores. Empleados sigue usando su propio mando.js; esto no lo toca.

   Todo cuelga de .cm-hero para no pisar nada de cada página. Las pestañas y
   botones de cada página conservan sus clases e ids originales (su JS los
   busca por ahí) y solo se les agrega cm-tab / cm-tabs.

   Uso mínimo:
     <section class="cm-hero">
       <header class="cm-cab">
         <div class="cm-id">
           <span class="cm-hex-ico"><svg …/></span>
           <div><div class="cm-ceja">Área</div>
                <h1 class="cm-titulo">Título</h1>
                <div class="cm-sub">Subtítulo</div></div>
         </div>
         <div class="cm-acciones"> …botones .btn… </div>
       </header>
       <nav class="cm-tabs"> …botones con clase cm-tab y .active… </nav>
       <div class="cm-kpis"> <div class="cm-kpi"><div class="cm-kpi-in">
         <span class="cm-kpi-l">Etiqueta</span><b class="cm-kpi-v">12</b>
         <span class="cm-kpi-s">detalle</span></div></div> </div>
     </section>
   ────────────────────────────────────────────────────────────────────────── */

/* El fondo de la zona oscura, como variable para que lo usen también barras
   que no pueden ser .cm-hero (p. ej. la barra fija de Jornaleros, que necesita
   overflow visible para su lista desplegable). Circuito arriba a la derecha +
   panal + azul de la barra lateral: las mismas figuras SVG de mando.js. */
:root {
  --cm-fondo:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200' viewBox='0 0 420 200'%3E%3Cg fill='none' stroke='%2398c82e' stroke-opacity='.45' stroke-width='1.2'%3E%3Cpath d='M420 10 H300 L286 24 H150'/%3E%3Cpath d='M332 0 V4 L324 12'/%3E%3Cpath d='M410 24 V150 L400 160 V200'/%3E%3C/g%3E%3Cg fill='%2398c82e' fill-opacity='.8'%3E%3Ccircle cx='150' cy='24' r='3'/%3E%3Ccircle cx='400' cy='197' r='3'/%3E%3C/g%3E%3C/svg%3E") top right / 420px 200px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.249' height='42'%3E%3Cpath d='M12.124 0 L24.249 7 L24.249 21 L12.124 28 L0 21 L0 7 Z M12.124 28 L12.124 42' fill='none' stroke='%2398c82e' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24.249px 42px repeat,
    var(--rail-bg);
  --cm-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
/* La ceja ("Área") también fuera de .cm-hero */
.cm-ceja { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-light); line-height: 1.3; }

.cm-hero {
  /* Variables propias que apuntan a los tokens de base.css (sección 5.4) */
  --m-tinta: var(--rail-ink);
  --m-tenue: var(--rail-ink-dim);
  --m-caja: #0b4578;                  /* mezcla de --blue y --blue-mid */
  --m-caja-hover: var(--blue-mid);
  --m-acento: var(--green);
  --m-acento-claro: var(--green-light);
  --m-alerta: #f69898;                /* --red mezclado al 55 % con blanco */
  --m-alerta: color-mix(in srgb, var(--red) 55%, white);
  --m-borde: rgba(255,255,255,.16);
  --m-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --m-chip: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  --m-oct: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  position: relative; overflow: hidden; isolation: isolate;
  flex-shrink: 0;   /* en páginas de alto fijo (chat) no se aplasta */
  margin-bottom: 20px; padding: 28px 32px 30px;
  background: var(--cm-fondo);
  color: var(--m-tinta);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-blue);
  line-height: 1.3;
}
.cm-hero button { font-family: inherit; }
.cm-hero :focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }

/* Encabezado */
.cm-hero .cm-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cm-hero .cm-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cm-hero .cm-hex-ico { width: 64px; height: 56px; flex-shrink: 0; clip-path: var(--m-hex); background: var(--m-acento);
  color: var(--blue); display: flex; align-items: center; justify-content: center; }
.cm-hero .cm-hex-ico svg { width: 28px; height: 28px; }
.cm-hero .cm-titulo { margin: 2px 0; font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.cm-hero .cm-sub { font-size: 15px; color: var(--m-tenue); max-width: 720px; }
.cm-hero .cm-sub b { color: #fff; font-weight: 700; }

/* Botones dentro de la zona oscura: los .btn de la página se adaptan solos.
   Texto azul sobre verde (blanco sobre verde no se lee, sección 5.4). */
.cm-hero .cm-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-hero .btn { border-radius: 12px; min-height: 40px; box-shadow: none; }
.cm-hero .btn-primary { background: var(--m-acento); color: var(--blue); border-color: var(--m-acento); font-weight: 700; }
.cm-hero .btn-primary:hover { background: var(--m-acento-claro); color: var(--blue); }
.cm-hero .btn-outline, .cm-hero .btn-ghost, .cm-hero .btn-secondary {
  background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--m-tinta); }
.cm-hero .btn-outline:hover, .cm-hero .btn-ghost:hover, .cm-hero .btn-secondary:hover {
  background: rgba(255,255,255,.08); color: #fff; transform: none; }

/* Pestañas de sección: hexágono alargado. Se resetea lo que cada página le
   haya puesto a sus pestañas (subrayados, bordes, radios). */
.cm-hero .cm-tabs { margin: 22px 0 0; padding: 0; border: 0; background: none; box-shadow: none;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-hero .cm-tab { height: 44px; margin: 0; padding: 0 24px; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 0; box-shadow: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  clip-path: var(--m-chip); background: rgba(255,255,255,.08); color: var(--m-tinta);
  font-size: 14px; font-weight: 600; transition: var(--transition); }
.cm-hero .cm-tabs .cm-tab::before, .cm-hero .cm-tabs .cm-tab::after { display: none; }
.cm-hero .cm-tab:hover { background: rgba(255,255,255,.14); color: #fff; }
.cm-hero .cm-tab.active, .cm-hero .cm-tab[aria-selected="true"], .cm-hero .cm-tab.on {
  background: var(--m-acento); color: var(--blue); font-weight: 700; }
.cm-hero .cm-tab[hidden] { display: none; }
.cm-hero .cm-tab .badge, .cm-hero .cm-tab .tab-badge, .cm-hero .cm-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--m-alerta); color: var(--blue);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* Indicadores principales: cajas de esquinas cortadas */
.cm-hero .cm-kpis { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cm-hero .cm-kpi { display: flex; padding: 1px; border: 0; text-align: left; clip-path: var(--m-oct);
  background: rgba(152,200,46,.4); color: inherit; }
.cm-hero button.cm-kpi { cursor: pointer; font: inherit; }
.cm-hero .cm-kpi-in { flex: 1; min-height: 104px; padding: 18px 22px; clip-path: var(--m-oct); background: var(--m-caja);
  display: flex; flex-direction: column; gap: 4px; transition: var(--transition); }
.cm-hero button.cm-kpi:hover .cm-kpi-in { background: var(--m-caja-hover); }
.cm-hero .cm-kpi-l { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-tenue); }
.cm-hero .cm-kpi-v { font-size: 34px; line-height: 1; font-weight: 800; color: #fff; }
.cm-hero .cm-kpi-v.tono-verde { color: var(--m-acento-claro); }
.cm-hero .cm-kpi-v.tono-rojo { color: var(--m-alerta); }
.cm-hero .cm-kpi-s { font-size: 13px; color: var(--m-tenue); }

/* Texto auxiliar y piezas pequeñas que algunas páginas ponen en su encabezado */
.cm-hero .cm-nota { font-size: 13px; color: var(--m-tenue); }
.cm-hero .cm-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--m-borde); color: var(--m-tinta); font-size: 12px; font-weight: 600; }

/* Variante compacta: para pantallas de trabajo donde el espacio vertical es
   oro (chat, formularios de configuración). Igual que el centro de mando
   plegado de Empleados: solo la franja con ceja y título. */
.cm-hero.cm-compacto { padding: 18px 28px; margin-bottom: 16px; }
.cm-hero.cm-compacto .cm-hex-ico { width: 46px; height: 40px; }
.cm-hero.cm-compacto .cm-hex-ico svg { width: 22px; height: 22px; }
.cm-hero.cm-compacto .cm-id { gap: 14px; }
.cm-hero.cm-compacto .cm-titulo { font-size: 26px; }
.cm-hero.cm-compacto .cm-tabs { margin-top: 14px; }

/* Tamaños de pantalla */
@media (max-width: 860px) {
  .cm-hero { padding: 22px 20px 24px; background-size: 0 0, 24.249px 42px, auto; }
  .cm-hero .cm-titulo { font-size: 30px; }
}
@media (max-width: 640px) {
  .cm-hero { padding: 18px 16px 20px; --m-oct: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
  .cm-hero .cm-id { gap: 12px; }
  .cm-hero .cm-hex-ico { width: 46px; height: 40px; }
  .cm-hero .cm-hex-ico svg { width: 22px; height: 22px; }
  .cm-hero .cm-ceja { font-size: 10.5px; letter-spacing: .1em; }
  .cm-hero .cm-titulo { font-size: 26px; }
  .cm-hero .cm-sub { font-size: 13.5px; }
  .cm-hero .cm-acciones { width: 100%; }
  .cm-hero .cm-acciones .btn { flex: 1 1 auto; justify-content: center; }
  /* Las pestañas, en una sola fila que se desliza de lado */
  .cm-hero .cm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .cm-hero .cm-tabs::-webkit-scrollbar { display: none; }
  .cm-hero .cm-tab { padding: 0 20px; }
  .cm-hero .cm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .cm-hero .cm-kpi-in { min-height: 88px; padding: 14px; }
  .cm-hero .cm-kpi-l { font-size: 10.5px; letter-spacing: .06em; }
  .cm-hero .cm-kpi-v { font-size: 24px; }
  .cm-hero .cm-kpi-s { font-size: 12px; }
}