/* ==========================================================================
   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; } }