/* Paleta de Romina (sacada de su logo y su sitio): turquesa #5DD4D0 + violeta #3A1B7A. NO es la de GAMMA ni la de LACEM. */
:root {
  --bg: #150a30; --bg2: #1f0d42; --panel: rgba(58, 27, 122, .32); --panel-2: rgba(58, 27, 122, .55);
  --violeta: #3a1b7a; --violeta-2: #5b2fb0; --cian: #5dd4d0; --cian-d: #3fb8b4; --ink: #1e1240;
  --texto: #f3f0ff; --gris: #b7b0d6; --borde: rgba(93, 212, 208, .2); --suave: rgba(255, 255, 255, .08);
  --pendiente: #f5b544; --esperando: #a98bf0; --confirmado: #5dd4d0; --peligro: #ff7a8a;
  --rail: 64px; --nav-h: 58px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; color: var(--texto); font-size: 14px;
  background: radial-gradient(1100px 700px at 50% -10%, #3a1b7a 0%, var(--bg2) 45%, var(--bg) 100%) fixed; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--texto); }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

.btn { background: var(--cian); color: var(--ink); border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; justify-content: center; }
.btn:hover { background: var(--cian-d); }
.btn.sec { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.btn.sec:hover { background: var(--suave); }
.btn.peligro { background: var(--peligro); color: #2b0a12; }
.btn.chico { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; font-size: 12.5px; color: var(--gris); }
.campo input, .campo textarea, .campo select { background: rgba(10, 4, 28, .6); border: 1px solid var(--borde); border-radius: 8px; padding: 9px 11px; font-size: 14px; }
.campo input:focus, .campo textarea:focus { border-color: var(--cian); outline: 0; }

/* Login */
.login { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-caja { width: 100%; max-width: 360px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 16px; padding: 30px 28px; text-align: center; box-shadow: 0 14px 44px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }
.login-logo { width: 112px; height: 112px; border-radius: 50%; margin-bottom: 14px; box-shadow: 0 6px 22px rgba(93, 212, 208, .25); }
.login-caja h1 { font-size: 21px; color: var(--cian); }
.login-caja > p { color: var(--gris); margin: 4px 0 20px; font-size: 13px; }
.login-caja input { width: 100%; background: rgba(10, 4, 28, .6); border: 1px solid var(--borde); border-radius: 9px; padding: 12px 14px; margin-bottom: 11px; font-size: 15px; }
.login-caja input:focus { border-color: var(--cian); outline: 0; }
.login-caja .btn { width: 100%; padding: 12px; }
.login-error { color: var(--peligro) !important; margin: 0 0 10px !important; }

/* Estructura */
.panel { height: 100%; display: flex; }
.rail { width: var(--rail); background: rgba(10, 4, 28, .55); border-right: 1px solid var(--borde); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; }
.rail-logo { width: 38px; height: 38px; border-radius: 50%; margin-bottom: 12px; }
.rail-item { position: relative; width: 100%; background: none; border: 0; border-radius: 10px; padding: 9px 2px; color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; }
.rail-item:hover { background: var(--suave); color: var(--texto); }
.rail-item.activo { background: rgba(93, 212, 208, .14); color: var(--cian); }
.rail-salir { margin-top: auto; }
.rail-item b { position: absolute; top: 3px; right: 8px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--cian); color: var(--ink); font-size: 10.5px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.vista { flex: 1; min-width: 0; display: flex; }

/* Switch */
.switch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gris); cursor: pointer; }
.switch input { display: none; }
.switch i { width: 38px; height: 21px; border-radius: 11px; background: rgba(255, 255, 255, .15); position: relative; transition: background .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + i { background: var(--cian); }
.switch input:checked + i::after { transform: translateX(17px); background: var(--ink); }

/* Modal y aviso */
.modal { position: fixed; inset: 0; background: rgba(8, 3, 22, .72); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal-caja { width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; background: #241150; border: 1px solid var(--borde); border-radius: 14px; padding: 22px; }
.modal-caja h3 { color: var(--cian); margin-bottom: 14px; font-size: 17px; }
.modal-caja p { color: var(--gris); line-height: 1.45; }
.modal-acc { display: flex; gap: 9px; justify-content: flex-end; margin-top: 16px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%); background: var(--cian); color: var(--ink); padding: 10px 18px; border-radius: 10px; font-weight: 600; z-index: 60; max-width: 92vw; box-shadow: 0 8px 28px rgba(0, 0, 0, .4); }
.toast.error { background: var(--peligro); color: #2b0a12; }
.vacio { color: var(--gris); text-align: center; padding: 28px 16px; font-size: 13.5px; }
.insignia { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 9px; background: var(--suave); color: var(--gris); text-transform: uppercase; letter-spacing: .3px; }
.insignia.bot { background: rgba(93, 212, 208, .16); color: var(--cian); }
.insignia.asesor { background: rgba(245, 181, 68, .18); color: var(--pendiente); }
.insignia.prueba { background: rgba(169, 139, 240, .2); color: var(--esperando); }

@media (max-width: 820px) {
  .panel { flex-direction: column-reverse; }
  .rail { width: 100%; height: var(--nav-h); flex-direction: row; justify-content: space-around; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--borde); }
  .rail-logo { display: none; }
  .rail-item { width: auto; flex: 1; padding: 5px 2px; }
  .rail-salir { margin-top: 0; }
  .vista { min-height: 0; flex: 1; }
}