/* ==========================================================================
   RCC Colombia - Sistema de estilos corporativo
   Marca: Marron Cruz #5C3015 | Amarillo RCC #FCC218 | Azul RCC #0F3880
          Azul Profundo #05214E | Rojo RCC #E51C22 | Blanco #FFFFFF
   Estructura: 1) Tokens 2) Base 3) Layout app 4) Componentes 5) Paginas
               6) Formulario publico 7) Utilidades 8) Responsive
   ========================================================================== */

/* ------------------------------- 1. Tokens ------------------------------- */
:root {
  /* Marca */
  --marron-cruz: #5C3015;
  --amarillo-rcc: #FCC218;
  --azul-rcc: #0F3880;
  --azul-profundo: #05214E;
  --rojo-rcc: #E51C22;
  --blanco: #fff;

  /* Neutros */
  --g50: #f7f9fc;
  --g100: #f1f4f9;
  --g200: #e3e8f0;
  --g300: #cfd6e2;
  --g500: #7b8698;
  --g600: #5a6472;
  --g700: #3d4657;

  /* Semanticos */
  --ok: #1a7f37;
  --ok-bg: #e9f6ec;
  --warn: #b45309;
  --warn-bg: #fff5e0;
  --err: #c3161b;
  --err-bg: #fdecec;
  --info: #0F3880;
  --info-bg: #eef3fb;

  /* Espaciado */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* Formas */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --sh1: 0 1px 2px rgba(5,33,78,.06);
  --sh2: 0 3px 10px rgba(5,33,78,.07);
  --sh3: 0 14px 34px rgba(5,33,78,.14);
  --t: .15s ease;

  /* Tipografia */
  --fs-xs: .74rem; --fs-sm: .84rem; --fs-base: .94rem; --fs-md: 1.05rem;
  --fs-lg: 1.24rem; --fs-xl: 1.55rem; --fs-2xl: 2rem;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

/* -------------------------------- 2. Base -------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--azul-profundo);
  background: var(--blanco);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; min-width: 0; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--azul-profundo); }
h1 { font-size: var(--fs-xl); margin-bottom: var(--s2); }
h2 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
h3 { font-size: var(--fs-md); margin-bottom: var(--s2); }
h4 { font-size: var(--fs-base); margin-bottom: var(--s1); }
p { margin-bottom: var(--s3); }
p:last-child, ul:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s3) var(--s5); }

a { color: var(--azul-rcc); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: 650; }

code, kbd, pre { font-family: var(--mono); }
code { font-size: .88em; overflow-wrap: anywhere; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

:focus-visible { outline: 3px solid rgba(15,56,128,.35); outline-offset: 2px; }

/* Iconos SVG del sistema (stroke uniforme, sin emoji) */
.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
           stroke-linecap: round; stroke-linejoin: round; display: block; }
.cross { width: 22px; height: 22px; fill: var(--marron-cruz); flex-shrink: 0; }
.cross.big { width: 44px; height: 44px; }

/* ---------------------------- 3. Layout app ----------------------------- */
.app-body { background: var(--g100); }
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: linear-gradient(180deg, #6d3c1d 0%, var(--marron-cruz) 42%, #3d1f0f 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--s5) var(--s3);
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 40;
}

.sidebar-brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s2) var(--s4);
  border-bottom: 1px solid rgba(252,194,24,.32);
  margin-bottom: var(--s4);
}
.sidebar-brand .cross { width: 26px; height: 26px; fill: var(--amarillo-rcc); }
.sidebar-brand strong { font-size: 1.12rem; letter-spacing: .5px; display: block; line-height: 1.15; }
.sidebar-brand span { color: var(--amarillo-rcc); font-size: var(--fs-sm); font-weight: 600; }
.sidebar-brand small { display: block; color: rgba(255,255,255,.6); font-size: var(--fs-xs); font-weight: 500; margin-top: 2px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3);
  border-radius: var(--r-sm);
  color: #f0e7db;
  font-weight: 600; font-size: var(--fs-base);
  border-left: 3px solid transparent;
  transition: background var(--t), color var(--t);
  min-height: 40px;
}
.sidebar-nav a:hover { background: rgba(252,194,24,.12); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: rgba(252,194,24,.18); border-left-color: var(--amarillo-rcc); color: #fff; }
.sidebar-nav a .ico { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; }
.sidebar-nav a .ico svg { width: 17px; height: 17px; }
.sidebar-bottom { margin-top: auto; padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.16); }
.sidebar-nav a.logout { color: #ffd4d6; }
.sidebar-nav a.logout:hover { background: rgba(229,28,34,.22); }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--blanco);
  border-bottom: 3px solid var(--amarillo-rcc);
  padding: 11px var(--s6);
  position: sticky; top: 0; z-index: 20;
  min-height: 58px;
}
  .app-topbar-title {
  font-weight: 700; color: var(--azul-profundo); font-size: var(--fs-base);
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-user { display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--g600);
  background: var(--g50); border: 1px solid var(--g200);
  border-radius: var(--r-pill); padding: 5px 12px 5px 6px;
  max-width: 46vw;
}
.app-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.app-user-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--azul-rcc); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}

.app-content { flex: 1; min-width: 0; padding: var(--s6) var(--s7) var(--s8); }
.app-content > .container { max-width: 1180px; padding: 0; margin: 0; }
.app-content > .container.pad { padding: 0; }

.app-footer {
  background: var(--azul-profundo); color: rgba(255,255,255,.86);
  padding: var(--s4) var(--s7); font-size: var(--fs-sm);
}
.app-footer .footer-in { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.app-footer a { color: var(--amarillo-rcc); }

.hamburger {
  display: none; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--azul-profundo);
  cursor: pointer; padding: 6px; border-radius: var(--r-sm);
}
.hamburger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.hamburger:hover { background: var(--g100); }
.sidebar-overlay { display: none; }

/* Encabezado de pagina dentro del panel */
.page-head { margin-bottom: var(--s6); min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.page-head h1 { margin-bottom: var(--s1); }
.page-head .lead { margin-bottom: 0; }
.page-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
             font-weight: 600; color: var(--g600); margin-bottom: var(--s3); }
.page-back:hover { color: var(--azul-rcc); }

/* ----------------------------- 4. Componentes ---------------------------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.container-wide { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.pad { padding: 48px 22px; }
.pad-sm { padding-top: var(--s3); }
.center { text-align: center; }
.center-text { text-align: center; }

.lead { font-size: var(--fs-md); color: var(--g600); max-width: 74ch; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }

.card {
  background: var(--blanco);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--sh2);
  min-width: 0;
}
.card > h3 { display: flex; align-items: center; gap: var(--s2); }
.card-accent { border-top: 4px solid var(--azul-rcc); }
.card + .card { margin-top: var(--s5); }

.section-title {
  font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--g500); margin: var(--s7) 0 var(--s3);
}

.muted { color: var(--g600); }
.small { font-size: var(--fs-sm); }
.code404 { font-size: 4rem; color: var(--rojo-rcc); font-weight: 800; }
.empty { text-align: center; color: var(--g500); padding: var(--s6) 0; font-size: var(--fs-base); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 20px; min-height: 40px;
  border-radius: var(--r-sm);
  font-family: inherit; font-weight: 650; font-size: var(--fs-base);
  border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t), transform .06s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary { background: var(--rojo-rcc); color: var(--blanco); }
.btn-primary:hover { background: #c3161b; }
.btn-outline { background: var(--blanco); color: var(--azul-rcc); border-color: var(--g300); }
.btn-outline:hover { background: var(--azul-rcc); border-color: var(--azul-rcc); color: var(--blanco); }
.btn-danger { background: var(--rojo-rcc); color: var(--blanco); }
.btn-danger:hover { background: #a81418; }
.btn-ghost { background: transparent; color: var(--blanco); border-color: var(--amarillo-rcc); }
.btn-ghost:hover { background: rgba(252,194,24,.16); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: var(--fs-sm); }
.btn-sm svg { width: 14px; height: 14px; }

.actions-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Alertas */
.alert {
  background: var(--err-bg); border: 1px solid #f4c8c8; border-left: 4px solid var(--err);
  color: #7e1013; padding: 11px var(--s4); border-radius: var(--r-sm);
  font-size: var(--fs-base); margin-bottom: var(--s4);
}
.alert-ok { background: var(--ok-bg); border-color: #c7e6cf; border-left-color: var(--ok); color: #12532b; }
.alert-info { background: var(--info-bg); border-color: #cfdcec; border-left-color: var(--info); color: var(--azul-profundo); }
.alert-warn { background: var(--warn-bg); border-color: #f0dca6; border-left-color: var(--warn); color: #6b4a00; }
.alert-reglas { background: var(--g50); border: 1px solid var(--g200); border-left: 4px solid var(--azul-rcc);
                border-radius: var(--r-sm); padding: var(--s4) var(--s5); margin: var(--s5) 0; font-size: var(--fs-base); }
.alert-reglas ul { margin: 6px 0 0 var(--s5); }
.alert-reglas li { margin-bottom: 4px; }

/* Formularios */
label { display: block; font-weight: 650; font-size: var(--fs-sm); margin: var(--s4) 0 6px; color: var(--azul-profundo); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: 10px var(--s3);
  border: 1.5px solid var(--g300); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-base); color: var(--azul-profundo);
  background: var(--blanco); transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-rcc); box-shadow: 0 0 0 3px rgba(15,56,128,.14);
}
input::placeholder, textarea::placeholder { color: var(--g500); }
textarea { resize: vertical; min-height: 78px; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--azul-rcc); cursor: pointer; }
input[type=file] { padding: 8px; background: var(--g50); font-size: var(--fs-sm); }
input[type=color] { width: 100%; height: 40px; padding: 3px; border: 1.5px solid var(--g300);
                    border-radius: var(--r-sm); background: var(--blanco); cursor: pointer; }
.field-help { font-size: var(--fs-xs); color: var(--g500); margin-top: 5px; }
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }

/* Tablas */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.table th {
  text-align: left; color: var(--azul-rcc);
  background: var(--g50);
  border-bottom: 2px solid var(--amarillo-rcc);
  padding: 9px var(--s3); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 800;
  white-space: nowrap;
}
.table td { padding: 10px var(--s3); border-bottom: 1px solid var(--g200); vertical-align: top; overflow-wrap: break-word; }
.table tbody tr:hover td { background: #f8fafd; }
.table tbody tr:last-child td { border-bottom: 1px solid var(--g200); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .wrap-any { overflow-wrap: anywhere; }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabla-scroll > .table, .tabla-scroll > .mini-tabla { min-width: 640px; }
.tabla-scroll select, .tabla-scroll input { min-width: 110px; }

.pill {
  display: inline-block; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .5px;
}
.pill-admin { background: var(--rojo-rcc); color: var(--blanco); }
.pill-user  { background: var(--amarillo-rcc); color: var(--azul-profundo); }
.pill-soft  { background: var(--g100); color: var(--g700); }

/* Panel de dos columnas (formulario + listado) */
.panel-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.panel-grid-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* KPIs */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s4); margin: 0 0 var(--s6);
}
.kpi {
  background: var(--blanco); border: 1px solid var(--g200); border-top: 4px solid var(--azul-rcc);
  border-radius: var(--r); padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sh1);
  color: var(--azul-profundo); min-width: 0;
}
a.kpi:hover { text-decoration: none; border-top-color: var(--amarillo-rcc); transform: translateY(-2px); }
.kpi-icon { color: var(--azul-rcc); margin-bottom: var(--s1); }
.kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kpi-value { font-size: 1.85rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-value.ok { color: var(--ok); font-size: 1.3rem; }
.kpi-label { font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .6px; color: var(--g500); }
.kpi-note { font-size: var(--fs-xs); color: var(--rojo-rcc); }

/* Grafica de barras simple */
.chart { display: flex; align-items: flex-end; gap: var(--s2); height: 170px; padding: var(--s2) 2px 0; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.chart-bar { width: 100%; max-width: 42px; background: linear-gradient(180deg, var(--amarillo-rcc), var(--rojo-rcc));
             border-radius: 5px 5px 2px 2px; min-height: 4px; }
.chart-day { font-size: var(--fs-xs); color: var(--g500); margin-top: 6px; }

/* Barras de estadistica (formularios) */
.barra-linea { display: grid; grid-template-columns: minmax(0, 1fr) 120px 40px; gap: var(--s2); align-items: center; margin-bottom: 7px; }
.barra { background: var(--g100); border-radius: var(--r-pill); height: 9px; overflow: hidden; }
.barra-fill { background: linear-gradient(90deg, var(--amarillo-rcc), var(--rojo-rcc)); height: 100%; }

/* Chat de agentes */
.chat-wrap { max-width: 760px; margin: 0 auto; padding: var(--s5) 0 0; }
.chat-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--s4); }
.chat-box {
  background: var(--blanco); border: 1px solid var(--g200); border-radius: var(--r-lg);
  padding: var(--s5); min-height: 300px; max-height: 52vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s3);
}
.msg { display: flex; }
.msg-user { justify-content: flex-end; }
.msg-ai { justify-content: flex-start; }
.msg-bubble { max-width: 78%; padding: 11px 15px; border-radius: var(--r-lg); font-size: var(--fs-base); line-height: 1.5; }
.msg-user .msg-bubble { background: var(--azul-rcc); color: var(--blanco); border-bottom-right-radius: 4px; }
.msg-ai .msg-bubble { background: var(--g50); color: var(--azul-profundo); border: 1px solid var(--g200); border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: var(--s2); margin-top: var(--s4); }
.chat-form input { flex: 1; min-width: 0; }

/* Documentacion de la API */
.infra-hero { background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-rcc) 78%); color: var(--blanco); padding: 52px 22px 44px; }
.infra-hero h1 { color: var(--blanco); font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: var(--s3) 0 var(--s2); }
.infra-hero .lead { color: rgba(255,255,255,.9); max-width: 68ch; margin-bottom: var(--s5); }
.infra-hero-facts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.infra-hero-facts span {
  background: rgba(255,255,255,.08); border: 1px solid rgba(252,194,24,.45);
  border-radius: var(--r-sm); padding: 8px 13px; font-size: var(--fs-sm);
}
.infra-hero-facts strong { color: var(--amarillo-rcc); text-transform: uppercase; letter-spacing: .6px; font-size: var(--fs-xs); margin-right: 5px; }
.infra-hero-facts code { color: var(--blanco); }

.infra-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6); align-items: start; padding-top: var(--s7); }
.infra-toc {
  position: sticky; top: 76px; background: var(--blanco);
  border: 1px solid var(--g200); border-left: 4px solid var(--azul-rcc);
  border-radius: var(--r); padding: var(--s3);
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: var(--sh1); max-height: calc(100vh - 100px); overflow-y: auto;
}
.infra-toc-title { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--g500); margin: 4px var(--s2) var(--s2); }
.infra-toc a { display: flex; align-items: center; gap: var(--s2); padding: 7px var(--s3); border-radius: var(--r-sm);
               font-size: var(--fs-sm); font-weight: 600; color: var(--azul-profundo); }
.infra-toc a:hover { background: var(--g50); text-decoration: none; }
.infra-toc a b { color: var(--rojo-rcc); font-size: var(--fs-xs); }

.infra-body { min-width: 0; }
.infra-sec {
  background: var(--blanco); border: 1px solid var(--g200); border-radius: var(--r-lg);
  padding: var(--s6); margin-bottom: var(--s5); scroll-margin-top: 84px; box-shadow: var(--sh1);
}
.infra-sec-head { display: flex; gap: var(--s4); align-items: flex-start; border-bottom: 2px solid var(--amarillo-rcc); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.infra-num {
  font-size: 1.35rem; font-weight: 800; color: var(--blanco); background: var(--azul-rcc);
  border-radius: var(--r); width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.infra-sec-head h2 { font-size: var(--fs-lg); margin-bottom: 2px; }
.infra-sec-head p { font-size: var(--fs-base); }
.infra-datos { font-size: var(--fs-base); padding: var(--s4) var(--s5); }
.infra-datos p { margin-bottom: 6px; }
.infra-kv { display: flex; flex-wrap: wrap; gap: 6px var(--s4); margin-bottom: var(--s3); }
.kv { font-size: var(--fs-sm); background: var(--g50); border: 1px solid var(--g200); padding: 4px 11px; border-radius: var(--r-pill); }

.ep { border: 1px solid var(--g200); border-radius: var(--r); padding: var(--s4) var(--s5); margin: var(--s3) 0; background: #fcfdff; }
.ep:last-child { margin-bottom: 0; }
.ep-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ep-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ep-path { background: var(--azul-profundo); color: #dbe4f2; padding: 4px 11px; border-radius: var(--r-sm);
           font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.ep-title { font-size: var(--fs-md); margin: 10px 0 4px; }
.ep-uso { font-size: var(--fs-base); line-height: 1.6; color: var(--g700); margin-bottom: var(--s2); }
.ep-auth { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
           color: var(--rojo-rcc); background: var(--err-bg); padding: 3px 10px; border-radius: var(--r-pill); }
.ep-auth.pub { color: #12532b; background: var(--ok-bg); }
.ep-ex { margin-top: var(--s3); }
.ep-ex summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--azul-rcc); user-select: none; }
.ep-ex summary:hover { color: var(--rojo-rcc); }

.params { margin: var(--s3) 0 2px; }
.params th { background: var(--g100); }
.params code { color: var(--azul-rcc); font-weight: 700; }

.m-badge {
  font-size: var(--fs-xs); font-weight: 800; padding: 3px 9px; border-radius: var(--r-sm);
  color: var(--blanco); min-width: 54px; text-align: center; letter-spacing: .5px;
}
.m-get { background: var(--ok); }
.m-post { background: var(--azul-rcc); }
.m-put { background: var(--warn); }
.m-delete { background: var(--rojo-rcc); }

.codeblock { background: var(--azul-profundo); border-radius: var(--r); margin-top: var(--s2); overflow: hidden; max-width: 100%; }
.code-title { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--amarillo-rcc); padding: 9px var(--s4) 0; }
.codeblock pre { color: #dbe4f2; font-size: var(--fs-sm); line-height: 1.55; padding: 9px var(--s4) var(--s4);
                overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

.copy-btn {
  font-size: var(--fs-xs); font-weight: 700; background: var(--blanco); color: var(--azul-rcc);
  border: 1.5px solid var(--g300); border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.copy-btn:hover { background: var(--azul-rcc); border-color: var(--azul-rcc); color: var(--blanco); }

/* Login */
.auth-wrap {
  min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--azul-profundo) 0%, var(--azul-rcc) 100%);
  padding: var(--s8) var(--s4);
}
.auth-card { width: 100%; max-width: 410px; padding: var(--s7) var(--s6); border-top: 4px solid var(--rojo-rcc); }
.auth-logo { text-align: center; margin-bottom: var(--s5); }
.auth-logo h1 { font-size: var(--fs-lg); margin-top: var(--s2); }
.auth-logo .muted { font-size: var(--fs-sm); }

/* Pie publico */
.footer { background: var(--azul-profundo); color: var(--blanco); padding: var(--s5) 0; margin-top: var(--s7); }
.footer-in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.footer a { color: var(--amarillo-rcc); }
.footer .muted { color: rgba(255,255,255,.65); }

/* Hero publico */
.hero { background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-rcc) 72%); color: var(--blanco); padding: 76px 22px 64px; text-align: center; }
.hero h1 { color: var(--blanco); font-size: clamp(1.8rem, 4.2vw, 2.8rem); margin: var(--s3) 0 var(--s3); }
.hero .accent { color: var(--amarillo-rcc); }
.hero .lead { color: rgba(255,255,255,.92); margin: 0 auto var(--s6); max-width: 62ch; }
.hero .cross.big { fill: var(--amarillo-rcc); margin: 0 auto; }
.badge {
  display: inline-block; background: var(--rojo-rcc); color: var(--blanco);
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .8px; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--r-pill);
}
.actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s5); }
.status { display: inline-block; font-size: var(--fs-sm); font-weight: 650; padding: 6px 15px; border-radius: var(--r-pill); }
.status.ok   { background: rgba(252,194,24,.16); color: var(--amarillo-rcc); border: 1px solid var(--amarillo-rcc); }
.status.down { background: rgba(229,28,34,.18); color: #ffb3b5; border: 1px solid var(--rojo-rcc); }

/* Barra superior publica (legacy) */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px;
          background: var(--blanco); border-bottom: 3px solid var(--amarillo-rcc); position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 750; font-size: 1.1rem; color: var(--azul-profundo); letter-spacing: .4px; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--rojo-rcc); }
.topbar nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.topbar nav a { color: var(--azul-rcc); font-weight: 650; padding: 6px 10px; border-radius: var(--r-sm); }
.topbar nav a:hover { background: var(--amarillo-rcc); color: var(--azul-profundo); text-decoration: none; }

/* --------------------------- 5. Modulos del panel ----------------------- */
/* Mensajes masivos */
.canal-row { display: flex; gap: var(--s4); margin: 6px 0 var(--s3); flex-wrap: wrap; }
.radio { font-weight: 650; font-size: var(--fs-base); color: var(--azul-profundo); display: flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; }
.lbl-canal { margin-top: 0; }
.costo-box { background: var(--warn-bg); border: 1px solid #f0dca6; color: var(--azul-profundo);
             font-weight: 700; border-radius: var(--r-sm); padding: 10px var(--s4); margin: var(--s3) 0; font-size: var(--fs-base); }
.chk-todo { margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.chk-user { display: flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 500; font-size: var(--fs-sm); }
.tabla-dest input[type=checkbox] { width: auto; }
.resumen-card { border-top: 4px solid var(--ok); margin-bottom: var(--s5); }

/* Generador QR */
.qr-resultado { border-top: 4px solid var(--amarillo-rcc); text-align: center; margin-bottom: var(--s5); }
.qr-img { width: 190px; height: auto; border: 1px solid var(--g200); border-radius: var(--r); margin: 0 auto; }
.qr-url { margin-top: var(--s3); }
.qr-url code { background: var(--g50); border: 1px solid var(--g200); padding: 5px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.qr-thumb { width: 44px; height: 44px; border: 1px solid var(--g200); border-radius: var(--r-sm); }

/* Videollamadas */
.vc-card { border-top: 4px solid var(--azul-rcc); margin-bottom: var(--s5); }
.vc-url { margin: var(--s3) 0; }
.vc-url code { background: var(--g50); border: 1px solid var(--g200); padding: 5px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vc-embed { margin-top: var(--s3); }
.vc-embed summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--azul-rcc); }

/* Formularios: constructor y editor */
.campo-row { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s3); flex-wrap: wrap;
             padding: var(--s3); background: var(--g50); border: 1px solid var(--g200); border-radius: var(--r); }
.campo-row select { flex: 0 0 150px; }
.campo-row input[type=text] { flex: 1 1 200px; min-width: 0; }
.campo-row .opciones-input, .campo-row .columnas-input { flex: 1 1 100%; }
.chk-req { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--g600); white-space: nowrap; margin: var(--s2) 0; }
.chk-req input { width: auto; }
.diseno-box { background: var(--g50); border: 1px dashed var(--g300); border-radius: var(--r); padding: var(--s4); margin: var(--s3) 0; }
.diseno-box h4 { color: var(--azul-rcc); }
.color-row { display: flex; gap: var(--s4); }
.color-row > div { flex: 1; min-width: 0; }
.diseno-edit { margin: 0 0 var(--s4); padding: 0; overflow: hidden; }
.diseno-edit > summary { cursor: pointer; color: var(--azul-rcc); font-weight: 700; padding: var(--s4) var(--s6); user-select: none; display: flex; align-items: center; gap: var(--s2); }
.diseno-edit > summary:hover { background: var(--g50); }
.diseno-edit[open] > summary { border-bottom: 1px solid var(--g200); }
.diseno-edit > form, .diseno-edit > div { padding: var(--s2) var(--s6) var(--s5); }
.dis-block { margin-top: var(--s3); }
.pub-nota { background: var(--warn-bg); border-left: 4px solid var(--amarillo-rcc); color: #6b4a00;
            padding: 10px var(--s4); border-radius: var(--r-sm); font-size: var(--fs-base); margin: var(--s3) 0 var(--s4); }
.pub-ident { background: var(--info-bg); border: 1px solid #cfdcec; color: var(--azul-profundo);
             border-radius: var(--r-sm); padding: 9px var(--s3); font-size: var(--fs-base); margin: var(--s3) 0 var(--s4); }
.inline-code { background: var(--g50); border: 1px solid var(--g200); padding: 4px 9px; border-radius: var(--r-sm); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* Tabla repetible */
.tabla-rep-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; max-width: 100%; }
.tabla-rep { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 0; }
.tabla-rep th { background: var(--g100); color: var(--azul-profundo); text-align: left; padding: 9px var(--s3);
                border: 1px solid var(--g200); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
                letter-spacing: .4px; white-space: nowrap; vertical-align: bottom; }
.tabla-rep td { border: 1px solid var(--g200); padding: 6px; }
.tabla-rep td.num, .tabla-rep th.num { width: 34px; text-align: center; color: var(--g500); font-weight: 700; }
.tabla-rep input, .tabla-rep select {
  width: 100%; padding: 10px; border: 1.5px solid var(--g300); border-radius: var(--r-sm);
  font-size: var(--fs-base); font-family: inherit; min-height: 42px; color: var(--azul-profundo);
}
.tabla-rep input:focus, .tabla-rep select:focus { border-color: var(--azul-rcc); box-shadow: 0 0 0 3px rgba(15,56,128,.13); }
/* Ancho comodo por tipo de columna (la tabla hace scroll horizontal si no cabe) */
.tabla-rep th, .tabla-rep td { min-width: 150px; }
.tabla-rep th.col-texto,   .tabla-rep td.col-texto   { min-width: 210px; }
.tabla-rep th.col-email,   .tabla-rep td.col-email   { min-width: 220px; }
.tabla-rep th.col-numero,  .tabla-rep td.col-numero  { min-width: 120px; }
.tabla-rep th.col-fecha,   .tabla-rep td.col-fecha   { min-width: 150px; }
.tabla-rep th.col-opcion,  .tabla-rep td.col-opcion  { min-width: 150px; }
.tabla-rep-wrap .btn { margin-top: var(--s2); }
.mini-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); margin-top: 6px; }
.mini-tabla th, .mini-tabla td { border: 1px solid var(--g200); padding: 4px 7px; text-align: left; }
.mini-tabla th { background: var(--g50); }
details > summary { cursor: pointer; }

/* Modal de confirmacion */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(5,33,78,.55);
  z-index: 90; align-items: center; justify-content: center; padding: var(--s5);
}
.modal-overlay.show { display: flex; }
.modal-card {
  background: var(--blanco); border-radius: var(--r-lg); border-top: 5px solid var(--rojo-rcc);
  padding: var(--s6); max-width: 430px; width: 100%; box-shadow: var(--sh3);
}
.modal-card h3 { margin-bottom: var(--s2); }
.modal-actions { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s5); flex-wrap: wrap; }

/* ------------------------ 6. Formulario publico -------------------------- */
.pub-wrap {
  min-height: 100vh; background: linear-gradient(160deg, var(--azul-profundo) 0%, var(--azul-rcc) 100%);
  display: flex; align-items: flex-start; justify-content: center; padding: var(--s8) var(--s4);
}
.pub-card { width: 100%; max-width: 700px; padding: var(--s7) var(--s6); border-radius: var(--r-lg); border: 1px solid var(--g200);
            border-top: 5px solid var(--rojo-rcc); background: var(--blanco); box-shadow: var(--sh3); }
.pub-brand { display: flex; align-items: center; gap: var(--s2); font-weight: 750; color: var(--azul-profundo); margin-bottom: var(--s4); font-size: var(--fs-md); }
.pub-brand .cross { width: 22px; height: 22px; fill: var(--marron-cruz); }
.pub-title { font-size: var(--fs-lg); line-height: 1.3; margin-bottom: var(--s2); }
.pub-head { border-bottom: 1px solid var(--g200); padding-bottom: var(--s4); margin-bottom: var(--s5); }
.pub-field { margin-bottom: var(--s4); }
.pub-field > label { display: block; font-weight: 650; font-size: var(--fs-base); color: var(--azul-profundo); margin: 0 0 6px; }
.pub-radio { display: flex; align-items: center; gap: var(--s2); font-weight: 500; margin: 6px 0; font-size: var(--fs-base); cursor: pointer; }
.pub-radio input { width: auto; }
.req { color: var(--rojo-rcc); }
.pub-ok { text-align: center; padding: var(--s5) 0; }
.pub-check { width: 62px; height: 62px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
             display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s4); }
.pub-check svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pub-tabla-scroll { overflow-x: auto; max-width: 100%; }
.pub-actions { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--g200); }

/* ----------------------------- 7. Utilidades ---------------------------- */
.pad-0 { padding: 0; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); }
.stack-sm > * + * { margin-top: var(--s2); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }

/* ---------------------------- 8. Responsive ----------------------------- */
@media (max-width: 1100px) {
  .panel-grid { grid-template-columns: 320px minmax(0, 1fr); }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-content { padding: var(--s5) var(--s5) var(--s7); }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 50;
    transform: translateX(-104%); transition: transform .2s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,.28);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; position: fixed; inset: 0; background: rgba(5,33,78,.45); z-index: 45; }
  .hamburger { display: inline-flex; }
  .panel-grid, .panel-grid-wide, .grid3, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .infra-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .infra-toc { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; }
  .infra-toc a { padding: 6px 10px; }
  .footer-in { flex-direction: column; align-items: flex-start; }
  .color-row { flex-direction: column; gap: 0; }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .app-content { padding: var(--s4) var(--s4) var(--s6); }
  .app-topbar { padding: 10px var(--s4); }
  .app-user { max-width: 40vw; }
  .app-footer { padding: var(--s4); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .kpi-value { font-size: 1.5rem; }
  .card { padding: var(--s5) var(--s4); }
  .diseno-edit > summary { padding: var(--s3) var(--s4); }
  .diseno-edit > form, .diseno-edit > div { padding: var(--s2) var(--s4) var(--s4); }
  .container, .container-wide { padding: 0 var(--s4); }
  .pad { padding: var(--s6) var(--s4); }
  .hero { padding: 54px var(--s4) 44px; }
  .auth-wrap { padding: var(--s6) var(--s4); }
  .pub-wrap { padding: var(--s5) var(--s3); }
  .pub-card { padding: var(--s5) var(--s4); }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .chat-form { flex-direction: column; }
  .chat-form .btn { width: 100%; }
  .table th, .table td { padding: 9px 10px; }
  .acciones .btn { flex: 1 1 auto; }
  h1 { font-size: 1.35rem; }
  .page-head { margin-bottom: var(--s5); }
}

@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .sidebar, .app-topbar, .app-footer, .btn, .copy-btn { display: none !important; }
  .app-content { padding: 0; }
}

/* Boton con el color elegido en el diseno del formulario publico */
.btn-pub { background: var(--pub-color, var(--rojo-rcc)); color: #fff; border-color: transparent; }
.btn-pub:hover { filter: brightness(.92); }

/* Iconos de aviso y de los paneles de edicion */
.nota-ico { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.pub-nota { display: flex; align-items: flex-start; gap: 8px; }
.diseno-edit > summary svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status { padding-left: 26px; position: relative; }
.status::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }

/* ------------------- Formulario publico por etapas (slider) ------------------- */
.pub-head-fija { margin-bottom: var(--s4); }
.pub-prog { background: var(--g100); border-radius: var(--r-pill); padding: 8px 12px; }
.pub-prog-top { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 700; color: var(--g600); margin-bottom: 6px; }
.pub-prog-bar { background: #e6eaf2; border-radius: var(--r-pill); height: 7px; overflow: hidden; }
.pub-prog-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--pub-color, var(--rojo-rcc)); transition: width .3s ease; }

body.js-pub .pub-slider { overflow: hidden; }
body.js-pub .pub-track { display: flex; transition: transform .38s cubic-bezier(.4,0,.2,1); will-change: transform; }
body.js-pub .pub-step { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; }
body.js-pub .pub-intro-static { display: block; }

.pub-step-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.pub-step-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--pub-color, var(--rojo-rcc)); color: #fff;
  font-size: var(--fs-sm); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pub-q { font-size: 1.12rem; line-height: 1.35; margin: 3px 0 0; }
.pub-q-req::after { content: ' *'; color: var(--rojo-rcc); }

.pub-nav { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--g200); }
.pub-nav-intro { border-top: 0; padding-top: var(--s2); }
.pub-nav .btn-pub { margin-left: auto; }
.pub-arrow { font-size: 1.05em; }
.pub-error { width: 100%; color: var(--rojo-rcc); font-size: var(--fs-sm); font-weight: 600; display: none; margin: 0; }
.pub-error-campo { border-color: var(--rojo-rcc) !important; box-shadow: 0 0 0 3px rgba(229,28,34,.12) !important; }

.pub-opciones { display: grid; gap: var(--s2); }
.pub-opcion {
  display: flex; align-items: center; gap: var(--s3);
  border: 1.5px solid var(--g300); border-radius: var(--r);
  padding: 12px 14px; background: var(--blanco); cursor: pointer;
  margin: 0; font-weight: 500; font-size: var(--fs-base);
  transition: border-color .15s ease, background .15s ease;
}
.pub-opcion:hover { border-color: var(--pub-color, var(--azul-rcc)); }
.pub-opcion.sel { border-color: var(--pub-color, var(--azul-rcc)); background: #f3f7fd; }
.pub-opcion input { width: auto; margin: 0; flex-shrink: 0; }
.pub-opcion-txt { min-width: 0; overflow-wrap: anywhere; }

.pub-resumen { border: 1px solid var(--g200); border-radius: var(--r); overflow: hidden; }
.pub-resumen-fila { display: flex; gap: var(--s3); padding: 10px 14px; border-bottom: 1px solid var(--g200); font-size: var(--fs-sm); }
.pub-resumen-fila:last-child { border-bottom: 0; }
.pub-resumen-lb { flex: 0 0 42%; color: var(--g600); }
.pub-resumen-vl { font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .pub-nav { flex-direction: column-reverse; }
  .pub-nav .btn { width: 100%; }
  .pub-nav .btn-pub { margin-left: 0; }
  .pub-resumen-fila { flex-direction: column; gap: 2px; }
  .pub-resumen-lb { flex: none; }
}

/* ------------------ Respuestas: listado con detalle desplegable ------------------ */
.tabla-respuestas td { vertical-align: middle; }
tr.fila-detalle { display: none; }
tr.fila-detalle:target { display: table-row; }
tr.fila-detalle > td { background: #f9fbff; border-bottom: 2px solid var(--g200); padding: var(--s3) var(--s3) var(--s4); }

.qa { border: 1px solid var(--g200); border-radius: var(--r); background: #f9fbff; padding: var(--s3) var(--s4); }
.qa-cab {
  display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center;
  font-size: var(--fs-sm); padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--g200);
}
.qa-cab b { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--g500); margin-right: 4px; }
.qa-cab .qa-cerrar { margin-left: auto; font-weight: 700; }
.qa-item { padding: 7px 0; border-bottom: 1px dashed var(--g200); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.qa-item:last-child { border-bottom: 0; }
.qa-item > b {
  display: block; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--g500); margin-bottom: 2px;
}
.field-help { font-size: var(--fs-xs); color: var(--g500); margin-top: 4px; }
input[readonly] { background: var(--g50); color: var(--g700); }

/* ------------------------ Archivos adjuntos en respuestas ------------------------ */
input[type=file] { padding: 9px; background: var(--g50); cursor: pointer; }
.adj-thumb {
  display: block; max-width: 190px; max-height: 190px; width: auto; height: auto;
  border: 1px solid var(--g200); border-radius: var(--r-sm); margin: 4px 0 6px; background: #fff;
}
.adj-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: var(--fs-sm); }
.adj-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Confirmacion: enviar otra respuesta */
.pub-ok-acciones { margin-top: var(--s5); }
.pub-ok-acciones .btn { margin: 0 auto; }
.pub-ok-acciones .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ------------------------------- Pestanas del panel ------------------------------- */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 2px solid var(--g200); margin-bottom: var(--s5);
}
.tab {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  padding: 10px 16px; font-family: inherit; font-weight: 650; font-size: var(--fs-base);
  color: var(--g600); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: background var(--t), color var(--t), border-color var(--t);
  display: inline-flex; align-items: center; gap: 4px;
}
.tab:hover { background: var(--g50); color: var(--azul-rcc); }
.tab.active { color: var(--azul-rcc); border-bottom-color: var(--amarillo-rcc); background: var(--g50); }
.tab-n {
  display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 4px;
  border-radius: var(--r-pill); background: var(--g200); color: var(--g700);
  font-size: var(--fs-xs); font-weight: 800; text-align: center;
}
.tab.active .tab-n { background: var(--azul-rcc); color: var(--blanco); }
.tab-panel { display: none; }
body.js-tabs .tab-panel.active { display: block; }
body:not(.js-tabs) .tab-panel { display: block; }
body:not(.js-tabs) .tabs { display: none; }
@media (max-width: 720px) {
  .tabs { gap: 2px; }
  .tab { padding: 9px 12px; font-size: var(--fs-sm); }
}

/* Encabezados de seccion dentro del formulario publico + "Otro" */
.pub-seccion {
  margin: var(--s7) 0 var(--s3); padding: 8px 0 6px; font-size: var(--fs-md);
  color: var(--azul-profundo); border-bottom: 2px solid var(--amarillo-rcc);
}
.pub-seccion:first-of-type { margin-top: var(--s2); }
.pub-otro { margin-top: 8px; }
.pub-otro:disabled { background: var(--g100); color: var(--g500); }
.pub-conteo { font-weight: 800; color: var(--azul-rcc); }


/* ============================================================
   NUBE (estilo Drive) - panel RCC
   ============================================================ */
.nube-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.nube-migas { font-size:.95rem; }
.nube-migas a { color:#0F3880; text-decoration:none; }
.nube-migas a:hover { text-decoration:underline; }
.nube-migas__sep { color:#b9b9b9; margin:0 6px; }
.nube-bar__der { display:flex; gap:10px; align-items:center; }
.nube-acciones { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.nube-sep { flex:1; }
.nube-vista { display:inline-flex; border:1px solid #dcdcdc; border-radius:10px; overflow:hidden; }
.nube-vista button { background:#fff; border:0; padding:6px 12px; cursor:pointer; font-size:.85rem; color:#444; }
.nube-vista button.act { background:#0F3880; color:#fff; }
.nube-cuenta { margin-left:6px; }

.nube-ocultos { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.nube-form-oculto { display:none; }

.nube-zona { position:relative; min-height:180px; }
.nube-grid--cuadros { display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:14px; }
.nube-grid--lista { display:block; border:1px solid #e6e6e6; border-radius:12px; background:#fff; }

.nube-item { position:relative; background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:10px;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease; cursor:pointer; outline:none; }
.nube-item:hover { box-shadow:0 4px 14px rgba(5,33,78,.10); border-color:#cfd6e2; }
.nube-item.sel { border-color:#FCC218; background:#FFFBEB; box-shadow:0 0 0 2px #FCC218 inset; }
.nube-item:focus-visible { box-shadow:0 0 0 3px rgba(15,56,128,.35); }

.nube-item__ico { position:relative; height:92px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:#F7F8FA; overflow:hidden; margin-bottom:8px; }
.nube-item--carpeta .nube-item__ico { background:#FFF6DA; }
.ico-carpeta { width:52px; height:52px; fill:#FCC218; stroke:#5C3015; stroke-width:1.1; }
.nube-svg svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nube-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.nube-etq { position:absolute; left:6px; top:6px; color:#fff; font-size:.62rem; letter-spacing:.4px;
  padding:2px 6px; border-radius:99px; text-transform:uppercase; font-weight:700; }
.nube-item__nom { font-size:.88rem; font-weight:600; color:#222; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nube-item__meta { font-size:.72rem; color:#8a8a8a; margin-top:3px; }

.nube-item__menu { position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:#333; font-size:16px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .12s ease; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.nube-item:hover .nube-item__menu, .nube-item.sel .nube-item__menu, .nube-item.abierto .nube-item__menu { opacity:1; }
.nube-menu { display:none; position:absolute; right:8px; top:36px; z-index:30; min-width:150px; background:#fff;
  border:1px solid #e2e2e2; border-radius:10px; box-shadow:0 10px 26px rgba(5,33,78,.18); padding:5px; }
.nube-item.abierto .nube-menu { display:block; }
.nube-menu__abrir, .nube-menu__del { display:block; width:100%; text-align:left; background:none; border:0;
  padding:8px 10px; border-radius:7px; font-size:.85rem; cursor:pointer; color:#222; text-decoration:none; }
.nube-menu__abrir:hover { background:#F1F5FF; }
.nube-menu__del { color:#E51C22; }
.nube-menu__del:hover { background:#FDECEC; }

/* vista lista */
.nube-grid--lista .nube-item { display:flex; align-items:center; gap:12px; border:0; border-bottom:1px solid #eee;
  border-radius:0; padding:8px 12px; }
.nube-grid--lista .nube-item:last-child { border-bottom:0; }
.nube-grid--lista .nube-item:hover { box-shadow:none; background:#F7F9FC; }
.nube-grid--lista .nube-item.sel { background:#FFFBEB; box-shadow:none; }
.nube-grid--lista .nube-item__ico { height:38px; width:38px; min-width:38px; margin:0; background:transparent; }
.nube-grid--lista .ico-carpeta { width:30px; height:30px; }
.nube-grid--lista .nube-svg svg { width:26px; height:26px; }
.nube-grid--lista .nube-etq { display:none; }
.nube-grid--lista .nube-item__nom { flex:1; -webkit-line-clamp:1; }
.nube-grid--lista .nube-item__meta { margin:0; white-space:nowrap; }
.nube-grid--lista .nube-item__menu { position:static; opacity:1; box-shadow:none; background:transparent; }
.nube-grid--lista .nube-menu { top:34px; }

.nube-vacio { text-align:center; padding:36px 10px 26px; color:#444; }
.nube-vacio__ico svg { width:54px; height:54px; stroke:#0F3880; fill:none; stroke-width:1.6; opacity:.8; }
.nube-pista { text-align:center; margin-top:14px; }

.nube-pop { display:none; position:absolute; z-index:40; background:#fff; border:1px solid #e2e2e2; border-radius:12px;
  box-shadow:0 12px 30px rgba(5,33,78,.20); padding:12px; width:260px; }
.nube-pop.show { display:block; }
.nube-pop label { display:block; font-size:.8rem; color:#555; margin-bottom:5px; }
.nube-pop input[type=text] { width:100%; padding:8px 10px; border:1px solid #d6d6d6; border-radius:9px; }
.nube-pop__acc { display:flex; gap:8px; margin-top:10px; }

.nube-velo { display:none; position:fixed; inset:0; z-index:300; background:rgba(5,33,78,.45);
  align-items:center; justify-content:center; }
.nube-velo.show { display:flex; }
.nube-velo__caja { background:#fff; border-radius:14px; padding:20px 24px; min-width:280px; text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.3); }
.nube-barra { height:8px; background:#EDEFF3; border-radius:99px; overflow:hidden; margin-top:12px; }
.nube-barra span { display:block; height:100%; width:0; background:linear-gradient(90deg,#FCC218,#0F3880); transition:width .12s linear; }
#nube-velo-soltar { background:rgba(15,56,128,.5); border:0; }
body.nube-soltando #nube-velo-soltar { display:flex; }
.nube-velo__soltar { border:3px dashed #FCC218; border-radius:16px; padding:60px 80px; color:#fff;
  font-size:1.3rem; font-weight:700; background:rgba(5,33,78,.35); }

/* correccion: el popover de nueva carpeta cuelga del boton (no del bloque oculto) */
.nube-nueva-wrap { position:relative; display:inline-block; }
.nube-nueva-wrap .nube-pop { top:calc(100% + 8px); left:0; }


/* ============================================================
   NUBE: compartir (publico / super publico / especifico)
   ============================================================ */
.nb-modo { display:inline-block; margin-top:4px; font-size:.64rem; font-weight:700; letter-spacing:.4px;
  padding:2px 8px; border-radius:99px; color:#fff; }
.nb-modo--publico { background:#0F3880; }
.nb-modo--super { background:#E51C22; }
.nb-modo--especifico { background:#1E7145; }
.nb-modos { margin-top:2px; }
.nb-opciones { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.nb-opcion { border:1px solid #E4E7EE; border-radius:10px; padding:12px 14px; cursor:pointer; display:block; background:#fff; }
.nb-opcion:hover { border-color:#cfd6e2; }
.nb-opcion input { margin-right:8px; }
.nb-opcion b { color:#05214E; }
.nb-opcion small { display:block; color:#6B7280; margin-top:4px; line-height:1.4; }
.nb-opcion.sel { border-color:#FCC218; background:#FFFBEB; box-shadow:0 0 0 2px #FCC218 inset; }
.nb-enlace { display:flex; gap:8px; margin:8px 0; }
.nb-enlace input { flex:1; padding:8px 10px; border:1px solid #d6d6d6; border-radius:9px; font-size:.85rem; background:#F8F9FB; }
.nb-lista-usuarios { max-height:280px; overflow:auto; border:1px solid #E4E7EE; border-radius:10px; margin-top:8px; }
.nb-usuario { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #f1f1f1; cursor:pointer; }
.nb-usuario:last-child { border-bottom:0; }
.nb-usuario:hover { background:#F7F9FC; }
.nb-usuario .em { color:#8a8a8a; font-size:.78rem; margin-left:6px; }
.nb-vacio { padding:14px; color:#8a8a8a; font-size:.85rem; }
.nb-espec { margin-top:6px; }
@media (max-width:720px){ .nb-opciones { grid-template-columns:1fr; } }


/* ============================================================
   CAMPUS VIRTUAL (2026-10-16)
   ============================================================ */
.campus-reg { max-width: 640px; margin: 0 auto; }
.campus-errores { margin: 0 0 0 18px; padding: 0; }
.campus-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campus-2col > div { min-width: 0; }
.campus-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.campus-info strong { display: block; word-break: break-word; }
.campus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 720px) { .campus-2col, .campus-info, .campus-grid { grid-template-columns: 1fr; } }


/* ============================================================
   CAMPUS: CONTENIDOS Y CURSOS (2026-10-20)
   ============================================================ */
.curso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 4px; }
.curso-card { border: 1px solid #E7E2D8; border-radius: 12px; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.curso-card h3 { margin: 0; }
.curso-card--link { text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.curso-card--link:hover { border-color: #cfd6e2; box-shadow: 0 4px 14px rgba(5,33,78,.10); }
.curso-meta { font-size: .8rem; color: #6B7280; margin: 0; }
.curso-entrar { margin-top: auto; font-size: .85rem; font-weight: 700; color: #0F3880; }
.tema-lista { display: flex; flex-direction: column; gap: 8px; }
.tema-row { display: flex; align-items: center; gap: 12px; border: 1px solid #E7E2D8; border-radius: 10px; padding: 10px 14px; text-decoration: none; color: inherit; background: #fff; }
.tema-row:hover { border-color: #cfd6e2; background: #F8FAFD; }
.tema-row__punto { width: 10px; height: 10px; border-radius: 99px; background: #FCC218; flex: none; }
.tema-row__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.tema-row__flecha { margin-left: auto; color: #0F3880; font-weight: 700; }
.tipo-pill { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .4px; padding: 2px 8px; border-radius: 99px; color: #fff; background: #5C3015; vertical-align: middle; }
.tipo-pdf { background: #E51C22; }
.tipo-imagen { background: #0F3880; }
.tipo-video { background: #1E7145; }
.tipo-taller { background: #B8860B; }
.tipo-cuestionario { background: #7A1FA2; }
.contenido-lista { display: flex; flex-direction: column; gap: 8px; }
.contenido-item { display: flex; align-items: center; gap: 10px; border: 1px solid #E7E2D8; border-radius: 10px; padding: 10px 14px; background: #fff; }
.contenido-item__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.contenido-item form, .contenido-item > .btn { margin-left: auto; }
.video-wrap { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contenido-img { max-width: 100%; border-radius: 10px; border: 1px solid #E7E2D8; }
.quiz-form { margin-top: 8px; }
.quiz-q { border: 1px solid #E7E2D8; border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #FBF9F4; }
.quiz-opt { display: block; padding: 4px 0; cursor: pointer; }
.quiz-row { border: 1px dashed #cfd6e2; border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #FBF9F4; }
.quiz-row__pie { display: flex; align-items: flex-end; gap: 10px; }
.quiz-row__pie input[type=number] { max-width: 90px; }
.quiz-row__pie .qb-del { margin-left: auto; }
@media (max-width: 720px) { .curso-grid { grid-template-columns: 1fr; } .contenido-item { flex-wrap: wrap; } }


/* ============================================================
   CAMPUS ADMIN MODERNO (2026-10-20, rediseno UX)
   ============================================================ */
.btn-lg { padding: 12px 22px; font-size: 1rem; border-radius: 12px; }
.adm-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid #E7E2D8; padding-bottom: 18px; margin-bottom: 14px; }
.adm-hero--sm { align-items: center; }
.adm-hero h1 { margin: 6px 0 4px; font-size: 2rem; letter-spacing: -.5px; }
.adm-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.4px; color: #A62639; font-weight: 700; }
.adm-sub { color: #6B7280; max-width: 640px; margin: 4px 0 0; font-size: .95rem; }
.adm-back { display: inline-block; margin-bottom: 10px; color: #0F3880; text-decoration: none; font-weight: 600; font-size: .9rem; }
.adm-back:hover { text-decoration: underline; }
.adm-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.adm-step { display: inline-flex; align-items: center; gap: 8px; font-size: .83rem; color: #6B7280; background: #fff; border: 1px solid #E7E2D8; padding: 7px 14px; border-radius: 999px; }
.adm-step b { width: 22px; height: 22px; border-radius: 99px; background: #F1EFE8; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.adm-step.is-on { border-color: #FCC218; background: #FFFBEB; color: #5C3015; }
.adm-step.is-on b { background: #FCC218; color: #5C3015; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.adm-card { background: #fff; border: 1px solid #E7E2D8; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 10px rgba(22,22,26,.04); transition: box-shadow .16s, transform .16s, border-color .16s; }
a.adm-card { text-decoration: none; color: inherit; }
.adm-card:hover { box-shadow: 0 10px 26px rgba(5,33,78,.10); border-color: #d8d2c4; transform: translateY(-1px); }
.adm-card h3 { margin: 2px 0 0; font-size: 1.12rem; }
.adm-card__ico { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 4px; }
.adm-ico--a { background: #FFF3D4; } .adm-ico--b { background: #E8F0FF; } .adm-ico--c { background: #E9F7EE; }
.adm-stats { display: flex; gap: 14px; font-size: .84rem; color: #374151; margin: 2px 0 8px; }
.adm-card__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.adm-kebab { border: 1px solid #E7E2D8; background: #fff; border-radius: 10px; width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; color: #6B7280; }
.adm-kebab:hover { background: #F7F5EF; color: #16161A; }
.adm-empty { border: 2px dashed #E2DCCF; border-radius: 18px; padding: 40px 24px; text-align: center; background: #FFFDF8; }
.adm-empty__ico { font-size: 44px; margin-bottom: 6px; }
.adm-empty h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.adm-empty .btn { margin-top: 12px; }
.adm-layout { display: grid; grid-template-columns: 265px 1fr; gap: 22px; align-items: start; margin-top: 16px; }
.adm-tree { position: sticky; top: 16px; background: #fff; border: 1px solid #E7E2D8; border-radius: 16px; padding: 16px; box-shadow: 0 2px 10px rgba(22,22,26,.04); }
.adm-tree__titulo { font-size: .72rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px; }
.adm-tree ul { list-style: none; margin: 0; padding: 0; }
.adm-tree__nivel { margin-bottom: 10px; }
.adm-tree__nivel > a { display: block; font-weight: 700; font-size: .9rem; color: #16161A; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.adm-tree__nivel > a:hover { background: #F7F5EF; }
.adm-tree__n { display: block; font-size: .74rem; color: #9CA3AF; padding: 0 8px 4px; }
.adm-tree__tema a { display: block; font-size: .82rem; color: #4B5563; text-decoration: none; padding: 3px 8px 3px 18px; border-left: 2px solid #EDE7DA; margin-left: 8px; }
.adm-tree__tema a:hover { color: #0F3880; border-color: #FCC218; }
.adm-tree__vacio { font-size: .85rem; color: #9CA3AF; }
.adm-main { min-width: 0; }
.adm-nivel { background: #fff; border: 1px solid #E7E2D8; border-radius: 18px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(22,22,26,.04); }
.adm-nivel__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.adm-nivel__num { width: 36px; height: 36px; border-radius: 12px; background: #0F3880; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.adm-nivel__tit { min-width: 0; flex: 1; }
.adm-nivel__tit h3 { margin: 0; font-size: 1.05rem; }
.adm-nivel__acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-temas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.adm-tema { display: flex; align-items: center; gap: 12px; border: 1px solid #EFEBE2; border-radius: 12px; padding: 10px 14px; background: #FBF9F4; flex-wrap: wrap; }
.adm-tema__ico { font-size: 18px; }
.adm-tema__cuerpo { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.adm-vacio-mini { color: #9CA3AF; font-size: .9rem; margin: 12px 0 0; }
.adm-addnivel { text-align: center; margin: 6px 0 10px; }
.adm-acciones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 18px; }
.adm-accion { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid #E7E2D8; border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.adm-accion:hover { border-color: #FCC218; box-shadow: 0 8px 20px rgba(5,33,78,.08); }
.adm-accion__ico { font-size: 28px; }
.adm-contenidos { display: flex; flex-direction: column; gap: 8px; }
.adm-contenido { display: flex; align-items: center; gap: 12px; border: 1px solid #EFEBE2; border-radius: 12px; padding: 12px 14px; background: #fff; flex-wrap: wrap; }
.adm-contenido__num { font-weight: 800; color: #9CA3AF; width: 16px; }
.adm-contenido__ico { font-size: 18px; }
.adm-contenido__cuerpo { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.adm-modal { position: fixed; inset: 0; background: rgba(22,22,26,.48); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 18px; }
.adm-modal[hidden] { display: none; }
.adm-modal__box { background: #fff; border-radius: 18px; width: 100%; max-width: 520px; padding: 22px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.3); max-height: 90vh; overflow: auto; }
.adm-modal__box--ancha { max-width: 720px; }
.adm-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.adm-modal__head h3 { margin: 0; }
.adm-modal__x { border: 0; background: #F3F1EA; width: 34px; height: 34px; border-radius: 99px; font-size: 20px; cursor: pointer; color: #4B5563; }
.adm-modal__pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
body.adm-modal-open { overflow: hidden; }
.adm-pista { color: #6B7280; font-size: .92rem; margin: 4px 0 8px; }
.curso-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.curso-card { border-radius: 16px; padding: 18px; box-shadow: 0 2px 10px rgba(22,22,26,.04); }
@media (max-width: 900px) { .adm-layout { grid-template-columns: 1fr; } .adm-tree { position: static; } }
@media (max-width: 760px) { .adm-acciones-grid { grid-template-columns: 1fr; } .adm-hero h1 { font-size: 1.55rem; } }


/* ============================================================
   CAMPUS VIRTUAL PUBLICO (2026-10-26) — identidad RCC
   ============================================================ */
.cv { --cv-navy:#062A63; --cv-gold:#F9B800; --cv-orange:#F28C00; --cv-red:#E51B23; --cv-cream:#FBF7EF; --cv-ink:#101827; background:#fff; color:var(--cv-ink); }
.cv * { box-sizing:border-box; }
.cv h1,.cv h2,.cv h3 { font-family:Georgia,'Times New Roman',serif; letter-spacing:-.4px; }
.cv-wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
.cv-aviso { background:#FEF3C7; color:#7C4A03; padding:12px 20px; text-align:center; font-size:.9rem; border-bottom:1px solid #F3D98B; }
.cv-aviso--ok { background:#E7F6EC; color:#14532D; border-color:#B9E4C7; }
.cv-hero { position:relative; min-height:565px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.cv-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.cv-hero__velo { position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,42,99,.96) 0%,rgba(6,42,99,.86) 45%,rgba(6,42,99,.42) 100%); }
.cv-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--cv-gold),var(--cv-orange),var(--cv-red)); }
.cv-hero__cuerpo { position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:72px 24px; width:100%; }
.cv-marca { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.cv-marca img { height:52px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.cv-marca__tx { font-size:.7rem; letter-spacing:2.4px; text-transform:uppercase; color:rgba(255,255,255,.85); border-left:1px solid rgba(255,255,255,.35); padding-left:14px; }
.cv-eyebrow { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:2.2px; text-transform:uppercase; color:var(--cv-gold); margin-bottom:10px; }
.cv-hero h1 { font-size:clamp(2rem,4.6vw,3.35rem); line-height:1.08; margin:0 0 16px; max-width:780px; }
.cv-hero h1 em { font-style:normal; color:var(--cv-gold); }
.cv-lead { font-size:1.05rem; line-height:1.65; color:rgba(255,255,255,.92); max-width:660px; margin:0 0 26px; }
.cv-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:12px; font-weight:800; font-size:.95rem; text-decoration:none; border:1.6px solid transparent; transition:transform .15s,box-shadow .15s; }
.cv-btn:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.cv-btn--gold { background:linear-gradient(135deg,var(--cv-gold),var(--cv-orange)); color:var(--cv-navy); }
.cv-btn--ghost { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.65); color:#fff; }
.cv-btn--navy { background:var(--cv-navy); color:#fff; }
.cv-puntos { list-style:none; display:flex; gap:22px; flex-wrap:wrap; margin:26px 0 0; padding:0; font-size:.86rem; color:rgba(255,255,255,.9); }
.cv-puntos li::before { content:'✓'; color:var(--cv-gold); font-weight:900; margin-right:8px; }
.cv-tira { background:var(--cv-navy); color:#fff; }
.cv-tira__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:26px 24px; }
.cv-tira__grid>div { text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.cv-tira__grid>div:last-child { border-right:0; }
.cv-tira b { display:block; font-family:Georgia,serif; font-size:2rem; color:var(--cv-gold); }
.cv-tira span { font-size:.76rem; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.75); }
.cv-cursos { background:var(--cv-cream); padding:62px 0 72px; }
.cv-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; flex-wrap:wrap; }
.cv-head h2 { font-size:clamp(1.7rem,3vw,2.4rem); color:var(--cv-navy); margin:4px 0 0; }
.cv-head__tx { max-width:430px; color:#4B5563; font-size:.95rem; margin:0; }
.cv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:22px; }
.cv-card { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 6px 22px rgba(6,42,99,.08); border:1px solid rgba(6,42,99,.07); display:flex; flex-direction:column; transition:transform .18s,box-shadow .18s; }
.cv-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(6,42,99,.14); }
.cv-card__top { position:relative; height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; color:#fff; }
.cv-card__top::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--cv-gold),var(--cv-orange),var(--cv-red)); }
.cv-card--1 { background:linear-gradient(120deg,#062A63,#0F3880); }
.cv-card--2 { background:linear-gradient(120deg,#5C3015,#8A4A1F); }
.cv-card--3 { background:linear-gradient(120deg,#0F3880,#062A63); }
.cv-card__num { font-size:.68rem; letter-spacing:2px; text-transform:uppercase; opacity:.85; font-weight:700; }
.cv-card__ico { font-size:34px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.cv-card__body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cv-card h3 { margin:0; font-size:1.22rem; color:var(--cv-navy); }
.cv-card__desc { color:#5B6472; font-size:.9rem; margin:0; line-height:1.55; }
.cv-card__meta { list-style:none; display:flex; gap:16px; padding:10px 0 0; margin:0; border-top:1px dashed #E5E0D3; font-size:.78rem; color:#6B7280; }
.cv-card__meta b { display:block; font-size:1.05rem; color:var(--cv-navy); }
.cv-card__pie { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; }
.cv-link { font-size:.85rem; font-weight:700; color:var(--cv-red); text-decoration:none; }
.cv-link:hover { text-decoration:underline; }
.cv-vacio { background:#fff; border:2px dashed #E3DCCB; border-radius:18px; padding:44px 24px; text-align:center; }
.cv-vacio__ico { font-size:42px; }
.cv-vacio h3 { color:var(--cv-navy); margin:10px 0 6px; }
.cv-vacio p { color:#5B6472; margin:0 0 16px; }
.cv-como { padding:62px 0; background:#fff; }
.cv-pasos { list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cv-pasos li { background:var(--cv-cream); border-radius:16px; padding:24px; border:1px solid #EDE6D6; }
.cv-paso__n { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:99px; background:linear-gradient(135deg,var(--cv-gold),var(--cv-orange)); color:var(--cv-navy); font-weight:900; font-size:1.1rem; margin-bottom:12px; }
.cv-pasos h3 { margin:0 0 6px; color:var(--cv-navy); font-size:1.08rem; }
.cv-pasos p { margin:0; color:#5B6472; font-size:.9rem; line-height:1.6; }
.cv-banda { background:linear-gradient(110deg,var(--cv-navy),#0B3F8F); position:relative; color:#fff; padding:52px 0; }
.cv-banda::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--cv-gold),var(--cv-orange),var(--cv-red)); }
.cv-banda__in { display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap; }
.cv-banda h2 { margin:0 0 6px; font-size:clamp(1.5rem,2.6vw,2rem); }
.cv-banda p { margin:0; color:rgba(255,255,255,.85); }
.cv-pie { background:#0A1120; color:rgba(255,255,255,.65); padding:22px 0; font-size:.82rem; }
.cv-pie__in { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cv-pie a { color:rgba(255,255,255,.85); text-decoration:none; }
.cv-body .footer { display:none; }
.cv-curso-head { background:linear-gradient(120deg,var(--cv-navy),#0B3F8F); color:#fff; padding:54px 0 42px; position:relative; }
.cv-curso-head::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--cv-gold),var(--cv-orange),var(--cv-red)); }
.cv-back { display:inline-block; color:rgba(255,255,255,.8); text-decoration:none; font-size:.85rem; margin-bottom:18px; }
.cv-back:hover { color:#fff; }
.cv-curso-head h1 { font-size:clamp(1.9rem,4vw,2.9rem); margin:0 0 12px; }
.cv-curso-meta { list-style:none; display:flex; gap:14px; padding:0; margin:18px 0 22px; flex-wrap:wrap; }
.cv-curso-meta li { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 14px; font-size:.82rem; }
.cv-temario { padding:46px 0 60px; background:var(--cv-cream); }
.cv-temario h2 { color:var(--cv-navy); font-size:1.7rem; margin:0 0 22px; }
.cv-nivel { background:#fff; border-radius:14px; border:1px solid #EDE6D6; padding:18px 20px; margin-bottom:12px; }
.cv-nivel__cab { display:flex; align-items:center; gap:14px; }
.cv-nivel__n { width:34px; height:34px; border-radius:10px; background:var(--cv-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; }
.cv-nivel__cab h3 { margin:0; color:var(--cv-navy); font-size:1.05rem; }
.cv-candado { margin-left:auto; opacity:.55; }
.cv-nivel__temas { list-style:none; margin:12px 0 0; padding:0 0 0 48px; }
.cv-nivel__temas li { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px dashed #EFE9DB; font-size:.92rem; color:#374151; }
.cv-dot { width:7px; height:7px; border-radius:99px; background:var(--cv-gold); flex:none; }
.cv-mini { color:#8A93A3; font-size:.76rem; margin-left:auto; }
.cv-nota { margin-top:16px; color:#6B7280; font-size:.85rem; }
@media (max-width:860px) {
  .cv-tira__grid { grid-template-columns:1fr 1fr; }
  .cv-tira__grid>div:nth-child(2) { border-right:0; }
  .cv-pasos { grid-template-columns:1fr; }
  .cv-hero__cuerpo { padding:52px 20px; }
  .cv-banda__in { flex-direction:column; align-items:flex-start; }
  .cv-nivel__temas { padding-left:0; }
}


/* ============================================================
   CAMPUS HOME — correcciones (2026-10-26)
   ============================================================ */
.cv { overflow-x:clip; }
.cv h1, .cv h2, .cv h3 { min-width:0; overflow-wrap:break-word; }
.cv-btn { white-space:normal; text-align:center; }
.cv-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.cv-tira__grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
.cv-pasos { grid-template-columns:repeat(3, minmax(0,1fr)); }
.cv-hero h1, .cv-curso-head h1, .cv-banda h2 { color:#fff; }
.cv-hero__velo { background:linear-gradient(100deg, rgba(6,42,99,.97) 0%, rgba(6,42,99,.9) 55%, rgba(6,42,99,.62) 100%); }
.cv-marca img { filter:brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.cv-card__ico svg { display:block; }
@media (max-width: 1000px) { .cv-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .cv-tira__grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cv-pasos { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 680px) { .cv-grid { grid-template-columns:minmax(0,1fr); } }


/* ============================================================
   ESCUELA VIRTUAL (panel de direccion)
   ============================================================ */
.esc-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.esc-tabs a { padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--g200); color:var(--azul-rcc); font-weight:600; font-size:.92rem; }
.esc-tabs a:hover { text-decoration:none; border-color:var(--azul-rcc); }
.esc-tabs a.on { background:var(--azul-rcc); color:#fff; border-color:var(--azul-rcc); }
.esc-kpis { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-bottom:18px; }
@media (max-width: 780px) { .esc-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .esc-kpis { grid-template-columns:1fr; } }
.esc-kpi { background:#fff; border:1px solid var(--g200); border-left:5px solid var(--azul-rcc); border-radius:14px; padding:16px 18px; }
.esc-kpi b { display:block; font-size:1.9rem; color:var(--azul-profundo); line-height:1.1; }
.esc-kpi span { font-size:.76rem; text-transform:uppercase; letter-spacing:.7px; color:var(--g600); font-weight:700; }
.esc-kpi--gold { border-left-color:var(--amarillo-rcc); }
.esc-kpi--red { border-left-color:var(--rojo-rcc); }
.esc-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-bottom:18px; }
.esc-grid .card { margin-top:0; }
@media (max-width: 900px) { .esc-grid { grid-template-columns:1fr; } }
.esc-barra { height:9px; background:var(--g100); border-radius:999px; overflow:hidden; min-width:80px; flex:1; }
.esc-barra i { display:block; height:100%; background:linear-gradient(90deg,#F9B800,#F28C00,#E51B23); }
.esc-pct { display:flex; align-items:center; gap:8px; min-width:120px; }
.esc-pct b { font-size:.82rem; color:var(--g700); width:36px; }
.esc-chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:700; background:var(--g100); color:var(--g700); white-space:nowrap; }
.esc-chip--ok { background:#e7f6ec; color:#137a3a; }
.esc-chip--pend { background:#fff4d6; color:#8a5a00; }
.esc-chip--nuevo { background:#ffe3e3; color:#a3121a; }
.esc-lista { list-style:none; margin:0; padding:0; }
.esc-lista li { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--g100); font-size:.94rem; }
.esc-lista li:last-child { border-bottom:0; }
.esc-lista--hilos li a { color:inherit; }
.esc-lista--hilos li a:hover { text-decoration:none; }
.esc-sala { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--g100); }
.esc-sala:last-child { border-bottom:0; }
.esc-sala__f { background:var(--azul-profundo); color:#fff; border-radius:10px; padding:8px 10px; text-align:center; min-width:58px; }
.esc-sala__f b { display:block; font-size:1.15rem; line-height:1; }
.esc-sala__f span { font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; }
.esc-vacio { padding:24px; text-align:center; color:var(--g600); }
.esc-tabla td, .esc-tabla th { font-size:.88rem; }
.esc-sala-form { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; align-items:end; }
.esc-sala-form label { display:block; font-size:.76rem; font-weight:700; color:var(--g600); margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
.esc-sala-form input, .esc-sala-form select { width:100%; }
.esc-sala-form__ancho { grid-column:span 2; }
@media (max-width: 860px) { .esc-sala-form { grid-template-columns:repeat(2, minmax(0,1fr)); } .esc-sala-form__ancho { grid-column:span 2; } }
@media (max-width: 560px) { .esc-sala-form { grid-template-columns:1fr; } .esc-sala-form__ancho { grid-column:span 1; } }
.esc-form-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.esc-form-inline label { display:block; font-size:.72rem; font-weight:700; color:var(--g600); margin-bottom:3px; }
.esc-form-inline input { padding:7px 9px; border:1px solid var(--g300); border-radius:8px; font:inherit; font-size:.86rem; }
.esc-cal summary { cursor:pointer; list-style:none; display:inline-block; }
.esc-cal summary::-webkit-details-marker { display:none; }
.esc-msg { background:#fff; border:1px solid var(--g200); border-radius:12px; padding:10px 14px; margin:8px 0; max-width:78%; }
.esc-msg--esc { background:#f2f6fd; margin-left:auto; }
.esc-msg b { font-size:.72rem; color:var(--g600); display:block; margin-bottom:2px; }
.esc-msg p { margin:0; font-size:.92rem; }
.esc-hilo { max-height:55vh; overflow:auto; padding:6px 2px; }
.esc-respuesta { margin-top:14px; border-top:1px solid var(--g100); padding-top:12px; }
.campus-prog { display:flex; align-items:center; gap:8px; margin:10px 0 2px; }
.campus-prog span { font-size:.75rem; color:var(--g600); white-space:nowrap; }

.esc-tabs__salir { margin-left:auto; background:transparent; border-color:transparent; color:var(--g600); }
.esc-tabs__salir:hover { color:var(--rojo-rcc); border-color:transparent; }

.auth-sep { display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--g500); font-size:.8rem; }
.auth-sep::before, .auth-sep::after { content:""; flex:1; height:1px; background:var(--g200); }


/* ===== CAMPUS PANEL (2026-10-26) ===== */
.cp-body { background:#F4F6FB; color:#0B1B33; }
.cp-shell { min-height:100vh; }
.cp-side {
  width:268px; flex:0 0 268px;
  background: linear-gradient(180deg,#04173A 0%,#05214E 45%,#0B2F6B 100%);
  padding:22px 16px; overflow-y:auto;
}
.cp-brand { border-bottom-color:rgba(252,194,24,.28); }
.cp-brand .cross { fill:#FCC218; }
.cp-brand small { color:rgba(255,255,255,.55); }
.cp-user {
  display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); margin:0 0 16px;
}
.cp-ava {
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  background:linear-gradient(135deg,#FCC218,#F28C00); color:#05214E;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem;
}
.cp-user__txt { min-width:0; }
.cp-user__txt strong { display:block; color:#fff; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-user__txt small { display:block; color:#FCC218; font-size:.7rem; font-weight:800; letter-spacing:.03em; margin-top:2px; }
.cp-nav a { color:rgba(255,255,255,.82); font-size:.9rem; border-left-width:3px; }
.cp-nav a .ico svg { width:18px; height:18px; }
.cp-nav a.active { background:rgba(252,194,24,.16); border-left-color:#FCC218; color:#FFD34D; }
.cp-side .sidebar-bottom { border-top-color:rgba(255,255,255,.14); }

.cp-top { background:rgba(255,255,255,.94); backdrop-filter:blur(8px); padding:10px 22px; }
.cp-chip {
  font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#7A5200; background:#FFF3CF; border:1px solid #F7D77A;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.cp-content { max-width:1240px; width:100%; margin:0 auto; padding:24px clamp(16px,3vw,34px) 40px; }
.cp-wrap { display:flex; flex-direction:column; gap:20px; }
.cp-sec, .cp-hero { scroll-margin-top:78px; }

.cp-hero {
  position:relative; overflow:hidden; border-radius:22px; padding:30px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  background:
    radial-gradient(900px 360px at 88% -30%, rgba(242,140,0,.38), transparent 62%),
    radial-gradient(760px 320px at -10% 120%, rgba(15,56,128,.95), transparent 60%),
    linear-gradient(120deg,#04173A,#05214E 55%,#0F3880);
  color:#fff; box-shadow:0 18px 40px rgba(5,33,78,.26);
}
.cp-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
}
.cp-hero__txt { position:relative; z-index:1; max-width:640px; }
.cp-kicker {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(252,194,24,.14); color:#FFD34D;
  border:1px solid rgba(252,194,24,.35); padding:5px 12px; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.cp-hero h1 { color:#fff !important; margin:12px 0 8px; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.08; }
.cp-hero p { color:rgba(255,255,255,.82); margin:0 0 16px; max-width:54ch; font-size:.95rem; }
.cp-xp { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.cp-xp__bar { flex:1; max-width:260px; height:8px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.cp-xp__bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FCC218,#F28C00); }
.cp-xp span { font-size:.72rem; color:rgba(255,255,255,.72); }
.cp-btn-gold {
  background:linear-gradient(135deg,#FCC218,#F28C00); color:#05214E !important;
  border:0; font-weight:800; box-shadow:0 10px 22px rgba(242,140,0,.32);
}
.cp-btn-gold:hover { filter:brightness(1.06); color:#05214E; text-decoration:none; }
.cp-ring { position:relative; width:140px; height:140px; flex:0 0 140px; z-index:1; }
.cp-ring svg { width:140px; height:140px; display:block; }
.cp-ring__lbl { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; }
.cp-ring__lbl strong { font-size:1.7rem; line-height:1; }
.cp-ring__lbl span { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.68); margin-top:5px; }

.cp-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.cp-stat {
  background:#fff; border:1px solid #E6EBF3; border-radius:16px;
  padding:16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.cp-stat__ico { width:44px; height:44px; flex:0 0 44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.cp-stat__ico.i1 { background:#EEF3FF; color:#0F3880; }
.cp-stat__ico.i2 { background:#E9F7EF; color:#1E9E6A; }
.cp-stat__ico.i3 { background:#FFF4E0; color:#B45309; }
.cp-stat__ico.i4 { background:#FDEBEC; color:#E51C22; }
.cp-stat b { display:block; font-size:1.35rem; line-height:1.1; color:#05214E; }
.cp-stat b small { font-weight:600; }
.cp-stat span { font-size:.74rem; color:#667085; font-weight:700; }

.cp-sec {
  background:#fff; border:1px solid #E6EBF3; border-radius:18px;
  padding:20px; box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.cp-sec__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cp-sec__head h2 { margin:0; font-size:1.05rem; color:#05214E; }
.cp-sec__head a { font-size:.8rem; font-weight:800; color:#0F3880; display:inline-flex; align-items:center; gap:5px; }
.cp-mini { font-size:.72rem; color:#8A94A6; font-weight:600; }

.cp-cursos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cp-curso {
  display:flex; flex-direction:column; gap:9px; color:inherit;
  border:1px solid #E6EBF3; border-radius:16px; padding:16px;
  background:linear-gradient(180deg,#fff,#FBFCFE); transition:transform .16s, box-shadow .16s, border-color .16s;
}
.cp-curso:hover { text-decoration:none; transform:translateY(-2px); border-color:#FCC218; box-shadow:0 12px 26px rgba(5,33,78,.1); }
.cp-curso__top { display:flex; align-items:center; justify-content:space-between; }
.cp-curso__ico { width:40px; height:40px; border-radius:12px; background:#FFF6DA; color:#B45309; display:flex; align-items:center; justify-content:center; }
.cp-curso__pct { font-size:.76rem; font-weight:800; color:#0F3880; background:#EEF3FF; padding:4px 10px; border-radius:999px; }
.cp-curso h3 { margin:0; font-size:1rem; color:#05214E; }
.cp-curso p {
  margin:0; color:#667085; font-size:.82rem; line-height:1.5; min-height:2.4em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cp-barra { height:7px; border-radius:99px; background:#EDF1F7; overflow:hidden; }
.cp-barra i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FCC218,#F28C00); }
.cp-curso__foot { display:flex; justify-content:space-between; gap:8px; font-size:.74rem; color:#8A94A6; }
.cp-curso__foot b { color:#0F3880; font-weight:800; }

.cp-ent { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px dashed #E6EBF3; }
.cp-ent:last-child { border-bottom:0; padding-bottom:0; }
.cp-ent__ico {
  width:38px; height:38px; flex:0 0 38px; border-radius:10px;
  background:#F1F5FB; color:#0F3880; display:flex; align-items:center; justify-content:center;
}
.cp-ent__txt { flex:1; min-width:0; }
.cp-ent__txt strong { display:block; font-size:.9rem; color:#05214E; }
.cp-ent__txt small { font-size:.72rem; color:#8A94A6; }
.cp-retro { margin:7px 0 0; font-size:.78rem; color:#475467; background:#F7F9FC; border-left:3px solid #FCC218; padding:7px 10px; border-radius:0 8px 8px 0; }
.cp-ent__estado { text-align:right; flex:0 0 auto; }
.cp-nota { display:block; font-size:1.15rem; font-weight:800; color:#1E9E6A; line-height:1; margin-bottom:4px; }
.cp-nota small { font-size:.62rem; color:#8A94A6; font-weight:600; }
.cp-pill { display:inline-block; font-size:.66rem; font-weight:800; padding:3px 9px; border-radius:999px; }
.cp-pill.ok { background:#E9F7EF; color:#1E9E6A; }
.cp-pill.wait { background:#FFF4E0; color:#B45309; }

.cp-cols { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start; }
.cp-sec .esc-sala { padding:10px 0; }
.cp-ult { background:#F7F9FC; border:1px solid #E6EBF3; border-radius:12px; padding:12px; margin-bottom:12px; }
.cp-ult__tag { font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#B45309; }
.cp-ult p { margin:5px 0 3px; font-size:.84rem; color:#344054; }
.cp-ult small { font-size:.7rem; color:#8A94A6; }

.cp-badges { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.cp-badge { border:1px solid #E6EBF3; border-radius:14px; padding:14px 10px; text-align:center; background:#fff; }
.cp-badge__ico {
  width:42px; height:42px; border-radius:50%; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  background:#F1F4F9; color:#98A2B3;
}
.cp-badge.on .cp-badge__ico {
  background:linear-gradient(135deg,#FCC218,#F28C00); color:#05214E;
  box-shadow:0 8px 18px rgba(242,140,0,.28);
}
.cp-badge strong { display:block; font-size:.74rem; color:#05214E; }
.cp-badge small { display:block; font-size:.65rem; color:#8A94A6; line-height:1.35; margin-top:3px; }
.cp-badge.off { opacity:.75; background:#FAFBFD; }
.cp-badge.off strong { color:#667085; }

.cp-perfil { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.cp-perfil > div { background:#F7F9FC; border:1px solid #EDF1F7; border-radius:12px; padding:12px; }
.cp-perfil span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:#8A94A6; font-weight:800; }
.cp-perfil strong { display:block; font-size:.88rem; color:#05214E; margin-top:3px; overflow-wrap:anywhere; }
.cp-perfil small { font-size:.72rem; color:#667085; }

.cp-empty { padding:26px 18px; text-align:center; color:#667085; border:1px dashed #D8E0EC; border-radius:14px; background:#FAFBFD; font-size:.85rem; }
.cp-empty strong { display:block; color:#05214E; margin-bottom:4px; }
.cp-foot {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px clamp(16px,3vw,34px); border-top:1px solid #E6EBF3;
  color:#8A94A6; font-size:.74rem; background:#fff;
}

@media (max-width:1180px) {
  .cp-badges { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cp-perfil { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .cp-cols { grid-template-columns:1fr; }
  .cp-hero { flex-direction:column; align-items:flex-start; }
  .cp-ring { align-self:center; }
}
@media (max-width:760px) {
  .cp-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-cursos { grid-template-columns:1fr; }
  .cp-hero { padding:22px 20px; }
  .cp-badges { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-ring { width:120px; height:120px; flex-basis:120px; }
  .cp-ring svg { width:120px; height:120px; }
  .cp-top { padding:9px 14px; }
  .cp-top .app-user-name { display:none; }
  .cp-content { padding:18px 14px 32px; }
}
@media (max-width:430px) {
  .cp-stats { grid-template-columns:1fr; }
  .cp-chip { display:none; }
}
/* ===== FIN CAMPUS PANEL ===== */


/* ===== PANEL DE CONTENIDOS (2026-10-26) ===== */
.ac-body { background:#F4F6FB; }
.ac-side { background:linear-gradient(180deg,#04173A 0%,#05214E 48%,#0B2F6B 100%); }
.ac-brand .cross { fill:#FCC218; }
.ac-brand small { color:rgba(255,255,255,.55); }
.ac-user { margin-bottom:16px; }
.ac-nav a.active { background:rgba(252,194,24,.16); border-left-color:#FCC218; color:#FFD34D; }
.ac-top { background:rgba(255,255,255,.94); backdrop-filter:blur(8px); padding:10px 22px; }
.ac-chip {
  font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#7A5200; background:#FFF3CF; border:1px solid #F7D77A;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.ac-content { max-width:1220px; width:100%; margin:0 auto; padding:24px clamp(16px,3vw,34px) 40px; }
.ac-wrap { display:flex; flex-direction:column; gap:20px; }

.ac-hero {
  position:relative; overflow:hidden; border-radius:22px; padding:28px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; color:#fff;
  background:
    radial-gradient(760px 300px at 90% -20%, rgba(242,140,0,.34), transparent 62%),
    radial-gradient(700px 300px at -10% 120%, rgba(15,56,128,.95), transparent 60%),
    linear-gradient(120deg,#04173A,#05214E 55%,#0F3880);
  box-shadow:0 18px 40px rgba(5,33,78,.24);
}
.ac-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
}
.ac-hero__txt { position:relative; z-index:1; max-width:680px; }
.ac-kicker {
  display:inline-block; background:rgba(252,194,24,.14); color:#FFD34D;
  border:1px solid rgba(252,194,24,.35); padding:5px 12px; border-radius:999px;
  font-size:.69rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.ac-hero h1 { color:#fff !important; margin:12px 0 8px; font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:1.1; }
.ac-hero p { color:rgba(255,255,255,.82); margin:0 0 16px; max-width:60ch; font-size:.92rem; }
.ac-hero__btns { display:flex; gap:10px; flex-wrap:wrap; }
.ac-btn-gold {
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,#FCC218,#F28C00); color:#05214E !important;
  border:0; font-weight:800; box-shadow:0 10px 22px rgba(242,140,0,.3);
}
.ac-btn-gold:hover { filter:brightness(1.06); color:#05214E !important; text-decoration:none; }
.ac-btn-ghost {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.08); color:#fff !important; border:1px solid rgba(255,255,255,.28);
  font-weight:700;
}
.ac-btn-ghost:hover { background:rgba(255,255,255,.16); color:#fff !important; text-decoration:none; }
.ac-hero__badge {
  position:relative; z-index:1; flex:0 0 auto; min-width:118px; padding:18px;
  border-radius:18px; text-align:center; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}
.ac-hero__badge strong { display:block; font-size:2rem; line-height:1; color:#FCC218; }
.ac-hero__badge span { display:block; margin-top:6px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); }

.ac-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ac-kpi {
  display:flex; align-items:center; gap:12px; padding:15px;
  background:#fff; border:1px solid #E6EBF3; border-radius:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.ac-kpi__ico { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ac-kpi__ico.i1 { background:#EEF3FF; color:#0F3880; }
.ac-kpi__ico.i2 { background:#E9F7EF; color:#1E9E6A; }
.ac-kpi__ico.i3 { background:#FFF4E0; color:#B45309; }
.ac-kpi__ico.i4 { background:#FDEBEC; color:#E51C22; }
.ac-kpi b { display:block; font-size:1.3rem; line-height:1.1; color:#05214E; }
.ac-kpi span { font-size:.72rem; color:#667085; font-weight:700; }

.ac-steps { display:flex; gap:8px; flex-wrap:wrap; }
.ac-step {
  font-size:.75rem; font-weight:700; color:#667085; background:#fff;
  border:1px solid #E6EBF3; border-radius:999px; padding:7px 13px;
}
.ac-step b {
  display:inline-flex; width:18px; height:18px; margin-right:5px; border-radius:50%;
  align-items:center; justify-content:center; background:#EDF1F7; color:#475467; font-size:.66rem;
}
.ac-step.is-on { border-color:#FCC218; color:#7A5200; background:#FFFAEC; }
.ac-step.is-on b { background:#FCC218; color:#05214E; }

.ac-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ac-card {
  display:flex; flex-direction:column; gap:8px; padding:16px;
  background:#fff; border:1px solid #E6EBF3; border-radius:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.ac-card:hover { transform:translateY(-2px); border-color:#FCC218; box-shadow:0 14px 28px rgba(5,33,78,.09); }
.ac-card__top { display:flex; align-items:center; justify-content:space-between; }
.ac-card__ico { width:40px; height:40px; border-radius:12px; background:#FFF6DA; color:#B45309; display:flex; align-items:center; justify-content:center; }
.ac-card__num { font-size:.68rem; font-weight:800; color:#0F3880; background:#EEF3FF; padding:4px 9px; border-radius:999px; }
.ac-card h3 { margin:0; font-size:.98rem; color:#05214E; }
.ac-card p {
  margin:0; font-size:.8rem; color:#667085; line-height:1.5; min-height:2.4em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ac-card__meta { display:flex; gap:12px; flex-wrap:wrap; font-size:.72rem; color:#8A94A6; font-weight:600; }
.ac-card__meta span { display:inline-flex; align-items:center; gap:4px; }
.ac-card__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.ac-btn-dark {
  display:inline-flex; align-items:center; gap:6px;
  background:#05214E; color:#fff !important; border:0; font-weight:700;
}
.ac-btn-dark:hover { background:#0F3880; color:#fff !important; text-decoration:none; }
.ac-kebab {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; border:1px solid #E6EBF3;
  background:#fff; color:#667085; cursor:pointer;
}
.ac-kebab:hover { background:#F7F9FC; color:#05214E; }

.ac-empty {
  text-align:center; padding:36px 20px; background:#fff; border:1px dashed #D8E0EC;
  border-radius:18px; color:#667085;
}
.ac-empty__ico {
  width:60px; height:60px; margin:0 auto 12px; border-radius:16px;
  background:#FFF6DA; color:#B45309; display:flex; align-items:center; justify-content:center;
}
.ac-empty h3 { margin:0 0 6px; color:#05214E; }
.ac-empty p { margin:0 0 16px; font-size:.86rem; }
.ac-empty--sm { padding:20px; }

.ac-team-grid--one { grid-template-columns:1fr; }
.ac-team-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:18px; align-items:start; }
.ac-panel { background:#fff; border:1px solid #E6EBF3; border-radius:18px; padding:20px; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.ac-panel__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ac-panel__head h2 { margin:0; font-size:1.02rem; color:#05214E; }
.ac-mini { font-size:.72rem; color:#8A94A6; font-weight:600; }
.ac-hint { font-size:.74rem; color:#8A94A6; margin:6px 0 10px; }
.ac-persona {
  display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed #E6EBF3;
}
.ac-persona:last-child { border-bottom:0; }
.ac-persona__ava {
  width:38px; height:38px; flex:0 0 38px; border-radius:11px;
  background:#EEF3FF; color:#0F3880; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.ac-persona--dir .ac-persona__ava { background:#FFF3CF; color:#7A5200; }
.ac-persona__txt { flex:1; min-width:0; }
.ac-persona__txt strong { display:block; font-size:.86rem; color:#05214E; }
.ac-persona__txt small { display:block; font-size:.72rem; color:#667085; overflow-wrap:anywhere; }
.ac-persona__meta { color:#8A94A6 !important; margin-top:2px; }
.ac-rol { font-size:.64rem; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.ac-rol--c { background:#E9F7EF; color:#1E9E6A; }
.ac-rol--d { background:#FFF3CF; color:#7A5200; }
.ac-yo { font-size:.6rem; background:#FCC218; color:#05214E; padding:1px 6px; border-radius:999px; vertical-align:middle; }

@media (max-width:1100px) {
  .ac-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ac-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ac-team-grid { grid-template-columns:1fr; }
  .ac-hero { flex-direction:column; align-items:flex-start; }
  .ac-hero__badge { min-width:0; width:100%; display:flex; align-items:center; gap:10px; text-align:left; }
  .ac-hero__badge strong { font-size:1.5rem; }
}
@media (max-width:680px) {
  .ac-grid { grid-template-columns:1fr; }
  .ac-content { padding:18px 14px 32px; }
  .ac-hero { padding:22px 20px; }
  .ac-kpis { grid-template-columns:1fr; }
  .ac-top { padding:9px 14px; }
  .ac-top .app-user-name { display:none; }
  .ac-chip { display:none; }
}
/* ===== FIN PANEL DE CONTENIDOS ===== */


/* ===== USUARIOS CORPORATIVOS (2026-10-26) ===== */
.usr-page { display:flex; flex-direction:column; gap:18px; }
.usr-hero {
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  border-radius:20px; padding:26px 28px; color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(640px 260px at 90% -20%, rgba(242,140,0,.3), transparent 60%),
    linear-gradient(120deg,#04173A,#05214E 55%,#0F3880);
  box-shadow:0 16px 36px rgba(5,33,78,.2);
}
.usr-hero h1 { color:#fff !important; margin:8px 0 6px; }
.usr-hero p { color:rgba(255,255,255,.8); margin:0; max-width:60ch; }
.usr-kicker {
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#FFD34D; background:rgba(252,194,24,.14); border:1px solid rgba(252,194,24,.32);
  padding:4px 11px; border-radius:999px;
}
.usr-hero__badge { text-align:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:14px 20px; min-width:120px; }
.usr-hero__badge strong { display:block; font-size:1.9rem; color:#FCC218; line-height:1; }
.usr-hero__badge span { display:block; font-size:.66rem; color:rgba(255,255,255,.7); margin-top:5px; text-transform:uppercase; letter-spacing:.07em; }
.usr-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.usr-kpi { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #E6EBF3; border-radius:15px; padding:14px; }
.usr-kpi__ico { width:40px; height:40px; flex:0 0 40px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.usr-kpi__ico.k1 { background:#EEF3FF; color:#0F3880; }
.usr-kpi__ico.k2 { background:#FFF3CF; color:#7A5200; }
.usr-kpi__ico.k3 { background:#E9F7EF; color:#1E9E6A; }
.usr-kpi b { display:block; font-size:1.25rem; color:#05214E; line-height:1.1; }
.usr-kpi span { font-size:.72rem; color:#667085; font-weight:700; }
.usr-grid { align-items:start; }
.usr-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.usr-card__head h3 { margin:0; }
.usr-mini { font-size:.72rem; color:#8A94A6; font-weight:600; }
.usr-tabla td { vertical-align:middle; }
.usr-nombre { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#05214E; }
.usr-ava { width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:#EEF3FF; color:#0F3880; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; }
@media (max-width:760px) {
  .usr-hero { flex-direction:column; align-items:flex-start; }
  .usr-hero__badge { width:100%; text-align:left; display:flex; align-items:center; gap:10px; }
  .usr-kpis { grid-template-columns:1fr; }
}
/* ===== FIN USUARIOS ===== */


/* ===== PROGRAMACION DE CURSOS Y TALLERES (2026-10-26) ===== */
.ac-estado { font-size:.64rem; font-weight:800; letter-spacing:.03em; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.ac-estado--pub { background:#E9F7EF; color:#1E9E6A; }
.ac-estado--prog { background:#FFF4E0; color:#B45309; }
.ac-estado--bor { background:#F1F4F9; color:#667085; }
.ac-programado { display:flex; align-items:center; gap:5px; font-size:.7rem; color:#B45309; font-weight:700; }
.ac-menu { position:relative; }
.ac-menu summary { list-style:none; cursor:pointer; }
.ac-menu summary::-webkit-details-marker { display:none; }
.ac-menu__box {
  position:absolute; right:0; bottom:calc(100% + 6px); z-index:30;
  min-width:150px; background:#fff; border:1px solid #E6EBF3; border-radius:10px;
  box-shadow:0 12px 28px rgba(5,33,78,.16); padding:6px;
}
.ac-menu__item {
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:8px 10px; border-radius:7px; font-size:.8rem; font-weight:700; color:#344054; cursor:pointer;
}
.ac-menu__item:hover { background:#F5F7FB; color:#05214E; }
.ac-menu__item--danger { color:#C3161B; }
.ac-menu__item--danger:hover { background:#FDECEC; color:#C3161B; }
.taller-fechas { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; padding:10px 12px; background:#F7F9FC; border:1px solid #E6EBF3; border-radius:10px; }
.taller-fechas span { font-size:.76rem; color:#475467; }
.taller-fechas b { color:#05214E; }
/* ===== FIN PROGRAMACION ===== */


/* ===== CUENTAS DEL CAMPUS (2026-10-26) ===== */
.cc-page { display:flex; flex-direction:column; gap:18px; }
.cc-hero {
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:26px 28px; border-radius:20px; color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(700px 300px at 90% -20%, rgba(242,140,0,.32), transparent 62%),
    radial-gradient(700px 300px at -10% 120%, rgba(15,56,128,.95), transparent 60%),
    linear-gradient(120deg,#04173A,#05214E 55%,#0F3880);
  box-shadow:0 16px 36px rgba(5,33,78,.22);
}
.cc-kicker { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#FFD34D; background:rgba(252,194,24,.14); border:1px solid rgba(252,194,24,.34); padding:4px 11px; border-radius:999px; }
.cc-hero h1 { color:#fff !important; margin:10px 0 6px; }
.cc-hero p { color:rgba(255,255,255,.82); margin:0; max-width:66ch; font-size:.92rem; }
.cc-hero__chips { margin-top:12px; }
.cc-hero__chips span { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:#FFD34D; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); padding:5px 10px; border-radius:999px; }
.cc-hero__stats { display:flex; gap:10px; flex:0 0 auto; }
.cc-hero__stats div { min-width:96px; text-align:center; padding:14px 12px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.cc-hero__stats strong { display:block; font-size:1.7rem; color:#FCC218; line-height:1; }
.cc-hero__stats span { display:block; margin-top:5px; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.7); }

.cc-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cc-kpi { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #E6EBF3; border-radius:15px; padding:14px; }
.cc-kpi__ico { width:40px; height:40px; flex:0 0 40px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.cc-kpi__ico.i1 { background:#EEF3FF; color:#0F3880; }
.cc-kpi__ico.i2 { background:#E9F7EF; color:#1E9E6A; }
.cc-kpi__ico.i3 { background:#FFF4E0; color:#B45309; }
.cc-kpi b { display:block; font-size:1.25rem; color:#05214E; line-height:1.1; }
.cc-kpi span { font-size:.72rem; color:#667085; font-weight:700; }

.cc-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.cc-panel { background:#fff; border:1px solid #E6EBF3; border-radius:18px; padding:18px; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.cc-panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.cc-panel__head h2 { margin:0; font-size:1rem; color:#05214E; }
.cc-panel__head span { display:block; font-size:.72rem; color:#8A94A6; margin-top:2px; }
.cc-mini { font-size:.68rem; color:#8A94A6; font-weight:700; white-space:nowrap; }
.cc-lista { display:flex; flex-direction:column; }
.cc-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed #E6EBF3; position:relative; }
.cc-row:last-child { border-bottom:0; padding-bottom:2px; }
.cc-ava { width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:#EEF3FF; color:#0F3880; display:flex; align-items:center; justify-content:center; font-weight:800; }
.cc-ava--doc { background:#FFF3CF; color:#7A5200; }
.cc-id { flex:1; min-width:0; }
.cc-id strong { display:block; font-size:.84rem; color:#05214E; overflow-wrap:anywhere; }
.cc-id span { display:block; font-size:.72rem; color:#667085; overflow-wrap:anywhere; }
.cc-id small { display:block; font-size:.68rem; color:#8A94A6; margin-top:2px; }
.cc-id .cc-tag { display:inline-block; font-size:.58rem; background:#FCC218; color:#05214E; padding:1px 6px; border-radius:999px; vertical-align:middle; margin-left:5px; }
.cc-chip { font-size:.62rem; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.cc-chip.ok { background:#E9F7EF; color:#1E9E6A; }
.cc-chip.off { background:#FDEBEC; color:#C3161B; }
.cc-menu { position:relative; flex:0 0 auto; }
.cc-menu summary { list-style:none; cursor:pointer; }
.cc-menu summary::-webkit-details-marker { display:none; }
.cc-kebab { width:32px; height:32px; border:1px solid #E6EBF3; border-radius:9px; background:#fff; color:#667085; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cc-menu__box { position:absolute; right:0; top:calc(100% + 5px); z-index:35; min-width:190px; background:#fff; border:1px solid #E6EBF3; border-radius:10px; box-shadow:0 14px 30px rgba(5,33,78,.16); padding:6px; }
.cc-menu__item { display:flex; align-items:center; gap:7px; width:100%; text-align:left; background:none; border:0; padding:8px 9px; border-radius:7px; font-size:.78rem; font-weight:700; color:#344054; cursor:pointer; }
.cc-menu__item:hover { background:#F5F7FB; color:#05214E; }
.cc-menu__item--danger { color:#C3161B; }
.cc-menu__item--danger:hover { background:#FDECEC; }
.cc-menu__item--ok { color:#1E9E6A; }
.cc-empty { padding:22px 14px; text-align:center; color:#667085; border:1px dashed #D8E0EC; border-radius:12px; font-size:.82rem; background:#FAFBFD; }
.cc-empty strong { display:block; color:#05214E; margin-bottom:3px; }
.cc-hint { font-size:.74rem; color:#8A94A6; margin:0; }
.cc-page .adm-modal__box { max-width:480px; }

/* Aviso de Campus Virtual en el panel principal */
.cv-admin {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 0 20px; padding:18px 20px; border-radius:16px;
  background:linear-gradient(120deg,#04173A,#05214E 60%,#0F3880); color:#fff;
  box-shadow:0 12px 28px rgba(5,33,78,.18);
}
.cv-admin__ico { width:46px; height:46px; flex:0 0 46px; border-radius:13px; background:rgba(252,194,24,.16); border:1px solid rgba(252,194,24,.35); color:#FCC218; display:flex; align-items:center; justify-content:center; }
.cv-admin__txt { flex:1; min-width:220px; }
.cv-admin__txt h2 { margin:0 0 3px; color:#fff; font-size:1.05rem; }
.cv-admin__txt p { margin:0; color:rgba(255,255,255,.78); font-size:.82rem; }
.cv-admin .btn { background:linear-gradient(135deg,#FCC218,#F28C00); border:0; color:#05214E; font-weight:800; }

@media (max-width:900px) {
  .cc-cols { grid-template-columns:1fr; }
  .cc-hero { flex-direction:column; align-items:flex-start; }
  .cc-hero__stats { width:100%; }
  .cc-hero__stats div { flex:1; min-width:0; }
}
@media (max-width:640px) {
  .cc-kpis { grid-template-columns:1fr; }
  .cc-row { flex-wrap:wrap; }
  .cc-id { flex-basis:calc(100% - 100px); }
  .cc-chip { order:3; }
  .cc-menu { margin-left:auto; }
  .cc-hero { padding:21px 18px; }
}
/* ===== FIN CUENTAS DEL CAMPUS ===== */


/* ===== EDITAR TODO + PORTADAS DE CURSO (2026-10-26) ===== */
.ac-form2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ac-form2 label { margin-top:10px; }
.ac-form2 .ac-hint { margin:4px 0 0; }
.ac-check { display:flex; align-items:center; gap:6px; font-size:.75rem; color:#667085; margin-top:6px; }
.ac-check input { width:auto; margin:0; }
input[type="color"] { width:64px; height:38px; padding:3px; border:1px solid #D8E0EC; border-radius:8px; background:#fff; cursor:pointer; }
.cv-card__logo { width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.95); padding:5px; object-fit:contain; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.cv-card__top--media { background-size:cover; background-position:center; }
.cv-card__top--media .cv-card__num { text-shadow:0 2px 8px rgba(0,0,0,.45); }
.cv-card[style*="--cv-accent"] .cv-card__top::after { background:linear-gradient(90deg,var(--cv-accent),#FCC218); }
@media (max-width:620px) { .ac-form2 { grid-template-columns:1fr; } }
/* ===== FIN EDITAR TODO ===== */


/* ===== OBJETIVO Y RUTA DEL CURSO (2026-10-26) ===== */
.cv-ficha { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 4px; }
.cv-ficha > div { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:12px 14px; }
.cv-ficha span { display:block; font-size:.64rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#FCC218; }
.cv-ficha p { margin:5px 0 0; color:rgba(255,255,255,.87); font-size:.84rem; line-height:1.55; }
.curso-ficha { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px; }
.curso-ficha > div { background:#fff; border:1px solid #E6EBF3; border-radius:14px; padding:14px 16px; }
.curso-ficha span { display:block; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#B45309; }
.curso-ficha p { margin:5px 0 0; color:#475467; font-size:.86rem; line-height:1.55; }
textarea { width:100%; min-height:74px; resize:vertical; font-family:inherit; }
@media (max-width:700px) { .cv-ficha, .curso-ficha { grid-template-columns:1fr; } }
/* ===== FIN OBJETIVO Y RUTA ===== */


/* ===== RESPUESTAS POR ZONA (2026-10-28) ===== */
.zonas-card { margin: 18px 0; }
.zonas-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.zonas-head h3 { margin:0 0 2px; color:#05214E; }
.zonas-head p { margin:0; }
.zonas-chip { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:#0F3880; background:#EEF3FF; border:1px solid #D9E3F8; border-radius:999px; padding:5px 10px; white-space:nowrap; }
.zonas-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.zona-item { border:1px solid #E6EBF3; border-radius:12px; padding:12px 14px; background:#FAFBFD; }
.zona-top { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.zona-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.zona-top strong { flex:1; font-size:.82rem; color:#05214E; }
.zona-top b { font-size:1.05rem; color:#05214E; }
.zona-barra { height:7px; border-radius:99px; background:#E9EEF7; overflow:hidden; }
.zona-barra i { display:block; height:100%; border-radius:99px; }
.zona-pct { display:block; margin-top:5px; font-size:.68rem; color:#8A94A6; font-weight:600; }
@media (max-width:760px) { .zonas-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:460px) { .zonas-grid { grid-template-columns:1fr; } }
/* ===== FIN ZONAS ===== */


/* ===== ESCUELAS DEL CAMPUS (2026-10-29) ===== */
.cv-escuelas { padding: 66px 0 58px; background: linear-gradient(180deg,#F7F9FC,#FFFFFF); }
.cv-escuelas .cv-head { margin-bottom: 22px; }
.cv-escuelas h2 { color: #062A63; }
.cv-escuelas-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.cv-escuela {
  display:flex; align-items:center; gap:12px; min-height:92px; padding:14px 15px;
  border-radius:14px; color:#fff !important; text-decoration:none; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--ec,#0F3880),#05214E);
  box-shadow:0 8px 20px rgba(6,42,99,.14);
  transition:transform .18s, box-shadow .18s;
}
.cv-escuela::after { content:""; position:absolute; right:-24px; bottom:-30px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.09); }
.cv-escuela:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(6,42,99,.22); color:#fff !important; text-decoration:none; }
.cv-escuela__ico { width:40px; height:40px; flex:0 0 40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.18); color:#fff; position:relative; z-index:1; }
.cv-escuela__txt { display:flex; flex-direction:column; gap:3px; min-width:0; position:relative; z-index:1; }
.cv-escuela__txt strong { font-size:.91rem; line-height:1.2; }
.cv-escuela__txt small { font-size:.67rem; color:rgba(255,255,255,.72); }
.cv-escuela__arrow { margin-left:auto; font-size:1rem; opacity:.75; position:relative; z-index:1; }
@media (max-width:1050px) { .cv-escuelas-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .cv-escuelas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .cv-escuela { min-height:84px; padding:12px; } }
@media (max-width:430px) { .cv-escuelas-grid { grid-template-columns:1fr; } }
/* ===== FIN ESCUELAS ===== */

/* ===== CERRAR SESION VISIBLE EN TOPBAR (2026-11-02) ===== */
.app-logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; margin-left: 2px; padding: 8px 11px;
  border: 1px solid #E3D2D2; border-radius: 9px;
  color: #9F2A2A; background: #FFF8F8;
  text-decoration: none; font-size: .76rem; font-weight: 800;
  transition: background .15s ease, border-color .15s ease;
}
.app-logout:hover { background: #FDECEC; border-color: #E9BDBD; color: #7C1919; }
.app-logout svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 760px) {
  .app-logout { width: 36px; height: 36px; padding: 0; }
  .app-logout span { display: none; }
}
@media (max-width: 430px) {
  .app-user-name { display: none; }
  .app-user { padding-right: 6px; }
}