/* ============================================================
   Tokens de diseño WiPOS Hub — colores oficiales del manual de
   marca (jun 2022). Tipografía: Inter, la misma de wiposcloud.com.
   Azul WiPOS #325CD9 · Celeste #0583F2 · Marino #142559
   Negro #262425 · Gris claro #F2F2F2
   ============================================================ */
:root {
  --bg: #f4f5f9;             /* gris claro con toque marino (rediseño 1b, sep 2026) */
  --card: #ffffff;
  --text: #1c1f2b;           /* negro apenas azulado: una sola tinta con el marino */
  --muted: #667085;
  --border: #e4e7ef;
  --accent: #325cd9;         /* azul WiPOS */
  --accent-2: #0583f2;       /* celeste WiPOS */
  --navy: #142559;           /* marino WiPOS */
  --danger: #c0392b;
  --success: #1c8a4b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ================= Layout con sidebar (WiPOS Hub, Fase 1) ================= */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--navy);
  color: #c6cede;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .18s ease;
}
.sidebar-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 14px 18px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; text-decoration: none; color: #fff;
  letter-spacing: -0.01em; white-space: nowrap;
}
.brand em { font-style: normal; color: var(--accent-2); }
.brand-icon { height: 26px; width: auto; display: block; }
.sidebar .brand-icon { background: #fff; border-radius: 6px; padding: 2px; }

.sidebar-toggle {
  background: rgba(255,255,255,.08); color: #c6cede; border: none;
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px;
  padding: 0; line-height: 1;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.16); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; overflow-y: auto; min-height: 0; }
.sidebar-nav a, .sidebar-admin a {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 11px; border-radius: 8px;
  color: #c6cede; text-decoration: none; font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
}
/* Áreas plegables del menú (sep 2026) */
.nav-grupo { margin-top: 4px; }
.nav-grupo-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer;
  padding: 9px 11px 5px; border-radius: 8px; color: #8b96b3; font-family: inherit;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.nav-grupo-btn:hover { color: #fff; }
.nav-grupo-btn .lbl { flex: 1; min-width: 0; }
.nav-grupo-btn .nav-grupo-badge { flex: 0 0 auto; }
.nav-grupo-btn .ic { width: 14px; height: 14px; transition: transform .15s ease; opacity: .7; flex-shrink: 0; }
.nav-grupo.abierto .nav-grupo-btn .ic { transform: rotate(180deg); }
.nav-grupo.activo .nav-grupo-btn { color: #cfe0ff; }
.nav-grupo.activo:not(.abierto) .nav-grupo-btn { box-shadow: inset 3px 0 0 var(--accent-2); }
.nav-grupo-badge {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--accent-2); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center;
}
.nav-grupo.abierto .nav-grupo-badge { display: none; }
.nav-items { display: none; flex-direction: column; gap: 2px; }
.nav-grupo.abierto .nav-items { display: flex; }
.sidebar-admin { padding: 4px 8px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-nav .nav-inicio { margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-grupo-btn .ic { transition: none; } }
.sidebar-nav a:hover, .sidebar-admin a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav a.on, .sidebar-admin a.on { background: rgba(50,92,217,.55); color: #fff; box-shadow: inset 3px 0 0 var(--accent-2); }
.sidebar-nav .ic { flex-shrink: 0; }
.sidebar-nav .nav-solo-movil { display: none; }
@media (max-width: 820px) {
  .sidebar-nav .nav-solo-movil {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
    color: #fff; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
    background: linear-gradient(90deg, rgba(5,131,242,.28), rgba(50,92,217,.12));
    border: 1px solid rgba(5,131,242,.45); text-align: left; width: 100%; margin: 0;
  }
  .sidebar-nav .nav-solo-movil svg { color: #7fc4ff; }
}
.nav-sep {
  margin: 14px 11px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #7f8aa3;
  white-space: nowrap; overflow: hidden;
}
.sidebar-nav .prox-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 8px;
  color: #6b7690; font-size: 14px; font-weight: 600;
  white-space: nowrap; cursor: default; opacity: .75;
}
.sidebar-nav .prox-item .ic { flex-shrink: 0; opacity: .6; }
.prox-tag {
  margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #7f8aa3; border: 1px solid rgba(255,255,255,.18);
  padding: 1px 6px; border-radius: 999px;
}
.sidebar.collapsed .prox-item { justify-content: center; }

.sidebar-user { border-top: 1px solid rgba(255,255,255,.12); padding: 12px 14px; }
.user-info { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.35; margin-bottom: 8px; white-space: nowrap; overflow: hidden; }
.user-info .user-texto { display: flex; flex-direction: column; min-width: 0; }
.user-info b { color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; }
.user-info .user-texto > span { overflow: hidden; text-overflow: ellipsis; }
.user-links { display: flex; flex-direction: column; gap: 2px; }
.user-links a {
  display: flex; align-items: center; gap: 11px; padding: 6px 3px;
  color: #c6cede; text-decoration: none; font-size: 13px; white-space: nowrap;
}
.user-links a:hover { color: #fff; }
.user-links .ic { flex-shrink: 0; }

/* Colapsado: solo iconos */
.sidebar.collapsed { width: 62px; }
.sidebar.collapsed .lbl { display: none; }
.sidebar.collapsed .sidebar-top { justify-content: center; flex-direction: column; gap: 10px; padding: 14px 8px; }
.sidebar.collapsed .nav-sep { margin: 12px 6px 2px; border-top: 1px solid rgba(255,255,255,.12); height: 1px; }
.sidebar.collapsed .sidebar-nav a, .sidebar.collapsed .sidebar-admin a, .sidebar.collapsed .user-links a { justify-content: center; }
.sidebar.collapsed .nav-grupo-btn { display: none; }
.sidebar.collapsed .nav-items { display: flex !important; }
.sidebar.collapsed .nav-grupo { border-top: 1px solid rgba(255,255,255,.1); padding-top: 4px; margin-top: 4px; }
.sidebar.collapsed .sidebar-admin { padding: 4px 8px; }
.sidebar.collapsed .user-info { justify-content: center; }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mobilebar { display: none; }
.container { max-width: 1040px; width: 100%; margin: 0 auto; padding: 24px; }

/* Móvil: sidebar oculto, barra superior con hamburguesa */
@media (max-width: 820px) {
  .sidebar {
    position: fixed; z-index: 40; height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease;
    width: 240px;
  }
  .sidebar.abierto { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .sidebar.collapsed { width: 240px; }
  .sidebar.collapsed .lbl { display: inline; }
  .sidebar-toggle { display: none; }
  .mobilebar {
    display: flex; align-items: center; gap: 12px;
    background: var(--navy); padding: 10px 14px;
    position: sticky; top: 0; z-index: 30;
  }
  .mobilebar .brand { font-size: 16px; }
  .sidebar-open {
    background: none; border: none; color: #fff; cursor: pointer; padding: 2px 6px; display: inline-flex;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

h1 { font-size: 22px; margin: 8px 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 4px; }
.muted { color: var(--muted); font-size: 13px; }
.badge { font-size: 11px; background: #fdf0e0; color: #a15c00; padding: 2px 8px; border-radius: 999px; }

dl { margin: 0; }
dl dt { font-size: 12px; color: var(--muted); margin-top: 8px; }
dl dd { margin: 0; font-size: 14px; }

label { display: block; font-size: 13px; margin-bottom: 10px; color: var(--muted); }
/* `datetime-local` y `time` faltaban acá desde siempre: se veían como el
   control crudo del navegador, angosto y pegado a su etiqueta, en Avisos,
   Comunicados, la cotización programada y Oportunidades (9 sep 2026). */
input[type=text], input[type=password], input[type=url], input[type=search],
input[type=number], input[type=email], input[type=date], input[type=datetime-local],
input[type=time], textarea, select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  margin-top: 4px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=search]:focus,
input[type=number]:focus, input[type=email]:focus, input[type=date]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50,92,217,.15);
}

/* ----- Botonería -----------------------------------------------------------
   Un solo sistema: .btn (primario azul), .btn-secundario (blanco con borde),
   .btn-suave (tinta azul), .btn-peligro (rojo, acciones destructivas),
   .btn-link (texto). Tamaños: .btn-chico, .btn-grande, .btn-bloque (ancho
   completo). Todos aceptan un icono SVG a la izquierda del texto. */
button, .btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  vertical-align: middle;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}
button:hover, .btn:hover {
  background: #2a4fbf; color: #fff; text-decoration: none;
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(50,92,217,.28);
}
button:active, .btn:active { transform: translateY(0); box-shadow: none; }
button:focus-visible, .btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(5,131,242,.35);
}
button:disabled, .btn:disabled, .btn.deshabilitado {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn svg.ic, button svg.ic { width: 16px; height: 16px; margin: 0 -2px; }

.btn-secundario, button.btn-secundario {
  background: var(--card); color: var(--navy); border-color: var(--border);
  box-shadow: 0 1px 2px rgba(20,37,89,.05);
}
.btn-secundario:hover, button.btn-secundario:hover {
  background: var(--card); color: var(--accent); border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(20,37,89,.1);
}
.btn-suave, button.btn-suave { background: #e8edfb; color: var(--accent); }
.btn-suave:hover, button.btn-suave:hover { background: #dbe4fa; color: var(--accent); box-shadow: none; }
.btn-peligro, button.btn-peligro { background: var(--danger); }
.btn-peligro:hover, button.btn-peligro:hover { background: #a93226; box-shadow: 0 6px 16px rgba(192,57,43,.28); }
.btn-chico { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-grande { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
.btn-bloque { display: flex; width: 100%; }
.btn-icono { width: 38px; padding: 0; justify-content: center; }
.btn-icono svg.ic { margin: 0; }

.btn-link, button.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline;
  box-shadow: none;
}
.btn-link:hover, button.btn-link:hover { background: none; color: #2a4fbf; transform: none; box-shadow: none; }
.btn-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; box-shadow: none; border-radius: 4px; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input, .inline-form select { width: auto; margin-top: 0; }

.search-form { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.search-form input { flex: 1 1 300px; min-width: 220px; margin-top: 0; }
.search-form select { flex: 0 1 auto; width: auto; max-width: 45%; margin-top: 0; }
@media (max-width: 700px) {
  .search-form input, .search-form select { flex: 1 1 100%; max-width: none; }
}

table.results { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.results th, table.results td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
table.results th { font-size: 12px; color: var(--muted); font-weight: 600; }

.actions { display: flex; gap: 10px; }

.flash-stack { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; font-size: 14px; }
.flash-error { background: #fdecea; color: var(--danger); }
.flash-success { background: #e9f7ef; color: var(--success); }
.flash-info { background: #eaf0fd; color: var(--accent); }
/* El aviso flota cuando la página volvió al punto donde se estaba editando: si
   se queda arriba, nadie lo ve (9 sep 2026). Los de éxito se van solos. */
.flash-stack.flotante {
  position: fixed; top: 74px; right: 22px; z-index: 60; max-width: 380px; margin: 0;
  cursor: pointer;
}
.flash-stack.flotante .flash {
  box-shadow: 0 10px 28px rgba(20, 37, 89, .18); border: 1px solid rgba(20, 37, 89, .08);
}
.flash-stack.flotante.se-va { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
@media (max-width: 560px) { .flash-stack.flotante { left: 12px; right: 12px; max-width: none; top: 64px; } }

.auth-card {
  max-width: 380px;
  margin: 80px auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.pager { display: flex; gap: 16px; align-items: center; margin-top: 12px; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-header h1 { margin: 8px 0; }

.prose { white-space: pre-wrap; font-size: 14px; line-height: 1.6; }

.file-drop {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.ficha-error { padding: 0; overflow: hidden; }
.ficha-fila { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--border); }
.ficha-fila:last-child { border-bottom: none; }
.ficha-etiqueta {
  padding: 12px 16px;
  background: #f9fafb;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.ficha-valor { padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.ficha-valor ul, .ficha-valor ol { margin: 0; padding-left: 20px; }
.ficha-valor li { margin-bottom: 4px; }
.ficha-valor img { max-width: 100%; max-height: 420px; border-radius: 6px; display: block; }
.ficha-escalar .ficha-etiqueta { background: #fdecea; color: var(--danger); }
.ficha-escalar .ficha-valor { background: #fdecea; color: var(--danger); }
@media (max-width: 700px) {
  .ficha-fila { grid-template-columns: 1fr; }
  .ficha-etiqueta { border-right: none; border-bottom: 1px solid var(--border); }
}

/* --- Protección de datos sensibles (capa adicional, no la única defensa) --- */
.no-select, .sensitive-col, .secret {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f1f2f5;
  padding: 2px 8px;
  border-radius: 4px;
  filter: blur(4px);
  transition: filter .15s ease;
  cursor: pointer;
}
.secret:hover, .secret:focus {
  filter: none;
}

@media print {
  body { display: none !important; }
}

/* ================= Dashboard (WiPOS Hub, Fase 1) ================= */
.dash-hero { margin: 8px 0 24px; }
.dash-hero h1 { font-size: 26px; margin: 4px 0 2px; font-weight: 800; }
.dash-hero .muted { font-size: 15px; margin-bottom: 16px; }

.dash-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 2px solid var(--accent); border-radius: 12px;
  padding: 6px 8px 6px 16px; max-width: 720px;
}
.dash-search .lupa { font-size: 16px; }
.dash-search input {
  flex: 1; border: none; outline: none; font-size: 15.5px; margin: 0; padding: 9px 4px;
  background: transparent; font-family: inherit; color: var(--text);
}
.dash-search button { flex-shrink: 0; }
.dash-search.compacta { margin-bottom: 22px; }

.dash-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0;
}
@media (max-width: 900px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-cards { grid-template-columns: 1fr; } }

.dash-card {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; text-decoration: none; color: var(--text); display: block;
  transition: border-color .12s ease, transform .12s ease;
}
a.dash-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.dash-card .ic { font-size: 20px; display: block; }
.dash-card b { display: block; margin: 8px 0 3px; font-size: 15px; }
.dash-card .desc { font-size: 13px; color: var(--muted); line-height: 1.4; display: block; }
.dash-card.prox { opacity: .62; }
.badge-prox {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
}

.dash-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
@media (max-width: 820px) { .dash-row { grid-template-columns: 1fr; } }
.dash-panel h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-links a {
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--text);
  background: var(--bg);
}
.quick-links a:hover { border-color: var(--accent); color: var(--accent); }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.activity li:last-child { border-bottom: none; }
.activity b { display: block; font-size: 13.5px; }
.activity .det { display: block; }

/* ---- Búsqueda global: grupos de resultados ---- */
.grupo-resultados h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; }
.pill-grupo {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 5px; color: #fff;
}
.pill-grupo.cliente { background: var(--accent); }
.pill-grupo.establecimiento { background: var(--navy); }
.pill-grupo.caja { background: var(--accent-2); }
.pill-grupo.soporte { background: var(--success); }
.resultados { list-style: none; margin: 0; padding: 0; }
.resultados li { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.resultados li:last-child { border-bottom: none; }
.resultados a { color: var(--accent); text-decoration: none; font-weight: 600; }
.resultados a:hover { text-decoration: underline; }

/* ================= Facturación Electrónica (Fase 1C) ================= */
.tabla-cajas { overflow-x: auto; }

.fe-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.fe-activa { background: #e6f4ec; color: #1c8a4b; }
.fe-no_configurada { background: #eef0f3; color: #6b7280; }
.fe-pendiente { background: #faf0da; color: #9a6c14; }
.fe-error { background: #fdecea; color: #c0392b; }

.btn-copiar {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 12px; padding: 2px 6px; margin-left: 6px;
  vertical-align: middle;
}
.btn-copiar:hover { border-color: var(--accent); }
.btn-copiar.copiado { border-color: var(--success); background: #e9f7ef; }

.fe-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 37, 89, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; overflow-y: auto;
}
.fe-modal[hidden] { display: none; }
.fe-modal-caja {
  background: var(--card); border-radius: 12px; padding: 22px 24px;
  width: 100%; max-width: 760px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden; /* nada del panel se pinta fuera del panel */
}
/* La tabla vive en su propio contenedor con scroll: si algún nombre de
   parámetro es más largo de lo previsto, se desplaza dentro del panel en
   vez de salirse por el borde. */
.fe-tabla-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.fe-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.fe-modal-head h3 { margin: 0 0 2px; font-size: 16px; }
.fe-cerrar {
  background: var(--bg); color: var(--text); border: none; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px; flex-shrink: 0; padding: 0;
}
.fe-cerrar:hover { background: var(--border); }
.fe-estado-form { margin-bottom: 12px; }
.fe-estado-form select { width: auto; }
.fe-tabla td { vertical-align: top; }
.fe-acciones { display: flex; gap: 10px; align-items: flex-start; }
.fe-nuevo { margin-top: 14px; }
.fe-nuevo .inline-form { margin-top: 10px; }
.btn-link.peligro { color: var(--danger); }
.btn-link.peligro:hover { color: #a93226; }

/* Botones de copiar más visibles + copiar todos */
.btn-copiar { font-size: 12px; padding: 3px 9px; white-space: nowrap; color: var(--accent); font-weight: 600; }
.fe-head-acciones { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.btn-copiar-todo {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-copiar-todo:hover { opacity: .9; }
.btn-copiar-todo.copiado { background: var(--success); }

/* Edición masiva de parámetros FE */
.fe-tabla .fe-input { margin-top: 0; font-size: 13.5px; }
.fe-tabla .fe-tipo { width: auto; margin-top: 0; font-size: 13px; }
.fe-tabla .fe-nombre { white-space: normal; max-width: 220px; line-height: 1.3; }
.fe-tabla .fe-celda-valor { min-width: 200px; }
.fe-tabla td:last-child { white-space: nowrap; }
.fe-guardar-fila { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fe-pegar { margin-bottom: 14px; }
.fe-pegar textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.fe-pegar-aplicar { margin-top: 8px; }
.fe-pegar-resultado { margin-left: 10px; }

/* ----- Base de Conocimiento (Fase 2): etiquetas, video, feedback, apps ----- */
/* .btn-secundario: definido en la botonería general (arriba). */

.tag-filtro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag-chip {
  display: inline-block; background: #eef1fb; color: var(--navy); border: 1px solid transparent;
  border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.tag-chip.small { padding: 1px 8px; font-weight: 500; font-size: 11px; }
.tag-chip:hover, .tag-chip.on { background: var(--accent); color: #fff; }
a.tag-chip:hover { opacity: 1; }

.detalle-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: -6px 0 16px;
}

.feedback-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px;
  font-size: 14px;
}
.btn-voto { font-size: 13px; padding: 6px 12px; }
.btn-voto:disabled { cursor: default; opacity: .55; }
.btn-voto.votado { border-color: var(--success); color: var(--success); }
.feedback-gracias { color: var(--success); font-weight: 600; font-size: 13px; }

/* Aplicaciones y versiones */
.badge-link { background: #e7f0ff; color: var(--accent); margin-left: 4px; }


/* ----- WiPOS Academy (Fase 3): cursos, lecciones y progreso ----- */
.curso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.curso-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
}
.curso-card:hover { border-color: var(--accent); transform: translateY(-2px); opacity: 1; }
.curso-card h3 { margin: 0; font-size: 16px; }
.curso-card p { margin: 0; font-size: 13px; }
.curso-top { display: flex; gap: 6px; flex-wrap: wrap; }
.curso-pie { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.curso-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.badge-borrador { background: #f2f2f2; color: #6b6b6b; }

.barra { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; min-width: 60px; }
.barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.barra.grande { height: 10px; }
.barra-pct { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.progreso-curso { display: flex; align-items: center; gap: 12px; margin: 16px 0 22px; }

.lecciones { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lecciones li { background: #fff; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; }
.lecciones li a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-decoration: none; color: inherit; flex: 1; min-width: 0;
}
.leccion-orden { padding-right: 10px; flex-shrink: 0; }
.leccion-orden form { display: flex; gap: 4px; }
.orden-btn {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.orden-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.orden-btn:disabled { opacity: .35; cursor: default; }
.lecciones li a:hover { opacity: 1; }
.lecciones li:hover { border-color: var(--accent); }
.lecciones .check { color: var(--border); font-weight: 700; flex-shrink: 0; }
.lecciones li.hecha .check { color: var(--success); }
.lecciones .titulo { flex: 1; }
.lecciones .meta { font-size: 12px; }

.leccion-recursos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.leccion-completar { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.leccion-completar form { display: flex; align-items: center; gap: 14px; }
.completada-ok { color: var(--success); font-weight: 600; }
.leccion-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* Permisos por usuario */
.permiso-grupo h3 { margin-top: 0; font-size: 15px; }
.permiso-linea { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.permiso-linea input[type=checkbox] { width: auto; margin-top: 3px; flex-shrink: 0; }
.permiso-texto { font-size: 13.5px; }
.ajuste-tag {
  background: #fff3e0; color: #a15c00; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 600; margin-left: 6px;
}
.check-linea { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.check-linea input[type=checkbox] { width: auto; margin-top: 3px; flex-shrink: 0; }

/* Grupos nuevos del buscador global */
.pill-grupo.aplicacion { background: #6b4fd8; }
.pill-grupo.curso { background: #0f9d58; }

/* Video incrustado de la lección (proporción 16:9, se adapta al ancho) */
.video-caja {
  position: relative; width: 100%; padding-bottom: 56.25%;
  border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 14px;
}
.video-caja iframe, .video-caja > div {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.video-aviso { color: var(--success); font-weight: 600; margin-top: -6px; }
.leccion-completar.auto-completada { border-color: var(--success); }

/* ----- Evaluaciones ----- */
.evaluacion .pregunta { border-top: 1px solid var(--border); padding: 16px 0 6px; }
.evaluacion .pregunta:first-of-type { border-top: none; }
.evaluacion .enunciado { margin: 0 0 10px; font-size: 14.5px; }
.opcion {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px;
  cursor: pointer; font-size: 14px; color: var(--text);
}
.opcion input[type=radio] { width: auto; margin-top: 3px; flex-shrink: 0; }

.resultado { text-align: center; }
.puntaje-grande { font-size: 52px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.resultado.aprobado .puntaje-grande { color: var(--success); }
.resultado.reprobado .puntaje-grande { color: var(--danger); }
.resultado-texto { font-size: 15px; }
.certificado-aviso { border-color: var(--success); }

.pregunta-admin { border-top: 1px solid var(--border); padding: 14px 0 8px; }
.pregunta-admin:first-of-type { border-top: none; }
.opciones-admin { list-style: none; padding: 0; margin: 0 0 8px 18px; font-size: 13.5px; }
.opciones-admin li { padding: 2px 0; color: var(--muted); }
.opciones-admin li.correcta { color: var(--success); font-weight: 600; }
.opcion-nueva { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.opcion-nueva input[type=text] { margin-top: 0; }
.radio-correcta { margin: 0; flex-shrink: 0; }
.radio-correcta input { width: auto; }

/* ----- Certificado ----- */
.certificado {
  background: #fff; border: 3px double var(--navy); border-radius: 8px;
  padding: 48px 40px; text-align: center; margin: 10px 0 18px;
}
.cert-logo { width: 170px; height: auto; margin-bottom: 24px; }
.cert-tipo {
  text-transform: uppercase; letter-spacing: .22em; font-size: 11px;
  font-weight: 700; color: var(--accent); margin: 0 0 26px;
}
.cert-otorga { color: var(--muted); font-size: 14px; margin: 0; }
.cert-nombre {
  font-size: 30px; margin: 10px 0 18px; color: var(--navy);
  border-bottom: 1px solid var(--border); display: inline-block; padding: 0 24px 10px;
}
.cert-curso { font-size: 20px; margin: 10px 0 4px; color: var(--text); }
.cert-categoria { color: var(--muted); font-size: 13px; margin: 0; }
.cert-pie {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}

@media print {
  .sidebar, .mobilebar, .no-imprimir, .flash-stack { display: none !important; }
  body { background: #fff; }
  .container { max-width: none; padding: 0; }
  .certificado { border-width: 2px; page-break-inside: avoid; }
}
.pill-grupo.leccion { background: #d97706; }
.badge-cert { background: #e9f7ef; color: var(--success); text-decoration: none; font-weight: 600; }
.curso-progreso-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.curso-progreso-head h2 { margin: 0 0 4px; }
.curso-progreso-head h2 a { text-decoration: none; color: inherit; }
.curso-progreso-head h2 a:hover { color: var(--accent); }
.curso-progreso-estado { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.tabla-lecciones { font-size: 13.5px; }
.nota-ok { color: var(--success); }
.nota-baja { color: var(--danger); }

/* Usuarios: la tabla nunca se sale de la tarjeta, y las acciones van en columna */
.tabla-envoltura { overflow-x: auto; }
.tabla-usuarios td.actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  white-space: nowrap;
}
.tabla-usuarios td.actions form { margin: 0; }
.tabla-usuarios .btn-link { font-size: 12.5px; }

/* ============================================================
   Inicio rediseñado — hero con degradado de marca, resumen en
   tarjetas, módulos con chip de color y actividad en línea de tiempo
   ============================================================ */
.inicio-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, var(--navy) 0%, #1d3a8f 55%, var(--accent) 100%);
  border-radius: 18px;
  padding: 22px 30px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: #fff;
  box-shadow: 0 12px 32px rgba(20, 37, 89, .22);
}
.inicio-hero-anillo {
  position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.07);
  pointer-events: none;
}
.inicio-hero-anillo.a1 { width: 340px; height: 340px; top: -170px; right: -80px; border-width: 46px; }
.inicio-hero-anillo.a2 { width: 220px; height: 220px; bottom: -130px; left: 34%; border-width: 30px; }
.inicio-hero-marca {
  position: absolute; right: 30px; bottom: -22px; height: 150px; width: auto;
  opacity: .1; transform: rotate(-8deg); pointer-events: none;
  filter: brightness(4) grayscale(1);
}
.inicio-fecha {
  margin: 0 0 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.65); font-weight: 600;
}
.inicio-hero h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.inicio-hero-texto { position: relative; min-width: 0; }
.inicio-hero-marca { bottom: -30px; height: 120px; }
.inicio-hero .mano { display: inline-block; }
.inicio-sub { margin: 0; position: relative; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Pastilla de pendientes: el color dice qué tan urgente es lo que espera.
   Ámbar = hay cosas; rojo = algo quema (ticket sin atender, atraso, vencido);
   verde = nada. Lleva a «Para hoy». */
.inicio-pend {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  background: #fff4d6; color: #7a4a00; border: 1px solid #f6d58a;
  transition: transform .12s ease, box-shadow .12s ease;
}
.inicio-pend b { font-weight: 800; }
.inicio-pend i {
  width: 9px; height: 9px; border-radius: 50%; background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.28);
}
.inicio-pend.rojo { background: #fde8e6; color: #8f261d; border-color: #f3b8b2; }
.inicio-pend.rojo i { background: #e0483a; box-shadow: 0 0 0 3px rgba(224,72,58,.26); animation: pend-late 1.6s ease-in-out infinite; }
.inicio-pend.verde { background: #e3f6ea; color: #14532d; border-color: #b7e4c7; }
.inicio-pend.verde i { background: #22a55b; box-shadow: 0 0 0 3px rgba(34,165,91,.25); }
a.inicio-pend:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
@keyframes pend-late { 0%, 100% { box-shadow: 0 0 0 3px rgba(224,72,58,.26); } 50% { box-shadow: 0 0 0 6px rgba(224,72,58,.12); } }
@media (prefers-reduced-motion: reduce) { .inicio-pend.rojo i { animation: none; } }
.inicio-buscar {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; padding: 6px 6px 6px 18px;
  max-width: 640px; box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.inicio-buscar .lupa { flex-shrink: 0; display: inline-flex; color: var(--muted); }
.inicio-buscar input {
  flex: 1; border: none; outline: none; font-size: 15px; margin: 0; padding: 8px 0;
  background: transparent; min-width: 0;
}
.inicio-buscar button { border-radius: 999px; padding: 9px 20px; flex-shrink: 0; font-weight: 600; }
.inicio-buscar button:hover { transform: none; }

/* Resumen: tarjetas que se montan sobre el borde del hero */
.inicio-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  margin: -32px 18px 0; position: relative;
}
.stat-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,37,89,.05);
}
.stat-cabeza { display: flex; align-items: center; gap: 10px; }
.stat-cabeza .stat-ic { width: 36px; height: 36px; border-radius: 10px; }
.stat-spark { margin-left: auto; flex-shrink: 0; display: block; }
.stat-sub { font-size: 11.5px; color: #b3261e; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-delta { font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.stat-delta.sube { color: #11a06a; background: #e7f5ec; }
.stat-delta.baja { color: #b3261e; background: #fdecea; }
.stat-ic.rojo { background: #fdecea; color: #b3261e; }
.stat-ic.ambar { background: #fdf3d7; color: #8a6100; }
.stat-ic.verde { background: #e7f5ec; color: #11a06a; }
.stat-ic.celeste { background: #e3f1fe; color: #0369a1; }
.stat-ic.morado { background: #eee9fb; color: #6b46c1; }
.stat-ic.naranja { background: #fff1e6; color: #b45309; }
.stat-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8edfb; color: var(--accent);
}
.stat-num {
  font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat-lbl { font-size: 12px; color: var(--muted); }

.inicio-seccion {
  margin: 30px 2px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Módulos */
.inicio-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 14px; }
.modulo {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.modulo:hover {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(20,37,89,.12); opacity: 1;
}
a.modulo:hover .modulo-flecha { opacity: 1; transform: translateX(0); }
.modulo-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.tinta-azul    { background: #e8edfb; color: var(--accent); }
.tinta-celeste { background: #e3f1fe; color: #0369a1; }
.tinta-morado  { background: #eee9fb; color: #6b46c1; }
.tinta-verde   { background: #e7f5ec; color: #11a06a; }
.tinta-gris    { background: #f0f1f3; color: var(--muted); opacity: .8; }
.modulo-texto { flex: 1; min-width: 0; }
.modulo-texto b { display: block; font-size: 15px; margin-bottom: 2px; }
.modulo-texto span { font-size: 12.5px; color: var(--muted); display: block; }
.modulo-flecha {
  color: var(--accent); font-size: 18px; font-weight: 700; flex-shrink: 0;
  opacity: 0; transform: translateX(-6px); transition: opacity .16s, transform .16s;
}
.modulo.prox { opacity: .62; }
.modulo.prox .modulo-texto b { color: var(--muted); }

/* Accesos rápidos como chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: border-color .14s, background .14s;
}
.chip:hover { border-color: var(--accent); background: #eef2fd; opacity: 1; }
/* Chip usado como filtro: el activo va lleno (Contactos externos) */
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.on b { color: #fff; }
.chip b { font-weight: 700; }

/* Actividad como línea de tiempo */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li {
  display: flex; gap: 12px; position: relative; padding: 0 0 16px 2px;
}
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo .punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2);
  flex-shrink: 0; margin-top: 5px; position: relative; z-index: 1;
  box-shadow: 0 0 0 3px #e3f1fe;
}
.linea-tiempo li:not(:last-child)::before {
  content: ""; position: absolute; left: 5.5px; top: 16px; bottom: 2px;
  width: 1.5px; background: var(--border);
}
.linea-tiempo b { display: block; font-size: 13.5px; }
.linea-tiempo .muted { display: block; font-size: 12px; }
.linea-tiempo .det { margin-top: 1px; }

@media (max-width: 700px) {
  .inicio-hero { padding: 24px 20px 34px; border-radius: 14px; }
  .inicio-hero h1 { font-size: 22px; }
  .inicio-stats { margin: -22px 8px 0; }
}

/* El badge "Pronto" de los módulos del inicio se ancla a su tarjeta */
.modulo { position: relative; }
.modulo .badge-prox { position: static; flex-shrink: 0; margin-left: 4px; }

/* ----- Flechas de tendencia en el resumen del inicio ----- */
.stat-linea { display: flex; align-items: baseline; gap: 8px; }
.stat-delta {
  font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default;
}
.stat-delta.sube { color: var(--success); background: #e7f5ec; }
.stat-delta.baja { color: var(--danger); background: #fdecea; }

/* ----- Página de acceso (WiPOS Hub) ----- */
.login-fondo {
  min-height: 100vh; margin: 0;
  background: linear-gradient(126deg, var(--navy) 0%, #1d3a8f 52%, var(--accent) 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.login-anillo {
  position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.login-anillo.la1 { width: 520px; height: 520px; top: -230px; right: -140px; border-width: 64px; }
.login-anillo.la2 { width: 300px; height: 300px; bottom: -160px; left: -80px; border-width: 40px; }
.login-anillo.la3 { width: 160px; height: 160px; top: 18%; left: 12%; border-width: 22px; }

.login-lienzo {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  padding: 24px 18px; display: flex; flex-direction: column; align-items: center;
}
.login-tarjeta {
  background: var(--card); border-radius: 18px; padding: 36px 34px 28px;
  width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(10, 18, 45, .38);
}
.login-logo { width: 172px; height: auto; margin: 6px auto 18px; display: block; }
.login-tarjeta h1 {
  margin: 0 0 2px; font-size: 23px; font-weight: 800; color: var(--navy);
  letter-spacing: -.01em;
}
.login-tarjeta h1 em { font-style: normal; color: var(--accent-2); }
.login-sub { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }
.login-tarjeta form { text-align: left; }
.login-tarjeta label { font-weight: 600; }
.login-tarjeta input[type=text], .login-tarjeta input[type=password] {
  padding: 10px 12px; border-radius: 8px; font-size: 15px;
}
.login-boton {
  width: 100%; padding: 11px; font-size: 15px; font-weight: 700;
  border-radius: 8px; margin-top: 6px;
}
.login-nota {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 11.5px; line-height: 1.6;
}
.login-pie {
  margin: 18px 0 0; color: rgba(255,255,255,.55); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
@media (max-width: 480px) {
  .login-tarjeta { padding: 28px 22px 22px; border-radius: 14px; }
}

/* --- Base de conocimiento ------------------------------------------------ */
.pill-grupo.guia { background: #b45309; }
.tinta-naranja { background: #fdeedd; color: #a05a00; }

.cat-seccion { margin-bottom: 28px; }
.cat-titulo {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 13px;
  font-size: 14.5px; font-weight: 700; color: var(--navy);
}
.cat-titulo .muted { font-size: 12.5px; font-weight: 500; }
.cat-titulo::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.guia-portada-iconos { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 5px; }
.guia-portada-ic {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
}
.guia-portada-ic svg.ic { width: 12px; height: 12px; color: #fff; margin: 0; }

.guia-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-top: 16px;
}
.guia-tarjeta {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.guia-tarjeta:hover { box-shadow: 0 8px 22px rgba(15, 27, 66, .1); transform: translateY(-1px); }
.guia-tarjeta > b { font-size: 15px; line-height: 1.35; color: var(--navy); }
.guia-cabecera { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guia-adjunto { font-size: 12px; color: var(--muted); }
.guia-resumen { font-size: 13px; color: var(--muted); line-height: 1.5; }
.guia-pie { font-size: 11.5px; margin-top: auto; }
.badge-borrador { background: #fdecea; color: #b3261e; }

.guia-intro { font-size: 15px; color: var(--muted); max-width: 720px; }
.guia-doc { max-width: 780px; font-size: 14.5px; line-height: 1.7; }
.guia-doc h3 {
  margin: 22px 0 8px; font-size: 16px; color: var(--navy);
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.guia-doc h3:first-child { margin-top: 0; }
.guia-doc p { margin: 0 0 12px; }
.guia-doc ul, .guia-doc ol { margin: 0 0 14px; padding-left: 24px; }
.guia-doc li { margin-bottom: 6px; }
.guia-doc a { word-break: break-all; }

/* --- Reportes y preparación ---------------------------------------------- */
.rep-nav {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 18px;
  border-bottom: 2px solid var(--border); padding-bottom: 0;
}
.rep-nav a {
  padding: 8px 14px; text-decoration: none; color: var(--muted);
  font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.rep-nav a.on { color: var(--accent); border-bottom-color: var(--accent); }
.rep-nav a:hover { color: var(--navy); }

.rep-seccion { font-size: 15px; margin: 22px 0 10px; color: var(--navy); }

.rep-indicadores {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin: 16px 0;
}
.rep-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.rep-tile.alerta { border-color: #f3c1bd; background: #fdf6f5; }
.rep-tile-num { font-size: 24px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.rep-tile-lbl { font-size: 12px; color: var(--muted); }

.rep-stats { margin: 16px 0 14px; }
.rep-stats .stat-lbl { white-space: normal; }
.rep-stats .stat-num { white-space: nowrap; }
.rep-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .rep-dos-columnas { grid-template-columns: 1fr; } }

.rep-lista { list-style: none; margin: 0; padding: 0; }
.rep-lista li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-lista li:last-child { border-bottom: none; }
.rep-num { font-variant-numeric: tabular-nums; }

.rep-alerta-card { border-color: #f3c1bd; margin-top: 14px; }
.rec-card { margin-bottom: 10px; }
.rec-titulo { margin: 0 0 8px; }

/* Estados: siempre texto + color, nunca solo color */
.prep-chip {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.prep-chip.chica { padding: 2px 9px; font-size: 11.5px; }
.prep-verde    { background: #e7f5ec; color: #11a06a; }
.prep-amarillo { background: #fdf3d7; color: #8a6100; }
.prep-naranja  { background: #fdeedd; color: #a05a00; }
.prep-rojo     { background: #fdecea; color: #b3261e; }
.prep-gris     { background: #f0f1f3; color: #5c6370; }

.prep-general { margin-top: 14px; }
.prep-numero-grande { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.prep-pct { font-size: 44px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.prep-delta { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.prep-delta.sube { background: #e7f5ec; color: #11a06a; }
.prep-delta.baja { background: #fdecea; color: #b3261e; }

.prep-componentes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 14px;
}
.prep-comp {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.prep-comp.sin-datos { opacity: .65; }
.prep-comp-nombre { font-size: 12px; color: var(--muted); }
.prep-comp-valor { font-size: 18px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.prep-comp-peso { font-size: 11px; }

.prep-cat { padding: 8px 0; }
.prep-cat-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.prep-cat-num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); }
.prep-barra {
  height: 8px; border-radius: 999px; background: var(--border); overflow: hidden;
}
.prep-barra.chica { height: 6px; max-width: 120px; display: inline-block; width: 100%; vertical-align: middle; }
.prep-barra-relleno { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.prep-barra-relleno.prep-verde    { background: #1e9e57; }
.prep-barra-relleno.prep-amarillo { background: #d9a400; }
.prep-barra-relleno.prep-naranja  { background: #e07c00; }
.prep-barra-relleno.prep-rojo     { background: #d33b30; }

.prep-evolucion { width: 100%; height: auto; }
.prep-evolucion .eje { stroke: var(--border); stroke-width: 1; }
.prep-evolucion .linea { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.prep-evolucion circle { fill: var(--accent); }

.mi-prep-banda {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; margin: 18px 0 6px; text-decoration: none; color: inherit;
  transition: box-shadow .15s ease;
}
.mi-prep-banda:hover { box-shadow: 0 8px 22px rgba(15, 27, 66, .1); }
.mi-prep-ic { font-size: 20px; }
.mi-prep-pct { font-size: 22px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mi-prep-ver { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13px; }

.rep-form-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rep-form-inline label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.rep-form-inline input, .rep-form-inline select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); }
/* Filtros de auditoría */
.aud-filtros { margin: 14px 0 16px; align-items: flex-end; }
.aud-filtros .btn { text-decoration: none; }

/* Plantillas de rúbrica (prácticas) */
.rubrica-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.rubrica-plantilla-tarjeta {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rubrica-plantilla-tarjeta:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20, 40, 120, .10); transform: translateY(-1px); }
.rubrica-plantilla-tarjeta b { font-size: 14px; }
.rubrica-plantilla-tarjeta .muted { font-size: 12px; line-height: 1.5; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .rubrica-plantilla-tarjeta { transition: none; } .rubrica-plantilla-tarjeta:hover { transform: none; } }

.rep-form-validar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.rep-form-validar label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.rep-form-validar input[type=number] { width: 110px; }
.rep-form-validar input[type=text] { min-width: 260px; }

/* Onboarding */
.ob-dia { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ob-dia:last-of-type { border-bottom: none; }
.ob-dia-num {
  min-width: 62px; font-weight: 700; font-size: 12.5px; color: var(--muted);
  padding-top: 3px;
}
.ob-dia-num.hoy { color: var(--accent); }
.ob-tareas { list-style: none; margin: 0; padding: 0; flex: 1; }
.ob-tareas li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ob-tareas li.hecha .ob-titulo { text-decoration: line-through; color: var(--muted); }
.ob-check { display: inline-flex; }
.ob-caja {
  width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 6px;
  background: var(--card); cursor: pointer; font-size: 13px; line-height: 1;
  color: #11a06a; display: inline-flex; align-items: center; justify-content: center;
}
.ob-caja.estatica { cursor: default; }
.ob-titulo { flex: 1; }
.ob-borrar { display: inline-flex; }
.ob-borrar .btn-link { color: var(--muted); font-size: 12px; }

/* --- Evaluaciones de desempeño ------------------------------------------- */
.eval-criterio { margin-bottom: 10px; }
.eval-criterio-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.eval-notas { display: flex; gap: 8px; margin: 8px 0 10px; }
.eval-nota { position: relative; cursor: pointer; }
.eval-nota input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.eval-nota span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--border);
  font-weight: 700; font-size: 15px; color: var(--muted); background: var(--card);
  transition: all .12s ease;
}
.eval-nota:hover span { border-color: var(--accent); color: var(--accent); }
.eval-nota input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.eval-nota input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.eval-criterio input[type=text] { width: 100%; }

/* --- Academy: inicio, videos y bibliotecas -------------------------------- */
.pill-grupo.video { background: #c2410c; }

.mi-capacitacion { margin-top: 16px; }
.mi-cap-etiqueta {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 6px;
}
.mi-cap-info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mi-cap-info b { font-size: 18px; color: var(--navy); }

.continuar-card { margin-top: 14px; }
.continuar-fila { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.continuar-fila b { display: block; color: var(--navy); }

.video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin-top: 16px;
}
.video-card {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.video-card:hover { box-shadow: 0 8px 22px rgba(15, 27, 66, .1); transform: translateY(-1px); }
.video-miniatura {
  position: relative; aspect-ratio: 16 / 9; background: #0f1b42;
  display: flex; align-items: center; justify-content: center;
}
.video-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.video-play-gigante { font-size: 34px; color: rgba(255,255,255,.85); }
.video-duracion {
  position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.75);
  color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
}
.video-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.video-cuerpo b { color: var(--navy); line-height: 1.35; }
.video-cuerpo .muted { font-size: 12.5px; }

/* --- Mi ruta: círculos por día -------------------------------------------- */
.ruta-circulos {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start;
  margin: 18px 0 16px;
}
.ruta-circulo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: inherit; min-width: 52px;
}
.ruta-circulo-punto {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); background: var(--card);
  font-weight: 700; font-size: 14px; color: var(--muted);
  transition: all .12s ease;
}
.ruta-circulo.hecho .ruta-circulo-punto { background: #e7f5ec; border-color: #1e9e57; color: #11a06a; }
.ruta-circulo.actual .ruta-circulo-punto { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.ruta-circulo.abierto .ruta-circulo-punto { background: var(--accent); border-color: var(--accent); color: #fff; }
.ruta-circulo:hover .ruta-circulo-punto { border-color: var(--accent); }
.ruta-circulo-lbl { font-size: 10.5px; color: var(--muted); font-weight: 600; }

.mi-ruta-hecha .ob-titulo { text-decoration: line-through; color: var(--muted); }
.mi-ruta-hecha .ob-titulo a { color: var(--muted); }
.ruta-dia-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ruta-dia-titulo { display: block; margin-bottom: 4px; color: var(--navy); }

/* Un elemento con [hidden] se oculta SIEMPRE, aunque otra regla le dé display */
[hidden] { display: none !important; }

/* --- Clientes: botonería discreta y secretos bajo demanda ----------------- */
.ic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 6px; margin-left: 4px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted); font-weight: 500;
  text-decoration: none; vertical-align: middle; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.ic-btn:hover, .ic-btn:focus-visible { background: #eef2fb; color: var(--accent); border-color: #d6def5; outline: none; transform: none; box-shadow: none; }
.ic-btn.copiado { background: #e7f5ec; color: #11a06a; border-color: #bfe6cc; font-size: 11.5px; font-weight: 700; }
.mascara {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em;
  background: #f1f2f5; padding: 2px 8px; border-radius: 4px; color: var(--navy);
}
.anydesk-valor, .fe-valor-texto { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.est-datos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); margin: 4px 0 10px; }
.est-sep { margin: 0 6px; }
dl dd .ic-btn { margin-left: 6px; }
.fe-celda-valor { white-space: nowrap; }
.fe-celda-valor input { width: auto; min-width: 180px; display: inline-block; vertical-align: middle; }
.aud-alerta td { background: #fdf6f5; }

/* Vistazo corto a un secreto: resaltado mientras está destapado + cuenta atrás */
.mascara.revelado {
  background: #fff6e0; color: var(--navy); box-shadow: inset 0 0 0 1px #f0d9a0;
  letter-spacing: normal;
}
.ic-btn.contando {
  background: #fff6e0; border-color: #f0d9a0; color: #8a6100;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px;
}

/* Bloques de edición discretos dentro de la ficha del cliente */
.editar-bloque { margin-top: 10px; }
.editar-bloque > summary { cursor: pointer; font-size: 13px; }
.form-editar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 10px; padding: 12px; background: #f7f8fb; border-radius: 10px;
}
.form-editar label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.form-editar label.ancho { flex: 1 1 260px; }
.form-editar input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; }
.nota-erp { font-size: 11.5px; margin: 8px 0 0; }

/* --- Incentivo trimestral y acuse de recibo ------------------------------- */
.incentivo-card { border-left: 4px solid var(--border); }
.incentivo-card.prep-verde { border-left-color: #1e9e57; background: #f6fbf8; }
.incentivo-card.prep-amarillo { border-left-color: #d9a400; background: #fffdf6; }
.incentivo-card.prep-rojo { border-left-color: #d33b30; background: #fdf8f7; }
.incentivo-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.incentivo-etiqueta {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.incentivo-mensaje { margin: 0 0 8px; font-size: 14.5px; color: var(--navy); }
.nota-legal {
  margin: 12px 0 0; padding: 12px 14px; background: #f7f8fb; border-left: 3px solid #c9cfdd;
  color: #4b5563; font-size: 12px; line-height: 1.6;
}
.acuse-comentario {
  margin: 8px 0 0; padding: 10px 14px; background: #f7f8fb; border-radius: 8px;
  font-style: italic; color: var(--navy);
}
.form-acuse { margin-top: 12px; padding: 14px; background: #f7f8fb; border-radius: 10px; }
.form-acuse textarea { width: 100%; margin: 8px 0; }

/* Anclas de la escala al momento de calificar */
.anclas {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -2px 0 10px;
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.anclas b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; background: #eef2fb;
  color: var(--accent); font-size: 11px; margin-right: 5px;
}

/* Casos prácticos de Academy */
.practica-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; margin-top: 14px;
}
.practica-card { margin: 0; }
.practica-cabeza {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.practica-titulo { font-weight: 700; font-size: 15px; }
.practica-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted);
  margin: 6px 0 0;
}
.practica-meta span::before { content: "· "; }
.practica-meta span:first-child::before { content: ""; }
.eval-nota.ancho span { width: auto; padding: 0 16px; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  vertical-align: middle;
}

/* Editor del journey: una actividad por línea, controles compactos a la derecha */
.ruta-act { align-items: center; gap: 10px; flex-wrap: nowrap; }
.ruta-act-texto {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.ruta-act-controles {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  font-size: 12px; color: var(--muted);
}
.ruta-act-controles label {
  display: flex; align-items: center; gap: 4px; margin: 0; font-weight: 400;
  white-space: nowrap;
}
.ruta-act-controles input[type=checkbox] { width: auto; margin: 0; }
.ruta-act-controles select {
  padding: 3px 6px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card);
}
.ruta-act-controles .btn-link { font-size: 12px; white-space: nowrap; }
@media (max-width: 900px) {
  .ruta-act { flex-wrap: wrap; }
  .ruta-act-controles { margin-left: 0; }
}

/* --- Inicio: el bloque personal del empleado --- */
.estado-banda {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: 14px; margin-top: 16px; background: var(--card);
  border: 1px solid var(--border);
}
.estado-banda.prep-verde    { border-left: 4px solid #1e9e57; }
.estado-banda.prep-amarillo { border-left: 4px solid #d9a400; }
.estado-banda.prep-rojo     { border-left: 4px solid #d33b30; background: #fdf8f7; }
.estado-ic { display: inline-flex; flex: none; }
.estado-banda.prep-verde .estado-ic { color: #1e9e57; }
.estado-banda.prep-amarillo .estado-ic { color: #b8860b; }
.estado-banda.prep-rojo .estado-ic { color: #b3261e; }
.estado-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.estado-texto b { font-size: 14.5px; color: var(--navy); }
.estado-texto span { font-size: 13px; color: var(--muted); }

.mi-tarjetas { margin-top: 14px; }
.mi-tarjeta { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mi-tarjeta h2 { margin: 0; }
.mi-numero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mi-pct {
  font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mi-desglose { list-style: none; margin: 0; padding: 0; }
.mi-desglose li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.mi-desglose li:last-child { border-bottom: none; }
.mi-desglose li span { color: var(--muted); }
.mi-desglose li small { font-size: 11px; color: var(--muted); opacity: .8; margin-left: 4px; }
.mi-nota { font-size: 12px; margin: -4px 0 0; }
/* Próximo objetivo: la única acción concreta que mueve «Mi conocimiento» */
.mi-siguiente {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #f7f9fe;
  color: inherit; text-decoration: none;
}
.mi-siguiente:hover { text-decoration: none; border-color: var(--accent); }
.mi-siguiente .btn { flex: none; }
.mi-desglose li b { font-variant-numeric: tabular-nums; color: var(--navy); }
.mi-tarjeta .btn { align-self: flex-start; margin-top: auto; }
.mi-vacio { margin: 0; flex: 1; }

.inicio-seccion .ver-todos { font-size: 13px; font-weight: 400; margin-left: 10px; }

.pendientes, .novedades, .objetivos-mini { list-style: none; margin: 0; padding: 0; }
.pendientes li, .novedades li { border-bottom: 1px solid var(--border); }
.pendientes li:last-child, .novedades li:last-child { border-bottom: none; }
.pendientes li > a, .novedades li > a {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  text-decoration: none; color: inherit;
}
.pendientes li > a:hover, .novedades li > a:hover { background: var(--fondo-suave, #f7f8fb); }
.pend-ic, .nov-ic { display: inline-flex; color: var(--accent); flex: none; }
.pend-texto, .nov-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pend-texto b, .nov-texto b { font-size: 14px; color: var(--navy); }
.pend-texto .muted, .nov-texto .muted { font-size: 12.5px; }
.pendientes li.urgente .pend-texto b { color: #b3261e; }
.novedades li.leida .nov-texto b { font-weight: 600; color: var(--muted); }
.nov-punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
}

.continuar-card {
  display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit;
}
.continuar-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.continuar-texto b { font-size: 15px; color: var(--navy); }
.continuar-card .btn { flex: none; }

.objetivos-mini li { padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.obj-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obj-cabeza a { font-weight: 600; flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .continuar-card { flex-direction: column; align-items: stretch; }
  .estado-banda { flex-wrap: wrap; }
}

/* --- Inicio: accesos rápidos como fila, justo bajo los KPI --- */
.accesos-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 2px 0;
}
.accesos-etiqueta {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.accesos-fila .chips { flex: 1; }
.accesos-fila .chip {
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}
.accesos-fila .chip:hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,37,89,.10);
}
.accesos-fila .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Inicio: mi equipo (quien supervisa) --- */
.equipo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.equipo-tile {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.equipo-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--border); transition: background .16s ease;
}
.equipo-tile:has(.prep-rojo)::before     { background: #d33b30; }
.equipo-tile:has(.prep-amarillo)::before { background: #d9a400; }
.equipo-tile:has(.prep-gris)::before     { background: #9aa1ad; }
.equipo-tile:hover {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(20,37,89,.12); opacity: 1;
}
.equipo-tile:hover .modulo-flecha { opacity: 1; transform: translateX(0); }
.equipo-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.equipo-n {
  flex: none; min-width: 48px; height: 48px; padding: 0 10px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.equipo-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.equipo-texto b { font-size: 14px; color: var(--navy); line-height: 1.3; }
.equipo-texto .muted {
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.equipo-ic { display: inline-flex; color: var(--muted); opacity: .7; transition: opacity .16s, color .16s; }
.equipo-tile:hover .equipo-ic { opacity: 1; color: var(--accent); }

.equipo-al-dia {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  border-left: 4px solid #1e9e57;
}
.equipo-al-dia-ic { display: inline-flex; color: #1e9e57; flex: none; }
.equipo-al-dia b { display: block; color: var(--navy); font-size: 14.5px; }
.equipo-al-dia .muted { font-size: 13px; }

/* Cuando solo hay tarjeta de conocimiento, ocupa todo el ancho en compacto */
.mi-tarjetas.una { grid-template-columns: 1fr; }
.mi-tarjetas.una .mi-tarjeta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; }
.mi-tarjetas.una .mi-tarjeta h2 { flex-basis: 100%; }
.mi-tarjetas.una .mi-desglose { flex: 1; min-width: 240px; }
.mi-tarjetas.una .mi-tarjeta .btn { margin-top: 0; }

/* Las tarjetas del bloque personal también responden al puntero */
.mi-tarjeta { transition: box-shadow .16s ease, border-color .16s ease; }
.mi-tarjeta:hover { border-color: #c9d3f2; box-shadow: 0 8px 20px rgba(20,37,89,.08); }
.continuar-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.continuar-card:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(20,37,89,.12); opacity: 1;
}
.pendientes li > a, .novedades li > a { border-radius: 10px; transition: background .12s ease, padding-left .12s ease; }
.pendientes li > a:hover, .novedades li > a:hover { padding-left: 8px; }
.pendientes .modulo-flecha { opacity: 0; transform: translateX(-6px); transition: opacity .16s, transform .16s; }
.pendientes li > a:hover .modulo-flecha { opacity: 1; transform: translateX(0); }

/* La fila de abajo con un solo panel, a todo lo ancho */
.dash-row.solo { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .equipo-tile, .continuar-card, .accesos-fila .chip, .mi-tarjeta,
  .pendientes li > a, .novedades li > a { transition: none; }
  .equipo-tile:hover, .continuar-card:hover, .accesos-fila .chip:hover { transform: none; }
}
@media (max-width: 760px) {
  .accesos-etiqueta { flex-basis: 100%; }
  .mi-tarjetas.una .mi-tarjeta { flex-direction: column; align-items: stretch; }
}
.inicio-seccion .ver-todos { text-transform: none; letter-spacing: 0; font-weight: 500; }


/* ============================================================
   Iconos SVG de trazo (sprite en _iconos_sprite.html, macro `icono`).
   Reemplazan a los emojis: heredan el color del texto y se tintan con
   la paleta. Tres tamaños: ic (20) · ic-s (16) · ic-l (24).
   ============================================================ */
svg.ic {
  width: 20px; height: 20px; flex-shrink: 0; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
svg.ic.ic-s { width: 16px; height: 16px; vertical-align: -0.15em; }
svg.ic.ic-l { width: 24px; height: 24px; }
.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-toggle { transform: none; }
.modulo-ic svg.ic { width: 22px; height: 22px; }
.modulo-flecha { display: inline-flex; }
.modulo-flecha svg.ic { width: 18px; height: 18px; stroke-width: 2; }
.inicio-seccion svg.ic { color: var(--muted); margin-right: 2px; }
.inicio-seccion .ver-todos svg.ic { margin: 0 0 0 2px; }
.mi-tarjeta h2 svg.ic { color: var(--accent); margin-right: 4px; }
.dash-panel h2 svg.ic { margin-right: 2px; }
.chip svg.ic { color: var(--accent); }
.login-nota svg.ic { color: var(--muted); }
.aviso-linea { display: flex; align-items: center; gap: 6px; }
.aviso-linea svg.ic { color: #b8860b; }


/* ============================================================
   Barra superior (escritorio): buscador global, campana y avatar.
   En móvil se oculta; la mobilebar lleva la lupa que abre la búsqueda.
   ============================================================ */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
/* Buscador de una lista (Cotizaciones): misma caja que la barra superior, en
   línea con su botón. Se usa dentro de un <form method="get">. */
.buscador-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.buscador-campo {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; max-width: 460px; margin: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 12px; height: 40px; color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.buscador-campo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50,92,217,.15); }
.buscador-campo input[type=search] {
  flex: 1; min-width: 0; border: none; background: transparent; margin: 0; padding: 0;
  font-size: 14px; color: var(--text); box-shadow: none;
}
.buscador-campo input[type=search]:focus { box-shadow: none; }
.buscador-campo input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
@media (max-width: 480px) { .buscador-campo { max-width: none; flex: 1 1 100%; } }

.topbar-buscar {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 560px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 8px 0 14px; height: 40px; color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.topbar-buscar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50,92,217,.15); background: var(--card); }
.topbar-buscar input[type=search] {
  flex: 1; min-width: 0; border: none; background: transparent; margin: 0; padding: 0;
  font-size: 14px; color: var(--text); box-shadow: none;
}
.topbar-buscar input[type=search]:focus { box-shadow: none; }
.topbar-buscar input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
.topbar-buscar kbd {
  font-family: inherit; font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; background: var(--card); white-space: nowrap;
}
.topbar-sep { flex: 1; }
.topbar-icono {
  position: relative; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--card); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.topbar-icono:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.topbar-punto {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff;
  font-variant-numeric: tabular-nums;
}
.topbar-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--accent-2); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  text-decoration: none; letter-spacing: .02em; transition: box-shadow .15s ease;
}
.topbar-avatar:hover { text-decoration: none; box-shadow: 0 0 0 3px rgba(5,131,242,.3); }
.mobilebar-buscar { display: none; }
@media (max-width: 820px) {
  .topbar { display: none; }
  .mobilebar .brand { flex: 1; }
  .mobilebar-buscar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; color: #fff; background: rgba(255,255,255,.1);
  }
}
@media print { .topbar { display: none !important; } }


/* Iconos dentro de títulos, botones de icono y marcas de listado */
h1 svg.ic, h2 svg.ic, h3 svg.ic { color: var(--accent); vertical-align: -0.15em; margin-right: 2px; }
.rep-seccion svg.ic { color: var(--navy); }
.ic-btn svg.ic { width: 15px; height: 15px; }
.guia-adjunto svg.ic { width: 14px; height: 14px; color: var(--muted); }
.video-play-gigante svg.ic { width: 40px; height: 40px; }
summary.btn-link svg.ic, .btn-link svg.ic { width: 14px; height: 14px; vertical-align: -0.1em; }
li > svg.ic:first-child, .resultados li a > svg.ic:first-child { color: var(--accent); }
.prose svg.ic, p svg.ic { vertical-align: -0.15em; }


/* ============================================================
   Inicio como bandeja de trabajo: «Para hoy», estados vacíos y
   módulos compactos (Rediseño A3).
   ============================================================ */
.card.hoy { padding: 4px 0; margin-bottom: 0; box-shadow: 0 1px 2px rgba(20,37,89,.05); border-radius: 14px; }
.hoy-lista { list-style: none; margin: 0; padding: 0; }
.hoy-lista li { border-bottom: 1px solid var(--border); }
.hoy-lista li:last-child { border-bottom: none; }
.hoy-lista li > a {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  color: inherit; text-decoration: none; transition: background .12s ease;
}
.hoy-lista li > a:hover { background: #f7f9fe; text-decoration: none; }
.hoy-lista li > a:hover .modulo-flecha { opacity: 1; transform: translateX(0); }
.hoy-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hoy-texto b { font-size: 14px; color: var(--navy); line-height: 1.3; }
.hoy-texto .muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-lista li.urgente .hoy-texto b { color: #b3261e; }
.hoy-n {
  flex: none; min-width: 34px; height: 30px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.hoy-vacio { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.hoy-vacio b { display: block; color: var(--navy); font-size: 14.5px; }
.hoy-vacio .muted { font-size: 13px; }
.ic-caja {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8edfb; color: var(--accent);
}
.ic-caja.azul { background: #e8edfb; color: var(--accent); }
.ic-caja.celeste { background: #e3f1fe; color: #0369a1; }
.ic-caja.verde { background: #e7f5ec; color: #11a06a; }
.ic-caja.ambar { background: #fdf3d7; color: #8a6100; }
.ic-caja.rojo { background: #fdecea; color: #b3261e; }
.ic-caja.morado { background: #eee9fb; color: #6b46c1; }
.ic-caja.gris { background: #f0f1f3; color: var(--muted); }
.vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 22px 16px; color: var(--muted);
}
.vacio .ic-caja { width: 48px; height: 48px; border-radius: 14px; }
.vacio b { color: var(--navy); font-size: 14px; }
.vacio p { margin: 0; max-width: 40ch; font-size: 13px; }
/* ============================================================
   Rediseño 1b (sep 2026): dos columnas — a la izquierda lo que hay
   que HACER, a la derecha lo que hay que SABER. Misma piel.
   ============================================================ */
.inicio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.inicio-lateral { display: flex; flex-direction: column; gap: 16px; padding-top: 30px; min-width: 0; }
.inicio-lateral .card, .inicio-lateral .mi-tarjeta { margin: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(20,37,89,.05); }
.inicio-lateral .card h2, .inicio-lateral .mi-tarjeta h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.inicio-lateral .mi-pct { font-size: 34px; }
.inicio-lateral .mi-tarjeta { gap: 10px; }
.inicio-lateral .h2-extra { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.inicio-principal { min-width: 0; }
.inicio-principal .card { box-shadow: 0 1px 2px rgba(20,37,89,.05); border-radius: 14px; }
.inicio-principal .inicio-seccion:first-child { margin-top: 30px; }
@media (max-width: 1100px) { .inicio-grid { grid-template-columns: 1fr; } .inicio-lateral { padding-top: 0; } }
/* Mi equipo: una fila por persona */
.equipo-lista { list-style: none; margin: 0; padding: 0; }
.equipo-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.equipo-lista li:last-child { border-bottom: none; }
.equipo-lista .persona-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.equipo-lista .persona-texto b { font-size: 13px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipo-lista .persona-texto span { font-size: 11.5px; color: var(--muted); }
.equipo-lista .persona-cola { font-size: 12px; color: var(--muted); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
/* Avatar con color fijo por persona */
.avatar-persona {
  width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em;
}
.avatar-persona.chico { width: 28px; height: 28px; font-size: 11px; }
.avatar-persona.t0 { background: #325cd9; } .avatar-persona.t1 { background: #0f766e; } .avatar-persona.t2 { background: #7c3aed; }
.avatar-persona.t3 { background: #b45309; } .avatar-persona.t4 { background: #be185d; } .avatar-persona.t5 { background: #0369a1; }
/* Actividad reciente: la persona y el día */
.actividad-dia { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 0 4px; }
.actividad-lista { list-style: none; margin: 0; padding: 0; }
.actividad-lista li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.actividad-texto { flex: 1; min-width: 0; }
.actividad-texto .fila { display: flex; justify-content: space-between; gap: 8px; }
.actividad-texto b { font-size: 13.5px; color: var(--navy); }
.actividad-texto .hora { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.actividad-texto .muted { display: block; font-size: 12px; }
/* Mi ruta de onboarding: un segmento por día */
.ruta-segmentos { display: flex; gap: 4px; margin: 4px 0 10px; }
.ruta-segmentos span { flex: 1; height: 10px; border-radius: 4px; background: #f0f1f3; border: 1px solid var(--border); }
.ruta-segmentos span.hecho { background: #1e9e57; border-color: #1e9e57; }
.ruta-segmentos span.debido { background: #fdecea; border-color: #d33b30; }
.ruta-leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.ruta-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ruta-leyenda i.hecho { background: #1e9e57; } .ruta-leyenda i.debido { background: #fdecea; border: 1px solid #d33b30; }
.card .btn.btn-chico.al-pie { margin-top: 12px; }
/* Elegir personas con casillas (Agenda y Avisos): nada de selectores múltiples con ⌘ */
.casillas-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; margin-bottom: 12px; }
.casilla-persona { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; font-size: 13.5px; color: var(--text); margin: 0; }
.casilla-persona input { margin: 0; }
.casilla-persona small { margin-left: auto; font-size: 11.5px; }
.casilla-persona:has(input:checked) { border-color: var(--accent); background: #eef2fd; }
/* Cuánto se movió el conocimiento esta semana: el número que motiva */
.mi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: -6px; }
.mi-delta.sube { color: #11a06a; background: #e7f5ec; }
.mi-delta.baja { color: #b3261e; background: #fdecea; }
/* En pantallas angostas, para quien tiene bloque personal, el panel «de mí» va primero */
@media (max-width: 1100px) { .inicio-grid.personal .inicio-lateral { order: -1; } }
.equipo-lista a { color: var(--navy); text-decoration: none; }
.equipo-lista a:hover { color: var(--accent); }
/* En la columna angosta, el próximo objetivo pone el botón debajo del texto */
.inicio-lateral .mi-siguiente { flex-wrap: wrap; }
.inicio-lateral .mi-siguiente .hoy-texto { flex-basis: calc(100% - 52px); }
.inicio-lateral .mi-siguiente .hoy-texto .muted { white-space: normal; }
.inicio-lateral .mi-siguiente .btn { margin-left: 52px; }
.inicio-lateral .mi-tarjeta .btn { margin-top: 0; }
.inicio-modulos.compactos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.inicio-modulos.compactos .modulo { padding: 12px 14px; }
.inicio-modulos.compactos .modulo-ic { width: 40px; height: 40px; border-radius: 11px; }
.inicio-modulos.compactos .modulo-texto b { font-size: 14px; }
.inicio-modulos.compactos .modulo-texto span { font-size: 12px; }
.inicio-seccion + .chips { margin-top: 0; }
.equipo-al-dia .btn { margin-left: auto; flex: none; }
@media (max-width: 700px) {
  .hoy-lista li > a { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .hoy-texto { flex-basis: calc(100% - 52px); }
  .hoy-texto .muted { white-space: normal; }
  .hoy-lista .modulo-flecha { display: none; }
  .equipo-al-dia { flex-wrap: wrap; }
  .equipo-al-dia .btn { margin-left: 0; }
}
.hoy-lista li.hoy-grupo {
  padding: 10px 20px 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border-bottom: none;
}
.hoy-lista li.hoy-grupo + li > a { padding-top: 8px; }


/* Indicador sin dato: texto honesto en vez de una raya */
.rep-sin-datos { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Foco visible por teclado en todo el portal (A7) */
a:focus-visible, .sidebar-nav a:focus-visible, .user-links a:focus-visible, .rep-nav a:focus-visible,
.tabs a:focus-visible, .modulo:focus-visible, .stat-tile:focus-visible, .chip:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px;
}
.sidebar-nav a:focus-visible, .user-links a:focus-visible { outline-color: #fff; outline-offset: -2px; border-radius: 8px; }
.vacio .btn { margin-top: 4px; }

/* ============================================================
   Ficha de cliente: encabezado con resumen (Rediseño A6)
   ============================================================ */
.miga { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.miga svg.ic { color: var(--muted); }
.cliente-cab { padding: 22px 24px 0; margin-bottom: 20px; }
.cliente-cab-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cliente-cab-texto { min-width: 0; flex: 1; }
.cliente-cab h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.cliente-cab h1 .badge { vertical-align: middle; margin-left: 6px; }
.cliente-sub { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 8px; }
.cliente-sub span { display: inline-flex; align-items: center; gap: 6px; }
.cliente-sub svg.ic { color: var(--muted); }
.cliente-resumen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cliente-resumen .prep-chip { gap: 5px; text-decoration: none; }
.cliente-resumen a.prep-chip:hover { text-decoration: none; filter: brightness(.96); }
.prep-azul { background: #e8edfb; color: var(--accent); }
.cliente-cab-acciones { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a {
  padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; gap: 7px; align-items: center; text-decoration: none;
}
.tabs a:hover { color: var(--navy); text-decoration: none; }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs .cnt { font-size: 11px; background: #f0f1f3; color: var(--muted); border-radius: 999px; padding: 0 7px; font-weight: 700; }
.cliente-tabs { margin: 18px -24px 0; padding: 0 16px; border-bottom: none; border-top: 1px solid var(--border); }
#datos, #campos, #establecimientos { scroll-margin-top: 72px; }
@media (max-width: 700px) {
  .cliente-cab { padding: 18px 16px 0; }
  .cliente-cab h1 { font-size: 22px; }
  .cliente-tabs { margin: 14px -16px 0; padding: 0 8px; }
}

/* ============================================================
   Tablas compactas y panel lateral de edición (Rediseño A5)
   ============================================================ */
.tabla-card { padding: 0; overflow: hidden; }
.tabla-card .tabla-envoltura { overflow-x: auto; }
table.tabla-compacta th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 11px 14px; background: #fbfcfe; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tabla-compacta td { padding: 12px 14px; vertical-align: middle; }
table.tabla-compacta tbody tr:hover td { background: #f8faff; }
table.tabla-compacta th:first-child, table.tabla-compacta td:first-child { padding-left: 20px; }
table.tabla-compacta th:last-child, table.tabla-compacta td:last-child { padding-right: 20px; }
table.tabla-compacta tr:last-child td { border-bottom: none; }
.td-acciones { text-align: right; white-space: nowrap; }
.persona { display: inline-flex; align-items: center; gap: 10px; }
.persona-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.persona-texto b { font-size: 14px; color: var(--navy); }
.persona-texto .muted { font-size: 12.5px; }
.avatar-chico {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-2); color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.avatar-chico.gris { background: #c6cede; color: var(--navy); }
.page-header .muted { margin: 0; }
.page-header > div > h1 { margin-bottom: 2px; }
.page-header > div > .muted { margin: 0 0 6px; }
.vacio.chico { padding: 10px 4px 6px; align-items: flex-start; text-align: left; gap: 6px; }
.vacio.chico .ic-caja { width: 36px; height: 36px; border-radius: 10px; }
.vacio.chico .ic-caja svg.ic { width: 18px; height: 18px; }

.panel-lateral { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.panel-lateral[hidden] { display: none !important; }
.panel-fondo { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.panel-caja {
  position: relative; width: min(440px, 100%); height: 100%; background: var(--card);
  box-shadow: -12px 0 40px rgba(20,37,89,.18); overflow-y: auto; padding: 22px 24px 32px;
  display: flex; flex-direction: column; gap: 18px; animation: panel-entra .18s ease-out;
}
@keyframes panel-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel-caja { animation: none; } }
.panel-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-cabeza h2 { margin: 0 0 2px; font-size: 18px; }
.panel-cabeza .ic-btn { width: 32px; height: 32px; margin: 0; }
.panel-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.panel-form label { width: 100%; margin: 0; }
.panel-form .muted { margin: 0; }

.mnt-item { border: 1px solid var(--border); border-radius: 11px; padding: 14px; }
.mnt-item h3 { display: flex; align-items: center; font-size: 13.5px; margin: 0 0 6px; }
.mnt-item h3 svg.ic { color: var(--accent); }
.mnt-item p { margin: 0 0 12px; }
.panel-pie { display: flex; justify-content: flex-end; gap: 8px; width: 100%; margin-top: 6px; }
.panel-seccion { border-top: 1px solid var(--border); padding-top: 14px; }
.panel-seccion h3 { margin: 0 0 4px; font-size: 13.5px; }
.panel-seccion .muted { margin: 0 0 10px; }
.panel-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-peligro { border-top-color: #f3c1bd; }
.panel-peligro h3 { color: var(--danger); }
body.con-panel { overflow: hidden; }


/* ============================================================
   Tickets (Fase B1): bandeja, ficha, timeline y listas
   ============================================================ */
.sidebar-badge { margin-left: auto; }
.tk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.tk-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.tk-kpi:hover { border-color: var(--accent); text-decoration: none; }
.tk-kpi .n { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tk-kpi .l { font-size: 12px; color: var(--muted); }
.tk-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.tk-filtros .sep { flex: 1; }
.tk-filtros form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-filtros select, .tk-filtros input[type=text] { width: auto; margin: 0; padding: 7px 10px; font-size: 13px; }
.tk-tabla { padding: 0; overflow: hidden; }
.tk-cab, .tk-fila { display: grid; grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1.1fr) 84px 130px minmax(0, 150px) 96px 24px; gap: 10px; align-items: center; padding: 0 20px; }
.tk-cab { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; height: 40px; border-bottom: 1px solid var(--border); background: #fbfcfe; }
.tk-fila { min-height: 60px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .12s; }
.tk-fila:hover { background: #f7f9fe; text-decoration: none; }
.tk-fila:last-of-type { border-bottom: none; }
.tk-fila.sin-atender { background: #fff6f5; }
.tk-fila .tk-id { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.tk-fila .tk-texto b, .lista-tickets .tk-texto b { display: block; font-size: 13.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-fila .tk-texto .muted, .lista-tickets .tk-texto .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tk-quien { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.tk-quien span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-sla { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.tk-sla.riesgo { color: #b3261e; font-weight: 700; }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.prio i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.prio.alta i { background: #d33b30; } .prio.media i { background: #e07c00; } .prio.baja i { background: #8f9ab5; }
.lista-tickets { list-style: none; margin: 0; padding: 0; }
.lista-tickets li { border-bottom: 1px solid var(--border); }
.lista-tickets li:last-child { border-bottom: none; }
.lista-tickets li > a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; color: inherit; text-decoration: none; }
.lista-tickets li > a:hover { background: #f7f9fe; text-decoration: none; }
.lista-tickets .tk-id { font-size: 12.5px; color: var(--muted); font-weight: 600; flex: none; }
.lista-tickets .tk-texto { flex: 1; min-width: 0; }
.tk-detalle { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tk-detalle .col { display: grid; gap: 16px; }
.tk-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tk-cabecera h1 { margin: 4px 0 6px; font-size: 22px; }
.tk-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); align-items: center; }
.tk-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tk-descripcion { white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 12px 0 0; }
.tk-aviso { display: flex; align-items: center; gap: 10px; background: #fdecea; color: #b3261e; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.tk-acciones-estado { display: flex; gap: 8px; flex-wrap: wrap; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: flex; gap: 12px; position: relative; padding: 0 0 16px 2px; }
.tl li:last-child { padding-bottom: 0; }
.tl .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #e3f1fe; position: relative; z-index: 1; }
.tl li.estado .punto { background: #1e9e57; box-shadow: 0 0 0 3px #e7f5ec; }
.tl li.aviso .punto { background: #d33b30; box-shadow: 0 0 0 3px #fdecea; }
.tl li.mensaje .punto { background: #6b46c1; box-shadow: 0 0 0 3px #eee9fb; }
.tl li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 1.5px; background: var(--border); }
.tl .tl-texto { flex: 1; min-width: 0; }
.tl .tl-texto b { display: block; font-size: 13.5px; }
.tl .tl-texto .cuando { font-size: 12px; color: var(--muted); }
.tl .tl-cuerpo { margin: 4px 0 0; font-size: 13.5px; white-space: pre-wrap; line-height: 1.55; }
.tl li.mensaje .tl-cuerpo { background: #f4f0ff; border-radius: 10px; padding: 8px 12px; }
.tl li.nota .tl-cuerpo { background: #f7f8fb; border-radius: 10px; padding: 8px 12px; }
.tk-form-nota textarea { min-height: 84px; }
.tk-form-nota .fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tk-form-nota .fila label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.tk-form-nota .fila input[type=radio] { width: auto; margin: 0; }
.tk-cliente dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.tk-cliente dt { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.tk-cajas { list-style: none; margin: 8px 0 0; padding: 0; }
.tk-cajas li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; }
.tk-cajas li:last-child { border-bottom: none; }
.tk-cajas .esp { flex: 1; }
.tk-sugerencias li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.tk-sugerencias li:last-child { border-bottom: none; }
.tk-adjuntos { list-style: none; margin: 0 0 10px; padding: 0; }
.tk-adjuntos li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.tk-adjuntos li:last-child { border-bottom: none; }
.tk-reporte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
@media (max-width: 1100px) {
  .tk-cab, .tk-fila { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1fr) 76px 120px 40px 84px 20px; }
  .tk-quien span { display: none; }
}
@media (max-width: 820px) {
  .tk-cab { display: none; }
  .tk-fila { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 14px; min-height: 0; }
  .tk-fila .tk-id { order: 1; } .tk-fila .prio { order: 2; justify-self: end; }
  .tk-fila .tk-texto { grid-column: 1 / -1; order: 3; } .tk-fila .tk-cliente-col { grid-column: 1 / -1; order: 4; }
  .tk-fila .estado { order: 5; } .tk-fila .tk-quien { order: 6; justify-self: end; } .tk-fila .tk-quien span { display: none; }
  .tk-fila .tk-sla { grid-column: 1 / -1; order: 7; } .tk-fila .mas { display: none; }
  .tk-detalle { grid-template-columns: 1fr; }
  .tk-cliente dl { grid-template-columns: 1fr; }
}

/* Lista de pasos numerados (formularios con explicación al lado) */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.pasos .k { width: 24px; height: 24px; border-radius: 50%; background: #e8edfb; color: var(--accent); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.tk-cajas li { row-gap: 4px; }
.tk-secreto { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.tk-secreto .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.tk-secreto .mascara { font-size: 12px; padding: 1px 6px; }
.tk-secreto .anydesk-valor { font-size: 12.5px; }


/* ============================================================
   Academy con portadas, portada de curso y camino (B1.5)
   ============================================================ */
.curso-card.con-portada, .guia-tarjeta.con-portada { padding: 0; overflow: hidden; gap: 0; box-shadow: 0 1px 2px rgba(20,37,89,.05); border-radius: 14px; }
.curso-card.con-portada:hover, .guia-tarjeta.con-portada:hover { box-shadow: 0 10px 24px rgba(20,37,89,.12); transform: translateY(-3px); }
.curso-portada { position: relative; aspect-ratio: 16 / 9; background: #f0f1f3; overflow: hidden; display: grid; place-items: center; color: #fff; }
.curso-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.curso-portada.grad.tono-0 { background: linear-gradient(135deg, var(--navy), var(--accent)); }
.curso-portada.grad.tono-1 { background: linear-gradient(135deg, #0369a1, var(--accent-2)); }
.curso-portada.grad.tono-2 { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.curso-portada.grad.tono-3 { background: linear-gradient(135deg, #14532d, #16a34a); }
.curso-portada.grad svg.ic { width: 40px; height: 40px; opacity: .9; }
.curso-portada-chips { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.curso-portada .badge { background: rgba(255,255,255,.92); color: var(--navy); font-weight: 700; }
.curso-portada .badge-borrador { background: rgba(255,255,255,.75); color: #6b6b6b; }
.curso-dur { position: absolute; right: 12px; bottom: 12px; background: rgba(15,23,42,.75); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.curso-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.curso-card .barra { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.curso-card .barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.curso-card .barra span.verde { background: #1e9e57; }

.curso-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 280px; color: #fff; display: flex; align-items: flex-end; box-shadow: 0 12px 32px rgba(20,37,89,.22); margin-bottom: 16px; background: linear-gradient(118deg, var(--navy) 0%, #1d3a8f 55%, var(--accent) 100%); }
.curso-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.curso-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,37,89,.05) 0%, rgba(20,37,89,.55) 55%, rgba(20,37,89,.92) 100%); }
.curso-hero.sin-foto::before { background: none; }
.curso-hero-texto { position: relative; padding: 34px 36px; display: grid; gap: 10px; max-width: 760px; }
.curso-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-claro { display: inline-flex; align-items: center; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.curso-hero h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.curso-hero p { margin: 0; color: rgba(255,255,255,.82); font-size: 14.5px; max-width: 62ch; }
.curso-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.88); }
.curso-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.curso-cuerpo-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.curso-cuerpo-2 .col { display: grid; gap: 16px; }
.curso-admin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lecciones-card { padding: 0; overflow: hidden; }
.lecciones-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.lecciones-cabeza h2 { margin: 0; }
.lecciones.lecciones-ricas { gap: 0; }
.lecciones.lecciones-ricas li { border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.lecciones.lecciones-ricas li:last-child { border-bottom: none; }
.lecciones.lecciones-ricas li.actual { background: #f4f7ff; }
.lecciones.lecciones-ricas li a { padding: 12px 20px; gap: 14px; }
.lecciones.lecciones-ricas .check { display: none; }
.lec-thumb { position: relative; width: 96px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--accent)); flex-shrink: 0; display: grid; place-items: center; }
.lec-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lec-play { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--navy); display: grid; place-items: center; }
.lec-play svg.ic { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.lec-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lec-texto .titulo { font-weight: 600; color: var(--navy); }
.lec-texto .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lec-estado { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.lec-estado.hecho { background: #e7f5ec; color: #11a06a; }
.lec-estado.actual { background: var(--accent); color: #fff; }
.lec-estado.pend { border: 2px solid var(--border); color: #9aa1ad; }
.lecciones li.hecha .lec-texto .titulo { color: var(--muted); }
.avance { text-align: center; }
.anillo-prog { width: 120px; height: 120px; margin: 4px auto 10px; position: relative; }
.anillo-prog svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-prog circle { fill: none; stroke-width: 10; }
.anillo-prog .fondo { stroke: #f0f1f3; }
.anillo-prog .valor { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.anillo-prog .valor.verde { stroke: #1e9e57; }
.anillo-prog .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

.ruta-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-radius: 18px; padding: 24px 28px; color: #fff; background: linear-gradient(118deg, var(--navy) 0%, #1d3a8f 55%, var(--accent) 100%); box-shadow: 0 12px 32px rgba(20,37,89,.22); margin: 14px 0 16px; }
.ruta-hero .eyebrow { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; }
.ruta-hero h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ruta-hero-prog { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.85); }
.ruta-hero-prog .barra { width: 220px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.ruta-hero-prog .barra i { display: block; height: 100%; background: var(--accent-2); border-radius: 999px; }
.btn.blanco { background: #fff; color: var(--navy); }
.btn.blanco:hover { background: #eef2fd; color: var(--navy); }
.btn.pill { border-radius: 999px; }
.ruta-camino-card { padding: 22px 12px 16px; margin-bottom: 16px; }
.ruta-camino { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 4px; position: relative; }
.ruta-camino::before { content: ""; position: absolute; left: 8%; right: 8%; top: 20px; height: 2px; background: var(--border); }
.ruta-camino .ruta-circulo { min-width: 0; position: relative; padding: 0 4px; text-align: center; }
.ruta-camino .ruta-circulo-punto { position: relative; z-index: 1; width: 42px; height: 42px; }
.ruta-camino .ruta-circulo.hecho .ruta-circulo-punto { background: #1e9e57; border-color: #1e9e57; color: #fff; }
.ruta-camino .ruta-circulo.actual .ruta-circulo-punto { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(50,92,217,.15); }
.ruta-camino .ruta-circulo.abierto .ruta-circulo-punto { box-shadow: 0 0 0 3px var(--accent-2); }
.ruta-circulo-tit { font-size: 11.5px; color: var(--navy); font-weight: 600; line-height: 1.25; }
.ruta-camino .ruta-circulo.actual .ruta-circulo-tit { color: var(--accent); }
@media (max-width: 820px) {
  .curso-cuerpo-2 { grid-template-columns: 1fr; }
  .curso-hero { min-height: 220px; }
  .curso-hero-texto { padding: 22px 20px; }
  .curso-hero h1 { font-size: 22px; }
  .lec-thumb { width: 72px; }
  .ruta-camino::before { display: none; }
  .ruta-hero-prog .barra { width: 140px; }
}
/* La foto de portada va debajo del velo y del texto (el ::before se pinta antes que la <img>) */
.curso-hero img { z-index: 0; }
.curso-hero::before { z-index: 1; }
.curso-hero-texto { z-index: 2; }
.curso-hero.sin-foto::before { background: none; }
@media (max-width: 820px) { .curso-hero p { display: none; } }

/* Inicio de Academy: tarjeta «Continuar donde lo dejaste» y videos recientes */
.curso-destacado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 6px 18px rgba(20,37,89,.07); transition: transform .18s, box-shadow .18s; margin-bottom: 4px; }
.curso-destacado:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,37,89,.14); text-decoration: none; }
.curso-destacado-foto { position: relative; min-height: 180px; background: linear-gradient(135deg, var(--navy), var(--accent)); display: grid; place-items: center; }
.curso-destacado-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lec-play.grande { position: relative; width: 52px; height: 52px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.lec-play.grande svg.ic { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.curso-destacado-texto { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.curso-destacado-texto h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.curso-destacado-texto .curso-pie { margin-top: 4px; }
.curso-destacado-texto .barra { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.curso-destacado-texto .barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.curso-destacado-texto .btn { align-self: flex-start; margin-top: auto; }
.lista-videos { list-style: none; margin: 0; padding: 0; }
.lista-videos li { border-bottom: 1px solid var(--border); }
.lista-videos li:last-child { border-bottom: none; }
.lista-videos li a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: inherit; text-decoration: none; }
.lista-videos li a:hover .titulo { color: var(--accent); }
.lista-videos .lec-thumb { width: 84px; }
.lista-videos .lec-play { width: 24px; height: 24px; }
.lista-videos .lec-play svg.ic { width: 12px; height: 12px; }
@media (max-width: 700px) { .curso-destacado { grid-template-columns: 1fr; } .curso-destacado-foto { min-height: 150px; } }


/* Cabecera de Academy con foto de marca (misma composición que el prototipo) */
.academy-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border-radius: 22px; overflow: hidden; background: var(--navy); color: #fff; box-shadow: 0 12px 32px rgba(20,37,89,.22); margin: 14px 0 18px; min-height: 260px; }
.academy-hero-texto { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; z-index: 1; }
.academy-hero .eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; }
.academy-hero h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.academy-hero-sub { margin: 0; color: rgba(255,255,255,.78); font-size: 14.5px; max-width: 46ch; }
.academy-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.btn.traslucido { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.btn.traslucido:hover { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.academy-hero-foto { position: relative; min-height: 220px; }
.academy-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.academy-hero-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgba(20,37,89,.25) 35%, rgba(20,37,89,0) 100%); z-index: 1; }
.academy-hero .rombo { position: absolute; width: 14px; height: 14px; background: var(--accent-2); transform: rotate(45deg); border-radius: 3px; z-index: 2; }
.academy-hero .rombo.chico { width: 9px; height: 9px; opacity: .7; }
.academy-hero .ruta-hero-prog { color: rgba(255,255,255,.85); }
@media (max-width: 820px) {
  .academy-hero { grid-template-columns: 1fr; min-height: 0; }
  .academy-hero-foto { order: -1; min-height: 170px; }
  .academy-hero-foto::before { background: linear-gradient(0deg, var(--navy) 0%, rgba(20,37,89,.05) 60%); }
  .academy-hero-texto { padding: 6px 20px 24px; }
  .academy-hero h2 { font-size: 24px; }
}


/* Lección: video y contenido a la izquierda, índice del curso a la derecha */
.leccion-cuerpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.leccion-cuerpo .col { display: grid; gap: 16px; }
.leccion-video { padding: 0; overflow: hidden; }
.leccion-video .video-caja { margin: 0; border-radius: 0; }
.leccion-video .video-aviso { margin: 0; padding: 10px 16px; }
.leccion-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.leccion-cab h1 { margin: 2px 0 0; font-size: 22px; }
.leccion-indice { list-style: none; margin: 0; padding: 0; }
.leccion-indice li { border-bottom: 1px solid var(--border); }
.leccion-indice li:last-child { border-bottom: none; }
.leccion-indice li a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: inherit; text-decoration: none; border-radius: 8px; }
.leccion-indice li a:hover { background: #f7f9fe; text-decoration: none; }
.leccion-indice li.actual a { background: #eef2fd; }
.leccion-indice-n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.leccion-indice li.hecha .leccion-indice-n { background: #e7f5ec; border-color: #1e9e57; color: #11a06a; }
.leccion-indice li.actual .leccion-indice-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.leccion-indice-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.leccion-indice li.hecha .leccion-indice-t { color: var(--muted); font-weight: 500; }
.leccion-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card .curso-pie .barra { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.card .curso-pie .barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.card .curso-pie .barra span.verde { background: #1e9e57; }
@media (max-width: 900px) { .leccion-cuerpo { grid-template-columns: 1fr; } }

/* Prácticas como tarjetas con estado y acción */
.practica-tarjeta { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; transition: transform .16s, box-shadow .16s, border-color .16s; }
.practica-tarjeta:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(20,37,89,.12); text-decoration: none; }
.practica-tarjeta .practica-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.practica-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.practica-texto .practica-titulo { font-size: 15px; color: var(--navy); }
.practica-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }


/* Progreso: anillo chico en cabecera de curso y barras dentro de tablas */
.progreso-anillo-fila { display: flex; align-items: center; gap: 14px; }
.anillo-prog.chico { width: 64px; height: 64px; margin: 0; }
.anillo-prog.chico .pct { font-size: 13px; }
.anillo-prog.chico circle { stroke-width: 11; }
.barra-fila { display: inline-flex; align-items: center; gap: 8px; min-width: 140px; }
.barra-fila .barra { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.barra-fila .barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.barra-fila .barra span.verde { background: #1e9e57; }
.tabla-card .tabla-lecciones { margin-top: 0; }
.tabla-card .curso-progreso-head { margin-bottom: 0; border-bottom: 1px solid var(--border); }
.rep-lista .btn-chico { margin-left: auto; }

.entrega-adjunto-botones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ============================================================
   Nova (B2.1): botón en la barra superior y panel de chat
   ============================================================ */
.topbar-ia {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px;
  border-radius: 12px; border: 1px solid transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; margin: 0;
  box-shadow: 0 6px 16px rgba(50,92,217,.28); transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.topbar-ia svg { color: #fff; }
.topbar-ia:hover, .topbar-ia:focus-visible { box-shadow: 0 8px 20px rgba(50,92,217,.38), 0 0 0 3px rgba(50,92,217,.18); filter: brightness(1.05); color: #fff; transform: translateY(-1px); outline: none; }
.mobilebar-ia { color: var(--accent); }
@media (max-width: 1080px) { .topbar-ia span { display: none; } .topbar-ia { padding: 0 11px; } }

.panel-ia-caja { width: min(520px, 100%); padding: 0; gap: 0; }
.panel-ia-cabeza { padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.panel-ia-cabeza h2 { display: flex; align-items: center; gap: 10px; }
.panel-ia-cabeza .ic-caja { width: 34px; height: 34px; }
.panel-ia-cabeza .muted { margin: 4px 0 0; font-size: 13px; }
.ia-barra { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: #fafbfe; }
.ia-idioma-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; }
.ia-idioma-label select { margin: 0; padding: 4px 26px 4px 8px; font-size: 12.5px; height: 30px; border-radius: 8px; }
.ia-recientes { display: flex; flex-direction: column; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: #fafbfe; max-height: 240px; overflow-y: auto; }
.ia-reciente { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; margin: 0; box-shadow: none; }
.ia-reciente:hover { border-color: var(--accent); background: var(--card); color: var(--text); transform: none; box-shadow: none; }
.ia-reciente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-reciente small { color: var(--muted); flex-shrink: 0; }

.ia-mensajes { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--card); }
.ia-vacio { display: flex; flex-direction: column; gap: 10px; }
.ia-vacio > .muted { margin: 0; font-size: 13px; }
.ia-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f5dfae; color: #7a4d00; font-size: 13px; }
.ia-aviso svg { flex-shrink: 0; margin-top: 2px; }
.ia-aviso code { font-size: 12px; }
.ia-sugerencias { display: flex; flex-direction: column; gap: 6px; }
.ia-sugerencia { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #f8fafc; color: var(--navy); font: inherit; font-size: 13.5px; cursor: pointer; margin: 0; box-shadow: none; }
.ia-sugerencia:hover, .ia-sugerencia:focus-visible { border-color: var(--accent); background: #eef2fd; color: var(--navy); transform: none; box-shadow: none; outline: none; }
.ia-opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ia-opcion { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--accent); background: #fff; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; box-shadow: none; }
.ia-opcion:hover, .ia-opcion:focus-visible { background: var(--accent); color: #fff; transform: none; box-shadow: none; outline: none; }

.ia-accion { margin-top: 8px; border: 1px solid var(--accent); background: #f5f7fd; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.ia-accion > b { display: block; font-size: 13px; color: var(--navy); margin-bottom: 6px; }
.ia-accion-fila { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.ia-accion-fila:last-of-type { border-bottom: none; }
.ia-accion-fila span:last-child { text-align: right; font-weight: 600; color: var(--navy); }
.ia-accion-botones { display: flex; gap: 8px; margin-top: 10px; }
.ia-accion-ok { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: #11a06a; font-weight: 600; }
.ia-accion-ok a { color: inherit; }
.ia-accion-ok svg.ic { width: 16px; height: 16px; }
.ia-accion-contenido { white-space: pre-wrap; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 12.5px; color: var(--text); }
.ia-accion-preguntas { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ia-accion-pregunta { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.ia-accion-pregunta b { font-size: 12.5px; }
.ia-accion-pregunta ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.ia-accion-pregunta li.ia-opcion-correcta { color: #11a06a; font-weight: 600; }
.ia-nota { font-size: 12px; margin-top: 6px !important; }
.ia-imagen-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.85); }
.ia-imagen-previa { display: flex; align-items: center; gap: 8px; padding: 6px 20px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); }
.ia-imagen-previa #ia-imagen-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ia-msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.ia-msg.usuario { align-items: flex-end; }
.ia-burbuja { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; max-width: 92%; overflow-wrap: anywhere; }
.ia-msg.usuario .ia-burbuja { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ia-msg.asistente .ia-burbuja { background: #f3f5fa; color: var(--text); border-bottom-left-radius: 4px; max-width: 100%; }
.ia-msg.asistente .ia-burbuja p { margin: 0 0 8px; }
.ia-msg.asistente .ia-burbuja p:last-child { margin-bottom: 0; }
.ia-msg.asistente .ia-burbuja ul, .ia-msg.asistente .ia-burbuja ol { margin: 0 0 8px; padding-left: 20px; }
.ia-msg.asistente .ia-burbuja li { margin: 2px 0; }
.ia-msg.asistente .ia-burbuja code { font-size: 12.5px; background: #e8ecf5; padding: 1px 5px; border-radius: 5px; }
.ia-msg.sistema .ia-burbuja { background: #f8fafc; color: var(--muted); font-size: 13px; border: 1px dashed var(--border); }
.ia-msg.sistema.error .ia-burbuja { background: #fdecec; color: #8a1c1c; border-color: #f3c1bd; }
.ia-msg.sistema.cargando .ia-burbuja::after { content: "…"; animation: ia-puntos 1.2s steps(4, end) infinite; }
@keyframes ia-puntos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ia-cita { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; background: #e8edfb; color: var(--accent); text-decoration: none; vertical-align: 1px; margin: 0 1px; }
a.ia-cita:hover { background: #dbe4fa; text-decoration: none; }
.ia-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ia-modelo { font-size: 11.5px; }
.ia-modelo-fijo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.ia-barra { flex-wrap: wrap; }
.ia-acciones { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.ia-acciones .ic-btn { width: 28px; height: 28px; }
.ia-acciones .ic-btn.activo { background: #e8edfb; color: var(--accent); border-color: #cfdaf7; }
.ia-acciones .btn-link { padding: 4px 6px; }
.ia-fuentes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ia-fuentes-titulo { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.ia-fuente { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 12.5px; color: var(--navy); text-decoration: none; max-width: 100%; }
.ia-fuente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ia-fuente:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.ia-corregir { display: flex; flex-direction: column; gap: 6px; }
.ia-corregir textarea { margin: 0; min-height: 56px; font-size: 13px; }
.ia-gracias { margin: 0; font-size: 12.5px; }

.ia-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 20px 6px; border-top: 1px solid var(--border); background: var(--card); }
.ia-form textarea { flex: 1; margin: 0; min-height: 44px; max-height: 160px; resize: vertical; font-size: 14px; }
.ia-form .btn { height: 44px; width: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ia-pie { margin: 0; padding: 0 20px 12px; font-size: 11.5px; }

.tk-ia-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.tk-ia-acciones .tk-ia-estado { font-size: 12.5px; }


/* ============================================================
   Personas y nómina (RH)
   ============================================================ */
.rrhh-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.rrhh-cabecera h1 { margin: 0 0 4px; }
.rrhh-cabecera .muted { margin: 0; max-width: 70ch; }
.rrhh-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rrhh-tabla td { vertical-align: middle; }
.nomina-total { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; }
.nomina-total .muted { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.nomina-total b { font-size: 20px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
/* La tabla de nómina necesita más ancho que el contenedor normal */
main.container:has(.ancho-completo) { max-width: none; }
.nomina-tabla { min-width: 980px; }
.nomina-tabla th, .nomina-tabla td { white-space: nowrap; font-variant-numeric: tabular-nums; max-width: none; overflow: visible; padding-left: 8px; padding-right: 8px; font-size: 13.5px; }
.nomina-tabla td:first-child, .nomina-tabla th:first-child { padding-left: 16px; }
.nomina-tabla td:nth-child(n+2):nth-child(-n+9) { text-align: right; }
.nomina-tabla th:nth-child(n+2):nth-child(-n+9) { text-align: right; }
.nomina-input { width: 96px; min-width: 96px; margin: 0; padding: 6px 8px; font-size: 13px; text-align: right; border: 1px dashed #94a3b8; background: #f8fafc; border-radius: 8px; box-sizing: border-box; }
.nomina-input.chico { width: 58px; min-width: 58px; }
.nomina-input:focus { border-style: solid; }
.nomina-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.nomina-pie .muted { margin: 0; max-width: 60ch; font-size: 13px; }
.nomina-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.nomina-reenviar { display: flex; gap: 8px; flex-wrap: wrap; }
.nomina-reenviar form { margin: 0; }
.nomina-fila-acciones { text-align: right; }
.cuenta-enlaces { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.panel-form label.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.panel-form label.check input { width: auto; margin: 3px 0 0; }
.nomina-fila-acciones { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.nomina-fila-acciones .inline-form { margin: 0; }
.btn-peligro-texto, button.btn-peligro-texto { color: var(--danger); }
.btn-peligro-texto:hover, button.btn-peligro-texto:hover { color: #8f261d; }
.campo-secreto-fila { display: flex; align-items: center; gap: 6px; }
.campo-secreto-fila input { flex: 1; min-width: 0; }
.rrhh-tabla .tk-secreto { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Analítica (sep 2026): período con comparación, barras y ranking.
   Mismas tarjetas del inicio; una idea por tarjeta.
   ============================================================ */
.stat-delta.igual { color: var(--muted); background: #f0f1f3; }
.stat-delta.bien { color: #11a06a; background: #e7f5ec; }
.stat-delta.mal { color: #b3261e; background: #fdecea; }
.stat-ant { font-size: 11.5px; color: var(--muted); }
.stat-ant b { color: var(--navy); }
.periodo-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.periodo-nav { display: inline-flex; align-items: center; gap: 6px; }
.periodo-flecha {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; color: var(--navy); text-decoration: none;
}
.periodo-flecha.off { opacity: .35; }
.periodo-flecha:hover { border-color: var(--accent); }
.periodo-actual {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); font-weight: 700; font-size: 13.5px; color: var(--navy);
}
.periodo-modos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #e9ecf3; }
.periodo-modos a { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.periodo-modos a.on { background: var(--card); color: var(--navy); box-shadow: 0 1px 2px rgba(20,37,89,.08); }
.periodo-cmp { font-size: 12.5px; }
.periodo-cmp b { color: var(--navy); }
.periodo-exportar { margin-left: auto; }
.an-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.an-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .an-grid-2, .an-grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .rep-stats .stat-cabeza { flex-wrap: wrap; }
  .periodo-exportar { margin-left: 0; }
  .barras-h .fila { grid-template-columns: 110px minmax(0, 1fr) 40px; }
  .barras-h .sub { margin-left: 120px; }
  .ranking .det { display: none; }
}
.an-nota { font-size: 12px; color: var(--muted); margin-top: 10px; }
.an-leyenda { display: flex; gap: 14px; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.an-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.an-leyenda i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
/* El día (o mes) en curso se dibuja punteado: hay que decir qué significa, el
   estilo de la línea solo no se entiende. */
.an-leyenda .an-curso { color: var(--muted); opacity: .85; font-style: italic; }
.an-leyenda .an-curso::before { content: ""; width: 12px; height: 0; border-top: 2px dashed currentColor; display: inline-block; }
.an-linea { display: block; width: 100%; max-width: 100%; height: auto; }
.barras-h { display: flex; flex-direction: column; gap: 9px; }
.barras-h .fila { display: grid; grid-template-columns: 140px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.barras-h .fila .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras-h .fila .lbl a { color: inherit; text-decoration: none; }
.barras-h .fila .lbl a:hover { color: var(--accent); }
.barras-h .barra { height: 18px; border-radius: 5px; background: #eef1f7; overflow: hidden; position: relative; }
.barras-h .barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 5px; }
.barras-h .barra i.rojo { background: #b3261e; }
.barras-h .barra i.verde { background: #11a06a; }
.barras-h .barra i.ambar { background: #8a6100; }
.barras-h .barra i.gris { background: #9aa7c7; }
.barras-h .fila .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); }
.barras-h .sub { font-size: 11.5px; color: var(--muted); margin: -4px 0 0 150px; }
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ranking li:last-child { border-bottom: none; }
.ranking .pos { width: 22px; height: 22px; border-radius: 6px; background: #f0f1f3; color: var(--muted); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ranking li:first-child .pos { background: #fdecea; color: #b3261e; }
.ranking .quien { flex: 1 1 auto; min-width: 45%; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking .quien a { text-decoration: none; }
.ranking .det { color: var(--muted); font-size: 12.5px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ranking .cnt { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 8px; background: #f0f1f3; color: #4b5563; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ranking li:first-child .cnt { background: #fdecea; color: #b3261e; }
.sla-bloque { display: flex; align-items: center; gap: 18px; }
.sla-bloque > svg { flex-shrink: 0; }
@media (max-width: 480px) { .sla-bloque { flex-direction: column; align-items: stretch; } .sla-bloque > svg { align-self: center; } }
.sla-filas { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sla-fila { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sla-fila .lbl { width: 86px; color: var(--muted); white-space: nowrap; }
.sla-fila .barra { flex: 1; height: 8px; border-radius: 4px; background: #eef1f7; position: relative; }
.sla-fila .barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.sla-fila .pct { width: 40px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sla-fila .de { font-size: 11.5px; color: var(--muted); width: 56px; }
.an-vacio-chico { font-size: 13px; color: var(--muted); margin: 0; }

/* Ficha de cliente: bloque «Incidencias» (punto 3 de diseños de datos) */
.inc-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; }
.inc-mini { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); min-width: 0; }
.inc-mini .ic-caja { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }
.inc-mini b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.inc-mini span:last-child { font-size: 11.5px; color: var(--muted); }
.inc-graficos { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.inc-titulo { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.inc-banda { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fdecea; border: 1px solid #f3c1bd; display: flex; align-items: center; gap: 12px; }
.inc-banda > div { flex: 1; min-width: 0; }
.inc-banda b { color: #b3261e; }
.inc-banda .muted { font-size: 12.5px; }
.inc-banda .ic-caja { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
@media (max-width: 820px) { .inc-minis { grid-template-columns: 1fr 1fr; } .inc-graficos { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .inc-minis { grid-template-columns: 1fr; } .inc-banda { flex-wrap: wrap; } .inc-banda > div { flex: 1 1 100%; } .inc-banda .btn { margin-left: 48px; } }

/* Mi equipo: barra dentro de la celda (punto 4 de diseños de datos) */
.barra-celda { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.barra-celda-pista { position: relative; height: 8px; border-radius: 4px; background: #eef1f7; display: inline-block; overflow: hidden; }
.barra-celda-pista i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.barra-celda-pista i.prep-verde { background: #11a06a; }
.barra-celda-pista i.prep-amarillo { background: #8a6100; }
.barra-celda-pista i.prep-rojo { background: #b3261e; }
.barra-celda-pista i.prep-azul { background: var(--accent); }
.barra-celda-pista i.prep-gris { background: #9aa7c7; }
.barra-celda b { font-variant-numeric: tabular-nums; color: var(--navy); min-width: 34px; }
.celda-estado { font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.celda-estado.tono-verde { color: #11a06a; } .celda-estado.tono-amarillo { color: #8a6100; } .celda-estado.tono-rojo { color: #b3261e; } .celda-estado.tono-gris { color: var(--muted); }
.tabla-equipo .prep-chip { white-space: nowrap; }
.tabla-equipo td, .tabla-equipo th { padding-left: 10px; padding-right: 10px; }
.tabla-equipo .td-acciones { width: 1%; white-space: nowrap; }
.tabla-equipo td.rep-num { white-space: nowrap; }
.celda-nota { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.celda-alerta { color: #b3261e; font-size: 12px; font-weight: 700; }
.tabla-equipo th.rep-num { text-align: right; }

/* Resumen de Reportes en celular: la fila de «Necesitan ayuda ahora» se apila */
@media (max-width: 560px) {
  .rep-alerta-card .equipo-lista li { flex-wrap: wrap; }
  .rep-alerta-card .equipo-lista .persona-texto { flex: 1 1 100%; }
}

/* Gráficos SVG en celular: en vez de encoger la letra, se desplazan de lado dentro de su tarjeta */
@media (max-width: 560px) {
  .an-linea { min-width: 560px; }
  .card:has(> .an-linea), .card:has(> div > .an-linea) { overflow-x: auto; }
}

.rep-seccion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 20px 0 10px; }
.rep-seccion-cabeza .rep-seccion { margin: 0; }
.rep-seccion-cabeza .rep-seccion .muted { font-weight: 500; font-size: 13px; }

.periodo-persona { display: inline-flex; }
.periodo-persona select { height: 30px; padding: 0 28px 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy); margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .ranking li { flex-wrap: wrap; }
  .ranking li .btn { margin-left: 32px; }
}

/* Ficha de persona (punto 7 de diseños de datos) */
.ficha-cab { align-items: flex-start; margin-bottom: 14px; }
.ficha-cab-texto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ficha-cab-texto .persona b { font-size: 22px; }
.ficha-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.prep-componentes .barra-celda { width: 100%; }
.prep-componentes .barra-celda-pista { flex: 1; }

/* Desempeño: evolución por persona (punto 8 de diseños de datos) */
.desempeno-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.desempeno-tarjeta { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.desempeno-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.desempeno-nota { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.desempeno-nota b { font-size: 22px; line-height: 1; color: var(--text); }
.desempeno-linea { width: 100%; }
@media (max-width: 560px) { .desempeno-linea { min-width: 0; } }
.desempeno-incentivo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.desempeno-incentivo.prep-verde { color: #11a06a; } .desempeno-incentivo.prep-rojo { color: #b3261e; } .desempeno-incentivo.prep-amarillo { color: #8a6100; }

.ia-accion-revision { margin: 8px 0 0; font-size: 13px; }
.ia-accion-revision a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Notas de voz (micrófono) */
[data-grabador].grabando, #ia-mic-btn.grabando { background: #fdecec; color: #b3261e; border-color: #f2b8b5; animation: voz-pulso 1.2s ease-in-out infinite; }
#ia-mic-btn.grabando { font-size: 11px; width: auto; padding: 0 8px; white-space: nowrap; }
@keyframes voz-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .35); } 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, 0); } }
.voz-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); background: #eef2fd; border-radius: 999px; padding: 4px 6px 4px 10px; }
@media (prefers-reduced-motion: reduce) { [data-grabador].grabando, #ia-mic-btn.grabando { animation: none; } }

/* Confirmación de mensaje al cliente en el ticket */
.tk-confirmar { border: 1px solid #b7c7f5; background: #f5f8ff; }
.tk-destinatarios { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; }
.tk-destinatarios li { margin: 0 0 3px; }
.tl li.correo .punto { background: #11a06a; }
.voz-onda { display: inline-block; vertical-align: middle; height: 20px; width: 72px; }
[data-grabador].grabando, #ia-mic-btn.grabando { display: inline-flex; align-items: center; gap: 4px; }
/* Tablas en las respuestas de Nova */
.ia-tabla { overflow-x: auto; margin: 6px 0 10px; }
.ia-tabla table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.ia-tabla th, .ia-tabla td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; white-space: nowrap; }
.ia-tabla th { background: #eef2fd; font-weight: 700; color: var(--navy, #142559); }
.ia-tabla tr:nth-child(even) td { background: #f8f9fc; }

/* Instalado en la pantalla de inicio (iOS/Android, sin barra del navegador): respetar la muesca */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}
/* WhatsApp: hilo de mensajes */
.wa-hilo { display: flex; flex-direction: column; gap: 10px; }
.wa-msg { max-width: 85%; }
.wa-msg.salida { align-self: flex-end; text-align: right; }
.wa-burbuja { display: inline-block; text-align: left; padding: 8px 12px; border-radius: 12px; background: #eef2fd; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.wa-msg.salida .wa-burbuja { background: #dcf8c6; }
.wa-meta { font-size: 11.5px; margin-top: 2px; }

/* Comunicados: elegir contenido del Hub */
.piezas-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.piezas-barra input[type=search] { flex: 1; min-width: 220px; margin: 0; }
.piezas-tipos .chip { padding: 5px 10px; font-size: 12.5px; }
.piezas-lista { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: grid; gap: 4px; background: var(--card); }
.piezas-lista .pieza { border: 0; padding: 6px 8px; }
.piezas-lista .pieza:hover { background: #f4f6fb; }
.piezas-lista .pieza span { display: flex; flex-direction: column; line-height: 1.25; }
.piezas-lista .pieza small { margin-left: 0; }
.piezas-lista .pieza input:disabled + svg, .piezas-lista .pieza:has(input:disabled) { opacity: .5; }
.piezas-vacio { margin: 8px; }
.piezas-elegidas { margin-bottom: 8px; }
.pieza-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2fd; border-color: #b7c7f5; }
.pieza-chip .ic-btn { width: 20px; height: 20px; font-size: 14px; line-height: 1; }
@media (max-width: 560px) { .piezas-lista { max-height: 240px; } }

/* Selector múltiple con buscador (comunicados: clientes y contenido del Hub) */
.selector { position: relative; }
.sel-caja { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: text; }
.sel-caja:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50, 92, 217, .12); }
.sel-entrada { flex: 1; min-width: 160px; border: 0 !important; outline: none; margin: 0 !important; padding: 4px 6px !important; background: transparent; font-size: 14px; box-shadow: none !important; }
.sel-ficha { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 999px; background: #eef2fd; border: 1px solid #b7c7f5; font-size: 13px; color: var(--text); max-width: 100%; }
.sel-ficha.aviso { background: #fff4e5; border-color: #f2c48c; }
.sel-ficha small { color: #8a6100; }
.sel-ficha button { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); padding: 0 2px; }
.sel-ficha button:hover { color: #b3261e; }
.sel-tipo { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--accent); background: #fff; border: 1px solid #d7e0f7; border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.sel-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 37, 89, .12); max-height: 340px; overflow: auto; padding: 6px; }
.sel-filtros { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sel-filtros button { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
.sel-filtros button.on { background: var(--navy, #142559); color: #fff; border-color: var(--navy, #142559); }
.sel-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); }
.sel-item:hover, .sel-item.activo { background: #f4f6fb; }
.sel-texto { display: flex; flex-direction: column; line-height: 1.25; }
.sel-texto small { color: var(--muted); font-size: 12px; }
.sel-vacio { margin: 8px 10px; color: var(--muted); font-size: 13px; }

/* Tiempos de SLA: horas + minutos en una casilla */
.sla-hm { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sla-hm input { width: 64px; margin: 0; padding: 6px 8px; }
.sla-hm small { color: var(--muted); margin-right: 6px; }


/* ---------------------------------------------------------------------------
   Catálogo de artículos (7 sep 2026)
   Tarjeta con la foto real del equipo sobre fondo claro (las fotos vienen del
   catálogo comercial con el fondo recortado), y la ficha con su tabla.
--------------------------------------------------------------------------- */
.art-portada {
  position: relative; height: 186px; display: grid; place-items: center;
  background: linear-gradient(160deg, #f4f6fb 0%, #e8edf7 100%);
  border-radius: 12px 12px 0 0; overflow: hidden; padding: 14px;
}
.art-portada img { width: 100%; height: 100%; object-fit: contain; }
.art-portada .curso-portada-chips { position: absolute; top: 10px; left: 12px; }
.art-foto {
  background: linear-gradient(160deg, #f4f6fb 0%, #e8edf7 100%);
  border-radius: 12px; padding: 20px; margin: 0 0 16px;
  display: grid; place-items: center; min-height: 220px;
}
.art-foto img { max-height: 320px; max-width: 100%; object-fit: contain; }
.art-precio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; }
.art-monto { font-weight: 700; color: var(--text); font-size: 15px; }
.vista-toggle { display: inline-flex; gap: 6px; }
.vista-toggle .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tabla-catalogo td { vertical-align: middle; }
.tabla-catalogo td.num, .tabla-catalogo th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-catalogo tr:hover td { background: var(--bg); }
.tabla-cotizacion td { vertical-align: top; }
.tabla-cotizacion tr.fila-nota td { background: var(--bg); }
.tabla-cotizacion .celda-texto {
  width: 100%; min-width: 150px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); color: var(--text); font-weight: 600;
}
.tabla-cotizacion .celda-sel { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.tabla-cotizacion .celda-num, .tabla-precios .celda-num {
  width: 120px; text-align: right; padding: 6px 10px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
}
.tabla-precios .celda-num.corta, .tabla-cotizacion .celda-num.corta { width: 78px; }
.tabla-cotizacion .celda-num { width: 96px; }
.tabla-cotizacion .celda-num.corta { width: 66px; }
.tabla-cotizacion td, .tabla-cotizacion th { padding-left: 8px; padding-right: 8px; }
.tabla-totales { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla-totales td { padding: 5px 0; }
.tabla-totales td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-totales tr.total td { border-top: 1px solid var(--border); padding-top: 9px; font-size: 16px; }
.tabla-cotizacion .celda-num:focus, .tabla-cotizacion .celda-texto:focus, .tabla-precios .celda-num:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.art-mini { width: 56px; }
.art-mini img {
  width: 44px; height: 44px; object-fit: contain; border-radius: 8px; padding: 3px;
  background: linear-gradient(160deg, #f4f6fb 0%, #e8edf7 100%);
}
.art-mini-vacia {
  width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
  background: var(--bg); color: var(--muted);
}
.aviso-suave {
  background: #fff8e6; border-left: 3px solid #d97706; border-radius: 8px;
  padding: 10px 14px; color: #7c4a03; font-size: 13.5px;
}


/* Bloques plegables de la ficha del cliente (8 sep 2026: «es mucha info al final») */
details.plegable > summary { list-style: none; cursor: pointer; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.plegable > summary h2::before { content: "▸"; font-size: 12px; color: var(--muted); transition: transform .15s; }
details.plegable[open] > summary h2::before { transform: rotate(90deg); }
details.plegable[open] > summary h2 { margin-bottom: 10px; }
details.plegable .plegable-resumen { font-size: 13px; font-weight: 400; }

/* --- Historia del cliente (9 sep 2026, primera brecha de CRM) -------------
   Una sola línea de tiempo con lo que ya estaba guardado en tickets,
   cotizaciones, agenda y comunicados. La fecha se escribe una vez por día;
   cada hecho lleva su icono, la hora y quién lo hizo. */
.historia-dia + .historia-dia { margin-top: 18px; }
.historia-dia h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.historia-dia ul { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--border); }
.hh { display: grid; grid-template-columns: 26px 44px 1fr; align-items: start; gap: 8px; padding: 7px 0 7px 10px; }
.hh + .hh { border-top: 1px solid var(--border); }
.hh-icono { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--bg); color: var(--muted); }
.hh-hora { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 5px; }
.hh-cuerpo { min-width: 0; }
.hh-cuerpo a, .hh-cuerpo b { font-weight: 600; }
.hh-detalle, .hh-quien { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.hh-quien { font-size: 12px; opacity: .85; }
.hh-verde .hh-icono { background: #e6f4ec; color: #1c8a4b; }
.hh-rojo .hh-icono { background: #fdecea; color: #b3261e; }
.hh-gris .hh-icono { opacity: .6; }
@media (max-width: 560px) {
  .hh { grid-template-columns: 24px 1fr; }
  .hh-hora { grid-column: 2; padding-top: 0; }
}

/* Tarjetas del reporte que son enlaces (drill-down de Ventas, 8 sep 2026) */
.stat-enlace { display: contents; }
.stat-enlace .stat-tile { cursor: pointer; transition: box-shadow .12s; }
.stat-enlace:hover .stat-tile { box-shadow: 0 2px 10px rgba(30,42,90,.12); }

/* Seis tarjetas (con margen) en una sola fila en pantallas anchas */
@media (min-width: 1200px) { .rep-stats.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rep-stats.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --- Barra de guardar fija (8 sep 2026) ----------------------------------
   En un formulario largo —la cotización, los precios del catálogo— el botón
   de guardar queda al final y hay que bajar cada vez. Esta barra aparece sola
   en cuanto hay un cambio sin guardar y se queda pegada abajo mientras
   estás dentro del formulario. Idea tomada del ERP de HIOPOS, donde las
   acciones no se van con el scroll. La pinta app.js; el formulario solo
   necesita `id` y `data-guardar-fijo`. */
.barra-guardar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin: 16px 0 0; padding: 10px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .10);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.barra-guardar span { color: var(--muted); font-size: 13px; font-weight: 600; }
.barra-guardar .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .barra-guardar { justify-content: space-between; gap: 10px; padding-left: 12px; padding-right: 12px; }
  .barra-guardar span { font-size: 12.5px; }
}

/* Barra de acciones en lote (Contactos, 8 sep 2026): aparece al marcar filas. */
.lote-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px;
  background: #eef2ff; border: 1px solid var(--border); border-radius: 10px;
}
.lote-barra span { color: var(--navy); font-size: 13.5px; }

/* «…o vincúlalos a un cliente» dentro de la barra de lote */
.lote-vincular { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lote-vincular .selector { min-width: 240px; }
@media (max-width: 820px) { .lote-vincular { margin-left: 0; width: 100%; } }

/* --- Gráficos: que se lean como un instrumento, no como un dibujo (8 sep 2026) ---
   Roberto: «los gráficos parecen de niños». El delator era el eje: decía 14114 y
   28228 en vez de 0/10K/20K/30K. Eso se arregló en `analitica._escala`; acá va lo
   visual: cifras que alinean y una retícula que se ve sin competir con los datos. */
.an-linea text, .an-barras text, .barras-v text { font-variant-numeric: tabular-nums; }
.stat-num, .tile-num, .an-linea, .barras-h .num { font-variant-numeric: tabular-nums; }

/* Embudo: cada etapa dice cuánta gente se cayó respecto a la anterior. Antes había
   que restarlo de cabeza, que es justo lo que un embudo debería ahorrarte. */
.barras-h.embudo .fila { grid-template-columns: 150px minmax(0, 1fr) 42px 52px; }
.barras-h.embudo .caida {
  font-size: 12px; color: var(--danger, #c0392b); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 640px) {
  .barras-h.embudo .fila { grid-template-columns: 108px minmax(0, 1fr) 34px 46px; gap: 8px; }
}


/* --- Tablero de oportunidades (9 sep 2026, segunda brecha de CRM) ---------
   Columnas por etapa que se desplazan en horizontal (no la página) y, en el
   celular, una debajo de otra. Lo atrasado va primero y marcado: el tablero
   existe para ver qué hay que empujar, no para decorar. */
/* Las cinco columnas caben en pantalla: antes eran de 260px fijos, así que en
   un portátil siempre había barra horizontal y la primera etapa quedaba fuera
   de vista (9 sep 2026, Roberto). Se reparten el ancho y solo se desplazan
   cuando de verdad no caben. */
.tablero { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.tablero-col { flex: 1 1 0; min-width: 168px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
/* Una columna vacía no necesita el mismo espacio que una llena */
.tablero-col.vacia { flex: 0 1 150px; background: transparent; border-style: dashed; }

/* Un color por etapa: el tablero se lee de un vistazo sin ir leyendo títulos.
   Va como barra arriba de la columna y como filo izquierdo de cada tarjeta,
   nunca como fondo de color (9 sep 2026, Roberto). */
.tablero-col { border-top: 3px solid var(--et, var(--border)); padding: 8px; }
.tablero-col h2 .cnt { background: color-mix(in srgb, var(--et, var(--border)) 18%, transparent); color: var(--et, var(--muted)); }
.tablero-col .opo { border-left: 3px solid var(--et, transparent); }
.et-nueva       { --et: #8a93a8; }
.et-contactado  { --et: #0583f2; }
.et-demo        { --et: #6b46c1; }
.et-cotizado    { --et: #a86a00; }
.et-negociacion { --et: #325cd9; }
.et-ganada      { --et: #1c8a4b; }
.et-perdida     { --et: #b3261e; }
/* Ganada y Perdida no son etapas: son el resultado. Van apiladas en una tira
   angosta al final —si fueran dos columnas más, las cinco etapas vivas no
   caben— y se ven apagadas: son el archivo reciente, no lo que hay que empujar. */
.tablero-cierres { flex: 0 0 165px; display: flex; flex-direction: column; gap: 10px; }
.tablero-col.cierre { background: transparent; flex: 0 0 auto; }
.tablero-col.cierre .opo-titulo { font-size: 13.5px; }
.tablero-col.cierre .opo { padding: 8px 10px; }
.tablero-col.cierre .opo-quien, .tablero-col.cierre .opo-datos { margin-bottom: 3px; font-size: 12.5px; }
.tablero-col.cierre .opo-pie { font-size: 11px; }
.tablero-col.cierre .opo { opacity: .78; cursor: default; }
.tablero-col.cierre .opo:hover { opacity: 1; }
.opo-cerrada .opo-paso { color: var(--muted); }
.opo.opo-cerrada { cursor: default; }
.tablero-col > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tablero-col h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tablero-col > header .muted { font-size: 12px; font-variant-numeric: tabular-nums; }
.col-derecha { display: inline-flex; align-items: center; gap: 8px; }
/* «+» por columna: crear la oportunidad ya en esa etapa, sin elegirla después */
.col-mas { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--card); }
.col-mas:hover { color: var(--accent); border-color: var(--accent); }
.opo-vacia a { font-size: 13px; }
.opo { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; }
.opo:active { cursor: grabbing; }
.opo.arrastrando { opacity: .45; }
.tablero-col.soltar { background: #e8edfb; border-color: var(--accent); border-style: dashed; }
/* El botón «Mover» es el camino del celular, donde arrastrar no es confiable;
   en el escritorio aparece al pasar el mouse por la tarjeta. */
.opo-mover { position: absolute; top: 6px; right: 6px; border: 1px solid var(--border); background: var(--card);
  color: var(--muted); border-radius: 6px; padding: 2px 4px; line-height: 0; cursor: pointer; opacity: 0; transition: opacity .12s; }
.opo:hover .opo-mover, .opo-mover:focus-visible { opacity: 1; }
.opo-mover:hover { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .opo-mover { opacity: 1; } }
.dlg { border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; max-width: 460px; width: calc(100% - 32px);
  background: var(--card); color: var(--text); box-shadow: 0 18px 50px rgba(20,37,89,.22); }
.dlg::backdrop { background: rgba(20,37,89,.35); }
.dlg h2 { margin: 0 0 6px; font-size: 18px; }
.dlg p { margin: 0 0 14px; font-size: 13.5px; }
.dlg .acciones { margin-top: 16px; }
.opo:last-child { margin-bottom: 0; }
.tablero-col .opo.opo-atrasada { border-left-color: #b3261e; }
.opo-titulo { font-weight: 600; display: block; }
.opo-quien { margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.opo-datos { margin: 0 0 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.opo-paso { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.opo-paso.vencido { color: #b3261e; }
.opo-pie { margin: 4px 0 0; font-size: 11.5px; }
.opo-vacia { font-size: 13px; text-align: center; padding: 10px 0; }
.stat-tile.tile-alerta b { color: #b3261e; }
.cerrar-opo { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.cerrar-opo .cerrar-ganada p { margin: 0 0 6px; font-size: 13px; }
.cerrar-opo .fila-campos { flex: 1 1 320px; }
@media (max-width: 760px) {
  .tablero { display: block; overflow: visible; }
  .tablero-col, .tablero-col.vacia { width: auto; margin-bottom: 12px; flex: none; }
  .tablero-cierres { display: block; }
}
/* Bloque «¿Con quién hablaste?» de la oportunidad (9 sep 2026) */
.bloque-persona { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 2px; margin: 0 0 12px; background: var(--bg); }
.bloque-persona legend { font-size: 13px; font-weight: 600; color: var(--text); padding: 0 6px; }
.bloque-persona > p.muted { margin: 0 0 10px; font-size: 12.5px; }
details.bloque-persona { padding: 12px 14px; }
details.bloque-persona > summary { cursor: pointer; font-size: 13.5px; color: var(--text); list-style: none; }
details.bloque-persona > summary::-webkit-details-marker { display: none; }
details.bloque-persona > summary::before { content: "▸"; color: var(--muted); margin-right: 6px; }
details.bloque-persona[open] > summary::before { content: "▾"; }
details.bloque-persona[open] > summary { margin-bottom: 10px; }

/* «+ Agregar «lo que escribiste»» cuando el selector no encuentra nada */
.sel-item.sel-alta { border-top: 1px solid var(--border); color: var(--accent); }
.sel-item.sel-alta small { color: var(--muted); }