/* ---------- Pantalla de entrada (carátula + login) ---------- */
.caratula { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #04050c; color: #eef0f6; text-align: center; padding: 0 20px; overflow: hidden;
  font-family: "Inter", system-ui, sans-serif; transition: opacity .6s cubic-bezier(.2,0,0,1), visibility .6s; }
.caratula.fuera { opacity: 0; visibility: hidden; pointer-events: none; }
.caratula canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.caratula .en-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 46%, rgba(4,5,12,.68) 0%, rgba(4,5,12,.68) 24%, rgba(4,5,12,.46) 52%, rgba(4,5,12,.12) 100%); }
.en-cab { position: absolute; inset-inline: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 26px 36px; }
.en-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: #fff; }
.en-marca svg { width: 30px; height: 30px; fill: #fff; }
.en-clinica { font-size: 13px; color: #b9becf; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
  padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.en-centro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 560px; }
.en-insignia { display: inline-flex; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
  padding: 6px 14px; font-size: 12.5px; color: #b9becf; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.caratula h1 { margin: 22px 0 0; font-size: clamp(36px, 6vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: #eef0f6; }
.en-sub { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #b9becf; }
.en-quien { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.en-quien button { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #eef0f6; font: 500 15px "Inter", sans-serif;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .15s, border-color .15s; }
.en-quien button:hover { background: rgba(255,255,255,.14); }
.en-quien button.on { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }
.en-quien .en-ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--k, #7b5cff); }
.en-form { margin-top: 18px; width: 100%; max-width: 440px; }
.en-barra { display: flex; align-items: center; height: 60px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0 6px 0 24px; }
.en-barra input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: #eef0f6; font: 500 18px "Inter", sans-serif; letter-spacing: .3em; }
.en-barra input::placeholder { color: #b9becf; letter-spacing: 0; font-weight: 400; }
.en-pildora { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #2f2f33; font: 600 15px "Inter", sans-serif; transition: background .15s; }
.en-pildora:hover { background: rgba(255,255,255,.85); }
.en-pildora:focus-visible, .en-quien button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.en-error { min-height: 20px; margin-top: 12px; font-size: 14px; color: #ffb4c2; }
.en-pista { margin-top: 2px; font-size: 13px; color: #b9becf; }
.en-pie { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 22px; font-size: 12.5px; color: #b9becf; }
.en-agita { animation: en-agita .4s; }
@keyframes en-agita { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Entradas escalonadas */
.en-rev { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,0,0,1), transform .7s cubic-bezier(.2,0,0,1); }
.en-cab.en-rev { transform: translateY(-12px); }
.en-rev.visto { opacity: 1; transform: none; }
.en-pal { display: inline-block; opacity: 0; transform: translateY(26px); transition: opacity .72s cubic-bezier(.33,1,.68,1), transform .72s cubic-bezier(.33,1,.68,1); }
.en-pal.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .en-rev, .en-pal { transition: none !important; opacity: 1 !important; transform: none !important; } }
@media (max-width: 640px) { .en-cab { padding: 18px 20px; } .en-clinica { display: none; } .en-barra { height: 54px; } }

/* Usuario en la barra de arriba */
.usuario { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.usuario .en-ini { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: var(--k, #7b5cff); }
@media print { .caratula { display: none !important; } }

/* Logo grande en la carátula */
.en-marca-peq { font-size: 13px; color: #b9becf; letter-spacing: .02em; }
.en-logo { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }
.en-nx { width: clamp(64px, 8vw, 108px); height: clamp(64px, 8vw, 108px); flex: none; }
.en-nombre { font-size: clamp(56px, 8.5vw, 116px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: #fff; }
.en-nombre .x { background: linear-gradient(135deg, #22d3ee, #7c5cff 55%, #e040fb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.en-logo + .en-insignia { margin-top: 22px; }
.caratula h1 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 500; margin-top: 26px; }
.en-centro { max-width: 760px; }

/* Logo en el menú lateral */
.logo-tile { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #07071a; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(20,10,60,.28); }
.logo-tile .logo-nx { width: 30px; height: 30px; }
.logo b.logo-nombre { font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: -.04em; font-size: 27px; }
.logo-nombre .x { background: linear-gradient(135deg, #22d3ee, #7c5cff 55%, #e040fb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-nombre .x { background: linear-gradient(135deg, #a5f3fc, #c4b5fd 50%, #f5d0fe); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 2px rgba(30,10,80,.45)); }
.logo-nombre .x { background: none; filter: none; color: #8ff3ff; -webkit-text-fill-color: #8ff3ff; text-shadow: 0 1px 6px rgba(20,10,70,.35); }
[data-tema="noche"] .logo-nombre .x { color: #c08cff; -webkit-text-fill-color: #c08cff; }

/* Logo de la clínica cliente */
.en-clinica { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.94); color: #14234a; font-weight: 600; font-size: 14px; padding: 6px 16px 6px 6px; border-color: transparent; }
.en-clinica img { height: 40px; width: auto; background: #fff; border-radius: 999px; }
.cab-logo { height: 30px; width: auto; vertical-align: middle; margin-right: 8px; background: #fff; border-radius: 8px; padding: 2px; }
.papel .doc-emisor { display: flex; gap: 16px; align-items: center; }
.papel .doc-logo { height: 84px; width: auto; }
.aj-logo-caja { display: inline-grid; place-items: center; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid rgba(0,0,0,.08); }
.aj-logo-caja img { height: 64px; width: auto; display: block; }
@media (max-width: 640px) { .en-clinica { display: flex; padding: 4px 12px 4px 4px; font-size: 12px; } .en-clinica img { height: 30px; } }
.en-clinica { border-radius: 18px; padding: 8px 18px 8px 10px; font-size: 15px; }
.en-clinica img { height: 58px; border-radius: 10px; }
.cab-logo { height: 38px; }

/* Login simple: usuario + contraseña */
.en-form { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }
.en-campo select { width: 100%; height: 60px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b9becf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 24px center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #b9becf; font: 400 18px "Inter", sans-serif; padding: 0 52px 0 24px; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; }
.en-campo select.lleno { color: #eef0f6; font-weight: 500; }
.en-campo select:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.en-campo option { color: #15151f; }
.en-barra input { letter-spacing: normal; }
.en-barra input:not(:placeholder-shown) { letter-spacing: .3em; }
.en-error { margin-top: 0; }
.caratula h1 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; letter-spacing: -.02em; }

.en-quien { margin-top: 30px; }
.en-form { margin-top: 18px; }

/* Fondo animado del modo noche */
.fondo-animado { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html.con-fondo-animado .fondo-animado { display: block; }
html.con-fondo-animado .disco { display: none !important; }
html.con-fondo-animado[data-tema="noche"] .fondo::after { content: ""; position: absolute; inset: 0; background: rgba(3, 12, 28, .34); pointer-events: none; }
html.con-fondo-animado[data-tema="dia"] .fondo::after { content: ""; position: absolute; inset: 0; background: rgba(12, 34, 52, .30); pointer-events: none; }
/* Ligereza: un botón dentro de un panel de cristal no necesita volver a desenfocar (el panel ya lo hace) */
html.con-fondo-animado .glass .btn, html.con-fondo-animado .modal .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Barra de velocidad del fondo: llega justo al borde y se rellena hasta el valor */
.campo input.aj-fondo-vel { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; padding: 0; margin: 8px 0 4px; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.aj-fondo-vel::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #7c5cff 0 var(--v, 80%), rgba(120,110,180,.25) var(--v, 80%) 100%); }
.aj-fondo-vel::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(120,110,180,.25); }
.aj-fondo-vel::-moz-range-progress { height: 8px; border-radius: 999px; background: #7c5cff; }
.aj-fondo-vel::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid #7c5cff; box-shadow: 0 2px 6px rgba(30,10,90,.35); }
.aj-fondo-vel::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #7c5cff; }
.aj-fondo-vel:disabled { opacity: .45; cursor: default; }
.aj-fondo-vel:focus-visible { outline: none; }
.aj-fondo-vel:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(124,92,255,.35); }

/* Barra de arriba: buscador más corto y más sitio para la clínica (nombre + logo) */
.top .buscar { flex: 0 1 430px; }
.top .clinica { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--g-txt); overflow: hidden; text-overflow: ellipsis; }
.top .cab-logo { height: 46px; width: auto; margin: 0; border-radius: 10px; padding: 3px; flex: none; }
@media (max-width: 980px) { .top .buscar { flex: 1 1 260px; } .top .clinica { font-size: 15px; } .top .cab-logo { height: 34px; } }
.top .cab-logo { max-width: none; }
.top .cab-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .buscar { min-width: 190px; }
@media (max-width: 1280px) { .top .buscar { flex: 0 1 300px; } }
/* (v2) Buscador hasta la mitad de la pantalla; clínica pegada a la derecha, junto al usuario */
.top .buscar { flex: 0 1 46%; min-width: 220px; }
.top .clinica { flex: 1 1 auto; justify-content: flex-end; font-size: 21px; gap: 12px; margin-right: 6px; }
.top .cab-logo { height: 52px; }
@media (max-width: 1280px) { .top .buscar { flex: 0 1 40%; } .top .clinica { font-size: 17px; } .top .cab-logo { height: 42px; } }
@media (max-width: 980px) { .top .buscar { flex: 1 1 240px; } .top .clinica { font-size: 15px; } .top .cab-logo { height: 34px; } }