/* ===== Esqueletos de carga ===== */
@keyframes skel-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel-line, .skel-row, .skel-card, .skel-kpi {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--line) 37%, var(--bg-soft) 63%);
  background-size: 800px 100%; animation: skel-shimmer 1.4s infinite linear; border-radius: 8px; }
.skel-tabla { display: flex; flex-direction: column; gap: 9px; }
.skel-row { height: 44px; }
.skel-row.skel-head { height: 38px; opacity: .7; }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.skel-card { height: 120px; padding: 16px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.skel-card .skel-line { height: 12px; animation: none; background: rgba(255,255,255,.35); }
.skel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.skel-kpi { height: 84px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.skel-kpi .skel-line { animation: none; background: rgba(255,255,255,.35); }
.skel-line { height: 12px; }
.skel-line.w40 { width: 40%; } .skel-line.w50 { width: 50%; } .skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; } .skel-line.w90 { width: 90%; }
.skel-line.tall { height: 22px; }

/* ===== Accesibilidad ===== */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible),
select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== Organigrama (árbol CSS puro con conectores) ===== */
.org-wrap { overflow-x: auto; padding: 10px 4px 20px; }
.org-tree, .org-tree ul { display: flex; justify-content: center; list-style: none; padding-top: 22px; position: relative; margin: 0; }
.org-tree li { list-style: none; position: relative; padding: 22px 8px 0; text-align: center; }
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%;
  border-top: 2px solid var(--line); width: 50%; height: 22px; }
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--line); width: 0; height: 22px; }
.org-node { position: relative; display: inline-flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 9px 14px 9px 10px;
  cursor: pointer; box-shadow: var(--shadow); transition: .15s; white-space: nowrap; }
.org-node:hover { border-color: var(--green); transform: translateY(-1px); }
.org-info { display: flex; flex-direction: column; line-height: 1.25; }
.org-info b { font-size: 13.5px; }
.org-info small { font-size: 11px; }
.org-count { position: absolute; top: -8px; right: -8px; background: var(--green); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; padding: 0 4px; }

/* ===== Calendario ISO ===== */
.iso-cal-nav { display: flex; align-items: center; gap: 10px; }
.iso-cal-nav b { min-width: 130px; text-align: center; text-transform: capitalize; font-size: 14px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dow span { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { min-height: 74px; border: 1px solid var(--line); border-radius: 10px; padding: 5px 6px; background: var(--card);
  display: flex; flex-direction: column; gap: 3px; }
.cal-cell.out { background: transparent; border: none; }
.cal-cell.hoy { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-cell.hoy .cal-num { color: var(--green-d); }
.cal-ev { font-size: 10.5px; font-weight: 600; padding: 2px 5px; border-radius: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.iso-cal-leg { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.iso-cal-leg i.cdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
@media (max-width: 620px){ .cal-cell { min-height: 58px; } .cal-ev { font-size: 9px; } }

/* ===== Bitácora operativa ===== */
.bit-riesgo { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.bit-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 820px){ .bit-grid2 { grid-template-columns: 1fr; } }
/* Matriz de riesgo 5x5 */
.bit-mtx { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.bit-mtx-cell { width: 46px; height: 40px; border-radius: 8px; text-align: center; color: #fff; font-size: 13px; vertical-align: middle; }
.bit-mtx-cell b { font-size: 15px; }
.bit-mtx th { font-size: 11px; color: var(--muted); font-weight: 700; width: 22px; text-align: center; }
.bit-mtx-axis { color: var(--muted); }
.bit-mtx-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 600; }
/* Pareto */
.bit-pareto { margin-bottom: 10px; }
.bit-pareto-lbl { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 3px; }
.bit-pareto-bar { position: relative; height: 12px; background: var(--bg-soft); border-radius: 6px; overflow: visible; }
.bit-pareto-bar i { display: block; height: 100%; background: #ea580c; border-radius: 6px; }
.bit-acum { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ink); border-radius: 2px; }
/* Tendencia */
.bit-tend { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 10px; }
.bit-tend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bit-tend-bar { width: 70%; min-height: 3px; background: linear-gradient(180deg, #7c3aed, #a78bfa); border-radius: 6px 6px 0 0; }
.bit-tend-col span { font-size: 10.5px; color: var(--muted); }
/* Copiloto recomendaciones */
.bit-rec { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px 17px; margin-bottom: 11px; }
.bit-rec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.bit-rec-h b { font-size: 15px; }
.bit-rec-nivel { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; letter-spacing: .04em; }
.bit-rec p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.bit-rec-accion { margin-top: 9px; background: var(--bg-soft); border-radius: 9px; padding: 9px 12px; font-size: 13.5px; }
/* Formulario de alta */
.bit-riesgo-box { background: var(--bg-soft); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.bit-riesgo-live { text-align: center; font-size: 13px; font-weight: 600; margin-top: 4px; }
.bit-chips-sel { display: flex; flex-wrap: wrap; gap: 8px; }
.bit-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; background: var(--bg-soft); padding: 6px 11px; border-radius: 9px; }
.bit-chk input { width: 15px; height: 15px; accent-color: var(--green); }
.bit-sec { margin: 16px 0 8px; font-size: 14px; }
.bit-adv { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.bit-adv summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--green-d); padding: 6px 0; }

/* ===== Vista Gerencial (cockpit del Jefe de agentes) ===== */
.ger-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px){ .ger-top { grid-template-columns: 1fr; } }
.ger-health-lbl { font-size: 15px; font-weight: 800; }
.ger-dims { display: flex; flex-direction: column; gap: 7px; }
.ger-dim-h { display: flex; justify-content: space-between; font-size: 12.5px; }
.ger-dim-bar { height: 7px; border-radius: 5px; background: var(--bg-soft); overflow: hidden; margin-top: 3px; }
.ger-dim-bar i { display: block; height: 100%; border-radius: 5px; }
.ger-foco-item { padding: 8px 12px; margin-bottom: 6px; background: var(--bg-soft); border-radius: 9px; }
.ger-foco-item b { font-size: 13px; } .ger-foco-item p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ger-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ger-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ger-kpi-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ger-kpi-v { font-size: 22px; font-weight: 800; margin: 3px 0; font-variant-numeric: tabular-nums; }
.ger-kpi-n { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.ger-kpi-m { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.ger-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ger-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px){ .ger-areas { grid-template-columns: 1fr; } }
.ger-area .card-body { max-height: 260px; overflow: auto; }
.ger-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ger-row:last-child { border-bottom: none; }
.ger-row-r { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ger-checkup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.badge.amber { background: #fef3c7; color: #b45309; }

/* ===== Contabilidad ===== */
.cont-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cont-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cont-sel label { font-size: 12px; color: var(--muted); font-weight: 600; }
.cont-sel select { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-weight: 600; background: var(--card); color: var(--ink); }
.cont-live { font-size: 11px; color: var(--green-d); background: var(--green-l); padding: 3px 9px; border-radius: 20px; }
.cont-row { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px dashed var(--line-soft); font-size: 13.5px; }
.cont-row b { font-variant-numeric: tabular-nums; }
.cont-tot { border-top: 1px solid var(--line); }
.cont-final { border-top: 2px solid var(--ink); border-bottom: none; margin-top: 4px; padding-top: 8px; }
.cont-sec { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; }
.pz-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.pz-tabla th { text-align: left; font-size: 11px; color: var(--muted); padding: 4px; }
.pz-tabla td { padding: 3px 4px; }
.pz-tabla select, .pz-tabla input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; font-size: 12.5px; background: var(--card); color: var(--ink); }
.pz-balance { text-align: right; font-size: 13px; margin: 10px 0; }
.cont-nif { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 6px; }
.pz-aviso { background: var(--amber-tint, #fef3c7); border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
[data-theme="dark"] .pz-aviso { background: #2a2410; border-color: #4a3d15; color: #fcd34d; }
.banco-card .banco-saldo { text-align: right; }
.cont-reg { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: 20px; }

/* ===================== Clima del día (chip en el saludo) ===================== */
.greeting-right { display: flex; align-items: center; gap: 12px; }
.clima-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 12px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.clima-chip.clima-load { color: var(--muted); font-size: 12.5px; }
.clima-chip .clima-emoji { font-size: 20px; line-height: 1; }
.clima-chip .clima-temp { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.clima-chip .clima-meta { display: flex; flex-direction: column; line-height: 1.15; }
.clima-chip .clima-meta b { font-size: 12.5px; }
.clima-chip .clima-meta small { font-size: 10.5px; color: var(--muted); }

/* ===================== SPA laboral ===================== */
.spa-wrap { max-width: 920px; margin: 0 auto; }
.spa-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.spa-title h1 { font-size: 24px; letter-spacing: -.02em; }
.spa-title p { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.spa-panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.spa-step { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; }
.spa-step:first-child { margin-top: 0; }
.spa-num { width: 24px; height: 24px; border-radius: 50%; background: #0d9488; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.spa-step h3 { font-size: 15px; } .spa-step small { color: var(--muted); font-weight: 400; }
.spa-ejgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.spa-ej { text-align: left; background: var(--bg-soft); border: 2px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: .15s; }
.spa-ej:hover { border-color: var(--ec); } .spa-ej.on { border-color: var(--ec); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec) 18%, transparent); }
.spa-ej-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.spa-ej-emoji { font-size: 24px; }
.spa-ej-meta { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ec); background: color-mix(in srgb, var(--ec) 14%, transparent); padding: 3px 9px; border-radius: 20px; }
.spa-ej h4 { font-size: 14px; margin-bottom: 4px; } .spa-ej p { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.spa-pills { display: flex; gap: 10px; }
.spa-pill { background: var(--bg-soft); border: 2px solid var(--line); border-radius: 12px; padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s; }
.spa-pill.on { border-color: #0d9488; color: #0d9488; background: color-mix(in srgb, #0d9488 12%, transparent); }
.spa-hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.spa-songrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.spa-son { position: relative; text-align: left; color: #fff; border: none; border-radius: 14px; padding: 14px; cursor: pointer; overflow: hidden; min-height: 96px; background: var(--sg); box-shadow: inset 0 0 0 100px rgba(0,0,0,.12); transition: transform .12s; }
.spa-son:hover { transform: translateY(-2px); }
.spa-son.on { box-shadow: inset 0 0 0 100px rgba(0,0,0,0), 0 0 0 3px #fff, 0 0 0 5px #0d9488; }
.spa-son-emoji { font-size: 26px; display: block; margin-bottom: 6px; }
.spa-son b { font-size: 13px; display: block; } .spa-son small { font-size: 10.5px; opacity: .9; line-height: 1.35; display: block; margin-top: 2px; }
.spa-son-play { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; background: rgba(255,255,255,.28); padding: 2px 8px; border-radius: 20px; }
.spa-cta { text-align: center; margin: 24px 0 12px; }
.spa-start { background: linear-gradient(135deg,#0d9488,#0f766e); color: #fff; border: none; border-radius: 14px; padding: 15px 40px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 20px rgba(13,148,136,.35); transition: .15s; }
.spa-start:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(13,148,136,.45); }
.spa-priv { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.5; margin-top: 10px; }

/* Respiración activa */
.spa-active { --ec: #0ea5e9; min-height: 62vh; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ec) 12%, var(--card)), var(--card)); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.spa-active-top { display: flex; align-items: center; justify-content: space-between; }
.spa-active-top b { font-size: 15px; } .spa-active-top small { display: block; color: var(--muted); font-size: 12px; }
.spa-remain { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ec); }
.spa-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 0; }
.spa-circle { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--ec) 55%, #fff), var(--ec)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 60px color-mix(in srgb, var(--ec) 45%, transparent); transition: transform 4s ease-in-out; transform: scale(.72); }
.spa-circle.grande { transform: scale(1.18); }
.spa-fase { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.spa-count { font-size: 15px; opacity: .85; margin-top: 4px; font-variant-numeric: tabular-nums; }
.spa-controls { display: flex; gap: 12px; justify-content: center; }
.spa-fin { text-align: center; max-width: 460px; margin: 8vh auto; }
.spa-fin-ic { font-size: 56px; }
.spa-fin h2 { font-size: 24px; margin: 8px 0; }
.spa-fin p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.spa-fin-btns { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

/* Mini-reproductor flotante */
#spa-mini { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; color: #fff; border-radius: 14px; padding: 9px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(4px); }
#spa-mini .spm-emoji { font-size: 22px; }
#spa-mini .spm-txt b { font-size: 12.5px; display: block; line-height: 1.1; } #spa-mini .spm-txt small { font-size: 10px; opacity: .85; }
#spa-mini .spm-sel { background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 8px; padding: 5px 6px; font-size: 11px; max-width: 130px; cursor: pointer; }
#spa-mini .spm-sel option { color: #111; }
#spa-mini .spm-btn { background: rgba(255,255,255,.22); color: #fff; border: none; width: 30px; height: 30px; border-radius: 9px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#spa-mini .spm-btn:hover { background: rgba(255,255,255,.38); }
#spa-mini .spm-stop:hover { background: rgba(239,68,68,.7); }
@media (max-width: 620px) { .spa-ejgrid, .spa-songrid { grid-template-columns: 1fr 1fr; } }

/* Reporte de bienestar (RH) */
.bien-serie { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.bien-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bien-bar i { width: 100%; max-width: 20px; background: linear-gradient(180deg,#0d9488,#0f766e); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
.bien-bar span { font-size: 9px; color: var(--muted); margin-top: 4px; }
.bien-lbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.bien-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bien-chip { font-size: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; }
.bien-chip b { color: #0d9488; }

/* ===================== SST — Riesgo psicosocial ===================== */
.sst-intro { background: color-mix(in srgb, #0e7490 8%, var(--card)); border: 1px solid color-mix(in srgb, #0e7490 22%, var(--line)); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.55; }
.sst-headcard { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid #0e7490; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; }
.sst-headcard b { font-size: 14px; } .sst-headcard small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sst-part { text-align: right; } .sst-part b { font-size: 22px; color: #0e7490; } .sst-part span { display: block; font-size: 11px; color: var(--muted); }
.sst-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sst-camp-stats { display: flex; gap: 16px; } .sst-camp-stats > div { text-align: center; } .sst-camp-stats b { font-size: 18px; } .sst-camp-stats span { display: block; font-size: 10.5px; color: var(--muted); }
.sst-pais-info { margin-top: 8px; }

/* Banner de evaluación pendiente */
.sst-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #0e7490, #155e75); color: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; cursor: pointer; box-shadow: 0 6px 20px rgba(14,116,144,.3); transition: transform .12s; }
.sst-banner:hover { transform: translateY(-2px); }
.sst-banner-ic { font-size: 28px; } .sst-banner-tx { flex: 1; } .sst-banner-tx b { font-size: 14.5px; display: block; } .sst-banner-tx small { font-size: 12px; opacity: .92; }
.sst-banner-cta { background: rgba(255,255,255,.2); padding: 8px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Cuestionario */
.sst-quiz { max-width: 760px; margin: 0 auto; }
.sst-quiz-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.sst-quiz-head h1 { font-size: 20px; } .sst-quiz-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sst-quiz-note { background: #f0fdfa; border: 1px solid #99f6e4; color: #0f766e; border-radius: 12px; padding: 12px 16px; font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
[data-theme="dark"] .sst-quiz-note { background: #0c2b2a; border-color: #155e57; color: #5eead4; }
.sst-progress { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; padding: 6px 14px 6px 8px; margin-bottom: 18px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05)); }
.sst-progress-bar { flex: 1; height: 8px; background: var(--bg-soft); border-radius: 20px; overflow: hidden; } .sst-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg,#0e7490,#14b8a6); border-radius: 20px; transition: width .3s; }
.sst-progress span { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sst-qcat { margin-bottom: 22px; }
.sst-qcat h3 { font-size: 15px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sst-qnum { width: 24px; height: 24px; border-radius: 50%; background: #0e7490; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sst-q { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; transition: border-color .15s; }
.sst-q.answered { border-color: #14b8a6; }
.sst-q-t { font-size: 13.5px; margin-bottom: 10px; font-weight: 500; }
.sst-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.sst-opt { flex: 1; min-width: 90px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 11px; text-align: center; color: var(--muted); transition: .12s; }
.sst-opt:hover { border-color: #0e7490; }
.sst-opt input { accent-color: #0e7490; width: 16px; height: 16px; }
.sst-opt:has(input:checked) { border-color: #0e7490; background: color-mix(in srgb, #0e7490 10%, transparent); color: var(--ink); font-weight: 600; }
.sst-quiz-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .sst-scale { gap: 5px; } .sst-opt { min-width: 60px; font-size: 10px; } }

/* ===================== Mini juegos (arcade) ===================== */
.jg-wrap { max-width: 960px; margin: 0 auto; }
.jg-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.jg-title { flex: 1; } .jg-title h1 { font-size: 23px; } .jg-title p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.jg-nivel { text-align: right; background: linear-gradient(135deg,#7c3aed,#5b21b6); color: #fff; border-radius: 12px; padding: 8px 16px; }
.jg-nivel b { font-size: 15px; display: block; } .jg-nivel span { font-size: 11px; opacity: .9; }
.jg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.jg-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--jc); border-radius: 16px; padding: 18px; cursor: pointer; transition: transform .14s, box-shadow .14s; }
.jg-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.jg-card-emoji { font-size: 38px; } .jg-card h3 { font-size: 16px; margin: 8px 0 4px; }
.jg-teoria { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--jc); margin-bottom: 8px; }
.jg-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; min-height: 38px; }
.jg-card-best { font-size: 11.5px; color: var(--ink-soft); margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }

/* Zona de juego */
.jg-play { --jc: #7c3aed; max-width: 640px; margin: 0 auto; }
.jg-play-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jg-hud { font-size: 15px; } .jg-hud b { font-size: 22px; color: var(--jc); } .jg-hud-lv { color: var(--muted); font-size: 12px; margin-left: 6px; }
#jg-lives { font-size: 16px; letter-spacing: 2px; }
.jg-stage { position: relative; height: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: box-shadow .1s; user-select: none; }
.jg-hint { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 12px; }

/* Foco (Stroop) */
.foco-word { font-size: 54px; font-weight: 900; letter-spacing: .02em; }
.foco-timer { width: 200px; height: 8px; background: var(--bg-soft); border-radius: 20px; overflow: hidden; } .foco-timer i { display: block; height: 100%; background: var(--jc); width: 100%; }
.foco-btns { display: flex; gap: 14px; }
.foco-b { width: 66px; height: 66px; border-radius: 14px; border: none; cursor: pointer; transition: transform .1s; } .foco-b:hover { transform: scale(1.08); } .foco-b:active { transform: scale(.94); }

/* Memoria (Simón) */
.mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mem-pad { width: 110px; height: 110px; border-radius: 18px; border: 3px solid var(--pc); background: color-mix(in srgb, var(--pc) 14%, var(--card)); font-size: 40px; cursor: pointer; transition: .1s; opacity: .82; }
.mem-pad.on { background: var(--pc); opacity: 1; transform: scale(1.06); box-shadow: 0 0 26px var(--pc); }
.mem-pad:active { transform: scale(.96); }
.mem-msg { font-size: 15px; font-weight: 700; color: var(--muted); }

/* Caza (Go/No-Go) */
.caza-stage { justify-content: flex-start; align-items: flex-start; }
.caza-t { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: none; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; animation: caza-pop .18s ease-out; }
.caza-t.go { background: #dcfce7; box-shadow: 0 0 0 3px #16a34a; } .caza-t.spam { background: #fee2e2; box-shadow: 0 0 0 3px #ef4444; }
@keyframes caza-pop { from { transform: scale(.3); } to { transform: scale(1); } }

/* Cierra el trato (timing) */
.trato-wrap { width: 90%; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.trato-bar { position: relative; width: 100%; height: 40px; background: var(--bg-soft); border-radius: 12px; overflow: hidden; }
.trato-zone { position: absolute; top: 0; height: 100%; background: color-mix(in srgb, #16a34a 30%, transparent); border-left: 2px solid #16a34a; border-right: 2px solid #16a34a; }
.trato-mark { position: absolute; top: -4px; width: 6px; height: 48px; background: var(--ink); border-radius: 4px; transform: translateX(-50%); }
.trato-btn { padding: 14px 40px; font-size: 16px; }

/* Tecleo (typing) */
.tec-time { width: 80%; display: flex; align-items: center; gap: 10px; }
.tec-timebar { flex: 1; height: 10px; background: var(--bg-soft); border-radius: 20px; overflow: hidden; } .tec-timebar i { display: block; height: 100%; width: 66%; background: linear-gradient(90deg,#f59e0b,#ef4444); transition: width .1s linear; }
.tec-time span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tec-word { font-size: 42px; font-weight: 800; letter-spacing: .04em; color: var(--jc); }
.tec-word.bad { color: #ef4444; }
.tec-input { font-size: 22px; text-align: center; padding: 10px 18px; border: 2px solid var(--jc); border-radius: 12px; width: 70%; outline: none; }

/* Game over */
.jg-over { --jc: #7c3aed; text-align: center; max-width: 440px; margin: 6vh auto; }
.jg-over-emoji { font-size: 58px; }
.jg-over-score { font-size: 60px; font-weight: 900; color: var(--jc); line-height: 1; }
.jg-over-lbl { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.jg-record { background: #fef9c3; color: #a16207; font-weight: 800; border-radius: 20px; padding: 6px 16px; display: inline-block; margin-bottom: 8px; }
[data-theme="dark"] .jg-record { background: #3a340f; color: #fde047; }
.jg-retomsg { background: color-mix(in srgb, var(--jc) 12%, transparent); border-radius: 12px; padding: 10px 14px; font-weight: 600; margin: 10px 0; }
.jg-over-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Retos y torneos */
.jg-sec { font-size: 14px; margin-bottom: 10px; }
.jg-reto-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.jg-reto-ic { font-size: 26px; }
.jg-reto-scores { font-size: 12px; color: var(--muted); margin-top: 3px; }
.jg-reto-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.jg-reto-op { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; } .jg-reto-op:hover { border-color: var(--green); }
.jg-reto-op small { display: block; font-size: 11px; }
.jg-tabla { list-style: none; margin: 0; padding: 0; } .jg-tabla li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .jg-tabla li b { font-variant-numeric: tabular-nums; }
.jg-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.jg-pos.top { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.jg-top-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.jg-tor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* Ejecutivo en la ciudad (platformer 8-bit) */
.ciudad-cv { width: 100%; height: 100%; display: block; image-rendering: pixelated; border-radius: 17px; background: #5c94fc; }

/* ===================== Chat: sugerencias ML + menú "más" ===================== */
.msg-sug.ev { border-left-color: #7c3aed; }
.cw-sug { font-size: 11px; background: var(--bg-soft); border-radius: 8px; padding: 4px 8px; margin-top: 6px; color: var(--muted); }
.cw-sug button { background: #7c3aed; color: #fff; border: none; border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; margin-left: 4px; }
.chat-mas { display: flex; flex-direction: column; gap: 8px; }
.chat-mas button { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor: pointer; transition: .12s; }
.chat-mas button:hover { border-color: var(--green); transform: translateX(2px); }
.chat-mas button span { font-size: 22px; } .chat-mas button b { font-size: 13.5px; display: block; } .chat-mas button small { font-size: 11.5px; color: var(--muted); }

/* ===================== Mi calendario ===================== */
.cal-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 10px; } .cal-nav h2 { font-size: 18px; min-width: 150px; text-align: center; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 11.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-grid-head div { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { min-height: 92px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px; cursor: pointer; overflow: hidden; transition: .12s; }
.cal-cell:hover { border-color: #0ea5e9; }
.cal-cell.empty { background: transparent; border: none; cursor: default; }
.cal-cell.hoy { border-color: #0ea5e9; box-shadow: inset 0 0 0 1px #0ea5e9; }
.cal-cell.hoy .cal-num { background: #0ea5e9; color: #fff; }
.cal-num { font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-chip { font-size: 10px; padding: 2px 5px; border-radius: 4px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--muted); margin-top: 3px; padding-left: 3px; }
.cal-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
@media (max-width: 640px) { .cal-cell { min-height: 64px; } .cal-chip { display: none; } .cal-cell::after { content: ''; } }

/* ===================== Mi espacio: widgets reordenables (iPhone) ===================== */
.me-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.me-widgets { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.me-widgets.compacto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .me-widgets.compacto { grid-template-columns: 1fr; } }
.me-widget { position: relative; }
.me-whandle { display: none; }
.mi-handle { display: none; }
/* Modo edición: jiggle + handles + no navegación */
.mi-grid.editando .mi-card, .me-widgets.editando .me-widget { cursor: grab; }
.mi-grid.editando .mi-card { animation: jiggle .28s infinite; }
.me-widgets.editando .me-widget { animation: jiggle .32s infinite; box-shadow: 0 4px 18px rgba(0,0,0,.1); border-radius: 16px; }
.mi-grid.editando .mi-handle { display: flex; position: absolute; top: 8px; right: 10px; color: var(--muted); font-size: 16px; align-items: center; justify-content: center; }
.me-widgets.editando .me-whandle { display: flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 10px 10px 0 0; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: grab; }
.me-widget.dragging, .mi-card.dragging { opacity: .5; outline: 2px dashed #0ea5e9; }
.mi-card.dragging { transform: scale(.96); }
@keyframes jiggle { 0% { transform: rotate(-.5deg); } 50% { transform: rotate(.6deg); } 100% { transform: rotate(-.5deg); } }
.mi-card { position: relative; }

/* ===================== Ventas: líneas editables, pagos, docs ===================== */
.vln { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vln-nom { font-size: 13px; font-weight: 600; }
.vln-in { display: flex; flex-direction: column; }
.vln-in label { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.vln-in input { width: 92px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; text-align: right; font-size: 13px; }
.vln-sub { font-weight: 700; font-size: 13px; min-width: 84px; text-align: right; }
.pagos-list { display: flex; flex-direction: column; gap: 4px; }
.pago-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-soft); border-radius: 8px; font-size: 13px; }
.pago-check { font-size: 12.5px; font-weight: 600; margin-top: 6px; padding: 6px 10px; border-radius: 8px; }
.pago-check.ok { background: color-mix(in srgb, #16a34a 12%, transparent); color: var(--green-d); }
.pago-check.bad { background: color-mix(in srgb, #ef4444 12%, transparent); color: var(--red); }
.doc-lock { background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) { .vln { grid-template-columns: 1fr 1fr; } .vln-nom { grid-column: 1 / -1; } }

/* Diálogos del sistema (confirmar/preguntar) */
.dlg { min-width: 320px; max-width: 460px; }
.dlg h3 { font-size: 16px; }

/* ===================== Gamificación ===================== */
.gam-wrap { max-width: 900px; margin: 0 auto; }
.gam-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.gam-title h1 { font-size: 22px; } .gam-title p { color: var(--muted); font-size: 13px; }
.gam-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, #f59e0b, #b45309); color: #fff; border-radius: 18px; padding: 18px 22px; margin-bottom: 16px; }
.gam-hero .ger-anillo text, .gam-hero svg text { fill: #fff; }
.gam-lvl { font-size: 18px; } .gam-xp { font-size: 13px; opacity: .95; margin: 4px 0; } .gam-stats { font-size: 12px; opacity: .9; }
.gam-concurso { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gam-concurso-pos { text-align: center; min-width: 66px; } .gam-concurso-pos b { font-size: 17px; color: #f59e0b; } .gam-concurso-pos span { display: block; font-size: 10px; color: var(--muted); }
.gam-trofeos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gam-trofeo { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; background: var(--card); }
.gam-trofeo.on { border-color: #f59e0b; box-shadow: 0 3px 12px rgba(245,158,11,.18); }
.gam-trofeo.off { opacity: .6; filter: grayscale(.6); }
.gam-trofeo-ico { font-size: 34px; } .gam-trofeo-nom { font-weight: 700; font-size: 13px; margin: 4px 0; } .gam-trofeo-desc { font-size: 11px; color: var(--muted); min-height: 30px; }
.gam-trofeo-pts { color: #b45309; font-weight: 700; font-size: 12px; margin-top: 6px; }
.gam-trofeo-prog { margin-top: 6px; } .gam-trofeo-bar { height: 6px; background: var(--bg-soft); border-radius: 20px; overflow: hidden; } .gam-trofeo-bar i { display: block; height: 100%; background: #f59e0b; } .gam-trofeo-prog span { font-size: 10px; color: var(--muted); }
.gam-recompensa { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .gam-rec-ico { font-size: 26px; }
.gam-rank { list-style: none; margin: 0; padding: 0; } .gam-rank li { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid var(--line); font-size: 13.5px; border-radius: 8px; } .gam-rank li.yo { background: color-mix(in srgb, #f59e0b 12%, transparent); }
/* Celebración a pantalla completa */
.gam-celebra { position: fixed; inset: 0; z-index: 200; background: rgba(11,18,32,.6); display: flex; align-items: center; justify-content: center; animation: fadein .2s; }
.gam-celebra canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gam-celebra-card { position: relative; background: var(--card); border-radius: 22px; padding: 34px 40px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: pop .35s cubic-bezier(.2,1.3,.4,1); max-width: 380px; }
.gam-celebra-ico { font-size: 72px; animation: bounce 1s infinite; } .gam-celebra-t { color: #f59e0b; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; margin-top: 6px; }
.gam-celebra-n { font-size: 26px; font-weight: 800; margin: 4px 0; } .gam-celebra-d { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.gam-celebra-pts { display: inline-block; background: #fef3c7; color: #b45309; font-weight: 800; border-radius: 20px; padding: 5px 16px; margin-bottom: 16px; }
[data-theme="dark"] .gam-celebra-pts { background: #3a340f; color: #fde047; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ===================== Gamificación (enriquecida) ===================== */
.gam-hero-coins { text-align: center; background: rgba(255,255,255,.18); border-radius: 14px; padding: 10px 16px; }
.gam-coins-n { font-size: 20px; font-weight: 800; } .gam-hero-coins span { font-size: 10.5px; opacity: .9; }
.gam-mision { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .gam-mision-ico { font-size: 24px; } .gam-mision-meta { text-align: right; font-size: 12px; font-weight: 700; min-width: 56px; }
.gam-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gam-item { position: relative; text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; background: var(--card); }
.gam-item.lock { opacity: .8; background: var(--bg-soft); } .gam-item-ico { font-size: 34px; } .gam-item b { display: block; margin: 4px 0; font-size: 13.5px; } .gam-item p { font-size: 11.5px; color: var(--muted); min-height: 30px; }
.gam-item-costo { font-weight: 800; color: #b45309; margin: 6px 0 8px; }
.gam-pausada { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 700; color: var(--amber, #b45309); background: #f59e0b22; border: 1px solid var(--amber, #b45309); border-radius: 999px; padding: 2px 7px; }
.gam-item-acc { display: flex; justify-content: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.gam-item-acc button { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 13px; cursor: pointer; line-height: 1; }
.gam-item-acc button:hover { border-color: var(--green-d, #15803d); }
.gam-item-acc button.del:hover { border-color: var(--red, #dc2626); background: #dc26261a; }
.gam-kudo { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); } .gam-kudo-ico { font-size: 22px; }
.gam-feed { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .gam-feed span:first-child { font-size: 17px; }
.gam-persona-hero { display: flex; align-items: center; gap: 14px; }
.gam-persona-met { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }

/* ============================ Banner rotativo de pendientes (SST + Legal) ============================ */
/* Un solo banner a la vez (mismo look que el de riesgo psicosocial), que rota. */
.pend-rot { position: relative; margin-bottom: 16px; }
.pend-rot-in { transition: opacity .22s ease; }
.pend-rot-in .sst-banner { margin-bottom: 0; }
.sst-banner.legal { background: linear-gradient(135deg, #0f766e, #115e59); box-shadow: 0 6px 20px rgba(15,118,110,.3); }
.sst-banner.legal.prio-alta { background: linear-gradient(135deg, #b45309, #92400e); box-shadow: 0 6px 20px rgba(180,83,9,.3); }
.sst-banner.legal .sst-banner-tx { min-width: 0; }
.sst-banner.legal .sst-banner-tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-dots { display: flex; gap: 6px; justify-content: center; margin: 8px 0 0; }
.pend-dots .pd { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: all .2s; }
.pend-dots .pd.on { background: #0e7490; width: 20px; border-radius: 20px; }
.pend-detalle { background: var(--soft, #f1f5f9); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.dlg-sep { margin: 14px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ============================ Módulo Legal ============================ */
.legal-intro { background: color-mix(in srgb, #0f766e 8%, transparent); border: 1px solid color-mix(in srgb, #0f766e 22%, transparent);
  border-radius: 12px; padding: 12px 15px; font-size: 13px; line-height: 1.5; color: var(--ink); margin-bottom: 12px; }
/* ===== Auditoría 360 ===== */
.btn.primary { background: var(--green); color: #fff; }
.seg-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-pill { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); }
.seg-pill.on { background: #0f766e; color: #fff; border-color: #0f766e; }
.aud-picker { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.aud-pick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.aud-pick-row select { flex: 1; min-width: 220px; }
.aud-report { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.aud-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 14px; }
.aud-head-id { display: flex; align-items: center; gap: 12px; }
.aud-head-id b { font-size: 18px; display: block; }
.aud-head-id small { display: block; font-size: 12px; color: var(--ink); }
.aud-head-id small.muted { color: var(--muted); }
.aud-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.aud-avatar-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.aud-head-score { display: flex; align-items: center; gap: 14px; }
.aud-ring { --p: 0; --col: #16a34a; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--col) calc(var(--p) * 1%), var(--line) 0); flex: none; }
.aud-ring-in { width: 60px; height: 60px; border-radius: 50%; background: var(--card); display: grid; place-items: center; text-align: center; }
.aud-ring-in b { font-size: 22px; line-height: 1; } .aud-ring-in span { font-size: 10px; color: var(--muted); }
.aud-badge { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.aud-resumen { font-size: 13px; color: var(--ink); margin: 4px 0 16px; }
.aud-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 16px; }
.aud-sec { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.aud-sec h4 { font-size: 13px; margin: 0 0 10px; }
.aud-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aud-metric { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.aud-metric b { display: block; font-size: 17px; font-weight: 800; } .aud-metric span { font-size: 10.5px; color: var(--muted); }
.aud-metric.warn { border-color: color-mix(in srgb, var(--red) 45%, transparent); } .aud-metric.warn b { color: var(--red); }
.aud-metric.clic { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.aud-metric.clic:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.08); border-color: #0f766e; }
.aud-metric.clic::after { content: "›"; position: absolute; top: 4px; right: 7px; color: var(--muted); font-size: 13px; }
.aud-metric { position: relative; }
.aud-metric.sel { border-color: #0f766e; box-shadow: 0 0 0 2px color-mix(in srgb, #0f766e 30%, transparent); }
.aud-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.aud-detalle-box { background: var(--card); border: 1px solid #0f766e; border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.aud-detalle-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.aud-detalle-h b { font-size: 14px; }
.aud-detalle-box table { width: 100%; }
.aud-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.aud-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.aud-box h4 { font-size: 13px; margin: 0 0 10px; }
.aud-copilot { background: color-mix(in srgb, #7c3aed 7%, transparent); border-color: color-mix(in srgb, #7c3aed 25%, transparent); }
.aud-hall { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.aud-hall:last-child { border-bottom: none; }
.aud-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.aud-rec { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; }
.aud-legal { background: color-mix(in srgb, #0f766e 7%, transparent); border: 1px solid color-mix(in srgb, #0f766e 22%, transparent); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.aud-legal h4 { font-size: 13px; margin: 0 0 8px; } .aud-legal p { font-size: 12.5px; line-height: 1.55; margin: 0 0 6px; }
.aud-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.aud-bar { height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; }
.aud-bar > span { display: block; height: 100%; }
.aud-histbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.aud-histbar .muted { flex: 1; font-size: 12px; }

/* ===== E-learning ===== */
.el-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.el-toolbar-hint { font-size: 12px; color: var(--muted); flex: 1; min-width: 220px; }
.el-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.el-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.el-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.1); border-color: var(--cc); }
.el-card-portada { font-size: 46px; padding: 22px; text-align: center; }
.el-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.el-card-top { display: flex; gap: 6px; flex-wrap: wrap; }
.el-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.el-card-body h4 { margin: 2px 0; font-size: 15px; }
.el-card-body p.muted { font-size: 12.5px; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.el-card-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 5px; flex-wrap: wrap; }
.el-card-foot { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.el-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.el-prog-cursos { font-size: 20px; display: flex; gap: 4px; flex-wrap: wrap; }
/* avatar / emoji pickers */
.el-av-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.el-av { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; transition: .12s; }
.el-av small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.el-av .el-avsvg { border-radius: 50%; background: color-mix(in srgb, var(--avc, #0ea5e9) 12%, transparent); padding: 3px; }
.el-av.on { border-color: var(--avc, #0ea5e9); box-shadow: 0 0 0 2px color-mix(in srgb, var(--avc, #0ea5e9) 30%, transparent); }
.el-av.on small { color: var(--ink); }
.el-avsvg { display: inline-block; vertical-align: middle; }
.el-avchip .el-avsvg { border-radius: 50%; }
.el-av-mini { display: inline-flex; align-items: center; gap: 4px; }
.el-av-mini .el-avsvg { border-radius: 50%; }
/* editor empty + add-lesson */
.el-empty-editor { text-align: center; padding: 30px 20px; background: var(--bg); border: 1px dashed var(--line); border-radius: 14px; margin-bottom: 12px; }
.el-empty-ico { font-size: 44px; } .el-empty-editor b { display: block; font-size: 16px; margin: 6px 0; }
.el-empty-editor p { max-width: 520px; margin: 0 auto; font-size: 13px; line-height: 1.5; }
.el-add-lec-h { margin-bottom: 10px; font-size: 14px; }
.el-add-lec-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.el-tipo-ico { font-size: 15px; }
.el-tip { font-size: 12px; color: var(--muted); background: color-mix(in srgb, #0ea5e9 7%, transparent); border-radius: 8px; padding: 8px 11px; line-height: 1.5; }
.play-preview-banner { background: color-mix(in srgb, #d97706 12%, transparent); border: 1px solid color-mix(in srgb, #d97706 30%, transparent); border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px; }
.inter-avatar .el-avsvg { filter: drop-shadow(0 3px 6px rgba(0,0,0,.15)); }
.el-emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.el-emoji { font-size: 22px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.el-emoji.on { border-color: #0ea5e9; box-shadow: 0 0 0 2px #0ea5e933; }
.el-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.el-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); font-weight: 500; cursor: pointer; }
/* editor */
.el-editor-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.el-eh-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.el-eh-portada { font-size: 26px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.el-eh-id b { font-size: 16px; display: block; } .el-eh-id small { font-size: 12px; }
.el-eh-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.el-lec-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.el-lec-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.el-lec-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.el-lec-ico { font-size: 22px; } .el-lec-info { flex: 1; } .el-lec-info b { font-size: 14px; }
.el-lec-act { display: flex; gap: 6px; }
.el-add-lec { background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.el-tipo-btn { font-size: 12.5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-weight: 600; }
.el-tipo-btn:hover { border-color: #0ea5e9; color: #0ea5e9; }
.el-q { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.el-q-h { display: flex; justify-content: space-between; align-items: center; }
.el-opt { display: flex; align-items: center; gap: 8px; }
.el-opt .inp { flex: 1; }
.el-ia-ex { display: flex; flex-wrap: wrap; gap: 6px; }
/* asignar */
.el-asig-tools { display: flex; gap: 8px; margin-bottom: 8px; }
.el-asig-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.el-asig-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.el-asig-item:last-child { border-bottom: none; }
.el-prog-pick { display: flex; flex-direction: column; gap: 6px; }
.el-prog-opt { text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 13px; }
.el-prog-opt.on { border-color: #7c3aed; background: #7c3aed12; font-weight: 600; }
/* Mi Espacio: Mis cursos */
.mc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.mc-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.mc-kpi b { display: block; font-size: 26px; font-weight: 800; } .mc-kpi span { font-size: 12px; color: var(--muted); }
.mc-kpi.ok b { color: var(--green); }
.mc-h { font-size: 15px; margin: 18px 0 10px; }
.mc-list { display: flex; flex-direction: column; gap: 12px; }
.mc-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.mc-portada { font-size: 32px; width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.mc-info { flex: 1; min-width: 0; } .mc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mc-top b { font-size: 15px; }
.mc-bar { height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.mc-bar > span { display: block; height: 100%; transition: width .4s; }
.mc-cta { flex: none; } .mc-check { font-size: 24px; }
.mc-prog-sub { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.mc-sub { text-align: left; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; }
.mc-sub.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); cursor: default; }
/* Reproductor */
.play-wrap { max-width: 1000px; margin: 0 auto; }
.play-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.play-title { flex: 1; font-size: 16px; } .play-title b { font-size: 16px; }
.play-prog { display: flex; align-items: center; gap: 8px; } .play-bar { width: 120px; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; } .play-bar > span { display: block; height: 100%; background: var(--green); }
.play-body { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.play-sidebar { display: flex; flex-direction: column; gap: 6px; }
.play-lec { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left; font-size: 13px; }
.play-lec.active { border-color: #0ea5e9; background: #0ea5e910; font-weight: 600; }
.play-lec.done { color: var(--muted); } .play-lec-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-main { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-height: 380px; }
.play-h { font-size: 20px; margin: 0 0 16px; }
.play-content { font-size: 15px; line-height: 1.7; } .play-content h3 { margin-top: 0; }
.play-media, .play-frame { width: 100%; border-radius: 12px; border: none; } .play-frame { height: 460px; } .play-media { background: #000; }
.play-audio { text-align: center; padding: 20px; } .play-audio-ico { font-size: 60px; margin-bottom: 12px; }
.play-ph { background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 50px; text-align: center; color: var(--muted); font-size: 16px; }
.play-foot { margin-top: 20px; display: flex; justify-content: flex-end; }
/* Interactivo (Duolingo) */
.inter-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px; text-align: center; }
.inter-avatar { width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 15%, transparent); border: 3px solid var(--ac); display: grid; place-items: center; font-size: 48px; animation: inter-bounce .5s ease; }
@keyframes inter-bounce { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.inter-bubble { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; max-width: 520px; } .inter-bubble b { font-size: 13px; color: var(--muted); } .inter-bubble p { font-size: 17px; margin: 6px 0 0; }
.inter-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; }
.inter-opt { padding: 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); font-size: 15px; font-weight: 600; cursor: pointer; transition: .12s; }
.inter-opt:hover:not(.picked) { border-color: #0ea5e9; }
.inter-opt.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.inter-opt.bad { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.inter-opt.picked { cursor: default; }
.inter-fb { width: 100%; max-width: 440px; } .inter-msg { padding: 12px; border-radius: 10px; font-weight: 600; margin-bottom: 10px; }
.inter-msg.ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green-d, #15803d); }
.inter-msg.bad { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.inter-next { align-self: center; }
/* Quiz */
.quiz-box { display: flex; flex-direction: column; gap: 16px; }
.quiz-q { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.quiz-q b { font-size: 14.5px; } .quiz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 13.5px; }
.quiz-result { margin-top: 14px; padding: 14px; border-radius: 12px; }
.quiz-result.ok { background: color-mix(in srgb, var(--green) 12%, transparent); }
.quiz-result.bad { background: color-mix(in srgb, var(--red) 10%, transparent); }
/* Curso completado */
.el-done { text-align: center; padding: 50px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.el-done-emoji { font-size: 70px; } .el-done h1 { font-size: 28px; margin: 0; } .el-done h3 { margin: 4px 0; }
.el-done .btn { margin-top: 8px; }
@media (max-width: 720px) { .play-body { grid-template-columns: 1fr; } .mc-kpis { grid-template-columns: 1fr 1fr 1fr; } .el-av-pick { grid-template-columns: repeat(2, 1fr); } }

/* ===== Minutas ===== */
.min-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.min-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.min-filtros .inp { max-width: 220px; }
.min-list { display: flex; flex-direction: column; gap: 10px; }
.min-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.min-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: #0891b2; }
.min-card-ico { font-size: 26px; width: 46px; height: 46px; border-radius: 12px; background: #0891b210; display: grid; place-items: center; flex: none; }
.min-card-body { flex: 1; min-width: 0; }
.min-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .min-card-top b { font-size: 15px; }
.min-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.min-card-body p.muted { font-size: 12.5px; margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.min-card-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.min-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; white-space: nowrap; }
.min-chip.acc { background: color-mix(in srgb, var(--green) 12%, transparent); border-color: transparent; color: var(--green-d, #15803d); }
.min-card-arrow { font-size: 26px; color: var(--muted); flex: none; }
/* nueva minuta */
.min-fuentes { display: flex; flex-wrap: wrap; gap: 6px; }
.min-fuente { font-size: 12.5px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-weight: 600; }
.min-fuente.on { border-color: #0891b2; background: #0891b212; color: #0891b2; }
.min-vinc-h { font-size: 13px; font-weight: 600; margin: 14px 0 8px; }
/* detalle */
.min-detail { display: flex; flex-direction: column; gap: 14px; }
.min-d-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.min-d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.min-d-title { display: flex; align-items: center; gap: 12px; }
.min-d-title h2 { margin: 0; font-size: 20px; } .min-d-title small { font-size: 12.5px; }
.min-vinc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.min-vinc-bar .inp.sm { padding: 6px 9px; font-size: 12.5px; max-width: 200px; }
.min-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.min-box { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.min-box h4 { margin: 0 0 10px; font-size: 14px; }
.min-comp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.min-comp:last-child { border-bottom: none; }
.min-comp-t { font-size: 13px; flex: 1; }
.min-comp-done { font-size: 12px; color: var(--green); font-weight: 600; white-space: nowrap; }
.min-temas { display: flex; flex-wrap: wrap; gap: 6px; }
.min-tema { background: #0891b212; color: #0891b2; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.min-riesgo { background: color-mix(in srgb, var(--red) 8%, transparent); border-left: 3px solid var(--red); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 6px; }
.min-cont { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.min-cont summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.min-cont-body { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.min-adj { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .min-grid2 { grid-template-columns: 1fr; } .min-filtros .inp { max-width: none; flex: 1; } }

/* ===== Bureau (suite ofimática) ===== */
.bu-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.bu-app { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 16px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; overflow: hidden; }
.bu-app::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--ac); }
.bu-app:hover { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--ac) 22%, transparent); border-color: var(--ac); }
.bu-app-ico { font-size: 46px; width: 78px; height: 78px; margin: 6px auto 10px; border-radius: 20px; background: color-mix(in srgb, var(--ac) 12%, transparent); display: grid; place-items: center; }
.bu-app-name { font-size: 18px; font-weight: 800; color: var(--ac); }
.bu-app-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bu-app-new { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent); border-radius: 999px; padding: 5px 0; }
.bu-h { font-size: 15px; margin: 8px 0 12px; }
.bu-docs { display: flex; flex-direction: column; gap: 8px; }
.bu-doc { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bu-doc:hover { border-color: #4f46e5; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.bu-doc-ico { font-size: 22px; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.bu-doc-info { flex: 1; min-width: 0; } .bu-doc-info b { font-size: 14px; } .bu-doc-info small { display: block; }
@media (max-width: 820px) { .bu-apps { grid-template-columns: repeat(2, 1fr); } }

/* ===== Importar datos ===== */
.imp-step { margin-bottom: 18px; }
.imp-step > b { display: block; margin-bottom: 8px; }
.imp-ents { display: flex; flex-wrap: wrap; gap: 10px; }
.imp-ent { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 16px; text-align: left; cursor: pointer; min-width: 150px; }
.imp-ent b { display: block; font-size: 14px; } .imp-ent small { color: var(--muted); font-size: 12px; }
.imp-ent.on { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 25%, transparent); }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 14px; }
.imp-maprow { display: flex; align-items: center; gap: 8px; }
.imp-fld { width: 130px; font-size: 13px; font-weight: 600; flex: none; }
.imp-maprow select { flex: 1; }
.imp-tbl { border-collapse: collapse; font-size: 12px; width: 100%; }
.imp-tbl th, .imp-tbl td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; white-space: nowrap; }
.imp-tbl th { background: var(--bg); }
.imp-ok { background: color-mix(in srgb, var(--green) 12%, transparent); border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 14px; }
/* ===== Integraciones ===== */
.int-cat { font-size: 14px; margin: 18px 0 10px; color: var(--muted); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.int-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px; position: relative; overflow: hidden; }
.int-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ic); }
.int-card.on { border-color: var(--ic); }
.int-top { display: flex; align-items: center; gap: 8px; }
.int-ico { font-size: 22px; } .int-top b { font-size: 14.5px; flex: 1; }
.int-badge { font-size: 11px; font-weight: 700; color: var(--green); }
.int-desc { font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.int-hace { margin: 0 0 10px; padding-left: 16px; font-size: 12px; color: var(--ink); }
.int-hace li { margin: 2px 0; }
.int-cuenta { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; background: var(--bg); border-radius: 7px; padding: 5px 8px; }
.int-actions { display: flex; gap: 6px; }
/* Compartir / agendar */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-btn { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 12px; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; color: var(--ink); }
.cmp-btn:hover { border-color: var(--green); background: var(--bg); }
/* Copiloto global */
.cop-answer { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 12px 0; }
.cop-answer p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; }
.cop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cop-chip { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; text-align: center; }
.cop-chip b { display: block; font-size: 17px; color: #7c3aed; } .cop-chip small { font-size: 11px; color: var(--muted); }
.cop-det { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.cop-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cop-sugbtn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.cop-sugbtn:hover { border-color: #7c3aed; color: #7c3aed; }
/* Nómina */
.nom-head { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.nom-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin: 14px 0 8px; }
.nom-line { display: flex; gap: 8px; margin-bottom: 6px; }
.nom-line .inp:first-child { flex: 1; }
.nom-neto { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 14px 16px; background: color-mix(in srgb, var(--green) 12%, transparent); border-radius: 12px; }
.nom-neto b { font-size: 20px; color: var(--green-d, #15803d); }
/* Secuencias de nutrición */
.seq-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.seq-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; white-space: nowrap; }
.seq-arrow { color: var(--muted); font-size: 12px; }
.seq-flow { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.seq-node { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.seq-node-n { width: 24px; height: 24px; border-radius: 50%; background: #db27771a; color: #db2777; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.seq-node-ico { font-size: 20px; } .seq-node b { display: block; font-size: 14px; } .seq-node small { display: block; }
.seq-conn { width: 2px; height: 16px; background: var(--line); margin-left: 40px; }
.seq-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.seq-paso { display: flex; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.seq-paso-ico { font-size: 20px; } .seq-paso-f { display: flex; gap: 8px; margin-top: 6px; }
.seq-paso-f label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
.seq-paso-f .inp { padding: 6px 8px; }
/* BI · constructor de tableros */
.bi-wctrl { display: flex; align-items: center; gap: 6px; }
.bi-wctrl .mini-sel { font-size: 12px; padding: 3px 6px; }
.bi-wctrl .linklike[disabled] { opacity: .3; pointer-events: none; }
.bi-kpi { text-align: center; padding: 18px 6px; }
.bi-kpi b { display: block; font-size: 34px; font-weight: 800; color: #0ea5e9; font-variant-numeric: tabular-nums; }
.bi-kpi span { font-size: 12px; color: var(--muted); }
.bi-legend { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 6px; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.bi-pie { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bi-legend2 { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.bi-legend2 span { display: flex; align-items: center; gap: 7px; }
.bi-legend2 i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.bi-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.bi-tabla td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.bi-tabla td.num { text-align: right; }
/* Reglas Mesa de Ayuda */
.hd-rule { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.hd-rule-if { color: var(--muted); font-weight: 600; }
.hd-rule-then { color: var(--muted); font-weight: 600; margin-left: 4px; }
.seq-chip.acc { background: color-mix(in srgb, #0ea5e9 12%, transparent); border-color: transparent; color: #0369a1; }
.hd-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.hd-row .inp { flex: 1; padding: 7px 9px; font-size: 13px; min-width: 0; }
/* Campos personalizados de tareas */
.tc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.tc-ico { font-size: 16px; } .tc-row b { font-size: 13.5px; }
.tc-add { display: flex; gap: 6px; margin-top: 12px; }
.tc-add .inp { flex: 1; }
/* Centro de costos: asignado vs real */
.cc-dual { height: 9px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.cc-asig { height: 100%; background: #0ea5e9; border-radius: 5px; }
.cc-real { height: 100%; background: #16a34a; border-radius: 5px; }
.cc-real.over { background: #dc2626; }
.cc-leg { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.cc-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.cc-i-asig { background: #0ea5e9; } .cc-i-real { background: #16a34a; }
.cc-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cc-tot > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.cc-tot b { display: block; font-size: 18px; } .cc-tot span { font-size: 11px; color: var(--muted); }
.cc-sec { font-size: 12.5px; font-weight: 700; margin: 6px 0 8px; }
.cc-line { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.cc-line:last-child { border-bottom: none; } .cc-line b { font-variant-numeric: tabular-nums; }
.cc-f { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.cc-act { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.cc-act:last-child { border-bottom: none; }
@media (max-width: 640px) { .aud-grid2 { grid-template-columns: 1fr; } .aud-metrics { grid-template-columns: repeat(2, 1fr); } }
@media print { .rh-tabs, .aud-picker, .aud-actions, .modframe-head, .topbar, .sidebar, #taskpanel { display: none !important; } }
.legal-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.legal-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.legal-kpi b { display: block; font-size: 26px; font-weight: 800; color: var(--ink); }
.legal-kpi span { font-size: 12px; color: var(--muted); }
.legal-kpi.ok b { color: var(--green); } .legal-kpi.wr b { color: var(--amber); } .legal-kpi.bad b { color: var(--red); }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.legal-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer; transition: transform .15s, box-shadow .15s; position: relative; }
.legal-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.1); border-color: #0f766e; }
.legal-card-h { display: flex; gap: 11px; align-items: center; margin-bottom: 10px; }
.lc-ico { font-size: 26px; }
.legal-card-h b { display: block; font-size: 15px; }
.legal-card-h small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.legal-ring { position: relative; width: 90px; height: 90px; margin: 6px auto 10px; }
.legal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.legal-ring circle { fill: none; stroke-width: 3.2; }
.legal-ring .bg { stroke: var(--line); }
.legal-ring .fg { stroke-linecap: round; transition: stroke-dasharray .5s; }
.legal-ring-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.legal-card-m { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); justify-content: center; }
.legal-card-m .bad { color: var(--red); } .legal-card-m .wr { color: var(--amber); }
.legal-card-cta { text-align: center; margin-top: 11px; font-size: 12.5px; font-weight: 700; color: #0f766e; }

.legal-filtros { display: flex; gap: 8px; margin-bottom: 12px; }
.legal-tabla { display: flex; flex-direction: column; gap: 8px; }
.legal-row { display: grid; grid-template-columns: 1.6fr 1.4fr auto auto auto; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 11px; padding: 11px 14px; cursor: pointer; transition: box-shadow .15s; }
.legal-row.bad { border-left-color: var(--red); }
.legal-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.lr-nom { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.lr-nom b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-flag { font-size: 16px; }
.lr-sol { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.lr-bar { height: 8px; background: var(--line); border-radius: 20px; overflow: hidden; }
.lr-bar-in { height: 100%; border-radius: 20px; }
.lr-pct { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.lr-badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.lr-badge.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.lr-badge.bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.lr-cta { font-size: 12px; font-weight: 700; color: #0f766e; }

/* Panel de expediente */
.lx-head { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 10px; flex-wrap: wrap; }
.lx-apart { color: var(--muted); }
.badge-ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.badge-bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.lx-bar { position: relative; height: 22px; background: var(--line); border-radius: 20px; overflow: hidden; margin-bottom: 6px; }
.lx-bar-in { height: 100%; border-radius: 20px; transition: width .5s; }
.lx-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.lx-sec { font-size: 12.5px; font-weight: 800; color: #0f766e; border-bottom: 2px solid color-mix(in srgb, #0f766e 30%, transparent); padding-bottom: 4px; margin: 18px 0 10px; }
.lx-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lx-info { display: flex; justify-content: space-between; gap: 8px; background: var(--soft, #f1f5f9); border-radius: 8px; padding: 7px 11px; font-size: 12.5px; }
.lx-info span { color: var(--muted); } .lx-info b { text-align: right; }
.lx-reportes { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-checks { display: flex; flex-direction: column; gap: 7px; }
.lx-req { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.lx-req.ok { background: color-mix(in srgb, var(--green) 6%, transparent); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.lx-req.no { background: color-mix(in srgb, var(--red) 5%, transparent); }
.lx-req-ic { font-size: 17px; }
.lx-req-tx { flex: 1; min-width: 0; }
.lx-req-tx b { display: block; font-size: 13px; }
.lx-req-tx small { color: var(--muted); font-size: 11px; }
.lx-req-st.ok { font-size: 11px; font-weight: 700; color: var(--green); }
.lx-soli { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.lx-soli-p { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lx-soli small { color: var(--muted); font-size: 11.5px; }
.lf-doc { background: var(--soft, #f1f5f9); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }

/* Solicitudes (lista) */
.legal-solis { display: flex; flex-direction: column; gap: 9px; }
.legal-soli { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.legal-soli.venc { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 4%, transparent); }
.ls-p { width: 6px; align-self: stretch; border-radius: 6px; flex: none; }
.ls-ic { font-size: 22px; }
.ls-body { flex: 1; min-width: 0; }
.ls-body b { font-size: 13.5px; }
.ls-body small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.ls-desc { margin: 5px 0 0; font-size: 12px; color: var(--ink); opacity: .8; }
.ls-right { text-align: right; flex: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.ls-estado { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.ls-estado.e-pendiente { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.ls-estado.e-enproceso { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; }
.ls-estado.e-atendida { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.ls-estado.e-cancelada { background: var(--line); color: var(--muted); }
.ls-right small { color: var(--muted); font-size: 10.5px; }
.ls-acc { display: flex; gap: 5px; margin-top: 3px; }
.legal-acceso { max-width: 620px; }
.legal-acc-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.legal-acc-row { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; }
.legal-acc-row small { color: var(--muted); margin-left: 4px; }
.btn.xs { padding: 3px 9px; font-size: 11px; }
@media (max-width: 680px) {
  .legal-kpis { grid-template-columns: repeat(2, 1fr); }
  .legal-row { grid-template-columns: 1fr auto; }
  .legal-row .lr-bar, .legal-row .lr-pct { display: none; }
  .pend-card { flex-basis: 280px; }
}

/* ============================ Legal · Procesos legales (litigios) ============================ */
.proc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.proc-kpis { margin-bottom: 0; flex: 1; }
.proc-agente { background: linear-gradient(135deg, #0f766e0d, transparent); border: 1px solid color-mix(in srgb, #0f766e 22%, transparent); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.proc-agente-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.proc-agente-h b { font-size: 14px; } .proc-agente-h small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.proc-agente-ring { --s: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(#0f766e calc(var(--s) * 1%), var(--line) 0); font-weight: 800; }
.proc-agente-ring span { width: 36px; height: 36px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 13px; }
.proc-agente-tips { display: flex; flex-direction: column; gap: 6px; }
.proc-tip { font-size: 12.5px; padding: 7px 11px; border-radius: 9px; background: var(--soft, #f1f5f9); display: flex; gap: 8px; align-items: flex-start; }
.proc-tip.alerta { background: color-mix(in srgb, var(--red) 9%, transparent); }
.proc-tip.consejo { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.proc-tip.ok { background: color-mix(in srgb, var(--green) 10%, transparent); }
.proc-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.proc-col-h { font-weight: 800; font-size: 13px; padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.proc-col-h span { margin-left: auto; background: rgba(0,0,0,.12); border-radius: 20px; padding: 0 9px; font-size: 12px; }
.proc-col-h.act { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.proc-col-h.cur { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
.proc-col-h.cer { background: var(--line); color: var(--muted); }
.proc-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.proc-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
.proc-card { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.proc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); border-color: #0f766e; }
.proc-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.proc-rol { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.proc-riesgo { color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; }
.proc-carat { display: block; font-size: 13.5px; line-height: 1.3; margin-bottom: 4px; }
.proc-meta { font-size: 12px; color: var(--muted); }
.proc-meta2 { font-size: 11.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-link { color: #0f766e; font-weight: 600; }
.proc-card-foot { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 8px; font-size: 11px; }
.proc-card-foot span { background: var(--soft, #f1f5f9); padding: 2px 8px; border-radius: 20px; color: var(--muted); }
.proc-nodoc { background: color-mix(in srgb, var(--amber) 18%, transparent) !important; color: var(--amber) !important; }
.proc-venc { background: color-mix(in srgb, var(--red) 16%, transparent) !important; color: var(--red) !important; }
.proc-prox { background: color-mix(in srgb, #3b82f6 15%, transparent) !important; color: #2563eb !important; }
.proc-res { background: color-mix(in srgb, var(--green) 16%, transparent) !important; color: var(--green) !important; }
/* Panel de detalle */
.proc-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.proc-estado { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 20px; background: var(--soft, #f1f5f9); }
.proc-estado.eActivo { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.proc-estado.eEncurso { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
.proc-estado.eCerrado { background: var(--line); color: var(--muted); }
.proc-agente-caso { background: color-mix(in srgb, #0f766e 7%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.proc-agente-caso b { font-size: 13px; } .proc-agente-caso p { font-size: 12.5px; margin: 5px 0 8px; line-height: 1.5; }
.proc-agente-caso .proc-tip { margin-top: 5px; }
.proc-valoracion { display: grid; gap: 10px; }
.proc-valoracion small { color: var(--muted); font-size: 11px; font-weight: 600; }
.proc-valoracion p { font-size: 13px; line-height: 1.5; margin: 3px 0 0; }
.proc-docs { display: flex; flex-direction: column; gap: 7px; }
.proc-doc { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; }
.proc-doc-t { font-size: 10.5px; font-weight: 700; color: #fff; background: #0f766e; padding: 2px 8px; border-radius: 20px; flex: none; }
.proc-doc b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.proc-doc small { color: var(--muted); font-size: 10.5px; }
.proc-doc-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.proc-timeline { display: flex; flex-direction: column; }
.proc-av { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.proc-av:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.proc-av-dot { width: 12px; height: 12px; border-radius: 50%; background: #0f766e; flex: none; margin-top: 3px; z-index: 1; }
.proc-av-body { flex: 1; min-width: 0; }
.proc-av-h { display: flex; justify-content: space-between; gap: 8px; }
.proc-av-h b { font-size: 13px; } .proc-av-h span { color: var(--muted); font-size: 11.5px; }
.proc-av-body small { color: var(--muted); font-size: 11px; }
.proc-av-body p { font-size: 12.5px; margin: 4px 0 0; line-height: 1.45; }
@media (max-width: 900px) { .proc-board { grid-template-columns: 1fr; } .proc-top { flex-direction: column; align-items: stretch; } }

/* ============================ Compras / Proveedores (rehecho) ============================ */
.comp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.comp-chart { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.comp-chart h4 { margin: 0 0 12px; font-size: 13px; }
.comp-bar { margin-bottom: 10px; }
.comp-bar-l { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.comp-bar-l span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.comp-bar-l b { font-variant-numeric: tabular-nums; }
.comp-bar-t { height: 8px; background: var(--line); border-radius: 20px; overflow: hidden; }
.comp-bar-t i { display: block; height: 100%; border-radius: 20px; transition: width .5s; }
.comp-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.comp-tag.directo { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #7c3aed; }
.comp-riesgo { color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 20px; }
.comp-prov-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.comp-prov-kpis > div { background: var(--soft, #f1f5f9); border-radius: 10px; padding: 9px; text-align: center; }
.comp-prov-kpis b { display: block; font-size: 17px; } .comp-prov-kpis span { font-size: 10.5px; color: var(--muted); }
.comp-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comp-score > div { text-align: center; background: var(--soft, #f1f5f9); border-radius: 10px; padding: 8px; }
.comp-score small { display: block; color: var(--muted); font-size: 11px; } .comp-score b { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.comp-mini { display: flex; flex-direction: column; gap: 5px; }
.comp-mini-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 10px; background: var(--soft, #f1f5f9); border-radius: 8px; }
.comp-mini-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-mini-row b { white-space: nowrap; }
.comp-eval-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.comp-stars .cs { font-size: 24px; color: var(--line); cursor: pointer; transition: color .1s; }
.comp-stars .cs.on { color: #f59e0b; }
.comp-venc { background: color-mix(in srgb, var(--red) 5%, transparent); }
.comp-venc-t { color: var(--red); font-weight: 600; }
.comp-concursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.comp-concurso { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.comp-concurso:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); border-color: #475569; }
.comp-concurso-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.comp-concurso-h b { font-size: 14px; }
.comp-concurso-m { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; font-size: 11.5px; }
.comp-concurso-m span { background: var(--soft, #f1f5f9); padding: 2px 8px; border-radius: 20px; color: var(--muted); }
.comp-ahorro { background: color-mix(in srgb, var(--green) 16%, transparent) !important; color: var(--green) !important; font-weight: 700; }
.comp-ganador { background: color-mix(in srgb, #f59e0b 18%, transparent) !important; color: #b45309 !important; font-weight: 700; }
.comp-of-win { background: color-mix(in srgb, var(--green) 8%, transparent); }
.comp-ganador-box { margin-top: 12px; background: color-mix(in srgb, #f59e0b 12%, transparent); border-radius: 10px; padding: 11px 14px; font-size: 13px; }
.comp-invitar { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.comp-inv { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.proc-estado.eBorrador { background: var(--line); color: var(--muted); }
.proc-estado.eAprobada, .proc-estado.eRecibida { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
.proc-estado.eFacturada, .proc-estado.ePagada, .proc-estado.eGanador { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.proc-estado.ePorpagar, .proc-estado.eParcial, .proc-estado.eSolicitado, .proc-estado.eCotizó { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
@media (max-width: 820px) { .comp-charts { grid-template-columns: 1fr; } .comp-prov-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ===== Componente reutilizable de adjuntar archivos ===== */
.adj-field { margin-top: 6px; }
.adj-list { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.adj-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--soft, #f1f5f9); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.adj-item a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-item a:hover { text-decoration: underline; }
.adj-item button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; flex: none; }

/* ===== Utilidad: elementos tocables/clicables (drill-down intuitivo) ===== */
.tappable { cursor: pointer; transition: transform .12s, background .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.tappable:hover { transform: translateY(-1px); }
.me-perf .p.tappable:hover { background: color-mix(in srgb, var(--accent, #16a34a) 8%, transparent); border-radius: 10px; }
.tappable:active { transform: scale(.98); }
.tappable span { transition: color .12s; }
.tappable:hover span { color: var(--accent, #16a34a); }

/* ===== Toggle modalidad (Oficina / Home office) ===== */
.mod-tog { display: inline-flex; gap: 4px; background: rgba(148,163,184,.15); border-radius: 10px; padding: 3px; margin-bottom: 8px; }
.mod-tog button { border: none; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.mod-tog button.on { background: var(--card, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---- Acceso condicional: barra de aviso + simulador de dispositivos ---- */
.pol-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; align-items: center;
  gap: 10px; padding: 9px 16px; font-size: 13px; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
.pol-banner .pb-ico { font-size: 18px; }
.pol-banner.warn { background: #fef3c7; color: #92400e; border-top: 2px solid #f59e0b; }
.pol-banner.bad { background: #fee2e2; color: #991b1b; border-top: 2px solid #dc2626; }
.seg-sim { margin: 14px 0; }
.seg-simres { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; border: 1px solid transparent; }
.seg-simres.ok { background: #dcfce7; border-color: #86efac; color: #14532d; }
.seg-simres.warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.seg-simres.bad { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* ---- Accesos rápidos editables (panel de inicio) ---- */
.me-quick-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.me-quick-head .linklike { font-size: 12px; }
.qb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 340px; overflow: auto; }
.qb-op { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.qb-op .a-ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.qb-op input { accent-color: var(--green); }

/* ---- Mis notas (estilo Notas de iPhone) ---- */
.notas-top { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.notas-search { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.notas-search input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; color: var(--ink); }
.notas-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.nota-chip { border: 1px solid var(--line); background: var(--card, #fff); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nota-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.notas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.nota-card { position: relative; border-radius: 16px; padding: 14px 15px; min-height: 130px; cursor: pointer; color: #1e293b; box-shadow: 0 1px 4px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.05); transition: transform .1s, box-shadow .1s; overflow: hidden; }
.nota-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.nota-card h4 { margin: 0 24px 6px 0; font-size: 15px; color: #0f172a; }
.nota-prev { font-size: 12.8px; line-height: 1.55; color: #334155; max-height: 130px; overflow: hidden; }
.nota-prev > div { white-space: pre-wrap; word-break: break-word; }
.nota-chk { display: flex; align-items: flex-start; gap: 5px; cursor: pointer; }
.nota-chk span { font-size: 14px; line-height: 1.2; }
.nota-chk.done { color: #94a3b8; text-decoration: line-through; }
.nota-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 11px; color: #64748b; }
.nota-pin { position: absolute; top: 8px; right: 8px; border: none; background: transparent; cursor: pointer; font-size: 15px; opacity: .35; filter: grayscale(1); }
.nota-pin.on { opacity: 1; filter: none; }
.nota-amarillo { background: #fef9c3; } .nota-verde { background: #dcfce7; } .nota-azul { background: #dbeafe; }
.nota-rosa { background: #fce7f3; } .nota-morado { background: #ede9fe; } .nota-gris { background: #f1f5f9; }
/* Editor de nota */
.nota-ed { border-radius: 14px; padding: 14px; margin: -6px; color: #1e293b; }
.nota-ed-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.nota-cols { display: flex; gap: 8px; }
.nota-col { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.nota-col.on { border-color: #0f172a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0f172a33; }
.nota-ed .nota-pin { position: static; opacity: .4; }
.nota-ed .nota-pin.on { opacity: 1; }
.nota-ed-tit { width: 100%; border: none; background: transparent; font-size: 19px; font-weight: 800; color: #0f172a; outline: none; margin-bottom: 8px; }
.nota-ed-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.nota-carp-sel { border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; background: rgba(255,255,255,.6); }
.nota-ed-body { width: 100%; border: none; background: rgba(255,255,255,.5); border-radius: 10px; padding: 10px; font-size: 14px; line-height: 1.6; color: #1e293b; outline: none; resize: vertical; font-family: inherit; }

/* ---- Contabilidad: filtro por rango de fechas ---- */
.cont-fechas { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cont-fechas label { font-size: 12px; font-weight: 600; color: var(--muted); }
.cont-fechas input[type="date"] { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; background: var(--card, #fff); color: var(--ink); }
.cont-fechas-hint { font-size: 11.5px; color: var(--muted); font-style: italic; }
.cont-rango { margin: 8px 0 2px; font-size: 12.5px; color: var(--muted); background: var(--accent-soft, #16a34a12); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }

/* ---- Componente reutilizable de rango de fechas ---- */
.fecha-bar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.fecha-bar label { font-size: 12px; font-weight: 600; color: var(--muted); }
.fecha-bar input[type="date"] { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; background: var(--card, #fff); color: var(--ink); }
.fecha-hint { font-size: 11.5px; color: var(--muted); font-style: italic; }

/* ---- Marketing: integraciones ---- */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.int-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.int-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.int-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.int-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.int-metrics div { text-align: center; }
.int-metrics b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.int-metrics span { font-size: 10px; color: var(--muted); }

/* ---- Mesa de Ayuda (Help Desk ITIL) ---- */
.sla-bar { height: 7px; border-radius: 6px; background: var(--line); overflow: hidden; min-width: 90px; margin-bottom: 3px; }
.sla-bar i { display: block; height: 100%; border-radius: 6px; }
.hd-detail { display: flex; flex-direction: column; }
.hd-props { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 12px; }
.hd-props label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 2px; }
.hd-props select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: var(--ink); font-size: 12.5px; }
.hd-sla { display: flex; gap: 14px; align-items: center; background: var(--accent-soft, #16a34a11); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px; }
.hd-sla > div { display: flex; flex-direction: column; }
.hd-sla span { color: var(--muted); font-size: 11px; }
.hd-sla b.ok { color: var(--good, #16a34a); } .hd-sla b.bad { color: var(--bad, #dc2626); }
.hd-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.hd-equipo { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.hd-thread { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; padding: 6px 0; margin: 8px 0; border-top: 1px solid var(--line); }
.hd-sys { font-size: 11.5px; color: var(--muted); text-align: center; padding: 2px 0; }
.hd-msg { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.hd-msg.interno { background: #fef9c3; border-color: #fde047; }
:root[data-theme="dark"] .hd-msg.interno { background: #3f3a1a; border-color: #6b5f10; }
.hd-msg-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 4px; }
.hd-msg-b { font-size: 13px; white-space: pre-wrap; }
.hd-reply { margin-top: 6px; }
.hd-reply textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 13px; font-family: inherit; resize: vertical; background: var(--card, #fff); color: var(--ink); }
.hd-reply select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: var(--ink); font-size: 12px; }
.hd-tog { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- Sistema de Gestión (autogestión) ---- */
.sg-ready { display: flex; gap: 20px; align-items: center; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.sg-sis-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; }
.sg-sis-row:hover { opacity: .8; }
.sg-mini-bar { flex: 1; height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; }
.sg-mini-bar i { display: block; height: 100%; background: var(--green, #16a34a); border-radius: 5px; }
.sg-conex { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sg-conex-c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; }
.sg-conex-c:hover { border-color: var(--accent, #16a34a); }
.sg-conex-ico { font-size: 20px; }
.sg-conex-c b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sg-conex-c span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.sg-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-plant { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sg-plant-c { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.sg-plant-c span { font-size: 11.5px; color: var(--muted); }
.sg-plant-c button { align-self: flex-start; margin-top: 4px; }
.sg-asist { font-size: 12.5px; margin-top: 6px; }
.sg-asist-list { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* ---- Configuración y Experiencia ---- */
.cfg-steps { display: flex; flex-direction: column; gap: 8px; }
.cfg-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .1s; }
.cfg-step:hover { border-color: var(--accent, #16a34a); }
.cfg-step.ok { background: var(--accent-soft, #16a34a10); }
.cfg-step-ico { font-size: 22px; width: 28px; text-align: center; }
.cfg-step div { flex: 1; }
.cfg-step small { display: block; color: var(--muted); font-size: 12px; }
.cfg-step-cta { font-size: 12.5px; font-weight: 600; color: var(--accent, #16a34a); white-space: nowrap; }
.cfg-ask { display: flex; gap: 8px; margin: 14px 0 6px; }
.cfg-ask input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; background: var(--card, #fff); color: var(--ink); }
.cfg-faq { border-bottom: 1px solid var(--line); padding: 8px 0; }
.cfg-faq summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.cfg-faq p { color: var(--muted); font-size: 13px; margin: 8px 0 0; padding-left: 4px; }

/* ---- Config: delegación de acceso ---- */
.cfg-full { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.cfg-full.on { background: var(--accent-soft, #16a34a12); border-color: var(--accent, #16a34a); }

/* ---- Copiloto "Crear con IA" (Automatización / Procesos) ---- */
.ia-builder { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.ia-builder-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ia-builder textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 14px; font-family: inherit; resize: vertical; background: var(--card, #fff); color: var(--ink); }
.ia-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ia-chip { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; text-align: left; max-width: 100%; }
.ia-chip:hover { border-color: var(--accent, #16a34a); color: var(--ink); }
.ia-prop { border: 1px solid var(--accent, #16a34a); background: var(--accent-soft, #16a34a10); border-radius: 12px; padding: 14px; margin-top: 14px; }
.ia-prop-h { font-size: 13.5px; margin-bottom: 10px; }
.ia-steps { display: flex; flex-direction: column; gap: 6px; }
.ia-step { display: flex; align-items: center; gap: 10px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.ia-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #16a34a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }

/* ---- Editor de condición (más intuitivo) + galería de plantillas ---- */
.cond-nofields { font-size: 12.5px; color: var(--muted); background: var(--card, #fff); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
.cond-nofields input { width: 100%; }
.cond-resumen { margin-top: 12px; background: var(--accent-soft, #16a34a12); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12.8px; color: var(--ink); }
.tpl-nivel-h { font-size: 12.5px; color: var(--muted); margin: 14px 0 8px; letter-spacing: .02em; }
.tpl-nivel-h b { color: var(--accent, #16a34a); letter-spacing: 2px; margin-right: 6px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tpl-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color .1s, transform .1s; }
.tpl-card:hover { border-color: var(--accent, #16a34a); transform: translateY(-2px); }
.tpl-ico { font-size: 22px; }
.tpl-card b { display: block; margin: 4px 0; font-size: 14px; }
.tpl-flow { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 6px; }
.tpl-card p { font-size: 12px; color: var(--muted); margin: 0; }

/* ===================== FLUJO LÓGICO ===================== */
.flujo-cop{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:4px 0 6px;box-shadow:var(--shadow)}
.flujo-cop .inp{flex:1;border:none;background:transparent;font-size:15px}
.flujo-cop .inp:focus{outline:none}
.flujo-cop-ans{background:#f5f3ff;border:1px solid #ddd6fe;color:#4c1d95;border-radius:12px;padding:12px 16px;margin:8px 0;font-size:14.5px;line-height:1.5}
.flujo-cop-ans b{color:#6d28d9}
.flujo-wrap{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-top:12px;align-items:start}
@media(max-width:900px){.flujo-wrap{grid-template-columns:1fr}}
.flujo-list{display:flex;flex-direction:column;gap:9px}
.flujo-list-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.flujo-card{display:flex;gap:12px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;font-family:inherit;transition:.14s}
.flujo-card:hover{border-color:#a78bfa;transform:translateY(-1px)}
.flujo-card.on{border-color:#7c3aed;background:#faf5ff;box-shadow:0 4px 16px rgba(124,58,237,.14)}
.fc-ico{font-size:26px;flex-shrink:0}
.fc-body b{font-size:14.5px;display:block}
.fc-body span{font-size:12px;color:var(--muted)}
.fc-mods{display:flex;gap:3px;margin-top:5px;font-size:14px}
.flujo-main{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow)}
.flujo-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:6px}
.fh-title{font-size:24px;font-weight:850;letter-spacing:-.02em}
.fh-disp{margin-top:10px;background:#faf5ff;border:1px solid #e9d5ff;border-radius:10px;padding:9px 13px;font-size:13.5px;color:#5b21b6}
.fh-btns{display:flex;gap:8px;flex-wrap:wrap}
.flujo-guia-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0;font-weight:700;font-size:14px;color:var(--muted)}
.flujo-steps{margin-top:14px;position:relative}
.flujo-step{display:grid;grid-template-columns:40px 1fr;gap:14px;position:relative;padding-bottom:16px}
.flujo-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:38px;bottom:-2px;width:2px;background:linear-gradient(#c4b5fd,#e9d5ff)}
.fs-num{width:38px;height:38px;border-radius:50%;background:#7c3aed;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:850;font-size:16px;flex-shrink:0;z-index:1}
.flujo-step.auto .fs-num{background:#0891b2}
.fs-card{border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:var(--card)}
.flujo-step.auto .fs-card{background:#f0f9ff;border-color:#bae6fd}
.fs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.fs-mod{font-size:14px;font-weight:800}
.fs-badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px}
.fs-badge.auto{background:#cffafe;color:#0e7490}
.fs-badge.manual{background:#ede9fe;color:#6d28d9}
.fs-title{font-size:17px;font-weight:800;margin-bottom:6px}
.fs-que{font-size:14px;color:#334155;margin-bottom:8px}
.fs-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:#475569;margin-bottom:10px}
.fs-acc{background:var(--bg,#f7f9fc);border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:10px;font-size:13.5px;display:flex;flex-direction:column;gap:7px}
.fs-person{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:13px;font-weight:600;cursor:pointer;margin-right:6px;transition:.13s}
.fs-person:hover{border-color:#7c3aed;background:#faf5ff}
.fs-person small{color:var(--muted);font-weight:500}
.fs-btns{display:flex;gap:8px;flex-wrap:wrap}

/* Flujo Lógico — acordeón de categorías */
.flujo-list{max-height:none}
.flujo-grp{margin-bottom:4px}
.flujo-grp-h{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--bg,#f7f9fc);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;color:var(--ink,#0b1220);transition:.12s}
.flujo-grp-h:hover{border-color:#a78bfa}
.flujo-grp-h.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.fg-n{display:inline-flex;align-items:center;gap:8px;font-size:12px;opacity:.85}
.fg-chev{font-size:11px}
.flujo-grp-b{display:flex;flex-direction:column;gap:7px;padding:8px 0 4px}

/* Minutas: temas hablados (no tareas) */
.min-hablado{margin:0 0 0 2px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.min-hablado li{font-size:13.5px;color:#334155;padding-left:16px;position:relative;line-height:1.45}
.min-hablado li::before{content:"•";position:absolute;left:2px;color:#94a3b8}

/* Marcas: empresas facturadoras */
.mk-fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg,#f7f9fc);border:1px solid var(--line);border-radius:11px;padding:12px}
.mk-fact-item{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.mk-fact-item input{width:16px;height:16px}

/* Panel de módulos: vista por categoría */
.modcat-grp{margin-bottom:14px}
.modcat-h{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;font-size:14px;font-weight:800;color:var(--ink,#0b1220);text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);cursor:pointer;font-family:inherit;transition:.13s}
.modcat-h:hover{border-color:var(--green,#16a34a);background:var(--bg,#f7f9fc)}
.modcat-h.open{background:var(--ink,#0b1220);color:#fff;border-color:var(--ink,#0b1220)}
.modcat-r{display:inline-flex;align-items:center;gap:10px}
.modcat-n{background:var(--green-l,#dcfce7);color:var(--green-d,#15803d);border-radius:20px;padding:1px 9px;font-size:12px;font-weight:800;letter-spacing:0}
.modcat-h.open .modcat-n{background:rgba(255,255,255,.18);color:#fff}
.modcat-chev{font-size:12px;opacity:.85}
.modgrid-cat{margin-bottom:0}

/* CRM: etiquetas de contactos */
.ct-etq-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;padding:8px 0}
.ct-etq-lbl{font-size:13px;font-weight:700;color:var(--muted)}
.ct-etq{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;color:#334155;transition:.13s}
.ct-etq:hover{border-color:#7c3aed}
.ct-etq.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.ct-etq b{opacity:.7;font-weight:700;margin-left:3px}
.ct-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px}
.ct-tag{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:700}
.ct-tag-del{cursor:pointer}.ct-tag-del:hover{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.ct-tags-box{background:var(--bg,#f7f9fc);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px}
.ct-etq-sug,.ct-etq-actuales{display:flex;flex-wrap:wrap;gap:6px}

/* Automatizaciones recomendadas */
.auto-recom-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.auto-recom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.auto-recom-grid{grid-template-columns:1fr}}
.auto-plant{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card,#fff);transition:.14s}
.auto-plant:hover{box-shadow:var(--shadow);border-color:#c4b5fd}
.ap-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ap-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.ap-chip.trig{background:#ede9fe;color:#6d28d9}
.ap-chip.act{background:#dcfce7;color:#15803d}
.ap-arrow{color:var(--muted);font-weight:800}
.ap-nom{font-size:15.5px;display:block;margin-bottom:4px}
.ap-desc{font-size:13px;color:#475569;margin-bottom:12px;line-height:1.45}
.ap-btns{display:flex;gap:8px}

/* ============ Capa IA — chat con agentes (cerebro local) ============ */
.ia-hero{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:16px;
  background:linear-gradient(120deg,#2b1a54,#4c2d8f 55%,#7c3aed);color:#fff;box-shadow:var(--shadow)}
.ia-hero-ico{font-size:40px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.ia-hero h2{color:#fff}
.ia-roster{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.ia-ag-chip{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;cursor:pointer;font-size:12.5px;color:var(--ink);transition:.15s;white-space:nowrap}
.ia-ag-chip:hover{border-color:#a78bfa;transform:translateY(-1px)}
.ia-ag-chip.on{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.35)}
.ia-ag-ico{font-size:15px}
.ia-ag-nom{font-weight:600}
.ia-ag-salud{font-size:9px;margin-left:-2px}
.ia-chat{border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);
  padding:16px;min-height:340px;max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.ia-sys{text-align:center;color:var(--muted);font-size:11.5px;letter-spacing:.02em}
.ia-msg{display:flex;gap:10px;max-width:88%}
.ia-msg.user{align-self:flex-end;flex-direction:row-reverse}
.ia-msg.bot{align-self:flex-start}
.ia-ava{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(135deg,#4c2d8f,#7c3aed);box-shadow:var(--shadow);margin-top:2px}
.ia-bubble{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;
  font-size:13.5px;line-height:1.5;color:var(--ink);box-shadow:var(--shadow)}
.ia-msg.user .ia-bubble{background:#7c3aed;border-color:#7c3aed;color:#fff}
.ia-agnom{font-weight:700;font-size:12px;color:#7c3aed;margin-bottom:5px}
.ia-nota{font-size:11.5px;color:var(--muted);font-style:italic;margin-bottom:6px}
.ia-chips{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px}
.ia-chip{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:11.5px}
.ia-block-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:11px 0 5px}
.ia-pred-i{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed var(--line-soft);font-size:12.5px}
.ia-reco-i{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line-soft);font-size:12.5px}
.ia-reco-i span:not(.ia-imp){flex:1}
.ia-imp{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ia-imp.alto{background:var(--red)}.ia-imp.medio{background:var(--amber)}.ia-imp.bajo{background:var(--green)}
.ia-cruz{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ia-cruz-i{background:var(--bg-soft);border-left:3px solid #7c3aed;border-radius:6px;padding:7px 10px;font-size:12px}
.ia-cruz-i b{display:block;margin-bottom:2px}
.ia-cruz-i span{color:var(--muted)}
.ia-conf{font-size:10.5px;color:var(--muted);margin-top:8px}
.ia-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ia-sug-b{background:transparent;border:1px dashed #a78bfa;color:#7c3aed;border-radius:999px;padding:4px 11px;font-size:11.5px;cursor:pointer;transition:.15s}
.ia-sug-b:hover{background:#7c3aed;color:#fff;border-style:solid}
.ia-input-bar{display:flex;gap:8px;margin-top:12px}
.ia-input-bar input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-size:13.5px;background:var(--card);color:var(--ink)}
.ia-input-bar input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.ia-typing{display:inline-flex;gap:4px;padding:2px 0}
.ia-typing i{width:6px;height:6px;border-radius:50%;background:#a78bfa;animation:iablink 1s infinite}
.ia-typing i:nth-child(2){animation-delay:.2s}.ia-typing i:nth-child(3){animation-delay:.4s}
@keyframes iablink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.ia-conn-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.ia-conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ia-conn-card{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--card)}
.ia-conn-logo{font-size:26px}

/* Agente experto dentro del módulo (botón cabecera + panel) */
.ag-hdr-btn{border-color:#c4b5fd!important;color:#7c3aed!important;font-weight:600}
.ag-hdr-btn:hover{background:#7c3aed!important;color:#fff!important;border-color:#7c3aed!important}
.tp-body:has(.agp-chat){display:flex;flex-direction:column;padding:10px 14px}
.agp-chat .ia-msg{max-width:100%}

/* Legibilidad del hilo de chat de agentes */
.ia-bubble .ia-line{margin:1px 0}
.ia-bubble .ia-gap{height:7px}
.ia-bubble .ia-line b{font-weight:700}

/* ============ Tablero (Looker/Qlik) por módulo ============ */
.tab-head{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.tab-head .tab-ico{font-size:22px}
.tab-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.tab-kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow);border-top:3px solid var(--line)}
.tab-kpi.verde{border-top-color:var(--green)}.tab-kpi.ambar{border-top-color:var(--amber)}.tab-kpi.rojo{border-top-color:var(--red)}
.tab-kpi-l{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tab-kpi-v{font-size:23px;font-weight:800;margin:4px 0 2px;line-height:1.1}
.tab-kpi-s{font-size:11.5px;color:var(--muted);line-height:1.35}
.tab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.tab-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.tab-card.tab-wide{grid-column:1/-1}
.tab-card-h{padding:11px 16px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.tab-card-b{padding:16px}
.tab-table{width:100%;border-collapse:collapse;font-size:12.5px}
.tab-table th{text-align:left;color:var(--muted);font-weight:600;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tab-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.tab-table td.b{font-weight:600}
.tab-table tr:hover{background:var(--bg-soft)}
.tab-consejo{display:flex;align-items:center;gap:10px;background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid #7c3aed;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.tab-consejo span{flex:1}

/* Barra de filtros del Tablero (estilo Looker) */
.tabfil-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.tabfil-ico{font-size:12px;font-weight:700;color:#7c3aed;align-self:center;margin-right:2px}
.tabfil-item{display:flex;flex-direction:column;gap:3px}
.tabfil-item>label{font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.tabfil-item select,.tabfil-item input[type=date]{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px;background:var(--bg-soft);color:var(--ink)}
.tabfil-item select:focus,.tabfil-item input:focus{outline:none;border-color:#7c3aed}
.tabfil-fechas{display:flex;align-items:center;gap:5px}
.tabfil-dash{color:var(--muted)}

/* Copiloto de acciones (universal) */
.cop-acc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cop-acc-list{display:flex;flex-direction:column;gap:8px}
.cop-acc-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 14px;box-shadow:var(--shadow);font-size:13.5px}
.cop-acc-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#7c3aed;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}

/* ============ Survey — investigación de mercado ============ */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sv-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.sv-card-t{font-size:15px;line-height:1.3}
.sv-card-m{font-size:12.5px;color:var(--muted)}
.sv-card-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sv-tpl{cursor:pointer;transition:.15s;align-items:flex-start}
.sv-tpl:hover{border-color:#a78bfa;transform:translateY(-2px)}
.sv-tpl-ico{font-size:30px}
.sv-build{display:flex;gap:16px;align-items:flex-start}
.sv-build-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.sv-palette{flex:0 0 220px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;position:sticky;top:10px;box-shadow:var(--shadow)}
.sv-pal-t{font-weight:700;font-size:12.5px;margin-bottom:8px}
.sv-pal-b{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg-soft);border-radius:9px;padding:8px 10px;margin-bottom:6px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.sv-pal-b:hover{border-color:#7c3aed;background:#7c3aed;color:#fff}
.sv-q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.sv-q-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sv-q-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#7c3aed;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.sv-q-head select{border:1px solid var(--line);border-radius:7px;padding:4px 8px;font-size:12px;background:var(--bg-soft);color:var(--ink)}
.sv-q-req{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.sv-q-txt{width:100%;border:none;border-bottom:2px solid var(--line);padding:6px 2px;font-size:14.5px;font-weight:600;background:transparent;color:var(--ink)}
.sv-q-txt:focus{outline:none;border-color:#7c3aed}
.sv-q-cfg{margin-top:10px}
.sv-q-cfg>label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:3px}
.sv-q-cfg textarea,.sv-q-cfg input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;background:var(--bg-soft);color:var(--ink);font-family:inherit}
.sv-q-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.sv-q-row>label{font-size:12px;color:var(--muted)}
.sv-q-hint{margin-top:8px;font-size:11.5px;color:var(--muted);font-style:italic}
.sv-fill,.sv-res-grid{max-width:720px}
.sv-fill{margin:0 auto}
.sv-res-grid{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px}
.sv-fq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.sv-fq-t{font-weight:600;margin-bottom:10px}
.sv-opt{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13.5px;cursor:pointer}
.sv-opt select{border:1px solid var(--line);border-radius:6px;padding:3px 6px;background:var(--bg-soft);color:var(--ink)}
.sv-scale{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.sv-scale-b{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--bg-soft);cursor:pointer;font-weight:700;color:var(--ink)}
.sv-scale-b:hover{border-color:#7c3aed}
.sv-scale-b.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.sv-nps .sv-scale-b{width:34px;height:34px;font-size:12px}
.sv-mtx{width:100%;border-collapse:collapse;font-size:12.5px}
.sv-mtx th,.sv-mtx td{border:1px solid var(--line);padding:6px 8px;text-align:center}
.sv-mtx td:first-child,.sv-mtx th:first-child{text-align:left}
.sv-avg{font-size:13px;margin-bottom:8px}
.sv-nums{display:flex;gap:20px}
.sv-nums>div{text-align:center}.sv-nums b{font-size:22px;display:block;color:#7c3aed}.sv-nums span{font-size:11px;color:var(--muted)}
.sv-npsbox{text-align:center;margin-bottom:10px}
.sv-npsscore{font-size:40px;font-weight:800;line-height:1}
.sv-txts{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.sv-txt{background:var(--bg-soft);border-left:3px solid #7c3aed;border-radius:6px;padding:7px 10px;font-size:12.5px;font-style:italic}
.sv-env-list{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px}
@media(max-width:720px){.sv-build{flex-direction:column}.sv-palette{position:static;flex:1;width:100%}}

/* Survey — lógica de salto (branching) */
.sv-q-logic{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line-soft)}
.sv-q-logic.dim{font-size:11px;color:var(--muted);font-style:italic}
.sv-q-logic>label{font-size:12px;color:#7c3aed;font-weight:600}
.sv-q-logic-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.sv-q-logic-row select,.sv-q-logic-row input{border:1px solid var(--line);border-radius:7px;padding:4px 8px;font-size:12px;background:var(--card);color:var(--ink)}

/* Survey — nube de palabras */
.sv-cloud{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;justify-content:center;padding:10px 6px 14px;line-height:1.1}
.sv-cloud-w{color:#7c3aed;font-weight:700;cursor:default}
.sv-cloud-w:nth-child(3n){color:#0891b2}.sv-cloud-w:nth-child(3n+1){color:#db2777}

/* Bureau — acciones por documento */
.bu-doc-acts{display:flex;gap:5px;flex:0 0 auto}
.bu-doc-acts .btn{padding:5px 8px}
.bu-fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bu-fmt-grid .btn{justify-content:flex-start}
@media(max-width:560px){.bu-doc-acts{flex-wrap:wrap;justify-content:flex-end}}

/* Sistema de Gestión — proyectos de certificación */
.sg-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sg-proj{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:14px;padding:14px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:4px}
.sg-proj:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.sg-proj-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sg-norma{color:#fff;font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:7px;white-space:nowrap}
.sg-proj-t{font-size:15px;line-height:1.25}
.sg-proj-ring{display:flex;align-items:center;gap:10px;margin:6px 0}
.sg-proj-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px}
.sg-avatars{display:flex}
.sg-av,.sg-av-img{width:26px;height:26px;border-radius:50%;margin-left:-7px;border:2px solid var(--card);display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:#7c3aed;object-fit:cover}
.sg-av:first-child,.sg-av-img:first-child{margin-left:0}
.sg-av.ext{background:#0891b2}
.sg-proj-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;padding:9px 13px;margin-bottom:14px}
.sg-suj{display:flex;gap:8px;flex-wrap:wrap}
.sg-suj-o{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:7px}
.sg-suj-o:has(input:checked){border-color:#d97706;background:#fffbeb}
.sg-colab-list{max-height:150px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:2px}

.portal-cert{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:9px}

/* Centro de Costos — jerarquía / subitems */
.cc-sub{background:var(--bg-soft)}
.cc-tw{color:var(--muted);margin-right:4px}
.cc-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin:4px 0 2px;max-width:120px}
.cc-bar i{display:block;height:100%;border-radius:3px}

/* Sistema de Gestión — documentos de evidencia */
.sg-doc{font-size:11px;color:var(--green-d,#15803d);text-decoration:none;background:#dcfce7;padding:2px 7px;border-radius:6px;margin-right:4px;display:inline-block}
.sg-doc:hover{text-decoration:underline}
.sg-adjs{margin-bottom:8px}
.sg-adj-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:5px;font-size:12.5px}
.sg-adj-row a{color:var(--green-d,#15803d);text-decoration:none}

/* Calculadora: estilos en el bloque "MIS HERRAMIENTAS" (dispositivo iOS) más abajo. */

/* Calculadora financiera (Mi Espacio) */
.fin-res{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.fin-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;font-size:13px;background:var(--bg-soft)}
.fin-row b{font-variant-numeric:tabular-nums;font-size:15px}
.fin-row.main{background:var(--green-d,#15803d);border-color:var(--green-d,#15803d);color:#fff}
.fin-row.main b{color:#fff}

/* Administrador de Licencias (Sistemas) */
.lic-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.lic-aviso{background:#f59e0b14;border:1px solid var(--amber,#d97706);color:var(--amber,#b45309);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.lic-renov{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.lic-renov.ok{color:#0369a1;background:#0ea5e914}
.lic-renov.pron{color:#b45309;background:#f59e0b1f}
.lic-renov.urg{color:#c2410c;background:#ea580c1f}
.lic-renov.venc{color:#dc2626;background:#dc26261f}
.lic-kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.lic-kpi b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.lic-kpi span{font-size:11px;color:var(--muted)}
.lic-list{display:flex;flex-direction:column;gap:10px}
.lic-item{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}
.lic-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lic-badge{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid var(--c);border-radius:999px;padding:3px 10px;white-space:nowrap}
.lic-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px;align-items:center}
.lic-meta a{color:var(--green-d,#15803d);text-decoration:none}
.lic-rechazo{margin-top:8px;font-size:12px;color:var(--red,#dc2626);background:#dc26260f;border-radius:8px;padding:6px 10px}
.lic-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.lic-acc .btn.sm{padding:6px 12px;font-size:12.5px}
.btn.sm.outline.danger{color:var(--red,#dc2626);border-color:var(--red,#dc2626)}

/* Filtros de Seguridad (Accesos, Equipos, Capturas, Alertas) */
.seg-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;padding:10px 12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px}
.segf-item{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.segf-item select,.segf-item input{min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;color:var(--ink)}
.segf-item input{min-width:170px}
.seg-filtros .btn.xs{align-self:flex-end}

/* Productividad (Seguridad) */
.prod-top{display:flex;align-items:center;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.prod-score{display:flex;flex-direction:column;align-items:center;justify-content:center;width:110px;height:88px;border:2px solid var(--c);border-radius:14px;background:color-mix(in srgb,var(--c) 8%,transparent)}
.prod-score b{font-size:28px;color:var(--c);line-height:1}
.prod-score span{font-size:10.5px;color:var(--muted);margin-top:3px}
.prod-legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.prod-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle}
.prod-list{display:flex;flex-direction:column;gap:10px}
.prod-item{border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--card)}
.prod-item-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.prod-item-score{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.prod-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--bg-soft);margin-bottom:10px}
.prod-bar i{display:block;height:100%}
.prod-apps{display:flex;flex-wrap:wrap;gap:6px}
.prod-app{font-size:11.5px;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:7px;padding:3px 8px;background:var(--bg-soft)}
.prod-app b{color:var(--c);font-variant-numeric:tabular-nums}
.prod-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.prod-cat-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--bg-soft)}
.prod-cat-row select{border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:12px;background:var(--card);color:var(--ink)}

/* Bienestar / anti-burnout (Seguridad) */
.bi-cfg-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.bi-cfg-grid .segf-item input{min-width:120px}
.bi-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.bi-kpi{border:1px solid var(--line);border-top:3px solid var(--c);border-radius:12px;padding:12px;text-align:center;background:var(--card)}
.bi-kpi b{display:block;font-size:26px;color:var(--c)}
.bi-kpi span{font-size:11px;color:var(--muted)}
.bi-senales{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.bi-senales span{font-size:12px;color:var(--amber,#b45309);background:#f59e0b14;border:1px solid var(--amber,#d97706);border-radius:7px;padding:3px 9px}
.sw{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}
.sw input{width:18px;height:18px}

/* Geocercas (geofencing) */
.geo-panel{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;background:var(--bg-soft)}
.geo-panel summary{cursor:pointer;padding:11px 14px;font-size:13px;list-style:none}
.geo-panel summary::-webkit-details-marker{display:none}
.geo-body{padding:0 14px 14px}
.geo-zonas{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.geo-zona{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.geo-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.geo-add input{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;color:var(--ink);width:130px}
.geo-add input#geo-nom{width:160px}

/* Diagnóstico de salud del equipo (Mesa de Ayuda) */
.diag-modal{max-width:560px}
.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.diag-cell{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px}
.diag-cell span{color:var(--muted)}
.diag-cell b{font-variant-numeric:tabular-nums;text-align:right}
.diag-score{display:flex;align-items:center;gap:16px;margin:16px 0;padding:14px;border:2px solid var(--c);border-radius:14px;background:color-mix(in srgb,var(--c) 7%,transparent)}
.diag-score-ring{width:82px;height:82px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:5px solid var(--c);flex-shrink:0}
.diag-score-ring b{font-size:23px;color:var(--c);line-height:1}
.diag-score-ring span{font-size:10px;color:var(--muted);text-transform:uppercase}
.diag-score-txt b{font-size:17px}
.diag-score-txt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.diag-recs{margin-top:6px;font-size:13px}
.diag-recs.ok{background:#16a34a12;border:1px solid var(--green-d);border-radius:10px;padding:12px;color:var(--green-d)}
.diag-recs>b{display:block;margin-bottom:8px}
.diag-rec{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:9px;margin-bottom:6px;font-size:12.5px;line-height:1.4}
.diag-rec.critico{background:#dc26260f;border:1px solid #dc262655}
.diag-rec.atencion{background:#f59e0b12;border:1px solid #d9770655}
.diag-pill{font-size:11.5px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid var(--c);border-radius:999px;padding:2px 9px;white-space:nowrap}

/* Radios de política de sesión */
.rad-opt{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.rad-opt input{width:15px;height:15px}

/* Autoevaluación de cumplimiento SG-SST */
.cumpl-checklist{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.cumpl-grupo{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cumpl-grupo-h{background:var(--bg-soft);padding:10px 14px;font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.cumpl-item{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.cumpl-item-t{font-size:12.5px;flex:1;min-width:220px}
.cumpl-opts{display:flex;gap:10px;flex-wrap:wrap}
.cumpl-opt{display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer;white-space:nowrap}
.cumpl-opt input{width:15px;height:15px}


/* ================================================================
   MIS HERRAMIENTAS — estándar de app nativa (iOS / One UI)
   ================================================================ */
.herr-wrap{max-width:760px;margin:0 auto;padding:4px 2px 40px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---- Dock de herramientas (íconos tipo app) ---- */
.herr-dock{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:10px 0 22px}
.htool{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:2px;width:78px}
.htool-ico{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:29px;line-height:1;
  border-radius:19px;background:linear-gradient(150deg,var(--g1),var(--g2));
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--g2) 60%,transparent),inset 0 1.5px 1px #ffffff70,inset 0 -3px 6px #00000022;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s;filter:saturate(1.05)}
.htool-ico::after{content:"";position:absolute;inset:0;border-radius:19px;background:linear-gradient(180deg,#ffffff40,transparent 55%);pointer-events:none}
.htool-lbl{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:-.01em;text-align:center;line-height:1.15;transition:color .2s}
.htool:hover .htool-ico{transform:translateY(-3px)}
.htool:active .htool-ico{transform:scale(.92)}
.htool.on .htool-ico{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 26px -6px color-mix(in srgb,var(--g2) 70%,transparent),inset 0 1.5px 1px #ffffff70}
.htool.on .htool-lbl{color:var(--ink);font-weight:700}

.herr-body.anim{animation:herrIn .34s cubic-bezier(.22,.61,.36,1)}
@keyframes herrIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

.hcard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:22px;
  box-shadow:0 12px 40px -18px #0009,0 2px 6px -3px #0000000f}
@media(prefers-color-scheme:dark){.hcard{box-shadow:0 16px 44px -20px #000c}}

/* ================= CALCULADORA (dispositivo iOS oscuro) ================= */
.herr-calc{max-width:390px;margin:0 auto;background:#000;border-radius:34px;padding:16px 14px 20px;
  box-shadow:0 22px 60px -22px #000,inset 0 0 0 1px #ffffff10;color:#fff}
.calc-seg{display:flex;gap:2px;background:#1c1c1e;border-radius:12px;padding:3px;margin-bottom:14px}
.calc-seg .calc-tab{flex:1;background:transparent;border:none;border-radius:9px;padding:9px 4px;font-size:12.5px;font-weight:600;
  color:#8e8e93;cursor:pointer;font-family:inherit;transition:.2s;letter-spacing:-.01em}
.calc-seg .calc-tab.on{background:#48484a;color:#fff;box-shadow:0 1px 3px #0006}
.calc-screen{padding:10px 12px 16px;text-align:right;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end}
.calc-sub{color:#98989e;font-size:16px;min-height:20px;font-variant-numeric:tabular-nums;font-weight:400}
.calc-disp{color:#fff;font-size:clamp(46px,15vw,68px);font-weight:250;line-height:1.02;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.calc-degrad{display:inline-flex;gap:0;margin:0 0 10px;background:#1c1c1e;border-radius:9px;padding:3px}
.calc-degrad button{background:transparent;border:none;color:#8e8e93;font-weight:700;font-size:12px;padding:6px 14px;border-radius:7px;cursor:pointer}
.calc-degrad button.on{background:#0a84ff;color:#fff}
.calc-sci{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.calc-sci .ck{aspect-ratio:auto;height:46px;border-radius:23px;background:#2c2c2e;color:#0a84ff;font-size:15px;font-weight:600}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ck{aspect-ratio:1;border:none;border-radius:50%;font-size:26px;font-weight:500;cursor:pointer;color:#fff;
  background:#333336;font-family:inherit;transition:filter .12s,transform .08s;-webkit-user-select:none;user-select:none;
  display:flex;align-items:center;justify-content:center}
.ck:active{filter:brightness(1.5);transform:scale(.96)}
.ck.fn{background:#a5a5a5;color:#000;font-weight:600;font-size:23px}
.ck.op{background:#ff9f0a;color:#fff;font-size:30px}
.ck.eq{background:#ff9f0a;color:#fff;font-size:30px}
.ck.op:active,.ck.eq:active{filter:brightness(1.15)}
/* Calculadora financiera dentro del dispositivo oscuro */
.herr-calc .field{margin-bottom:11px}
.herr-calc .field label{display:block;font-size:12.5px;color:#8e8e93;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.herr-calc select,.herr-calc .field input{width:100%;background:#1c1c1e;border:1px solid #38383a;border-radius:13px;
  padding:13px 14px;color:#fff;font-size:16px;font-family:inherit;outline:none;-webkit-appearance:none;appearance:none}
.herr-calc select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round'><path d='M3 5l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.herr-calc .field input:focus{border-color:#0a84ff}
.herr-calc .btn{width:100%;background:linear-gradient(180deg,#0a84ff,#0060df);color:#fff;border:none;border-radius:14px;
  padding:14px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px}
.herr-calc .btn:active{filter:brightness(.95)}
.herr-calc .fin-res{margin-top:14px;background:#1c1c1e;border-radius:16px;padding:6px 16px}
.herr-calc .fin-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #2c2c2e;font-size:15px;color:#c7c7cc}
.herr-calc .fin-row:last-child{border-bottom:none}
.herr-calc .fin-row b{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}
.herr-calc .fin-row.main{padding:15px 0}
.herr-calc .fin-row.main span{color:#8e8e93}
.herr-calc .fin-row.main b{color:#30d158;font-size:22px}

/* ================= MONEDAS ================= */
.mon{max-width:440px;margin:0 auto;position:relative}
.mon-load{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px;color:var(--muted)}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--c,#34c759);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mon-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px}
.mon-cur{position:relative;display:flex;align-items:center;gap:11px;flex:0 0 auto;max-width:56%}
.mon-flag{font-size:32px;line-height:1;filter:drop-shadow(0 2px 3px #0002)}
.mon-idty{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.mon-idty b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mon-idty small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.mon-chev{color:var(--muted);flex:0 0 auto}
.mon-pick{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:16px}
.mon-num{border:none;background:transparent;font-size:34px;font-weight:600;color:var(--ink);text-align:right;outline:none;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;width:100%;min-width:0;font-family:inherit}
.mon-num.res{color:var(--c);font-weight:700}
.mon-div{position:relative;display:flex;align-items:center;gap:0;height:1px;margin:2px 0}
.mon-hair{flex:1;height:1px;background:var(--line)}
.mon-swap{position:relative;z-index:2;width:44px;height:44px;margin:0 8px;border-radius:50%;border:none;
  background:var(--c);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--c) 60%,transparent);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mon-swap:active{transform:rotate(180deg) scale(.9)}
.mon-rate{text-align:center;font-size:15px;color:var(--ink);font-weight:600;margin-top:16px;font-variant-numeric:tabular-nums}
.mon-rate span{color:var(--muted);margin:0 3px;font-weight:400}
.mon-src{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:12px}

/* ================= ZONAS HORARIAS ================= */
.zon{max-width:520px;margin:0 auto}
.zon-band{position:relative;height:150px;border-radius:20px;overflow:hidden;margin-bottom:16px;
  background:#0a1030;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -20px 40px -20px #0006;transition:background .6s ease}
.zon-stars{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 45% 60%,#fff,transparent),radial-gradient(1px 1px at 70% 25%,#fff,transparent),radial-gradient(1px 1px at 85% 70%,#fff,transparent),radial-gradient(1px 1px at 12% 75%,#fff,transparent),radial-gradient(1px 1px at 60% 80%,#fff,transparent),radial-gradient(1px 1px at 33% 18%,#fff,transparent)}
.zon-sun{position:absolute;top:16px;transform:translateX(-50%);font-size:26px;filter:drop-shadow(0 0 12px #ffd67a);transition:left .6s ease}
.zon-pins{position:absolute;inset:0}
.zon-pin{position:absolute;bottom:0;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;gap:6px}
.zon-pin-t{font-size:12px;font-weight:700;color:#fff;background:#0009;padding:3px 8px;border-radius:8px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 2px #000;transform:translateY(calc(var(--lvl,0) * -25px));transition:transform .3s}
.zon-pin-dot{width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff40,0 2px 6px #0007}
.zon-slider{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.zon-live{flex:0 0 auto;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s}
.zon-live.on{background:var(--c);color:#fff;border-color:transparent}
.zon-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--line);outline:none}
.zon-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px -1px #0004;cursor:pointer}
.zon-cards{display:flex;flex-direction:column;gap:11px}
.zon-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:18px;
  border:1px solid var(--line);background:var(--bg-soft);transition:background .4s}
.zon-card.noche{background:linear-gradient(120deg,#1c2541,#0f1830);border-color:#2a3a5c;color:#e8eefc}
.zon-card-city{font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.zon-card.noche .zon-card-city{color:#fff}
.zon-card-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.zon-card.noche .zon-card-meta{color:#9fb2d6}
.zon-card-r{display:flex;align-items:center;gap:10px}
.zon-card-dn{font-size:17px}
.zon-card-time{font-size:30px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.zon-card.noche .zon-card-time{color:#fff}
.zon-card-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;opacity:.5;padding:4px}
.zon-card-x:hover{opacity:1;color:var(--red)}
.zon-add{display:flex;align-items:center;justify-content:center;position:relative;margin-top:13px;border:1.5px dashed var(--line);border-radius:16px;padding:14px;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer}
.zon-add select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* ================= TEMPORIZADOR ================= */
.tm{max-width:400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px}
.tm-ring-wrap{position:relative;width:260px;height:260px}
.tm-ring{width:100%;height:100%;transform:rotate(-90deg)}
.tm-ring .tm-bg{fill:none;stroke:var(--bg-soft);stroke-width:12}
.tm-ring .tm-fg{fill:none;stroke:url(#tmg);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .3s linear;
  filter:drop-shadow(0 0 6px #ff950066)}
.tm-ring-wrap.run .tm-fg{filter:drop-shadow(0 0 10px #ff9500aa)}
.tm-ring-wrap.done{animation:tmPulse .5s ease 3}
@keyframes tmPulse{50%{transform:scale(1.03)}}
.tm-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tm-time{font-size:56px;font-weight:250;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.tm-state{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tm-presets{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.tm-chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);color:var(--ink);
  font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s}
.tm-chip:hover{border-color:var(--c);color:var(--c);transform:translateY(-1px)}
.tm-chip:active{transform:scale(.94)}
.tm-custom{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:600}
.tm-custom input{width:64px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);color:var(--ink);
  text-align:center;font-size:16px;font-family:inherit;outline:none;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;margin:0}
.tm-custom input:focus{border-color:var(--c)}
.tm-custom button{background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.tm-ctrls{display:flex;gap:14px;width:100%;max-width:340px}
.tm-btn{flex:1;padding:16px;border-radius:18px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;border:none;transition:filter .15s,transform .08s}
.tm-btn:active{transform:scale(.97)}
.tm-btn.reset{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line)}
.tm-btn.go{background:linear-gradient(180deg,#34c759,#28a745);color:#fff;box-shadow:0 8px 20px -8px #34c75988}
.tm-btn.go.pause{background:linear-gradient(180deg,#ff9f0a,#ff8000);box-shadow:0 8px 20px -8px #ff9f0a88}

/* ================= TRADUCTOR ================= */
.tr{max-width:560px;margin:0 auto;padding:16px}
.tr-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.tr-chip{font-size:15px;font-weight:650;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;letter-spacing:-.01em}
.tr-swap{width:42px;height:42px;border-radius:50%;border:none;background:var(--c);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px color-mix(in srgb,var(--c) 55%,transparent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);flex:0 0 auto}
.tr-swap:active{transform:rotate(180deg) scale(.9)}
.tr-src,.tr-res{border-radius:18px;padding:16px 18px}
.tr-src{background:var(--bg-soft);border:1px solid var(--line);margin-bottom:12px}
.tr-src textarea{width:100%;min-height:96px;border:none;background:transparent;color:var(--ink);font-size:19px;line-height:1.4;
  font-family:inherit;resize:none;outline:none;letter-spacing:-.01em}
.tr-res{background:color-mix(in srgb,var(--c) 8%,var(--card));border:1px solid color-mix(in srgb,var(--c) 22%,var(--line))}
.tr-out{font-size:20px;line-height:1.4;color:var(--ink);min-height:60px;white-space:pre-wrap;letter-spacing:-.01em;font-weight:450}
.tr-out.empty{color:var(--muted);font-weight:400}
.tr-out.loading{color:var(--muted)}
.tr-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.tr-acts button{background:var(--card);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));color:var(--c);
  border-radius:11px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.tr-acts button:hover{background:var(--c);color:#fff}
.tr-src-lbl{text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px}

/* ---- Responsivo ---- */
@media(max-width:560px){
  .herr-dock{gap:10px}
  .htool{width:62px}.htool-ico{width:52px;height:52px;font-size:25px;border-radius:16px}
  .htool-lbl{font-size:11px}
  .hcard{padding:18px;border-radius:22px}
  .mon-idty small{max-width:84px}
  .zon-band{height:120px}
}