/* CRM Gramy · estilos base. Tema claro por defecto; oscuro por preferencia del sistema o por el botón de tema. */
:root {
  --bg:#F1F4F7; --surface:#FFFFFF; --surface-2:#F5F8FA; --line:#D8E0E6; --line-2:#E7ECF0;
  --ink:#12191E; --ink-2:#45535E; --ink-3:#6B7A86;
  --accent:#2779A3; --accent-2:#51A3CB; --accent-soft:#DFEEF6; --on-accent:#FFFFFF;
  --ok:#1D7F55; --ok-soft:#E0F2E9; --warn:#9A6514; --warn-soft:#FAEFD9; --bad:#B93A33; --bad-soft:#FAE3E1;
  --shadow:0 1px 2px rgba(18,25,30,.05),0 6px 20px rgba(18,25,30,.07);
  /* Barra lateral de marca: oscura en ambos temas para que luzca el logo plateado */
  --side-bg:#0F2130; --side-bg-2:#16304A; --side-ink:#D3DEE7; --side-ink-2:#8FA3B4; --side-line:rgba(255,255,255,.08); --side-accent:#62B6DD;
  --f-display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D1216; --surface:#141B21; --surface-2:#1A232A; --line:#2A3640; --line-2:#222D35;
    --ink:#E3EAEF; --ink-2:#A8B5BF; --ink-3:#7C8A95;
    --accent:#62B6DD; --accent-soft:#163242; --on-accent:#08161D;
    --ok:#55C493; --ok-soft:#12302A; --warn:#E3AE55; --warn-soft:#33291A; --bad:#F0827A; --bad-soft:#3A1F1E;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark;
    --side-bg:#091621; --side-bg-2:#10263A;
  }
}
:root[data-theme="dark"] {
  --bg:#0D1216; --surface:#141B21; --surface-2:#1A232A; --line:#2A3640; --line-2:#222D35;
  --ink:#E3EAEF; --ink-2:#A8B5BF; --ink-3:#7C8A95;
  --accent:#62B6DD; --accent-soft:#163242; --on-accent:#08161D;
  --ok:#55C493; --ok-soft:#12302A; --warn:#E3AE55; --warn-soft:#33291A; --bad:#F0827A; --bad-soft:#3A1F1E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark;
  --side-bg:#091621; --side-bg-2:#10263A;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--f-body); }
h1,h2,h3 { margin:0; font-family:var(--f-display); font-weight:600; text-wrap:balance; }
h1 { font-size:28px; line-height:1.15; }
h2 { font-size:19px; margin-bottom:12px; }
h3 { font-size:16px; margin-bottom:6px; }
a { color:var(--accent); }
code, .mono, .num, td.n { font-family:var(--f-num); font-variant-numeric:tabular-nums; }
.muted { color:var(--ink-3); }
.pequeno { font-size:13px; }
.sub { display:block; color:var(--ink-3); font-size:13px; }
.sub.mono { font-size:11.5px; }

/* ---- Íconos ---- */
.ico { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.ico-sm { width:16px; height:16px; }
.btn .ico { width:17px; height:17px; margin-left:-2px; }
/* Botones «Copiar enlace / formulario»: ícono de enlace sin tocar el HTML */
[data-copiar]::before { content:""; width:15px; height:15px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---- Estructura ---- */
body.con-menu { display:grid; grid-template-columns:252px 1fr; min-height:100vh; transition:grid-template-columns .2s ease; }
.lateral { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:10px; padding:16px 12px 12px; overflow:hidden;
  color:var(--side-ink);
  background:
    radial-gradient(420px 260px at -10% -5%, rgba(98,182,221,.32), transparent 65%),
    radial-gradient(380px 300px at 120% 105%, rgba(42,120,214,.28), transparent 60%),
    linear-gradient(180deg, #17466F 0%, #103453 38%, var(--side-bg) 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06); }
.lateral-cabecera { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px 12px; border-bottom:1px solid var(--side-line); }
.marca-enlace { text-decoration:none; display:block; border-radius:10px; }
.marca { display:flex; align-items:center; gap:10px; }
.marca .logo-icono { width:auto; height:46px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.marca .logo-texto { width:120px; height:auto; }
.nav { display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; margin:0 -6px; padding:0 6px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }
.nav-area { margin:14px 10px 4px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:#9FC3DD; display:flex; align-items:center; gap:8px; }
.nav-area::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(159,195,221,.35), transparent); }
.nav a, .nav .pronto { position:relative; padding:8px 10px; border-radius:10px; color:#DCE8F1; text-decoration:none; font-weight:500; font-size:14.5px; display:flex; align-items:center; gap:11px; transition:background .15s, color .15s, transform .15s; }
.nav a .ico, .nav .pronto .ico { width:19px; height:19px; color:#8EC9EA; transition:color .15s; }
.nav a:hover { background:rgba(255,255,255,.08); color:#fff; transform:translateX(2px); }
.nav a:hover .ico { color:#fff; }
.nav a.activo { background:linear-gradient(90deg, rgba(98,182,221,.38), rgba(98,182,221,.10)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.18); }
.nav a.activo .ico { color:#fff; }
.nav a.activo::before { content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:3px; border-radius:3px; background:#7FD3FF; box-shadow:0 0 10px #7FD3FF; }
.nav a:focus-visible { outline:2px solid #7FD3FF; outline-offset:1px; }
.nav .pronto { color:#8FA9BD; cursor:default; }
.nav .pronto .ico { color:#5F7F97; }
.nav .pronto em { margin-left:auto; font-style:normal; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#F2C879; background:rgba(242,200,121,.12); border-radius:99px; padding:1px 7px; }
.lateral-pie { display:flex; flex-direction:column; gap:6px; padding-top:8px; border-top:1px solid var(--side-line); }
.entorno { margin:0; display:flex; align-items:center; gap:8px; font-size:12px; color:#F2C879; background:rgba(227,174,85,.12); border:1px solid rgba(227,174,85,.25); border-radius:10px; padding:6px 9px; }
.entorno .ico { width:16px; height:16px; }
.contraer { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:10px; border:0; background:transparent; color:#AFC6D8; font:500 13.5px var(--f-body); cursor:pointer; }
.contraer:hover { background:rgba(255,255,255,.08); color:#fff; }
.menu-movil { display:none; }

/* Menú contraído: solo íconos */
body.menu-compacto { grid-template-columns:76px 1fr; }
body.menu-compacto .nav-texto, body.menu-compacto .logo-texto, body.menu-compacto .nav .pronto em { display:none; }
body.menu-compacto .nav-area { justify-content:center; margin:12px 0 4px; }
body.menu-compacto .nav-area span { display:none; }
body.menu-compacto .nav-area::after { flex:0 0 22px; }
body.menu-compacto .nav a, body.menu-compacto .nav .pronto, body.menu-compacto .contraer, body.menu-compacto .entorno { justify-content:center; padding:10px 0; }
body.menu-compacto .nav a:hover { transform:none; }
body.menu-compacto .contraer .ico { transform:scaleX(-1); }
body.menu-compacto .lateral-cabecera { justify-content:center; }

.principal { min-width:0; display:flex; flex-direction:column; }
.barra { position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:10px; padding:10px 28px; min-height:64px;
  border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:blur(10px) saturate(1.2); }
.barra form { margin:0; }
.ruta { margin-right:auto; display:flex; align-items:center; gap:12px; min-width:0; }
.ruta-ico { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, #3E9BD0, #1E5F96); box-shadow:0 6px 14px rgba(39,121,163,.35); flex:0 0 auto; }
.ruta-ico .ico { width:20px; height:20px; }
.ruta small { display:block; color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; line-height:1.2; }
.ruta b { display:block; font-family:var(--f-display); font-size:19px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quien { display:flex; align-items:center; gap:10px; line-height:1.2; padding:4px 10px 4px 4px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); }
.quien b { display:block; font-size:13.5px; }
.quien small { color:var(--ink-3); font-size:12px; }
.avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #62B6DD, #2A78D6); color:#fff; font:600 15px var(--f-display); }
.btn-icono { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; padding:0; text-decoration:none; flex:0 0 auto; }
.btn-icono:hover { color:var(--ink); border-color:var(--ink-3); }
.btn-icono.salir:hover { color:var(--bad); border-color:var(--bad); }
.btn-icono .ico { width:18px; height:18px; }
.ver-como { position:relative; display:flex; align-items:center; }
.ver-como-ico { position:absolute; left:10px; display:grid; color:var(--ink-3); pointer-events:none; }
.ver-como-ico .ico { width:16px; height:16px; }
.barra .ver-como select { padding:7px 12px 7px 32px; border-radius:99px; font-size:13.5px; }
.contenido { padding:26px 28px 48px; width:100%; max-width:1440px; display:flex; flex-direction:column; gap:18px; }
.contenido.solo { margin:0 auto; min-height:100vh; justify-content:center; align-items:center; max-width:440px; }

/* Botón de tema */
.btn-tema { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; padding:0; flex:0 0 auto; }
.btn-tema:hover { color:var(--ink); border-color:var(--ink-3); }
.btn-tema:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-tema svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn-tema .ico-sol { display:none; }
.btn-tema.es-oscuro .ico-sol { display:block; }
.btn-tema.es-oscuro .ico-luna { display:none; }
.btn-tema.flotante { position:fixed; top:16px; right:16px; z-index:30; box-shadow:var(--shadow); }
.btn-tema.en-cabecera { background:transparent; border-color:var(--side-line); color:var(--side-ink); }

.encabezado { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ceja { margin:0 0 2px; color:var(--ink-3); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.ceja a { color:inherit; }

/* ---- Componentes ---- */
.tarjeta { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow); }
.tarjeta.sin-relleno { padding:0; }
.relleno { padding:20px; margin:0; }
.desplazable { overflow-x:auto; }
.angosta { max-width:560px; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.kpi { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); overflow:hidden; }
.kpi span { color:var(--ink-3); font-size:13px; }
/* Ícono de indicador: chip de color en la esquina */
.kpi .kpi-ico { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; }
.kpi .kpi-ico .ico { width:18px; height:18px; }
.kpi:has(.kpi-ico) > span:first-of-type, .kpi:has(.kpi-ico) > b { padding-right:40px; }
.kpi-ico.azul { background:linear-gradient(135deg, #4C9BE8, #2A78D6); }
.kpi-ico.verde { background:linear-gradient(135deg, #2BB673, #12804B); }
.kpi-ico.naranja { background:linear-gradient(135deg, #F28B55, #D9592A); }
.kpi-ico.violeta { background:linear-gradient(135deg, #8B7BEA, #5A47CC); }
.kpi-ico.ambar { background:linear-gradient(135deg, #F4B740, #C98500); }
.kpi-ico.cian { background:linear-gradient(135deg, #3FC1D8, #1A8FA8); }
.kpi b { display:block; font-family:var(--f-display); font-size:27px; font-weight:600; letter-spacing:.01em; line-height:1.25; }
/* ---- Inicio ---- */
.bienvenida { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 30px; border-radius:18px; overflow:hidden; color:#fff;
  background:
    radial-gradient(500px 240px at 85% 0%, rgba(127,211,255,.35), transparent 60%),
    linear-gradient(120deg, #1B5585 0%, #12406A 45%, #0E2D4A 100%);
  box-shadow:0 12px 30px rgba(15,43,69,.25); }
.bienvenida::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px); pointer-events:none; }
.bienvenida h1 { font-size:32px; color:#fff; }
.bienvenida-fecha { margin:0 0 4px; color:#B8D8EE; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.bienvenida-rol { margin:8px 0 0; display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.12); color:#E3F1FA; }
.bienvenida-logo { height:96px; width:auto; opacity:.9; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); position:relative; z-index:1; }
.titulo-seccion { font-size:17px; margin:4px 0 10px; color:var(--ink-2); }
.accesos { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.acceso-rapido { display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s; }
.acceso-rapido:hover { transform:translateY(-2px); border-color:var(--accent-2); box-shadow:0 10px 24px rgba(18,25,30,.12); }
.acceso-ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.acceso-ico .ico { width:21px; height:21px; }
.acceso-texto { min-width:0; flex:1; }
.acceso-texto b { display:block; font-size:14.5px; }
.acceso-texto small { display:block; color:var(--ink-3); font-size:12.5px; line-height:1.35; }
.acceso-flecha { width:16px; height:16px; color:var(--ink-3); transition:transform .15s, color .15s; }
.acceso-rapido:hover .acceso-flecha { transform:translateX(3px); color:var(--accent); }
.tono-0 .acceso-ico { background:linear-gradient(135deg, #4C9BE8, #2A78D6); }
.tono-1 .acceso-ico { background:linear-gradient(135deg, #2BB673, #12804B); }
.tono-2 .acceso-ico { background:linear-gradient(135deg, #8B7BEA, #5A47CC); }
.tono-3 .acceso-ico { background:linear-gradient(135deg, #F28B55, #D9592A); }
.tono-4 .acceso-ico { background:linear-gradient(135deg, #3FC1D8, #1A8FA8); }
.tono-5 .acceso-ico { background:linear-gradient(135deg, #F4B740, #C98500); }
.funciones-rol summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.funciones-rol summary::-webkit-details-marker { display:none; }
.funciones-rol summary h2 { margin:0; }
.funciones-rol[open] summary { margin-bottom:10px; }
@media (max-width: 820px) { .bienvenida { padding:20px; } .bienvenida h1 { font-size:24px; } .bienvenida-logo { height:64px; } }
.modulos { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px 24px; margin-top:12px; }
.modulos ul { margin:0; padding-left:18px; color:var(--ink-2); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font:500 14px var(--f-body); padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color .15s, box-shadow .15s, transform .1s, filter .15s; }
.btn:hover { border-color:var(--ink-3); box-shadow:0 2px 8px rgba(18,25,30,.08); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn.primario { background:linear-gradient(135deg, #3592C4, #1F6A99); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(39,121,163,.30); }
.btn.primario:hover { filter:brightness(1.08); box-shadow:0 6px 16px rgba(39,121,163,.38); }
.btn.peligro { color:var(--bad); }
.btn.ghost { background:transparent; }
.btn.sm { padding:5px 10px; font-size:13px; }
.btn.ancho { width:100%; }
.botones { display:flex; gap:10px; flex-wrap:wrap; }
.botones.fijo { position:sticky; bottom:0; padding:12px 0; background:var(--bg); }

.aviso { border-radius:8px; padding:10px 14px; border:1px solid var(--line); background:var(--surface); }
.aviso.ok { background:var(--ok-soft); border-color:transparent; color:var(--ok); }
.aviso.error { background:var(--bad-soft); border-color:transparent; color:var(--bad); }
.aviso.info { background:var(--accent-soft); border-color:transparent; color:var(--accent); }
.aviso.clave { background:var(--warn-soft); border-color:transparent; color:var(--warn); }
.clave { display:inline-block; margin-top:4px; font-size:16px; padding:2px 8px; border-radius:6px; background:var(--surface); color:var(--ink); user-select:all; }

.pill { display:inline-block; font-size:12px; font-weight:500; padding:1px 9px; border-radius:99px; }
.pill.ok { background:var(--ok-soft); color:var(--ok); }
.pill.mal { background:var(--bad-soft); color:var(--bad); }
.pill.alerta { background:var(--warn-soft); color:var(--warn); }

/* ---- Tablas ---- */
.tabla { width:100%; border-collapse:collapse; }
.tabla th, .tabla td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.tabla thead th { font-size:12.5px; color:var(--ink-3); font-weight:500; text-transform:uppercase; letter-spacing:.04em; background:var(--surface-2); white-space:nowrap; }
.tabla tbody tr:last-child td { border-bottom:0; }
.tabla tbody tr { transition:background .12s; }
.tabla tbody tr:hover { background:color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.tabla .n { text-align:right; white-space:nowrap; }
.tabla .c { text-align:center; }
.tabla td.acciones > div { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; min-width:150px; }
.tabla td.acciones form { margin:0; }
.tabla th.acciones { text-align:right; }
.tabla td.detalle { font-size:13px; color:var(--ink-2); min-width:220px; }
.tarjeta:not(.sin-relleno) .tabla th, .tarjeta:not(.sin-relleno) .tabla td { padding-left:0; padding-right:0; }
.tarjeta:not(.sin-relleno) .tabla thead th { background:transparent; }
.matriz tr.grupo th { background:var(--surface-2); font-family:var(--f-display); font-size:15px; color:var(--ink); }
.matriz input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); }

/* ---- Formularios ---- */
.form { display:flex; flex-direction:column; gap:14px; }
.campo { display:flex; flex-direction:column; gap:5px; font-weight:500; font-size:14px; border:0; padding:0; margin:0; }
.campo legend { padding:0; margin-bottom:6px; }
.campo small { font-weight:400; color:var(--ink-3); font-size:12.5px; }
.campo-aviso:empty { display:none; }
.campo-aviso.mal { color:var(--bad); }
.campo-aviso button { font:inherit; font-weight:600; color:var(--accent); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; }
input.invalido { border-color:var(--bad); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], select {
  font:15px var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%;
}
.opcion { display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; cursor:pointer; font-weight:400; }
.opcion:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.opcion input { margin-top:4px; accent-color:var(--accent); }
.opcion b { display:block; font-weight:600; }
.opcion small { color:var(--ink-3); }
.filtros { display:flex; gap:10px; flex-wrap:wrap; }
.filtros input, .filtros select { width:auto; flex:1 1 200px; }
.paginacion { display:flex; gap:12px; align-items:center; justify-content:center; }

.acceso { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 28px 28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.acceso h1 { font-size:22px; text-align:center; }
.acceso-marca { margin:0 -28px; padding:26px 20px 18px; background:linear-gradient(160deg, var(--side-bg-2), var(--side-bg)); display:flex; flex-direction:column; align-items:center; gap:6px; }
.acceso-marca img { width:150px; height:auto; }
.acceso-marca span { color:var(--side-ink-2); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
/* Verificación en dos pasos */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.verif-icono { width:56px; height:56px; margin:-4px auto -6px; border-radius:16px; display:grid; place-items:center; color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow:0 8px 20px rgba(39,121,163,.3); }
.verif-icono .ico { width:26px; height:26px; }
/* Tarjeta: luz que sigue al puntero y tinte verde al conceder el acceso */
.verificacion { position:relative; transition:border-color .4s, box-shadow .4s; }
.verificacion::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s, background .5s;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), var(--accent-soft), transparent 70%); }
.verificacion:hover::before { opacity:.9; }
.verificacion > * { position:relative; }
.verificacion.concedido { border-color:color-mix(in srgb, var(--ok) 45%, var(--line)); box-shadow:0 18px 50px color-mix(in srgb, var(--ok) 22%, transparent); }
.verificacion.concedido::before { opacity:1; background:radial-gradient(420px circle at 50% 62%, var(--ok-soft), transparent 75%); }
.verif-cabeza { text-align:center; display:flex; flex-direction:column; gap:6px; }
.verif-cabeza h1 { font-size:22px; letter-spacing:-.01em; }
.verif-texto { text-align:center; color:var(--ink-2); line-height:1.5; }
.verif-escena { min-height:96px; display:grid; place-items:center; }
.verif-escena > * { grid-area:1 / 1; }
/* Casillas */
.otp { border:0; padding:0; margin:0; display:flex; justify-content:center; gap:10px; }
.otp input { width:52px; height:60px; padding:0; text-align:center; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); caret-color:var(--accent);
  box-shadow:0 1px 2px rgba(18,25,30,.06); transition:border-color .15s, box-shadow .2s, transform .2s, background .2s; }
.otp input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); transform:translateY(-2px); }
.otp input.lleno { border-color:var(--accent-2); background:var(--surface); transform:translateY(-3px); box-shadow:0 8px 18px rgba(39,121,163,.18); }
.otp input.pop { animation:otp-pop .28s cubic-bezier(.3,1.6,.5,1); }
.otp:disabled input { opacity:.5; }
.otp.recoger input { transition:transform .5s cubic-bezier(.6,-.2,.3,1.2) var(--retraso, 0ms), opacity .25s ease .38s;
  transform:translate(var(--dx, 0), -6px) rotate(var(--rot, 0deg)) scale(.9); opacity:0; }
.otp.error input { border-color:var(--bad); background:var(--bad-soft); animation:otp-temblor .42s ease; }
@keyframes otp-pop { 0% { transform:translateY(-3px) scale(.82); } 100% { transform:translateY(-3px) scale(1); } }
@keyframes otp-temblor { 0%, 100% { transform:translateX(0); } 20% { transform:translateX(-7px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }
/* Anillo de progreso y confirmación */
.verif-progreso { position:relative; width:88px; height:88px; display:grid; place-items:center; animation:verif-entra .3s ease; }
.verif-progreso .anillo { position:absolute; inset:0; transform:rotate(-90deg); }
.anillo circle { fill:none; stroke-width:6; }
.anillo-fondo { stroke:var(--line-2); }
.anillo-barra { stroke:var(--accent); stroke-linecap:round; stroke-dasharray:238.76; stroke-dashoffset:238.76; filter:drop-shadow(0 0 6px var(--accent-soft)); }
.verif-progreso b { font-size:18px; font-variant-numeric:tabular-nums; color:var(--ink); }
.verif-listo { display:flex; flex-direction:column; align-items:center; gap:12px; animation:verif-entra .35s ease; }
.verif-check { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%, #3FCB8C, var(--ok) 70%); box-shadow:0 12px 30px color-mix(in srgb, var(--ok) 40%, transparent), 0 0 0 8px var(--ok-soft);
  animation:verif-check .5s cubic-bezier(.3,1.5,.5,1); }
.verif-check svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; animation:verif-trazo .4s ease .25s forwards; }
.verif-listo .pill { letter-spacing:.12em; font-size:11px; }
@keyframes verif-entra { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
@keyframes verif-check { from { transform:scale(.3); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes verif-trazo { to { stroke-dashoffset:0; } }
.verificando .verif-reloj, .verificando #btn-verificar, .concedido .verif-reloj, .concedido #btn-verificar, .verificando .verif-pie, .concedido .verif-pie { opacity:.35; pointer-events:none; transition:opacity .3s; }
@media (prefers-reduced-motion: reduce) {
  .verificacion *, .verificacion::before { animation:none !important; transition:none !important; }
  .verif-check svg { stroke-dashoffset:0; }
}
.verif-reloj { text-align:center; color:var(--ink-3); font-size:13.5px; }
.verif-reloj b { color:var(--ink); font-variant-numeric:tabular-nums; }
.verif-reloj.urgente b { color:var(--bad); }
.verif-acciones { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.seguridad-acceso { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.seguridad-acceso > div:nth-child(2) { flex:1 1 260px; }
.seguridad-acceso .verif-icono { margin:0; flex:0 0 auto; width:46px; height:46px; border-radius:13px; }
.seguridad-acceso h2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:420px) { .otp { gap:7px; } .otp input { width:44px; height:54px; font-size:22px; } }
body.sin-menu { background:radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg); }
.vacio { text-align:center; padding:48px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; }

/* ---- Docencia ---- */
.pill.info { background:var(--accent-soft); color:var(--accent); }
.pill.neutro { background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line); }
.aviso.alerta { background:var(--warn-soft); border-color:transparent; color:var(--warn); }
/* Servicios: tarjetas de líneas, chips de estado y catálogo */
/* 4 líneas: en fila en pantallas anchas, 2 × 2 en medianas y una columna en el celular */
.lineas-servicio { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:14px; }
@media (min-width:1180px) { .lineas-servicio { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:480px) { .lineas-servicio { grid-template-columns:1fr; } }
.filtros .check { white-space:nowrap; }
.tabla-servicios td:nth-child(2) { min-width:210px; }
.tabla-servicios td:nth-child(3) { min-width:190px; }
.tabla-servicios td:nth-child(4) { min-width:140px; }
.linea-servicio { display:flex; flex-direction:column; gap:4px; border-top:4px solid var(--linea); color:inherit; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.linea-servicio:hover { transform:translateY(-2px); }
.linea-servicio.activa { outline:2px solid var(--linea); outline-offset:-2px; }
.linea-servicio > b { font-size:14.5px; line-height:1.3; }
.linea-servicio-cifras { margin-top:auto; padding-top:6px; font-size:13px; color:var(--ink-2); }
.linea-servicio-cifras b { font-family:var(--f-display); font-size:20px; color:var(--linea); }
.estados-proyecto { margin-bottom:12px; }
.estados-proyecto .chip { background:var(--surface); border-color:var(--line); color:var(--ink-2); text-decoration:none; }
.estados-proyecto .chip b { margin-left:4px; }
.estados-proyecto .chip.activo { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.catalogo-servicios { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap:16px; margin-top:14px; align-items:start; }
.linea-catalogo { border-top:4px solid var(--linea); }
.linea-catalogo.inactivo, .servicios-lista li.inactivo { opacity:.6; }
.linea-catalogo-cabeza { display:flex; gap:8px; align-items:center; }
.linea-catalogo-cabeza input[type=color] { width:38px; height:34px; padding:2px; flex:0 0 auto; }
.linea-catalogo-cabeza input[type=text] { flex:1; font-weight:600; }
.servicios-lista { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.servicio-fila { display:flex; gap:6px; align-items:center; }
.servicio-fila input[type=text] { flex:1; min-width:0; }
.servicio-fila .check { font-size:12.5px; white-space:nowrap; }
.servicio-fila.nuevo { padding-top:8px; border-top:1px dashed var(--line); }

.input-pct { width:80px; text-align:right; }
.tc-hoy .tc-cifras { display:flex; gap:28px; margin:6px 0; }
.tc-hoy .tc-cifras span { display:block; color:var(--ink-3); font-size:13px; }
.tc-hoy .tc-cifras b { font-family:var(--f-display); font-size:30px; }
.nota-moneda { margin:4px 0 10px; }

/* Reportes */
.descargas { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.descargas h2 { display:flex; align-items:center; gap:8px; margin:0 0 4px; }
.descargas p { margin:0; }
.descargas-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.descargas-form select { min-width:240px; }
.indice-reporte { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.indice-reporte .chip { display:inline-flex; align-items:center; gap:6px; text-decoration:none; background:var(--surface); border-color:var(--line); color:var(--ink-2); }
.seccion-reporte { margin-bottom:16px; scroll-margin-top:80px; }
.seccion-reporte > h2 { display:flex; align-items:center; gap:10px; margin-top:0; }
.seccion-reporte-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.kpis-reporte { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); margin-bottom:6px; }
.kpis-reporte .kpi b { font-size:22px; }
.tablas-reporte { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:4px 22px; }
.tablas-reporte h3 { font-size:14px; margin:14px 0 6px; color:var(--ink-2); }
.tabla.compacta td, .tabla.compacta th { padding:6px 10px; font-size:13px; }
.tabla td.n { position:relative; }
.barra-celda { display:block; height:3px; margin-top:3px; margin-left:auto; border-radius:2px; background:var(--accent); opacity:.75; }
@media (max-width:520px) { .tablas-reporte { grid-template-columns:1fr; } .descargas-form select { min-width:0; width:100%; } }

/* Integraciones: una tarjeta por servicio externo */
.integraciones { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-top:16px; }
.integracion { display:flex; flex-direction:column; gap:12px; }
.integracion-cabeza { display:flex; align-items:flex-start; gap:12px; }
.integracion-cabeza h2 { margin:0 0 2px; font-size:17px; }
.integracion-cabeza p { margin:0; font-size:13.5px; }
.integracion-cabeza .pill { margin-left:auto; white-space:nowrap; }
.integracion-ico { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.integracion-funciones { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; }
.integracion-funciones li { display:flex; gap:8px; align-items:flex-start; }
.integracion-funciones .ico { color:var(--ok); margin-top:2px; }
.integracion p.pequeno { margin:0; }
.integracion .btn { align-self:flex-start; margin-top:auto; }
.integracion .btn[disabled] { opacity:.6; cursor:not-allowed; }
@media (max-width:420px) { .integraciones { grid-template-columns:1fr; } }

/* Cruce de horario (misma cuenta de Zoom) */
.cruce-zoom p { margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cruce-zoom ul { margin:8px 0 0; padding-left:20px; color:var(--ink-2); font-size:13.5px; }
.cruce-zoom li + li { margin-top:4px; }
.cruce-zoom .check { margin-top:10px; color:var(--ink); font-weight:600; }
.texto-mal { color:var(--bad); }
.kpi.destacado { border-color:var(--warn); background:var(--warn-soft); }
.kpi.destacado span, .kpi.destacado b { color:var(--warn); }
.clases { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.clase { display:grid; grid-template-columns:150px 1fr; gap:4px 14px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--curso, var(--accent)); border-radius:8px; }
.clase-cuando b { display:block; font-size:13.5px; }
.clase-cuando span { color:var(--ink-2); font-size:13px; }
.clase-que { min-width:0; }
.clase-accion { grid-column:1 / -1; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.datos { display:grid; grid-template-columns:max-content 1fr; gap:8px 16px; margin:0; }
.datos dt { color:var(--ink-3); font-size:13.5px; }
.datos dd { margin:0; }
.dos-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tres-col { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px; }
.check { display:inline-flex; gap:7px; align-items:center; font-weight:400; cursor:pointer; }
.check input { accent-color:var(--accent); width:16px; height:16px; }
.repeticion { border:1px dashed var(--line); border-radius:8px; padding:10px 12px; }
.repeticion:not(:has(#repetir:checked)) .repetir-opciones { display:none; }
.repetir-opciones { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.dias { display:flex; gap:6px 14px; flex-wrap:wrap; }
.separado { border-top:1px solid var(--line-2); padding-top:16px; margin-top:16px; }
.desplegable { margin-top:16px; }
.desplegable summary { cursor:pointer; color:var(--bad); font-size:14px; }
.desplegable form { margin-top:10px; }
.segmentado { display:inline-flex; margin-left:auto; }
.segmentado .btn { border-radius:0; }
.segmentado .btn:first-child { border-radius:8px 0 0 8px; }
.segmentado .btn:last-child { border-radius:0 8px 8px 0; border-left:0; }
.segmentado .btn.activo { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.relleno-titulo { padding:18px 20px 6px; margin:0; }
.punto { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
input[type=time], input[type=date], input[type=month], input[type=url], input[type=color] {
  font:15px var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%;
}
input[type=color] { padding:3px; height:40px; }
.filtros input[type=month] { width:auto; flex:0 1 180px; }

.rejilla-ancha { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:18px; align-items:start; }
@media (max-width: 1100px) { .rejilla-ancha { grid-template-columns:1fr; } }
.tabla.sesiones td { padding:6px 8px; vertical-align:middle; }
.tabla.sesiones th { padding:8px; }
.tabla.sesiones td:nth-child(2) { min-width:200px; }
.tabla.sesiones td:nth-child(3) { min-width:150px; }
.tabla.sesiones td:nth-child(4), .tabla.sesiones td:nth-child(5) { min-width:110px; }
.tabla.sesiones .ses-n { color:var(--ink-3); width:32px; }
.tabla.sesiones.una .ses-quitar, .tabla.sesiones.una th:last-child { display:none; }
.tarjeta:not(.sin-relleno) .tabla.sesiones td, .tarjeta:not(.sin-relleno) .tabla.sesiones th { padding-left:6px; padding-right:6px; }
.generador { border:1px dashed var(--line); border-radius:8px; padding:10px 14px; }
.generador summary { cursor:pointer; font-weight:500; color:var(--accent); }
.generador[open] { display:flex; flex-direction:column; gap:10px; }
.gen-campos { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
input[type=number] { font:15px var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; }
@media (max-width: 820px) { .gen-campos { grid-template-columns:1fr 1fr; } }
/* Vista previa «Ver como» */
.franja-vista { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:9px 28px; background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--warn); font-size:14px; }
.franja-vista form { margin:0; }
body.en-vista .lateral { box-shadow:inset -3px 0 0 var(--warn); }
.ver-como { display:flex; gap:6px; align-items:center; }
.ver-como select { width:auto; max-width:240px; padding:5px 8px; font-size:13px; }
@media (max-width: 820px) { .franja-vista { padding:9px 16px; } .ver-como { width:100%; } .ver-como select { flex:1; max-width:none; } }
/* Eventos, inscripción pública y correos */
textarea { font:15px/1.5 var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%; resize:vertical; }
body.publico { display:block; }
.publico-cabecera { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px max(16px, calc(50% - 360px));
  background:linear-gradient(120deg, var(--side-bg-2), var(--side-bg)); }
.marca-publica .logo-icono { height:42px; }
.marca-publica .logo-texto { width:112px; }
.publico-contenido { max-width:760px; margin:0 auto; padding:24px 16px 32px; }
body.publico { background:
  radial-gradient(900px 420px at 50% -120px, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  var(--bg); }

/* Portada del formulario: imagen principal o franja de color */
.portada { --portada:#2779A3; background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 14px 34px rgba(18,25,30,.10); }
.portada-imagen { aspect-ratio:16 / 5; background:var(--surface-2); }
.portada-imagen img { width:100%; height:100%; object-fit:cover; display:block; }
.portada-franja { position:relative; height:132px; display:grid; place-items:center; color:rgba(255,255,255,.9);
  background:
    radial-gradient(260px 160px at 85% 10%, rgba(255,255,255,.28), transparent 70%),
    linear-gradient(120deg, color-mix(in srgb, var(--portada) 75%, #fff) 0%, var(--portada) 45%, color-mix(in srgb, var(--portada) 60%, #000) 100%); }
.portada-franja::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px); }
.portada-franja .ico { width:64px; height:64px; stroke-width:1.3; position:relative; z-index:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.portada-cuerpo { padding:22px 26px 24px; display:flex; flex-direction:column; gap:10px; }
.portada-etiqueta { margin:0; display:inline-flex; align-self:flex-start; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--portada); background:color-mix(in srgb, var(--portada) 14%, transparent); }
:root[data-theme="dark"] .portada-etiqueta { color:color-mix(in srgb, var(--portada) 55%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portada-etiqueta { color:color-mix(in srgb, var(--portada) 55%, #fff); } }
.portada h1 { font-size:clamp(24px, 4vw, 32px); line-height:1.15; }
.portada-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.portada-chips li { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2); }
.portada-chips .ico { color:var(--accent); }
.portada-descripcion { color:var(--ink-2); }
.portada-descripcion p:last-child { margin-bottom:0 !important; }
.precios { flex-wrap:wrap; }
.precio-insignia { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:99px; color:#9A6514; background:#FCEFD4; }

/* Horario del evento por país, con banderas */
.horarios { border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--surface-2); }
.horarios-titulo { margin:0 0 10px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.horarios-titulo .ico { color:var(--accent); }
/* Una tarjeta por hora; los países que comparten la hora van juntos debajo */
.horarios ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.horarios li { flex:1 1 150px; max-width:260px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line-2); text-align:center; }
.horario-hora { font-family:var(--f-display); font-size:20px; line-height:1.1; white-space:nowrap; }
.horarios li small { margin-top:-4px; color:var(--warn); font-size:11.5px; font-weight:600; }
.horario-paises { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; }
.horario-pais { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2); white-space:nowrap; }
.bandera { width:24px; height:16px; flex:0 0 auto; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.gracias .horarios { width:100%; max-width:560px; }
.portada-web { align-self:flex-start; margin-top:4px; }

/* Formulario público por secciones */
.formulario-publico { padding:26px; border-radius:20px; gap:16px; }
.formulario-publico input[type=text], .formulario-publico input[type=email], .formulario-publico input[type=tel],
.formulario-publico select, .formulario-publico textarea { padding:11px 13px; border-radius:11px; font-size:15.5px; background:var(--surface-2); }
.formulario-publico input:focus, .formulario-publico select:focus, .formulario-publico textarea:focus { background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); outline:none; }
.seccion-form { display:flex; align-items:center; gap:12px; margin-top:10px; padding-top:14px; border-top:1px dashed var(--line); }
.seccion-form:first-of-type, .trampa + .seccion-form { margin-top:0; padding-top:0; border-top:0; }
.seccion-num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:600 14px var(--f-display); color:#fff; background:linear-gradient(135deg, #3592C4, #1F6A99); flex:0 0 auto; }
.seccion-ico { color:var(--accent); width:22px; height:22px; }
.seccion-form h2 { margin:0; font-size:18px; }
.seccion-form p { margin:0; color:var(--ink-3); font-size:13px; }
.btn.grande { padding:14px 18px; font-size:16.5px; border-radius:12px; }
.btn.grande .ico { width:20px; height:20px; }
.cerrado { display:flex; align-items:center; gap:12px; color:var(--ink-2); }
.cerrado .ico { width:26px; height:26px; color:var(--warn); }
.cerrado p { margin:0; }

/* Pantalla de agradecimiento */
.gracias { text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:38px 28px 32px; box-shadow:0 18px 40px rgba(18,25,30,.12);
  display:flex; flex-direction:column; align-items:center; gap:12px; animation:aparecer .45s ease-out both; }
.gracias h1 { font-size:clamp(26px, 4.5vw, 34px); }
.gracias-check { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; margin-bottom:4px;
  background:radial-gradient(circle, color-mix(in srgb, var(--ok) 18%, transparent) 0 60%, transparent 61%); }
.gracias-check svg { width:76px; height:76px; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.gracias-check circle { stroke:var(--ok); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:trazo .6s ease-out .1s forwards; }
.gracias-check path { stroke:var(--ok); stroke-width:4; stroke-dasharray:40; stroke-dashoffset:40; animation:trazo .35s ease-out .6s forwards; }
.gracias-nombre { margin:0; font-size:18px; }
.gracias-texto { margin:0; color:var(--ink-2); max-width:520px; }
.gracias-detalle { list-style:none; margin:4px 0; padding:12px 16px; display:flex; flex-direction:column; gap:8px; text-align:left; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; width:100%; max-width:520px; }
.gracias-detalle li { display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:14.5px; }
.gracias-detalle .ico { color:var(--accent); }
.gracias-mensaje { max-width:520px; color:var(--ink); background:color-mix(in srgb, var(--accent) 8%, transparent); border-left:3px solid var(--accent); border-radius:10px; padding:12px 14px; text-align:left; width:100%; }
.gracias-mensaje p:last-child { margin-bottom:0 !important; }
.gracias-subtitulo { margin:10px 0 0; font-weight:600; color:var(--ink-2); }
.gracias .redes { justify-content:center; }
.gracias .btn.red .ico { width:18px; height:18px; }
.gracias-nota { margin:6px 0 0; color:var(--ink-3); font-size:13px; }
@keyframes trazo { to { stroke-dashoffset:0; } }
@keyframes aparecer { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .gracias, .gracias-check circle, .gracias-check path { animation:none; stroke-dashoffset:0; } }

/* Campo de imagen principal en los formularios internos */
.campo-imagen { display:flex; flex-direction:column; gap:8px; }
.imagen-previa { width:100%; max-height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
input[type=file] { font:14px var(--f-body); color:var(--ink-2); }
input[type=file]::file-selector-button { font:500 13.5px var(--f-body); padding:7px 12px; margin-right:10px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; }
@media (max-width: 820px) { .portada-cuerpo { padding:18px; } .formulario-publico { padding:18px; } .portada-imagen { aspect-ratio:16 / 7; } .gracias { padding:30px 18px 24px; } }
.publico-pie { text-align:center; color:var(--ink-3); font-size:12.5px; padding:0 16px 28px; }

/* ---- Tablero de ventas ---- */
.tablero-filtros select, .tablero-filtros input { flex:1 1 150px; }
.filtros select, .filtros input { min-width:0; max-width:100%; text-overflow:ellipsis; }
.tablero-kpis { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
.tablero-kpis .kpi b { font-size:clamp(19px, 1.7vw, 24px); white-space:nowrap; }
.tablero { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; transition:opacity .15s; }
.tablero.cargando { opacity:.55; }
.grafico.ancho { grid-column:1 / -1; }
.grafico h2 { margin-bottom:4px; }
.grafico .ayuda { margin:0 0 6px; }
.lienzo { position:relative; height:240px; }
.lienzo.alto { height:280px; }
.lienzo.vacio-grafico { height:120px; display:grid; place-items:center; }
.lienzo.vacio-grafico canvas { display:none; }
.lienzo.vacio-grafico::after { content:attr(data-vacio); color:var(--ink-3); font-size:14px; }
.chip-limpiar { border-color:var(--line); background:transparent; color:var(--ink-2); }
.resumen-venta { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.resumen-venta div span { display:block; color:var(--ink-3); font-size:12.5px; }
.resumen-venta div b { font-family:var(--f-display); font-size:21px; }
.resumen-venta p { grid-column:1 / -1; margin:0; }
@media (max-width: 1000px) { .tablero { grid-template-columns:1fr; } }
.evento-cabecera h1 { margin:2px 0 4px; }
.evento-descripcion { margin-top:12px; color:var(--ink-2); }
input.mayus { text-transform:uppercase; }
.telefono { display:flex; gap:8px; }
.telefono select { width:auto; flex:0 0 auto; max-width:46%; }
.telefono input[name=codigo_otro] { width:90px; flex:0 0 90px; }
.telefono input[type=tel] { flex:1; min-width:0; }
.trampa { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.consentimiento { align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.45; }
.consentimiento input { margin-top:2px; flex:0 0 auto; }
.listo h2 { color:var(--ok); }
.redes { display:flex; flex-wrap:wrap; gap:10px; }
.btn.red { color:#fff; border:0; padding:10px 16px; font-weight:600; }
.red-whatsapp { background:#1F9E52; }
.red-facebook { background:#1877F2; }
.red-instagram { background:linear-gradient(45deg,#F09433,#DC2743 50%,#BC1888); }
.red-otro { background:var(--accent); }
.enlace-publico { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.enlace-publico .sub { word-break:break-all; }
.enlace-publico .aviso { flex-basis:100%; margin:0; }
.lista-eventos { max-height:320px; overflow-y:auto; }
.adjuntos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.adjuntos li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; }
.vista-correo { position:sticky; top:16px; }
.vista-correo iframe { width:100%; height:520px; border:1px solid var(--line); border-radius:8px; background:#EDF1F4; }
.barra-progreso { height:10px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; margin:10px 0; }
.barra-progreso span { display:block; height:100%; background:var(--accent); transition:width .3s; }
.progreso-cabecera { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.paginacion .btn.activo { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
@media (max-width: 820px) { .telefono { flex-wrap:wrap; } .telefono select { max-width:100%; flex:1 1 100%; } .vista-correo { position:static; } }
/* Selector desplegable con buscador */
.selector { position:relative; }
.selector summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--surface); }
.selector summary::-webkit-details-marker { display:none; }
.selector[open] summary { border-color:var(--accent); }
.selector-panel { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow); padding:8px; }
.selector-lista { max-height:300px; overflow-y:auto; margin-top:8px; display:flex; flex-direction:column; gap:2px; }
.selector-opcion { display:flex; gap:10px; align-items:flex-start; padding:7px 8px; border-radius:6px; cursor:pointer; font-weight:400; }
.selector-opcion:hover { background:var(--surface-2); }
.selector-opcion[hidden], [hidden] { display:none !important; }
.selector-opcion input { margin-top:4px; accent-color:var(--accent); }
.selector-opcion b { display:block; font-weight:600; }
.selector-opcion small { color:var(--ink-3); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font:13px var(--f-body); border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); border-radius:99px; padding:3px 10px; cursor:pointer; }
.plantillas { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; }
.muestra-color { display:inline-block; width:22px; height:22px; border-radius:6px; margin-right:10px; vertical-align:middle; border:1px solid var(--line); }
.precios { display:flex; gap:10px; align-items:baseline; margin:6px 0 0; }
.precio-antes { text-decoration:line-through; color:var(--ink-3); }
.precio-oferta { font-size:22px; color:var(--ok); }
tr.inactivo td { opacity:.6; }
a.kpi { text-decoration:none; color:inherit; }
a.kpi:hover { border-color:var(--accent); }
.automaticos .encabezado h2 { margin:0; }
.auto-fila { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-top:12px; }
.auto-fila > div { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.auto-fila form { margin:0; }
/* Registrar venta de un inscrito: plan de pagos y cuotas */
.planes { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.plan { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.plan input { accent-color:var(--accent); width:18px; height:18px; }
.plan b { display:block; }
.plan small { color:var(--ink-3); font-size:12.5px; }
.plan:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.cuota { border:1px solid var(--line); border-radius:12px; padding:12px 14px 14px; margin:0; display:flex; flex-direction:column; gap:10px; }
.cuota legend { display:flex; align-items:center; gap:8px; padding:0 6px; font-weight:600; font-family:var(--f-display); font-size:16px; }
.cuota legend .seccion-num { width:24px; height:24px; font-size:12.5px; }
.cuota.pagada { border-color:color-mix(in srgb, var(--ok) 55%, var(--line)); background:color-mix(in srgb, var(--ok) 6%, transparent); }
.suma-cuotas { margin:0; font-size:14px; font-weight:500; }
.suma-cuotas.ok { color:var(--ok); }
.suma-cuotas.mal { color:var(--warn); }
.resumen-inscrito h2 { margin:0 0 8px; }
.resumen-inscrito .gracias-detalle { max-width:none; }
.total-venta { display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 6px; padding-top:12px; border-top:1px dashed var(--line); }
.total-venta b { font-family:var(--f-display); font-size:26px; }
/* Cronograma de cuotas en la ficha de la venta */
.cronograma { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.cronograma li { position:relative; display:flex; gap:12px; padding:0 0 16px; }
.cronograma li:not(:last-child)::before { content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line); }
.cronograma-num { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font:600 14px var(--f-display); background:var(--surface-2); border:2px solid var(--line); color:var(--ink-2); }
.cronograma li.pagada .cronograma-num { background:var(--ok); border-color:var(--ok); color:#fff; }
.cronograma li.vencida .cronograma-num { border-color:var(--bad); color:var(--bad); }
.cronograma-cuerpo { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cronograma-fila { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cronograma-fila .mono { margin-left:auto; font-weight:600; }
.cronograma-pagar { margin-top:6px; }
.cronograma-pagar summary { list-style:none; display:inline-flex; }
.cronograma-pagar summary::-webkit-details-marker { display:none; }
.cronograma-pagar[open] summary { display:none; }
.cronograma-pagar form { margin-top:4px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
@media (max-width: 820px) { .planes { grid-template-columns:1fr; } }

/* Inscritos: vendedora asignada */
.avatar.mini { width:22px; height:22px; font-size:11.5px; }
.vendedora { display:inline-flex; align-items:center; gap:7px; font-size:14px; }
.vendedora.es-mia { font-weight:600; color:var(--accent); }
.sel-compacto { padding:6px 9px !important; font-size:13.5px !important; min-width:150px; }
.texto-alerta { color:var(--warn) !important; font-weight:500; }
.enlaces-vendedoras summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.enlaces-vendedoras summary::-webkit-details-marker { display:none; }
.enlaces-vendedoras ul { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; }
.enlaces-vendedoras li { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; }
.enlaces-vendedoras li span:nth-child(2) { flex:1; }
.peligro-zona { border-color:var(--bad); }
.peligro-zona h2 { color:var(--bad); }
.peligro-zona p { margin:0 0 12px; }

/* Calendario (FullCalendar) con los colores del sistema */
#calendario { --fc-border-color:var(--line-2); --fc-page-bg-color:var(--surface); --fc-neutral-bg-color:var(--surface-2);
  --fc-list-event-hover-bg-color:var(--surface-2); --fc-today-bg-color:var(--accent-soft); --fc-now-indicator-color:var(--bad);
  --fc-button-bg-color:var(--surface); --fc-button-border-color:var(--line); --fc-button-text-color:var(--ink);
  --fc-button-hover-bg-color:var(--surface-2); --fc-button-hover-border-color:var(--ink-3);
  --fc-button-active-bg-color:var(--accent-soft); --fc-button-active-border-color:var(--accent); font-size:13.5px; }
#calendario .fc-toolbar-title { font-family:var(--f-display); font-size:21px; }
#calendario .fc-toolbar-title::first-letter { text-transform:uppercase; }
#calendario .fc-button { font:500 13px var(--f-body); text-transform:capitalize; box-shadow:none; }
#calendario .fc-button-active { color:var(--accent); }
#calendario a { color:inherit; text-decoration:none; }
#calendario .fc-col-header-cell-cushion { color:var(--ink-3); font-weight:500; text-transform:capitalize; }
#calendario .fc-list-day-cushion { background:var(--surface-2); }
.fc-event.ev-programada, .fc-event.ev-en_curso, .ley.ev-programada { --fc-event-bg-color:var(--accent); --fc-event-border-color:var(--accent); --fc-event-text-color:var(--on-accent); background:var(--accent); }
.fc-event.ev-pendiente, .fc-event.ev-observada, .ley.ev-pendiente { --fc-event-bg-color:var(--warn); --fc-event-border-color:var(--warn); --fc-event-text-color:#fff; background:var(--warn); }
.fc-event.ev-registrada, .fc-event.ev-validada, .ley.ev-registrada { --fc-event-bg-color:var(--ok); --fc-event-border-color:var(--ok); --fc-event-text-color:#fff; background:var(--ok); }
.fc-event.ev-sin_registro, .ley.ev-sin_registro { --fc-event-bg-color:var(--bad); --fc-event-border-color:var(--bad); --fc-event-text-color:#fff; background:var(--bad); }
.fc-event.ev-cancelada, .ley.ev-cancelada { --fc-event-bg-color:var(--surface-2); --fc-event-border-color:var(--line); --fc-event-text-color:var(--ink-3); background:var(--surface-2); text-decoration:line-through; }
.fc-list-event.fc-event { background:transparent; text-decoration:none; }
.fc-list-event.ev-cancelada .fc-list-event-title { text-decoration:line-through; color:var(--ink-3); }
.leyenda { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:12px 0 0; }
.ley { display:inline-block; width:12px; height:12px; border-radius:3px; margin-left:8px; border:1px solid var(--line); }

/* ---- Celular ---- */
@media (max-width: 820px) {
  body.con-menu { display:block; }
  .lateral { position:sticky; top:0; z-index:25; height:auto; max-height:100vh; padding:8px 16px; gap:4px; }
  .lateral-cabecera { border-bottom:0; padding:0; }
  .marca .logo-icono { height:36px; }
  .marca .logo-texto { width:96px; }
  .menu-movil { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:40px; height:40px; padding:0 10px; border-radius:8px;
    border:1px solid var(--side-line); background:transparent; cursor:pointer; }
  .menu-movil span { display:block; height:2px; border-radius:2px; background:var(--side-ink); transition:transform .2s, opacity .2s; }
  body.menu-abierto .menu-movil span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  body.menu-abierto .menu-movil span:nth-child(2) { opacity:0; }
  body.menu-abierto .menu-movil span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .nav, .lateral-pie { display:none; }
  body.menu-abierto .nav { display:flex; padding:6px 6px 10px; overflow-y:auto; max-height:calc(100vh - 70px); }
  .lateral { overflow:visible; }
  /* En celular no existe el modo contraído */
  body.menu-compacto { grid-template-columns:none; }
  body.menu-compacto .nav-texto, body.menu-compacto .logo-texto { display:inline; }
  body.menu-compacto .nav-area span { display:inline; }
  body.menu-compacto .nav a, body.menu-compacto .nav .pronto { justify-content:flex-start; padding:8px 10px; }
  .barra { position:static; padding:10px 16px; flex-wrap:wrap; }
  .ruta { flex-basis:100%; }
  .quien-texto { display:none; }
  .quien { padding:3px; }
  .publico-cabecera { padding:10px 16px; }
  .contenido { padding:18px 16px 40px; }
  h1 { font-size:24px; }
  .dos-col, .tres-col { grid-template-columns:1fr; }
  .clase { grid-template-columns:1fr; }
  .segmentado { margin-left:0; }
  .datos { grid-template-columns:1fr; gap:2px; }
  .datos dd { margin-bottom:8px; }
}