/* ImplaScan — interfaz. Misma identidad visual que la portada pública: azul profundo, acento cian, rejilla técnica y resplandores suaves. Tema único y deliberado: un producto clínico gana en reconocimiento si siempre se ve igual. */ :root{ --fondo:#070b14; --fondo-2:#0e1626; --panel:rgba(18,28,46,.72); --panel-solido:#111c2e; --panel-2:rgba(28,42,66,.55); --linea:rgba(120,190,255,.13); --linea-2:rgba(120,190,255,.26); --texto:#e8eef8; --sec:#8899b4; --tenue:#64748b; --acento:#38bdf8; --acento-2:#0ea5e9; --acento-suave:rgba(56,189,248,.13); --ok:#34d399; --ok-suave:rgba(52,211,153,.14); --alerta:#fbbf24; --alerta-suave:rgba(251,191,36,.14); --mal:#f87171; --mal-suave:rgba(248,113,113,.14); --s1:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.28); --s2:0 4px 12px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5); --r:12px; --lateral-w:238px; } *{box-sizing:border-box} /* El atributo `hidden` debe ganar SIEMPRE. Sin esta regla, cualquier selector de ID con `display` (como #puerta{display:grid}) lo anulaba por especificidad, y la puerta de acceso seguía tapando la aplicación ya cargada: se quedaba en "Comprobando sesión" para siempre. */ [hidden]{display:none!important} body{ margin:0; min-height:100vh; color:var(--texto); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; background: radial-gradient(900px 620px at 18% -8%, rgba(56,189,248,.10), transparent 68%), radial-gradient(760px 600px at 96% 104%, rgba(14,165,233,.08), transparent 70%), linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%); background-attachment:fixed; } /* Rejilla técnica de fondo, igual que en la portada. */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55; background-image:linear-gradient(var(--linea) 1px,transparent 1px), linear-gradient(90deg,var(--linea) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 42% 28%, #000 6%, transparent 68%); -webkit-mask-image:radial-gradient(circle at 42% 28%, #000 6%, transparent 68%); } h1,h2,h3{line-height:1.2;margin:0 0 8px;letter-spacing:-.018em;font-weight:650} h1{font-size:1.9rem} h2{font-size:1.45rem;background:linear-gradient(180deg,#fff 34%,#9dc6e8); -webkit-background-clip:text;background-clip:text;color:transparent} h3{font-size:1.02rem;margin:32px 0 12px} a{color:var(--acento);text-decoration:none} a:hover{text-decoration:underline} button,input,select,textarea{font-family:inherit} /* ---------- puerta de acceso ---------- */ #puerta{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px; background: radial-gradient(700px 500px at 50% -5%, rgba(56,189,248,.13), transparent 70%), radial-gradient(600px 500px at 85% 105%, rgba(14,165,233,.09), transparent 70%), linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%)} .puerta-caja{text-align:center;max-width:440px;position:relative;z-index:2} .logo-grande{width:58px;height:auto;color:var(--texto);margin-bottom:16px; filter:drop-shadow(0 0 22px rgba(56,189,248,.35))} .puerta-caja h1{margin-bottom:14px;background:linear-gradient(180deg,#fff 30%,#9dc6e8); -webkit-background-clip:text;background-clip:text;color:transparent} .lema{color:var(--sec);margin:0 0 32px} .nota{color:var(--tenue);font-size:.83rem;margin-top:22px} .girador{width:26px;height:26px;margin:0 auto 14px;border-radius:50%; border:2.5px solid rgba(120,190,255,.2);border-top-color:var(--acento); animation:girar .75s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} #comprobando p{color:var(--tenue);font-size:.9rem} /* ---------- estructura ---------- */ #app{display:flex;min-height:100vh;position:relative;z-index:1} #lateral{width:var(--lateral-w);flex:none;background:rgba(7,11,20,.82); backdrop-filter:blur(14px);border-right:1px solid var(--linea); display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh} #lateral .marca{display:flex;align-items:center;gap:9px;color:#fff;font-weight:650; padding:4px 10px 22px;letter-spacing:-.02em} #lateral .marca svg{width:19px;height:auto;flex:none; filter:drop-shadow(0 0 10px rgba(56,189,248,.45))} #lateral nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto} #lateral nav button{display:flex;align-items:center;gap:10px;width:100%; background:none;border:none;color:var(--sec);padding:9px 11px;border-radius:9px; cursor:pointer;font-size:.9rem;text-align:left;transition:background .15s,color .15s} #lateral nav button:hover{background:var(--panel-2);color:var(--texto)} #lateral nav button.activo{background:var(--acento-suave);color:var(--acento);font-weight:580; box-shadow:inset 2px 0 0 var(--acento)} .ico{width:16px;text-align:center;opacity:.8;flex:none} .cuenta{margin-left:auto;background:var(--acento);color:#04121f;border-radius:20px; padding:1px 7px;font-size:.72rem;font-weight:700} .separador{font-size:.68rem;text-transform:uppercase;letter-spacing:.11em; color:var(--tenue);padding:18px 11px 5px} .pie-lateral{border-top:1px solid var(--linea);padding-top:14px;margin-top:10px} .yo{display:flex;align-items:center;gap:10px;padding:0 4px 12px} .yo-txt{min-width:0;display:flex;flex-direction:column} .yo-txt strong{color:#fff;font-size:.86rem;font-weight:580;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .yo-txt span{font-size:.75rem;color:var(--tenue);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .avatar{width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--acento),var(--acento-2));color:#04121f; display:grid;place-items:center;font-weight:700;font-size:.78rem;flex:none; box-shadow:0 0 16px rgba(56,189,248,.3)} .bloque{width:100%;justify-content:center} #contenido{flex:1;min-width:0;padding:32px 34px 80px;max-width:1240px} #menu-movil{display:none;background:var(--panel);border:1px solid var(--linea); border-radius:9px;padding:7px 12px;cursor:pointer;margin-bottom:16px;color:var(--texto)} .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:18px; flex-wrap:wrap;margin-bottom:24px} .ayuda{color:var(--sec);margin:0;max-width:72ch} .pequena{font-size:.84rem} /* ---------- controles ---------- */ .boton{background:linear-gradient(180deg,var(--acento),var(--acento-2));color:#04121f; border:none;padding:10px 19px;border-radius:9px;cursor:pointer;font-weight:650; font-size:.91rem;display:inline-flex;align-items:center;gap:8px;text-decoration:none; transition:filter .15s,transform .08s,box-shadow .15s;box-shadow:0 2px 14px rgba(56,189,248,.22)} .boton:hover{filter:brightness(1.1);box-shadow:0 4px 20px rgba(56,189,248,.34);text-decoration:none} .boton:active{transform:translateY(1px)} .boton.secundario{background:var(--panel-2);color:var(--texto); border:1px solid var(--linea-2);box-shadow:none} .boton.secundario:hover{background:var(--panel);filter:none;box-shadow:none} .boton.grande{padding:13px 28px;font-size:.98rem} .boton.mini{padding:4px 11px;font-size:.79rem} .boton:disabled{opacity:.45;cursor:not-allowed} input[type=search],input[type=text],select,textarea{background:rgba(10,16,28,.7); border:1px solid var(--linea-2);color:var(--texto);padding:9px 12px; border-radius:9px;font-size:.9rem} input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px} select option{background:var(--panel-solido);color:var(--texto)} /* ---------- paneles ---------- */ .panel{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--linea); border-radius:var(--r);padding:22px;box-shadow:var(--s1);display:flex; flex-direction:column;gap:15px;margin-bottom:26px} .fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .consent{display:flex;gap:10px;align-items:flex-start;color:var(--sec); font-size:.87rem;cursor:pointer} .consent input{margin-top:3px;flex:none;accent-color:var(--acento)} .zona-soltar{border:2px dashed var(--linea-2);border-radius:var(--r);padding:32px 20px; text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:5px; align-items:center;transition:border-color .15s,background .15s} .zona-soltar:hover,.zona-soltar.encima{border-color:var(--acento);background:var(--acento-suave)} .zona-soltar.pequena-zona{padding:20px} .zona-ico{font-size:1.5rem;color:var(--acento)} /* ---------- rejilla ---------- */ .rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:15px} .caso{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--linea); border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--s1); transition:box-shadow .18s,transform .18s,border-color .18s} .caso:hover{box-shadow:var(--s2);transform:translateY(-3px);border-color:var(--linea-2)} .caso img{width:100%;height:156px;object-fit:contain;background:#05080e;display:block} .caso .pie{padding:11px 13px} .caso .etq{font-weight:570;font-size:.87rem;display:block;margin-bottom:7px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .caso .meta{color:var(--tenue);font-size:.76rem;margin-left:6px} /* ---------- insignias ---------- */ .insignia{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:640} .i-consenso{background:var(--ok-suave);color:var(--ok)} .i-abierto{background:var(--alerta-suave);color:var(--alerta)} .i-discrepancia{background:var(--mal-suave);color:var(--mal)} .i-sin{background:var(--panel-2);color:var(--sec)} .i-admin{background:var(--acento-suave);color:var(--acento)} /* ---------- estadísticas ---------- */ .tarjetas-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); gap:13px;margin-bottom:26px} .stat{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--linea); border-radius:var(--r);padding:15px 17px;box-shadow:var(--s1)} .stat .n{font-size:1.85rem;font-weight:670;display:block;letter-spacing:-.03em; line-height:1.15;background:linear-gradient(180deg,#fff 34%,#9dc6e8); -webkit-background-clip:text;background-clip:text;color:transparent} .stat .t{color:var(--sec);font-size:.78rem;display:block;margin-top:1px} /* ---------- tablas ---------- */ .tabla-envoltorio{background:var(--panel);backdrop-filter:blur(10px); border:1px solid var(--linea);border-radius:var(--r);overflow:auto; box-shadow:var(--s1);max-height:72vh} .tabla{width:100%;border-collapse:collapse;font-size:.88rem;min-width:680px} .tabla th{text-align:left;color:var(--sec);font-weight:620;font-size:.72rem; text-transform:uppercase;letter-spacing:.06em;padding:11px 14px; border-bottom:1px solid var(--linea);background:rgba(10,16,28,.94); position:sticky;top:0;white-space:nowrap;z-index:1} .tabla td{padding:10px 14px;border-bottom:1px solid var(--linea);vertical-align:middle} .tabla tr:last-child td{border-bottom:none} .tabla tbody tr:hover td{background:var(--panel-2)} .num{text-align:right;font-variant-numeric:tabular-nums} .email{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.81rem;color:var(--sec)} .nada{color:var(--tenue)} .sub{display:block;font-size:.76rem;color:var(--tenue)} .herramientas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:15px} .herramientas input[type=search]{min-width:240px;flex:1;max-width:360px} /* ---------- diálogos ---------- */ dialog{background:var(--panel-solido);color:var(--texto);border:1px solid var(--linea-2); border-radius:16px;padding:26px;max-width:540px;width:calc(100% - 32px);box-shadow:var(--s2)} dialog::backdrop{background:rgba(4,8,16,.76);backdrop-filter:blur(3px)} dialog form{display:flex;flex-direction:column;gap:14px} dialog img{max-height:236px;width:100%;object-fit:contain;background:#05080e;border-radius:10px} dialog label{display:flex;flex-direction:column;gap:6px;font-size:.85rem; color:var(--sec);font-weight:540} dialog label.consent{flex-direction:row} .ficha{background:rgba(10,16,28,.6);border:1px solid var(--linea);border-radius:10px; padding:13px 15px;font-size:.88rem} .ficha div{display:flex;justify-content:space-between;gap:16px;padding:3px 0} .ficha span:first-child{color:var(--sec)} .sugerencias{display:flex;flex-direction:column;gap:7px} .sug{display:flex;justify-content:space-between;align-items:center;gap:12px; background:var(--panel-2);border:1px solid var(--linea);border-radius:9px; padding:10px 13px;cursor:pointer;font-size:.88rem;transition:border-color .15s} .sug:hover{border-color:var(--acento)} .sug .pct{color:var(--acento);font-variant-numeric:tabular-nums;font-weight:640} .resultados{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:2px} .resultados div{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.88rem} .resultados div:hover{background:var(--panel-2)} .elegido{background:var(--acento-suave);color:var(--acento);border-radius:9px; padding:10px 13px;font-size:.88rem;font-weight:570;margin:0} .acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:4px} /* ---------- varios ---------- */ .vacio{color:var(--tenue);text-align:center;padding:54px 20px;background:var(--panel); border:1px dashed var(--linea-2);border-radius:var(--r)} .error{color:var(--mal)} .aviso{color:var(--sec);font-size:.86rem;margin-top:22px; border-left:3px solid var(--alerta);padding-left:14px} .progreso{height:4px;background:rgba(255,255,255,.07);border-radius:4px; overflow:hidden;flex:1;min-width:120px} .progreso i{display:block;height:100%; background:linear-gradient(90deg,var(--acento),var(--acento-2)); width:0;transition:width .3s} .cargando{color:var(--tenue);padding:26px;text-align:center} .esqueleto{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r); height:210px;animation:latir 1.4s ease-in-out infinite} @keyframes latir{0%,100%{opacity:1}50%{opacity:.45}} #avisos{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column; gap:9px;z-index:200;max-width:330px} .toast{background:var(--panel-solido);border:1px solid var(--linea-2); border-left:3px solid var(--acento);border-radius:10px;padding:12px 15px; box-shadow:var(--s2);font-size:.88rem;animation:entrar .22s ease} .toast.mal{border-left-color:var(--mal)} .toast.ok{border-left-color:var(--ok)} @keyframes entrar{from{opacity:0;transform:translateX(14px)}} @media (max-width:860px){ #lateral{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%); transition:transform .22s;box-shadow:var(--s2);background:rgba(7,11,20,.97)} #lateral.abierto{transform:none} #contenido{padding:20px 16px 70px} #menu-movil{display:block} .rejilla{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:12px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .enlace-clave{background:rgba(10,16,28,.7);border:1px solid var(--linea); border-radius:9px;padding:11px 13px;font-family:ui-monospace,Menlo,monospace; font-size:.76rem;word-break:break-all;color:var(--acento)} /* ---------- selector de idioma ---------- */ /* Fijo arriba a la derecha en las páginas públicas; dentro de la aplicación se integra en la cabecera. Las banderas son emoji: sin imágenes que cargar y se ven igual en cualquier sistema. */ .selector-idioma{position:fixed;top:12px;right:12px;z-index:150;display:flex;gap:2px; background:rgba(7,11,20,.82);backdrop-filter:blur(10px); border:1px solid var(--linea);border-radius:22px;padding:3px} .selector-idioma button{background:none;border:none;cursor:pointer;font-size:1.05rem; line-height:1;padding:5px 7px;border-radius:18px;opacity:.5;transition:opacity .15s,background .15s} .selector-idioma button:hover{opacity:.9} .selector-idioma button.activo{opacity:1;background:var(--acento-suave)} /* Dentro de la aplicación va en el flujo de la barra lateral, no flotando. */ #lateral .selector-idioma{position:static;justify-content:center;margin-bottom:10px; background:none;border:none;backdrop-filter:none} @media (max-width:640px){ .selector-idioma{top:8px;right:8px;padding:2px} .selector-idioma button{font-size:.98rem;padding:4px 5px} } /* ===== revisar la entrada de DICOM ===== Rejilla de miniaturas. Son miles, y se revisan sobre todo desde el móvil: todo lo de aquí está pensado para el pulgar, no para el ratón. */ .rejilla-revision{ display:grid; /* auto-fill + minmax: 2 columnas en un móvil estrecho, 8 en un portátil, sin una sola media query. El mínimo de 108px es el ancho al que todavía se distingue un implante de una muela empastada. */ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px;margin:14px 0} .rx-mini{ position:relative;display:block;cursor:pointer;border-radius:10px; overflow:hidden;background:var(--panel-2); border:2px solid transparent; /* Reservar la proporción antes de que cargue la imagen: sin esto, la rejilla da saltos según van llegando cientos de miniaturas y se marca la que no era. */ aspect-ratio:1; -webkit-tap-highlight-color:transparent} .rx-mini img{width:100%;height:100%;object-fit:cover;display:block} .rx-mini.elegida{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-suave)} .rx-mini .tic{ position:absolute;top:5px;right:5px;width:23px;height:23px;border-radius:50%; display:grid;place-items:center;font-size:.78rem;font-weight:700; background:rgba(4,8,16,.72);color:transparent;border:1.5px solid var(--linea-2); transition:color .12s,background .12s} .rx-mini.elegida .tic{background:var(--ok);color:#052018;border-color:var(--ok)} /* "Faltan implantes": abre esa radiografía en la pantalla de marcar para añadir lo que el detector no vio. Arriba a la IZQUIERDA, lejos del tic de seleccionar, que está a la derecha: son acciones opuestas y tocar una queriendo la otra cuesta deshacerlo. */ .rx-mini .completar{ position:absolute;top:5px;left:5px;z-index:2; font:inherit;font-size:.68rem;line-height:1;padding:5px 8px;border-radius:7px; background:rgba(4,8,16,.78);color:var(--sec);border:1.5px solid var(--linea-2); cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s} /* En el móvil no hay hover: siempre visible, pero discreto. */ .rx-mini .completar:focus-visible, .rx-mini:hover .completar{opacity:1} @media (hover:none){.rx-mini .completar{opacity:.85}} .rx-mini .completar:hover{color:var(--acento);border-color:var(--acento)} /* Una caja que ya estaba guardada, al entrar a completar una radiografía: se ve puesta pero sin la ✕, porque desde ahí solo se añade. */ .rc-caja.guardada{ border-style:solid;border-color:var(--ok); background:rgba(60,200,140,.14)} .rx-mini .rx-pie{ position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:.66rem; color:#cfe0f5;background:linear-gradient(transparent,rgba(4,8,16,.86))} .barra-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .barra-filtros select{flex:1 1 150px} /* Barra fija abajo: en el móvil queda bajo el pulgar. Si estuviera arriba habría que subir a buscarla después de cada tanda de marcado. */ .barra-accion{ position:sticky;bottom:0;z-index:20; display:flex;gap:8px;align-items:center;flex-wrap:wrap; padding:10px 12px;margin-top:10px;border-radius:12px; background:var(--panel-solido);border:1px solid var(--linea-2); box-shadow:0 -6px 22px rgba(0,0,0,.4)} .barra-accion span{font-size:.85rem;color:var(--sec);margin-right:auto} .aviso-medido{border-left:3px solid var(--acento);margin-top:12px} .aviso-medido p{margin:6px 0 0;color:var(--sec);font-size:.86rem;line-height:1.5} .chip{ margin-left:auto;padding:1px 7px;border-radius:999px;font-size:.7rem; font-weight:700;background:var(--acento);color:#04121d} .centrado{text-align:center;margin:10px 0} .acciones-cab{display:flex;gap:8px;align-items:center} /* ===== puerta: formulario de correo y contraseña ===== */ .separador-o{ display:flex;align-items:center;gap:12px; margin:18px 0 14px;color:var(--tenue);font-size:.8rem} .separador-o::before,.separador-o::after{ content:"";flex:1;height:1px;background:var(--linea)} #form-acceso{display:flex;flex-direction:column;gap:9px;text-align:left} #form-acceso input{ width:100%; /* 16px exactos: por debajo de eso, Safari en iPhone hace zoom al enfocar el campo y deja la pantalla descuadrada. No es un capricho de tamaño. */ font-size:16px; padding:11px 13px;border-radius:10px; background:rgba(10,16,28,.7);border:1px solid var(--linea-2);color:var(--texto)} #form-acceso input:focus{ outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(56,189,248,.16)} #form-acceso input::placeholder{color:var(--tenue)} #acc-extra{display:flex;flex-direction:column;gap:9px} #acc-enviar{margin-top:5px;justify-content:center} #acc-cambiar{color:var(--acento);text-decoration:none} #acc-cambiar:hover{text-decoration:underline} /* Cuando el acceso falla porque la cuenta no existe, se señala la salida en vez de dejar a la persona releyendo el mismo error. */ #acc-cambiar.resaltado{ background:var(--acento);color:#04121d;padding:4px 10px;border-radius:999px; text-decoration:none;font-weight:600} /* ===== visor a pantalla completa y zoom de la rejilla ===== */ /* Tres densidades. El mínimo cambia, pero sigue siendo auto-fill: en un móvil el "grande" da una sola columna y en un portátil tres o cuatro, sin media queries y sin que nunca se salga de la pantalla. */ .rejilla-revision[data-zoom="1"]{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))} .rejilla-revision[data-zoom="2"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .rejilla-revision[data-zoom="3"]{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} /* Con las grandes deja de tener sentido recortar a cuadrado: una panorámica es muy apaisada y el recorte se comía las dos arcadas. */ .rejilla-revision[data-zoom="3"] .rx-mini{aspect-ratio:auto} .rejilla-revision[data-zoom="3"] .rx-mini img{height:auto;object-fit:contain} .zoom-rejilla{display:flex;gap:2px;background:var(--panel-2);border-radius:9px;padding:3px} .zoom-rejilla button{ background:none;border:0;color:var(--tenue);cursor:pointer; padding:6px 10px;border-radius:7px;font-size:.78rem;letter-spacing:-2px} .zoom-rejilla button.activo{background:var(--acento);color:#04121d} /* La lupa: 34px de lado, que es el mínimo con el que un dedo acierta sin seleccionar la tarjeta por error. */ .rx-mini .lupa{ position:absolute;top:4px;left:4px;width:34px;height:34px;border-radius:9px; border:0;cursor:pointer;font-size:.9rem; background:rgba(4,8,16,.62);color:#cfe0f5; display:grid;place-items:center;opacity:.75} .rx-mini .lupa:hover{opacity:1;background:rgba(4,8,16,.85)} /* Ya revisada: se apaga pero no desaparece, para no perder el sitio. */ .rx-mini.resuelta{opacity:.32;filter:grayscale(1)} #visor{ position:fixed;inset:0;z-index:60;background:#05080f; display:flex;flex-direction:column} .visor-cab{ display:flex;align-items:center;gap:12px;padding:10px 14px; border-bottom:1px solid var(--linea);color:var(--sec);font-size:.84rem} .visor-cab span{margin-right:auto} .visor-cab button{ background:none;border:0;color:var(--texto);font-size:1.3rem;cursor:pointer; width:40px;height:40px;border-radius:9px} .visor-cab button:hover{background:var(--panel-2)} .visor-imagen{ flex:1;position:relative;display:grid;place-items:center; padding:8px;min-height:0} .visor-imagen img{ max-width:100%;max-height:100%;object-fit:contain; /* Fondo claro detrás: una radiografía sobre negro puro pierde las zonas oscuras, que es donde está el hueso alrededor del implante. */ background:#0b1220;border-radius:8px} #visor-cargando{ position:absolute;color:var(--sec);font-size:.88rem; background:var(--panel-solido);padding:10px 18px;border-radius:10px} .visor-imagen > button{ position:absolute;top:50%;transform:translateY(-50%); width:46px;height:70px;border:0;border-radius:10px;cursor:pointer; background:rgba(10,18,32,.72);color:var(--texto);font-size:1.7rem;line-height:1} .visor-imagen > button:hover{background:rgba(20,34,58,.9)} #visor-antes{left:6px} #visor-despues{right:6px} .visor-pie{ display:flex;gap:10px;justify-content:center;padding:12px; border-top:1px solid var(--linea); /* En el iPhone, el borde inferior de la pantalla lo tapa la barra del sistema: sin esto los botones quedan justo debajo y no se pueden pulsar. */ padding-bottom:calc(12px + env(safe-area-inset-bottom))} .visor-pie .boton{flex:1;max-width:240px;justify-content:center} @media (max-width:560px){ .visor-imagen > button{width:38px;height:56px;font-size:1.3rem;opacity:.55} } /* El cribado es una página aparte, así que en el menú va un enlace y no un botón de vista. Se le da el mismo aspecto para que no desentone. */ #lateral nav .enlace-nav{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 12px;border-radius:10px;color:var(--sec); text-decoration:none;font-size:.9rem;font-family:inherit;text-align:left} #lateral nav .enlace-nav:hover{background:var(--panel-2);color:var(--texto)} /* Llamada al cribado en la primera pantalla. */ .tarjeta-cribar{ display:flex;align-items:center;gap:14px;margin-bottom:16px; padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--texto); background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(14,165,233,.07)); border:1px solid var(--linea-2)} .tarjeta-cribar:hover{border-color:var(--acento)} .tc-ico{ font-size:1.5rem;color:var(--acento);flex:none;width:48px;height:48px; display:grid;place-items:center;border-radius:12px;background:rgba(56,189,248,.14)} .tc-texto{display:flex;flex-direction:column;gap:2px;min-width:0} .tc-texto b{font-size:.98rem} .tc-texto small{color:var(--sec);font-size:.8rem;line-height:1.45} .tc-cuenta{ margin-left:auto;flex:none;color:var(--acento);font-weight:700;font-size:.85rem; text-align:right;line-height:1.2} #lateral nav .enlace-nav.destacado{color:var(--texto)} #lateral nav .enlace-nav.destacado .ico{color:var(--acento)} /* Encabezado de las tres formas de ayudar, dentro de la aplicación. */ .cab-ayuda{margin-bottom:14px} .cab-ayuda h2{margin:0 0 4px;font-size:1.15rem} .cab-ayuda .ayuda{margin:0;max-width:640px} /* El número, en vez del icono: el orden de los tres pasos significa algo. */ .tc-ico b{font-size:1.25rem;font-weight:800} /* ===== mensajes de contacto ===== */ .contacto{background:var(--panel);border:1px solid var(--linea);border-radius:12px; padding:16px 18px;margin-bottom:10px} .contacto.atendido{opacity:.5} .ct-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px} .ct-cab b{font-size:.98rem} .ct-cab a{color:var(--acento);text-decoration:none;font-size:.88rem} .ct-dato{color:var(--sec);font-size:.85rem} /* Cuántas radiografías dice tener: es el dato que decide si esto merece una llamada hoy o un correo la semana que viene. Por eso va destacado. */ .ct-cuantas{background:rgba(52,211,153,.14);color:var(--ok);padding:2px 9px; border-radius:999px;font-size:.78rem;font-weight:600} .ct-fecha{margin-left:auto;color:var(--tenue);font-size:.78rem} .ct-msg{margin:0 0 12px;color:var(--sec);font-size:.9rem;line-height:1.6; white-space:pre-wrap;max-width:78ch} .ct-pie{display:flex;gap:8px;flex-wrap:wrap} .filtro-check{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--sec)} /* La que tiene el foco del teclado. Anillo por FUERA del borde, para que no se confunda con el verde de "elegida": son dos cosas distintas y a la vez —puedes tener el foco en una sin haberla seleccionado. */ .rx-mini:focus{outline:none} .rx-mini:focus-visible,.rx-mini:focus{ box-shadow:0 0 0 2px var(--fondo), 0 0 0 4px var(--acento)} .rx-mini.elegida:focus{ box-shadow:0 0 0 2px var(--fondo), 0 0 0 4px var(--acento), 0 0 0 7px var(--ok-suave)} .atajos{display:flex;gap:6px;flex-wrap:wrap;align-items:center; margin-top:10px;font-size:.78rem;color:var(--tenue)} .atajos kbd{ font-family:inherit;font-size:.74rem;padding:2px 7px;border-radius:6px; background:var(--panel-2);border:1px solid var(--linea-2);color:var(--sec); box-shadow:0 1px 0 var(--linea-2)} /* "No vale" es destructivo en la práctica: saca la radiografía del circuito para siempre. Se distingue de "no lleva implante", que es una respuesta normal, para que no se confundan al ir rápido con el teclado. */ .boton.peligro{background:var(--mal-suave);color:var(--mal); border:1px solid rgba(248,113,113,.35)} .boton.peligro:hover{background:rgba(248,113,113,.22)} .rx-mini.invalida{opacity:.3;filter:grayscale(1) contrast(.7)} /* Aviso del cribador. En reposo es una línea gris con su fiabilidad; cuando toca reentrenar, se enciende. Un aviso siempre encendido deja de leerse. */ .aviso-reentrenar{margin-top:12px;font-size:.86rem;color:var(--sec)} .aviso-reentrenar p{margin:4px 0 0;line-height:1.55} .aviso-reentrenar .pequena{font-size:.8rem;color:var(--tenue)} .aviso-reentrenar.toca{ border-left:3px solid var(--acento);background:var(--acento-suave)} .aviso-reentrenar.toca strong{color:var(--acento)} /* Ventana del enlace de recuperación. El enlace va en un textarea y no en un

: así se puede seleccionar y copiar aunque el portapapeles esté vetado, que pasa en bastantes móviles. */ .modal-clave{position:fixed;inset:0;z-index:80;background:rgba(4,8,16,.72); display:grid;place-items:center;padding:20px} .mc-caja{background:var(--panel-solido);border:1px solid var(--linea-2); border-radius:16px;padding:22px;max-width:520px;width:100%; display:flex;flex-direction:column;gap:10px} .mc-caja h3{margin:0;font-size:1.05rem} .mc-caja .ayuda{margin:0} .mc-caja textarea{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px; width:100%;resize:vertical;padding:10px 12px;border-radius:9px; background:rgba(10,16,28,.8);border:1px solid var(--linea-2);color:var(--texto); word-break:break-all} .mc-caja .acciones{display:flex;gap:8px;justify-content:flex-end} .acciones-cribador{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px} .acciones-cribador .pequena{color:var(--tenue)} /* Sugerencia elegida: verde y con marca, para que se vea que SÍ se ha seleccionado. El error de antes venía de que pulsar no cambiaba nada. */ .sug.elegida{border-color:var(--ok);background:var(--ok-suave)} .sug.elegida::after{content:"✓";color:var(--ok);font-weight:700;margin-left:6px} /* La IA propone algo que no está en el catálogo: se avisa antes de pulsar. */ .sug.fuera-catalogo{opacity:.75} .marca-fuera{font-size:.7rem;color:var(--aviso,#fbbf24); background:rgba(251,191,36,.14);padding:1px 7px;border-radius:999px} #dlg-buscar.resaltado{border-color:var(--mal);box-shadow:0 0 0 3px rgba(248,113,113,.2)} /* ---- identificar varias del mismo implante a la vez ---- Mismo lenguaje visual que la selección de "Revisar entrada": borde verde y tic redondo arriba a la derecha. Si seleccionar se marcara distinto en cada pantalla, habría que aprenderlo dos veces. */ .caso{position:relative;border:2px solid transparent} .caso.elegida{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-suave)} /* 34px: el mínimo con el que un dedo acierta el tic sin abrir el caso por error. El mismo número que la lupa de la otra rejilla, y por lo mismo. */ .caso .tic-sel{ position:absolute;top:7px;right:7px;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;font-size:.9rem;font-weight:700;cursor:pointer; background:rgba(4,8,16,.72);color:transparent;border:1.5px solid var(--linea-2); transition:color .12s,background .12s} .caso .tic-sel:hover{color:#8fa6c2;background:rgba(4,8,16,.9)} .caso.elegida .tic-sel{background:var(--ok);color:#052018;border-color:var(--ok)} /* Abajo y pegada: en el móvil queda bajo el pulgar, igual que barra-accion. */ .barra-lote{ position:sticky;bottom:0;z-index:20; display:flex;gap:8px;align-items:center;flex-wrap:wrap; padding:10px 12px;margin-top:12px;border-radius:12px; background:var(--panel-solido);border:1px solid var(--linea-2); box-shadow:0 -6px 22px rgba(0,0,0,.4)} .barra-lote #lote-cuenta{font-size:.85rem;color:var(--sec);margin-right:auto} /* La tira de miniaturas del diálogo: es la comprobación de que todas son de verdad el mismo implante. Con scroll propio para que una selección de sesenta no empuje los botones de guardar fuera de la pantalla. */ .tira-lote{ display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin-bottom:4px; scrollbar-width:thin} .tira-lote img{ height:74px;width:auto;flex:0 0 auto;border-radius:6px; background:#05080e;object-fit:contain;border:1px solid var(--linea)} /* Vuelta a la plataforma desde las pantallas sueltas (jugar, subir). El logo ya estaba ahí y no llevaba a ninguna parte: ahora es el enlace, con un chevrón delante para que se vea que va a algún sitio. Juan, el 2026-09-19: "en la pantalla de decir qué implante es no hay un volver". Se aprovecha el logo en vez de añadir un botón porque esa barra es de una pantalla hecha para ir rápido, y cada elemento nuevo estorba. */ a.marca{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent} a.marca .volver{ font-size:1.35em;line-height:1;opacity:.6;margin-right:1px; transition:opacity .12s,transform .12s} a.marca:hover .volver,a.marca:focus-visible .volver{opacity:1;transform:translateX(-2px)} a.marca:focus-visible{outline:2px solid var(--ok);outline-offset:3px;border-radius:6px} /* Donar el archivo de una clínica. Plegado de serie: la inmensa mayoría sube una radiografía suelta, y un formulario de cinco campos abierto delante convierte "aportar" en "rellenar un formulario". */ .donar{margin-top:18px} .donar > summary{cursor:pointer;list-style:none;padding:2px 0; display:flex;align-items:center;gap:8px} .donar > summary::-webkit-details-marker{display:none} .donar > summary::before{content:'＋';color:var(--acento);font-weight:700} .donar[open] > summary::before{content:'−'} .donar > summary:focus-visible{outline:2px solid var(--acento);outline-offset:3px} /* La cuarta tarjeta es un