/* ASISTENTE CLÍNICO · 00 · TIPOGRAFÍA * Source Sans 3 (SIL Open Font License, public/fuentes/OFL-source-sans-3.txt), servida desde * aquí: la política de contenido solo deja cargar fuentes del propio sitio. Variable: un * archivo cubre todos los pesos. Latin y latin-ext (tildes, ñ, ç, ·). */ @font-face{font-family:"Source Sans 3"; font-style:normal; font-display:swap; font-weight:200 900; src:url(/fuentes/source-sans-3-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Sans 3"; font-style:normal; font-display:swap; font-weight:200 900; src:url(/fuentes/source-sans-3-latin-ext-wght-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ASISTENTE CLÍNICO · 01 · TOKENS (modo día) * * TODO color, radio, sombra y tamaño sale de aquí. Ningún archivo debería escribir un color * a mano: si hace falta uno nuevo, se añade como token. * * El lenguaje: fondo azul muy claro, superficies blancas con borde suave y esquinas amplias, * títulos en azul marino, el marino para la acción principal y un azul medio de acento * (progreso, selección). Los estados (ok, aviso, mal) solo para estados, con texto. * El modo noche está en 02-tokens-noche.css (solo valores) y el servidor lo aplica dos * veces: siguiendo al sistema y forzado con el selector de apariencia. */ :root{ /* Superficies */ --app-fondo:#EEF3F9; /* el fondo de la aplicación */ --superficie:#FFFFFF; /* tarjetas, barra lateral, barra superior */ --superficie-2:#F5F8FC; /* rellenos suaves: buscador, filas al pasar, cabeceras de tabla */ --superficie-3:#E8EFF7; /* seleccionado suave (menú lateral activo) */ --borde:#DCE4EE; --borde-suave:#E9EEF5; --borde-fuerte:#C5D1DF; /* Texto */ --texto:#1D2939; --texto-2:#475467; --texto-3:#667085; --texto-4:#98A2B3; --titulo:#1B365D; /* títulos de página y de bloque */ /* Acción y acento */ --primario:#1E3A63; --primario-hover:#152B4B; --primario-texto:#FFFFFF; --acento:#3A72C0; --acento-fondo:#E4EDF8; --acento-texto:#1E3A63; /* Administración: azul petróleo, distinto del marino del día a día */ --admin:#0E6A78; --admin-fondo:#E2F1F3; --admin-texto:#0B5561; --equipo:var(--admin); /* alias antiguo */ /* Estados: siempre con palabra o icono, nunca solo color */ --ok:#1F8A55; --ok-fondo:#E3F3EA; --ok-texto:#146C41; --aviso:#E08A12; --aviso-fondo:#FDF1E1; --aviso-texto:#9A4A06; --mal:#D93A2B; --mal-fondo:#FDECEA; --mal-texto:#A9241A; /* Especialidades (calendario, gráficas) */ --esp-medica:#3A72C0; --esp-psicologia:#8A63D2; --esp-nutricion:#2E9E6A; --esp-af:#E0852B; /* El widget de pendientes: oscuro en los dos modos */ --pend-fondo:#15294A; --pend-tarjeta:rgba(255,255,255,.07); --pend-borde:rgba(255,255,255,.12); /* Forma */ --r-s:8px; --r-m:10px; --r-l:16px; --r-pill:999px; --sombra-1:0 1px 2px rgba(16,24,40,.05); --sombra-2:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --sombra-3:0 16px 40px rgba(16,24,40,.16), 0 4px 10px rgba(16,24,40,.06); /* Tipografía */ --fuente:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --t-xs:12px; --t-s:13.5px; --t-m:15px; --t-l:17px; --t-xl:20px; --t-2xl:28px; --t-3xl:32px; /* Medidas de la estructura */ --lateral-ancho:264px; --barra-alto:72px; --contenido-max:1240px; color-scheme:light; /* ── ALIAS HEREDADOS: los nombres de antes, apuntando a la paleta nueva. Los usa 50-heredado.css. No usarlos en código nuevo. */ --fondo-app:var(--app-fondo); --papel:var(--superficie); --sup-mudo:var(--superficie-2); --tinta:var(--texto); --tinta-suave:var(--texto-3); --apagado:var(--texto-4); --linea:var(--borde); --linea-suave:var(--borde-suave); --linea-fuerte:var(--borde-fuerte); --enlace:var(--primario); --azul-punto:var(--acento); --azul-hondo:var(--primario); --azul-fondo:var(--acento-fondo); --azul-texto:var(--acento-texto); --ok-punto:var(--ok); --esp-punto:var(--aviso); --esp-fondo:var(--aviso-fondo); --esp-texto:var(--aviso-texto); --mal-punto:var(--mal); --sombra:var(--sombra-1); --sombra-alta:var(--sombra-3); } @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --app-fondo:#0E1624; --superficie:#152033; --superficie-2:#1B2940; --superficie-3:#22344F; --borde:#26364F; --borde-suave:#1F2D44; --borde-fuerte:#344866; --texto:#E6ECF4; --texto-2:#B6C2D2; --texto-3:#8C9AAE; --texto-4:#64748A; --titulo:#DDE7F6; --primario:#4F82D3; --primario-hover:#6B97DE; --primario-texto:#FFFFFF; --acento:#6E9BE0; --acento-fondo:rgba(110,155,224,.16); --acento-texto:#B9D0F2; --admin:#4FB8C6; --admin-fondo:rgba(79,184,198,.14); --admin-texto:#A3DEE6; --ok:#3CB879; --ok-fondo:rgba(60,184,121,.16); --ok-texto:#7FDCAA; --aviso:#F0A23B; --aviso-fondo:rgba(240,162,59,.16); --aviso-texto:#F7C27A; --mal:#F0665A; --mal-fondo:rgba(240,102,90,.16); --mal-texto:#F8A79F; --esp-medica:#6E9BE0; --esp-psicologia:#A88BEA; --esp-nutricion:#4CC08A; --esp-af:#F0A04F; --pend-fondo:#1C3156; --sombra-1:0 1px 2px rgba(0,0,0,.35); --sombra-2:0 1px 3px rgba(0,0,0,.4); --sombra-3:0 16px 40px rgba(0,0,0,.55); color-scheme:dark; } } :root[data-tema="oscuro"]{ --app-fondo:#0E1624; --superficie:#152033; --superficie-2:#1B2940; --superficie-3:#22344F; --borde:#26364F; --borde-suave:#1F2D44; --borde-fuerte:#344866; --texto:#E6ECF4; --texto-2:#B6C2D2; --texto-3:#8C9AAE; --texto-4:#64748A; --titulo:#DDE7F6; --primario:#4F82D3; --primario-hover:#6B97DE; --primario-texto:#FFFFFF; --acento:#6E9BE0; --acento-fondo:rgba(110,155,224,.16); --acento-texto:#B9D0F2; --admin:#4FB8C6; --admin-fondo:rgba(79,184,198,.14); --admin-texto:#A3DEE6; --ok:#3CB879; --ok-fondo:rgba(60,184,121,.16); --ok-texto:#7FDCAA; --aviso:#F0A23B; --aviso-fondo:rgba(240,162,59,.16); --aviso-texto:#F7C27A; --mal:#F0665A; --mal-fondo:rgba(240,102,90,.16); --mal-texto:#F8A79F; --esp-medica:#6E9BE0; --esp-psicologia:#A88BEA; --esp-nutricion:#4CC08A; --esp-af:#F0A04F; --pend-fondo:#1C3156; --sombra-1:0 1px 2px rgba(0,0,0,.35); --sombra-2:0 1px 3px rgba(0,0,0,.4); --sombra-3:0 16px 40px rgba(0,0,0,.55); color-scheme:dark; } /* ASISTENTE CLÍNICO · 10 · BASE: el documento, la tipografía y el foco. */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0; background:var(--app-fondo); color:var(--texto); font:var(--t-m)/1.5 var(--fuente); -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0} a{color:var(--primario)} h1,h2,h3,h4{color:var(--titulo); text-wrap:balance; line-height:1.2} :focus-visible{outline:2px solid var(--acento); outline-offset:2px} ::selection{background:var(--acento-fondo)} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .mono{font-family:var(--mono)} .tenue{color:var(--texto-3)} /* ASISTENTE CLÍNICO · 15 · ESTILOS HEREDADOS DE CADA PÁGINA * * Lo que había antes del sistema de diseño, por páginas y piezas sueltas. Usa los * mismos nombres de color de siempre (--papel, --tinta, --azul-punto…), que en 01-tokens.css * apuntan ya a la paleta nueva: por eso se ve con el diseño nuevo sin tocarlo. Va ANTES de * 20-estructura y 30-componentes, así que lo que estos definen manda. * MIGRAR: cuando se toque una página, su bloque pasa a 40-paginas.css usando los componentes * de 30-componentes.css, y se borra de aquí. No añadir cosas nuevas a este archivo. */ /* ── Las ventanas (enviar un ticket, cambiar la disponibilidad): popover centrado con el fondo oscurecido detrás. */ .modal{width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto; padding:0; border:1px solid var(--linea); border-radius:16px; background:var(--papel); color:var(--tinta); box-shadow:var(--sombra-alta)} .modal::backdrop{background:rgba(16,24,40,.45)} .modal-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 22px 14px; border-bottom:1px solid var(--linea-suave)} .modal-cab h2{margin:0; font-size:18px} .modal-cab p{margin:3px 0 0; font-size:13.5px; color:var(--tinta-suave)} .cerrar{border:0; background:none; font-size:22px; line-height:1; color:var(--tinta-suave); cursor:pointer; padding:2px 6px; border-radius:8px} .cerrar:hover{background:var(--sup-mudo)} .modal-cuerpo{padding:18px 22px} .modal-pie{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; padding:14px 22px 20px; border-top:1px solid var(--linea-suave)} .modal-pie .nota{margin-right:auto; font-size:12.5px; color:var(--tinta-suave)} .campo{display:flex; flex-direction:column; gap:5px; margin:0 0 14px; font-size:13.5px; font-weight:600} .campo input, .campo select, .campo textarea{font:inherit; font-size:14.5px; font-weight:400; padding:9px 11px; border:1px solid var(--linea-fuerte); border-radius:10px; background:var(--papel); color:var(--tinta)} .campo textarea{min-height:110px; resize:vertical} .campo small{font-weight:400; color:var(--tinta-suave)} .fila-campos{display:flex; flex-wrap:wrap; gap:10px} .fila-campos .campo{flex:1; min-width:120px} .marca-caja{display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 14px} /* ── Piezas comunes ── */ .tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:12px; padding:18px 20px; box-shadow:var(--sombra)} .tipos{color:var(--tinta-suave); font-size:13.5px} .tenue{color:var(--tinta-suave)} .chip{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:2px 10px; border-radius:999px; background:var(--sup-mudo); color:var(--tinta-suave); border:1px solid transparent; white-space:nowrap} .chip.ok, .chip.si{background:var(--ok-fondo); color:var(--ok-texto)} .chip.espera, .chip.no{background:var(--esp-fondo); color:var(--esp-texto)} .chip.mal{background:var(--mal-fondo); color:var(--mal-texto)} .chip.neutro{background:var(--sup-mudo); color:var(--tinta-suave)} /* Los botones del panel del MCP: el principal azul y relleno, el resto blanco con borde. */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--azul-punto); border-radius:10px; padding:9px 16px; font:inherit; font-size:14.5px; font-weight:600; background:var(--azul-punto); color:#fff; text-decoration:none; cursor:pointer; min-height:40px} .btn:hover{background:var(--azul-hondo); border-color:var(--azul-hondo)} .mini{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--linea-fuerte); border-radius:10px; padding:8px 14px; font:inherit; font-size:14px; font-weight:500; background:var(--papel); color:var(--tinta); text-decoration:none; cursor:pointer; min-height:40px} .mini:hover{background:var(--sup-mudo)} .btn[disabled], .mini[disabled]{opacity:.5; cursor:not-allowed} .icono{width:18px; height:18px; flex:none} /* ── Entrar ── */ .entrar{max-width:420px; margin:10vh auto 0; text-align:center; background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:32px 28px; box-shadow:var(--sombra)} .entrar h1{margin:0; font-size:24px} .entrar h1 b{color:var(--azul-punto)} .entrar-que{margin:10px 0 22px; color:var(--tinta-suave); font-size:14.5px; line-height:1.55} .entrar-aviso{margin:0 0 18px; padding:10px 12px; border-radius:10px; background:var(--esp-fondo); color:var(--esp-texto); font-size:13.5px; text-align:left} .btn-google{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border:1px solid var(--linea-fuerte); border-radius:10px; background:var(--papel); color:var(--tinta); font-weight:600; font-size:14.5px; text-decoration:none; min-height:44px} .btn-google:hover{background:var(--sup-mudo)} .entrar-pie{margin:16px 0 0; font-size:12.5px; color:var(--tinta-suave)} /* ── EL RECORRIDO DEL PACIENTE ───────────────────────────────────────────────────────── Cuatro zonas: dónde está (las estaciones), ahora (la tarjeta grande), y el paso a paso plegado por fases. Todo con los tokens de la casa, así que el modo noche sale solo. */ .recorrido{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:16px} .recorrido > *{margin:0} .rc-migas{font-size:13.5px} .rc-migas a{color:var(--enlace); text-decoration:none} /* La barra de ejemplos es cosa del diseño, no de la pantalla: pequeña y arriba del todo, para que no empuje lo que sí importa. */ .rc-ejemplos{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13px; padding:8px 12px; border:1px dashed var(--linea-fuerte); border-radius:10px} .rc-ejemplos a{color:var(--enlace)} .rc-ejemplos a.puesta{color:var(--tinta); font-weight:650; text-decoration:none} /* ── 1 · Quién es y dónde está ── */ .rc-quien{padding:20px 22px 22px} .rc-quien-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .rc-quien h1{margin:0; font-size:24px; line-height:1.2} .rc-quien .tipos{margin:4px 0 0} /* Las estaciones: cinco círculos unidos por una línea que se pinta de verde según se avanza. Se leen como el seguimiento de un pedido, que es el recorrido que todo el mundo sabe leer sin que se lo expliquen. */ .rc-estaciones{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr)} .rc-estacion{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; min-width:0} .rc-estacion::after{content:''; position:absolute; top:17px; left:calc(50% + 20px); right:calc(-50% + 20px); height:3px; border-radius:2px; background:var(--linea)} .rc-estacion:last-child::after{display:none} .rc-estacion.tramo-hecho::after{background:var(--ok-punto)} .rc-circulo{width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; background:var(--papel); border:2px solid var(--linea-fuerte); color:var(--tinta-suave); font-variant-numeric:tabular-nums} .rc-est-nombre{font-size:13px; font-weight:600; line-height:1.25; color:var(--tinta-suave); overflow-wrap:anywhere} .rc-est-pie{font-size:12px; color:var(--tinta-suave); font-variant-numeric:tabular-nums} .hecho > .rc-circulo, .hecho > summary > .rc-circulo{background:var(--ok-punto); border-color:var(--ok-punto); color:#fff} .actual > .rc-circulo, .actual > summary > .rc-circulo{background:var(--azul-punto); border-color:var(--azul-punto); color:#fff; box-shadow:0 0 0 5px var(--azul-fondo)} .atascado > .rc-circulo, .atascado > summary > .rc-circulo{background:var(--esp-punto); border-color:var(--esp-punto); color:#fff; box-shadow:0 0 0 5px var(--esp-fondo)} .fallido > .rc-circulo, .fallido > summary > .rc-circulo{background:var(--mal-punto); border-color:var(--mal-punto); color:#fff; box-shadow:0 0 0 5px var(--mal-fondo)} .cerrado > .rc-circulo, .cerrado > summary > .rc-circulo{background:var(--apagado); border-color:var(--apagado); color:#fff} .no_aplica > .rc-circulo, .no_aplica > summary > .rc-circulo{border-style:dashed; color:var(--apagado)} .rc-estacion.hecho .rc-est-nombre{color:var(--tinta)} .rc-estacion.actual .rc-est-nombre, .rc-estacion.atascado .rc-est-nombre, .rc-estacion.fallido .rc-est-nombre, .rc-estacion.cerrado .rc-est-nombre{color:var(--tinta); font-weight:700} .rc-estacion.actual .rc-est-pie{color:var(--azul-texto); font-weight:600} .rc-estacion.atascado .rc-est-pie{color:var(--esp-texto); font-weight:600} .rc-estacion.fallido .rc-est-pie{color:var(--mal-texto); font-weight:600} .rc-estacion.no_aplica .rc-est-nombre{color:var(--apagado)} /* ── 2 · Ahora ── la única tarjeta grande de la página. El color del borde es el estado: azul en marcha, ámbar atascado, rojo fallido, gris cerrado, verde completo. */ .rc-ahora{border:1px solid var(--linea); border-left:6px solid var(--azul-punto); border-radius:14px; padding:20px 22px; background:var(--azul-fondo)} .rc-ahora.atascado{border-left-color:var(--esp-punto); background:var(--esp-fondo)} .rc-ahora.fallido{border-left-color:var(--mal-punto); background:var(--mal-fondo)} .rc-ahora.cerrado{border-left-color:var(--apagado); background:var(--sup-mudo)} .rc-ahora.completo{border-left-color:var(--ok-punto); background:var(--ok-fondo)} .rc-ahora-etq{margin:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--azul-texto)} .rc-ahora.atascado .rc-ahora-etq{color:var(--esp-texto)} .rc-ahora.fallido .rc-ahora-etq{color:var(--mal-texto)} .rc-ahora.cerrado .rc-ahora-etq{color:var(--tinta-suave)} .rc-ahora.completo .rc-ahora-etq{color:var(--ok-texto)} .rc-ahora-titulo{margin:6px 0 0; font-size:24px; line-height:1.25; text-wrap:balance} .rc-ahora-texto{margin:8px 0 0; font-size:15px; max-width:62ch} /* Los tres datos que deciden qué hacer, en grande y con su nombre encima: a quién le toca, cuánto lleva y el plazo. Antes iban en una línea de estadísticas y no los leía nadie. */ .rc-ahora-datos{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:16px 0 0} .rc-ahora-datos > div{background:var(--papel); border:1px solid var(--linea); border-radius:10px; padding:10px 12px; min-width:0} .rc-ahora-datos dt{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave)} .rc-ahora-datos dd{margin:2px 0 0; font-size:17px; font-weight:650; line-height:1.3; overflow-wrap:anywhere} .rc-ahora-ayuda{margin:14px 0 0; max-width:66ch} .rc-ahora-ayuda b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave)} .rc-ahora-ayuda p{margin:3px 0 0; font-size:15.5px; line-height:1.55} .rc-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 0} .rc-acciones button[disabled]{opacity:.55; cursor:not-allowed} .rc-sin-conectar{font-size:12.5px} /* ── 3 · Paso a paso ── */ .rc-detalle-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:8px 0 8px} .rc-detalle-cab h2{margin:0; font-size:17px} .rc-detalle-cab a{font-size:13px; color:var(--enlace)} .rc-fase{border:1px solid var(--linea); border-radius:12px; background:var(--papel); margin:0 0 8px} .rc-fase > summary{list-style:none; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; border-radius:12px} .rc-fase > summary::-webkit-details-marker{display:none} .rc-fase > summary:hover{background:var(--sup-mudo)} .rc-fase > summary:focus-visible{outline:2px solid var(--azul-punto); outline-offset:2px} .rc-fase > summary .rc-circulo{width:28px; height:28px; font-size:12px; box-shadow:none} .rc-fase-nombre{font-weight:650; font-size:15px} .rc-fase-resumen{font-size:13px; color:var(--tinta-suave); text-align:right; font-variant-numeric:tabular-nums} .rc-fase > summary::after{content:'▸'; grid-column:4; color:var(--tinta-suave); transition:transform .15s} .rc-fase[open] > summary::after{transform:rotate(90deg)} .rc-fase > summary{grid-template-columns:auto 1fr auto auto} .rc-fase.pendiente > summary .rc-fase-nombre, .rc-fase.no_aplica > summary .rc-fase-nombre{color:var(--tinta-suave)} .rc-fase.actual{border-color:var(--azul-punto)} .rc-fase.atascado{border-color:var(--esp-punto)} .rc-fase.fallido{border-color:var(--mal-punto)} @media (prefers-reduced-motion: reduce){ .rc-fase > summary::after{transition:none} } /* Los pasos de una fase: un raíl corto y una línea por paso, con el detalle debajo. */ .rc-pasos{list-style:none; margin:0; padding:2px 14px 12px 14px} .rc-paso{position:relative; display:grid; grid-template-columns:24px 1fr auto; align-items:start; gap:12px; padding:8px 0 8px} .rc-paso::before{content:''; position:absolute; left:11px; top:0; bottom:0; width:2px; background:var(--linea)} .rc-paso.hecho::before{background:var(--ok-punto)} .rc-paso:first-child::before{top:14px} .rc-paso:last-child::before{bottom:calc(100% - 14px)} .rc-punto{position:relative; z-index:1; width:24px; height:24px; margin-top:1px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--papel); border:2px solid var(--linea-fuerte); color:var(--tinta-suave); font-variant-numeric:tabular-nums} .rc-paso.hecho .rc-punto{background:var(--ok-punto); border-color:var(--ok-punto); color:#fff} .rc-paso.actual .rc-punto{background:var(--azul-punto); border-color:var(--azul-punto); color:#fff} .rc-paso.atascado .rc-punto{background:var(--esp-punto); border-color:var(--esp-punto); color:#fff} .rc-paso.fallido .rc-punto{background:var(--mal-punto); border-color:var(--mal-punto); color:#fff} .rc-paso.no_aplica .rc-punto{border-style:dashed; color:var(--apagado)} .rc-texto{display:flex; flex-direction:column; gap:1px; min-width:0} .rc-titulo{font-size:15px; line-height:1.35} .rc-sub{font-size:13px; color:var(--tinta-suave); line-height:1.4} .rc-paso.pendiente .rc-titulo{color:var(--tinta-suave)} .rc-paso.no_aplica .rc-titulo{color:var(--apagado); text-decoration:line-through; text-decoration-color:var(--linea-fuerte)} .rc-paso.aqui .rc-titulo{font-weight:700} .rc-aqui{display:inline-block; margin-left:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:1px 7px; border-radius:999px; background:var(--azul-punto); color:#fff; vertical-align:2px} .rc-paso.atascado .rc-aqui{background:var(--esp-punto)} .rc-paso.fallido .rc-aqui{background:var(--mal-punto)} .rc-lado{font-size:12.5px; color:var(--tinta-suave); white-space:nowrap; font-variant-numeric:tabular-nums; padding-top:3px} /* Quién mueve cada paso que falta, en neutro: el color de esta pantalla es del ESTADO (verde hecho, azul en curso, ámbar atascado, rojo fallido). Con un color por persona el médico salía del mismo azul que «en curso» y la paciente del mismo ámbar que «atascado», y ya no se sabía qué quería decir cada color. Lo automático, más apagado, porque no pide nada a nadie. */ .rc-actor{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--sup-mudo); color:var(--tinta)} .rc-actor.sistema{color:var(--tinta-suave); font-weight:500} /* ── La entrada ── */ .rc-buscar{display:flex; gap:8px; margin:14px 0 0; max-width:520px} .rc-buscar input{flex:1; min-width:0; font:inherit; font-size:15px; padding:9px 12px; border:1px solid var(--linea-fuerte); border-radius:10px; background:var(--papel); color:var(--tinta)} .rc-minis{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))} .rc-mini{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--tinta); padding:16px 18px; border-left:5px solid var(--azul-punto)} .rc-mini.atascado{border-left-color:var(--esp-punto)} .rc-mini.fallido{border-left-color:var(--mal-punto)} .rc-mini.completo{border-left-color:var(--ok-punto)} .rc-mini.cerrado{border-left-color:var(--apagado)} .rc-mini-nombre{font-weight:650; font-size:16px; display:flex; align-items:center; gap:8px} .rc-mini-titular{font-size:15px; line-height:1.35; font-weight:600} .rc-mini-pie{font-size:12.5px; color:var(--tinta-suave)} .rc-estaciones.rc-pequenas{margin:6px 0 2px} .rc-estaciones.rc-pequenas .rc-circulo{width:22px; height:22px; font-size:10px; border-width:2px; box-shadow:none} .rc-estaciones.rc-pequenas .rc-estacion::after{top:10px; left:calc(50% + 13px); right:calc(-50% + 13px); height:2px} .rc-estaciones.rc-pequenas .rc-est-nombre{font-size:10.5px; font-weight:500} @media (max-width:560px){ .rc-quien, .rc-ahora{padding:16px} .rc-quien h1, .rc-ahora-titulo{font-size:20px} .rc-circulo{width:30px; height:30px; font-size:12px} .rc-estacion::after{top:14px; left:calc(50% + 17px); right:calc(-50% + 17px)} .rc-est-nombre{font-size:11px} .rc-est-pie{font-size:10.5px} .rc-ahora-datos{grid-template-columns:1fr 1fr} .rc-ahora-datos > div:first-child{grid-column:1 / -1} .rc-fase-resumen{display:none} .rc-paso{grid-template-columns:24px 1fr} .rc-lado{grid-column:2; padding-top:0} } /* Los h2 del admin van en versalitas para los títulos de bloque. Aquí el de «ahora» es una frase que se lee —«plan enviado, falta que lo confirme»— y en mayúsculas a ese tamaño parecía un grito y costaba leerla. */ .rc-ahora-titulo, .rc-detalle-cab h2{text-transform:none; letter-spacing:0} .rc-est-nombre .corto{display:none} .rc-estaciones.rc-pequenas .rc-est-nombre .largo{display:none} .rc-estaciones.rc-pequenas .rc-est-nombre .corto{display:inline} @media (max-width:560px){ .rc-est-nombre .largo{display:none} .rc-est-nombre .corto{display:inline} } /* ── LA PORTADA: agenda, tareas y disponibilidad ──────────────────────────────────────── Tres bloques con la misma forma —título, una línea de resumen y una lista— para que al segundo ya no haya que leer cómo está hecha la página. Una sola columna, sin tarjetas dentro de tarjetas y sin párrafos explicando cada bloque. */ .portada{max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:30px} .saludo h1{margin:0; font-size:26px; line-height:1.2} .saludo p{margin:4px 0 0; color:var(--tinta-suave); display:flex; align-items:center; gap:8px; flex-wrap:wrap} .chip.ejemplo{font-weight:500} .bloque-cab{display:flex; align-items:center; justify-content:space-between; gap:12px} .bloque-cab h2{margin:0; font-size:18px; letter-spacing:-.015em} .bloque-resumen{margin:4px 0 12px; color:var(--tinta-suave); font-size:13.5px} .bloque-resumen b{color:var(--tinta)} .bloque-resumen b.tarde{color:var(--esp-texto)} /* Hoy | Semana: un conmutador de dos posiciones. Son enlaces, no botones: lo que se ve lo decide la dirección, así que se puede compartir y sobrevive a una recarga. */ .conmutador{display:inline-flex; padding:3px; border-radius:10px; background:var(--papel); border:1px solid var(--linea)} .conmutador a{padding:5px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--tinta-suave); text-decoration:none} .conmutador a[aria-current="page"]{background:var(--papel); color:var(--azul-punto); box-shadow:var(--sombra)} .lista{list-style:none; margin:0; padding:0; background:var(--papel); border:1px solid var(--linea); border-radius:12px; overflow:hidden; box-shadow:var(--sombra)} .lista > li{border-top:1px solid var(--linea-suave)} .lista > li:first-child{border-top:0} .vacio{margin:0; padding:14px 16px; color:var(--tinta-suave); background:var(--papel); border:1px solid var(--linea); border-radius:12px} .chip.si{background:var(--ok-fondo); color:var(--ok-texto)} .chip.no{background:var(--esp-fondo); color:var(--esp-texto)} .chip.mal{background:var(--mal-fondo); color:var(--mal-texto)} .chip.neutro{background:var(--sup-mudo); color:var(--tinta-suave)} /* ── 1 · Agenda ── la hora manda, y va sola en su columna para leerla de arriba abajo. */ .ag-cita{display:grid; grid-template-columns:52px minmax(0, 1fr) auto auto; align-items:center; gap:14px; padding:11px 16px; min-height:60px} .ag-hora{font-weight:700; font-size:15px; font-variant-numeric:tabular-nums} .ag-quien{display:flex; flex-direction:column; min-width:0} .ag-nombre{font-weight:600; font-size:15px; color:var(--tinta); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} a.ag-nombre:hover{text-decoration:underline; text-underline-offset:3px} .ag-tipo{font-size:12.5px; color:var(--tinta-suave)} .ag-chips{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px} .ag-accion{display:flex; gap:6px; justify-content:flex-end} .ag-accion .btn, .ag-accion .mini{min-height:34px; padding:6px 12px; font-size:13px} /* Lo que ya pasó se queda, apagado: sirve para ver cómo va el día, no para actuar. */ .ag-cita.pasada .ag-hora, .ag-cita.pasada .ag-quien{opacity:.5} /* La raya de «ahora»: dónde está el día. */ .ag-ahora{display:flex; align-items:center; gap:10px; padding:3px 16px; background:var(--azul-fondo)} .ag-ahora span{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--azul-texto); white-space:nowrap} .ag-ahora::after{content:''; flex:1; height:2px; border-radius:1px; background:var(--azul-punto); opacity:.5} .ag-dia + .ag-dia{margin-top:16px} .ag-dia h3{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:14px} .cuenta{display:inline-flex; min-width:20px; height:20px; padding:0 6px; align-items:center; justify-content:center; border-radius:999px; background:var(--sup-mudo); color:var(--tinta-suave); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums} /* ── 2 · Tareas ── una lista y el orden lo pone la urgencia. Lo que se ha pasado de plazo lleva una marca a la izquierda: pintar la fila entera dejaba de verse con tres. */ .tarea{display:grid; grid-template-columns:150px minmax(0, 1fr) auto auto; align-items:center; gap:14px; padding:11px 16px; min-height:60px} .tarea.tarde{box-shadow:inset 3px 0 0 var(--esp-punto)} .tarea-tipo{font-size:12.5px; font-weight:600; color:var(--tinta-suave)} .tarea-quien{display:flex; flex-direction:column; min-width:0} .tarea-edad{font-size:13px; color:var(--tinta-suave); white-space:nowrap; font-variant-numeric:tabular-nums} .tarea-edad.tarde{color:var(--esp-texto); font-weight:700} /* ── 3 · Disponibilidad ── un día por línea y sus horas libres al lado. */ .huecos .hueco-dia{display:grid; grid-template-columns:110px 1fr; align-items:center; gap:14px; padding:9px 16px} .hueco-fecha{font-size:13.5px; font-weight:600} .hueco-horas{display:flex; flex-wrap:wrap; gap:6px} .hora{font-family:var(--mono); font-size:12.5px; padding:2px 8px; border-radius:6px; border:1px solid var(--linea-fuerte); font-variant-numeric:tabular-nums} .vacio-dia .hueco-fecha{color:var(--tinta-suave); font-weight:500} .aviso{margin:0 0 12px; padding:10px 14px; border-radius:10px; background:var(--esp-fondo); color:var(--esp-texto); font-size:13.5px} @media (max-width:640px){ .portada{gap:26px} .saludo h1{font-size:22px} .ag-cita{grid-template-columns:48px minmax(0, 1fr); row-gap:8px} .ag-chips, .ag-accion{grid-column:2; justify-content:flex-start} .tarea{grid-template-columns:minmax(0, 1fr) auto; row-gap:6px} .tarea-tipo{grid-column:1 / -1} .tarea .ag-accion{grid-column:1 / -1; justify-content:flex-start} .huecos .hueco-dia{grid-template-columns:86px 1fr} } /* ── El selector de profesional (solo quien administra) ── una barra fina arriba del todo, separada del saludo: es una herramienta para elegir, no parte del contenido. */ .selector{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; background:var(--papel); border:1px solid var(--linea); border-radius:12px} .selector label{font-size:13.5px; font-weight:600; color:var(--tinta-suave)} .selector select{flex:1; min-width:220px; font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--linea-fuerte); border-radius:9px; background:var(--papel); color:var(--tinta)} .selector .btn{min-height:38px; padding:8px 18px} .selector-aviso{margin:0; padding:10px 14px; border-radius:10px; background:var(--esp-fondo); color:var(--esp-texto); font-size:13.5px} .saludo .volver{margin-left:4px; font-size:13px} /* El aviso de datos de ejemplo, en una línea y sin gritar: tiene que verse, no tapar. */ .aviso-ejemplo{margin:-14px 0 0; font-size:12.5px; color:var(--tinta-suave)} .aviso-ejemplo b{color:var(--tinta)} @media (max-width:640px){ .selector select{min-width:0; width:100%} .selector .btn{width:100%} } /* ── Retoques al lenguaje del panel del MCP ── */ .bloque-cab h2{display:flex; align-items:center; gap:10px} .h2-icono{width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--azul-fondo); color:var(--azul-punto); flex:none} .bloque-cab .mini{min-height:36px; padding:6px 12px; font-size:13.5px} .bloque-cab .mini .icono{width:16px; height:16px} .bloque-resumen{margin:8px 0 14px} .cuenta{background:var(--azul-fondo); color:var(--azul-texto)} .ag-cita:hover, .tarea:hover{background:var(--linea-suave)} .aviso-ejemplo{margin:-14px 0 0} .saludo h1{font-size:28px} /* ── La ventana de disponibilidad ── */ .modal-ancha{width:min(680px, calc(100vw - 32px))} .modal-seccion{margin:18px 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-suave)} .modal-seccion:first-child{margin-top:0} .habitual{list-style:none; margin:0 0 6px; padding:0; border:1px solid var(--linea); border-radius:12px; overflow:hidden} .habitual li{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--linea-suave)} .habitual li:first-child{border-top:0} .habitual-dia{font-weight:600; font-size:14px} .habitual-franjas{display:flex; flex-wrap:wrap; gap:6px} .franja{display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 10px; border-radius:999px; background:var(--azul-fondo); color:var(--azul-texto); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums} .franja button{border:0; background:none; color:inherit; font-size:15px; line-height:1; padding:0 5px; border-radius:999px; cursor:pointer} .franja button:hover{background:rgba(51,71,219,.12)} .franja button[disabled]{cursor:not-allowed; opacity:.6} .enlace-boton{border:0; background:none; padding:0; font:inherit; font-size:13.5px; font-weight:600; color:var(--enlace); cursor:pointer} .enlace-boton[disabled]{opacity:.55; cursor:not-allowed} @media (max-width:560px){ .habitual li{grid-template-columns:1fr; gap:6px} } /* ── Mi perfil ── */ .migas{margin:0; font-size:14px} .migas a{text-decoration:none} .perfil{padding:24px} .perfil-cab{display:flex; align-items:center; gap:16px} .perfil-cab h1{margin:0; font-size:22px} .perfil-cab .tipos{margin:2px 0 0} .avatar.grande{width:56px; height:56px; font-size:19px} .perfil-datos{margin:22px 0 0; border:1px solid var(--linea); border-radius:12px; overflow:hidden} .perfil-fila{display:grid; grid-template-columns:120px 1fr; gap:14px; padding:12px 16px; border-top:1px solid var(--linea-suave)} .perfil-fila:first-child{border-top:0} .perfil-fila dt{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-suave); padding-top:2px} .perfil-fila dd{margin:0; display:flex; flex-direction:column; gap:3px; font-size:14.5px} .perfil-fila dd small{font-size:12.5px; color:var(--tinta-suave)} @media (max-width:560px){ .perfil-fila{grid-template-columns:1fr; gap:4px} } .perfil-fila dd .chip{align-self:flex-start} /* ── El selector de día y noche, junto al nombre ── */ .barra-derecha{display:flex; align-items:center; gap:10px; min-width:0} .tema{display:inline-flex; padding:3px; border-radius:10px; background:var(--sup-mudo); border:1px solid var(--linea)} .tema a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:28px; border-radius:7px; color:var(--tinta-suave)} .tema a:hover{color:var(--tinta)} .tema a[aria-current]{background:var(--papel); color:var(--azul-punto); box-shadow:var(--sombra)} .tema svg{width:16px; height:16px} @media (max-width:640px){ .tema a{width:28px} } /* ── Primera cita o mantenimiento ── la etiqueta dice cuál es; la primera lleva además una raya azul a la izquierda, para verlas en una lista larga sin leer. */ .tipo-cita{display:inline-flex; align-items:center; padding:1px 8px; border-radius:6px; font-size:11.5px; font-weight:700; letter-spacing:.01em} .tipo-cita.primera{background:var(--azul-fondo); color:var(--azul-texto)} .tipo-cita.seguimiento{background:var(--sup-mudo); color:var(--tinta-suave); border:1px solid var(--linea)} .ag-tipo{display:flex; align-items:center; gap:6px; margin-top:2px} .ag-cita.es-primera{box-shadow:inset 3px 0 0 var(--azul-punto)} .ag-cita.es-primera.pasada{box-shadow:inset 3px 0 0 var(--linea-fuerte)} /* Toda la fila abre la cita: el enlace del nombre se estira por encima; los botones van por encima de él. */ .ag-cita{position:relative} .estirado::after{content:''; position:absolute; inset:0; z-index:0} .ag-accion, .ag-chips{position:relative; z-index:1} .ag-cita:has(.estirado:focus-visible){outline:2px solid var(--azul-punto); outline-offset:-2px} .estirado:focus-visible{outline:none} /* ── La ficha de una cita ── */ .ficha-cita{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; padding:22px 24px} .ficha-cita.es-primera{box-shadow:inset 4px 0 0 var(--azul-punto), var(--sombra)} .ficha-cita-etiquetas{display:flex; gap:8px; align-items:center} .ficha-cita h1{margin:10px 0 4px; font-size:26px} .ficha-cita-cuando{margin:0; color:var(--tinta-suave)} .ficha-cita-cuando b{color:var(--tinta)} .ficha-cita-acciones{display:flex; flex-wrap:wrap; gap:8px} /* ── El calendario de disponibilidad ── */ .modal-calendario{width:min(940px, calc(100vw - 32px))} .form-calendario{counter-reset:dias} .paso-n{display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:50%; margin-right:6px; background:var(--azul-punto); color:#fff; font-size:11px} .modal-seccion .tenue{text-transform:none; letter-spacing:0; font-weight:500} .meses{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px} @media (max-width:760px){ .meses{grid-template-columns:1fr} } .mes{margin:0; padding:10px 12px 12px; border:1px solid var(--linea); border-radius:12px; min-width:0} .mes legend{padding:0 6px; font-weight:700; font-size:14px} .cal-sem, .cal-dias{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; text-align:center} .cal-sem span{font-size:11px; font-weight:700; color:var(--tinta-suave); padding:4px 0} .cal-dia{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; min-height:32px; border-radius:8px; font-size:13.5px; font-variant-numeric:tabular-nums; cursor:pointer; user-select:none} .cal-dia input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer} .cal-dia input:checked{counter-increment:dias} .cal-dia:hover{background:var(--sup-mudo)} .cal-dia.finde{color:var(--tinta-suave)} .cal-dia.hoy span{font-weight:800; color:var(--azul-punto)} .cal-dia.con-huecos::after{content:''; position:absolute; bottom:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--ok-punto)} .cal-dia.pasado{color:var(--apagado); cursor:default; text-decoration:line-through; text-decoration-color:var(--linea-fuerte)} .cal-dia.pasado:hover{background:none} .cal-dia.pasado input{cursor:default} .cal-dia:has(input:checked){background:var(--azul-punto); color:#fff} .cal-dia:has(input:checked) span{color:#fff} .cal-dia:has(input:checked)::after{background:#fff} .cal-dia:has(input:focus-visible){outline:2px solid var(--azul-punto); outline-offset:1px} .cal-leyenda{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 0; font-size:13px; color:var(--tinta-suave)} .punto-huecos{width:7px; height:7px; border-radius:50%; background:var(--ok-punto)} .cal-leyenda .sep{margin:0 4px} .contador-dias::before{content:'Días marcados: ' counter(dias); color:var(--tinta)} /* Qué hacer con los días: dos tarjetas que se eligen. */ .opciones{display:grid; grid-template-columns:1fr 1fr; gap:10px} @media (max-width:560px){ .opciones{grid-template-columns:1fr} } .opcion{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--linea-fuerte); border-radius:12px; cursor:pointer} .opcion input{margin-top:3px; accent-color:var(--azul-punto)} .opcion span{display:flex; flex-direction:column; gap:2px} .opcion small{color:var(--tinta-suave); font-size:12.5px} .opcion:has(input:checked){border-color:var(--azul-punto); background:var(--azul-fondo)} /* Cerrar días no lleva franjas: se esconden. */ .form-calendario:has(input[value="cerrar"]:checked) .franjas{display:none} .franja-fila{display:grid; grid-template-columns:28px 1fr 1fr; align-items:end; gap:10px} .franja-fila .campo{margin-bottom:8px} .franja-n{align-self:center; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--sup-mudo); color:var(--tinta-suave); font-size:12px; font-weight:700; margin-top:14px} /* ── La vista previa ── */ .lista-problemas{margin:14px 0 0; padding:12px 14px 12px 32px; border-radius:10px; background:var(--esp-fondo); color:var(--esp-texto)} .lista-problemas li + li{margin-top:4px} .resumen-previa{margin:16px 0 0; padding:12px 14px; border-radius:10px; background:var(--azul-fondo); color:var(--azul-texto)} .franjas-previa{display:flex; flex-wrap:wrap; gap:6px} .resumen-previa + .perfil-datos .perfil-fila dt{text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--tinta)} /* ── Cargando ── * La página llega en dos tiempos: primero la cabecera y esto, luego el
. En cuanto el *
existe, el aviso se esconde solo. Sin JavaScript. */ .cargando{display:flex; align-items:center; justify-content:center; gap:12px; margin:56px auto; padding:0 16px; color:var(--tinta-suave); font-size:14.5px; font-weight:500} body:has(.contenido) .cargando{display:none} .giro{width:22px; height:22px; flex:none; border-radius:50%; border:3px solid var(--azul-fondo); border-top-color:var(--azul-punto); animation:girar .8s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){ .giro{animation-duration:2.4s} } /* ── Estados que faltaban ── */ .chip.azul{background:var(--azul-fondo); color:var(--azul-texto)} .tipo-cita.otra{background:var(--sup-mudo); color:var(--tinta-suave)} /* El conmutador de la agenda tiene cuatro posiciones: en el móvil, que quepa. */ @media (max-width:640px){ #agenda .bloque-cab{flex-wrap:wrap} #agenda .conmutador{width:100%} #agenda .conmutador a{flex:1; text-align:center; padding:5px 6px} } /* LAS CANCELADAS: una línea baja, en letra pequeña, gris y tachada, con «cancelada» al * final. Se ve que ahí hubo una cita sin que quite sitio a las que siguen en pie. */ .ag-cita.cancelada{grid-template-columns:52px minmax(0, 1fr) auto; min-height:0; padding:5px 16px; gap:14px} .ag-cita.cancelada .ag-hora{font-size:12.5px; font-weight:600} .ag-cita.cancelada .ag-nombre{font-size:12.5px; font-weight:500} .ag-cita.cancelada .ag-hora, .ag-cita.cancelada .ag-nombre{text-decoration:line-through; color:var(--apagado)} .ag-cita.cancelada .ag-quien{opacity:1} .ag-cancelada{font-size:11.5px; color:var(--apagado); white-space:nowrap} @media (max-width:640px){ .ag-cita.cancelada{grid-template-columns:48px minmax(0, 1fr) auto} } .ficha-cita.cancelada h1, .ficha-cita.cancelada .ficha-cita-cuando b{text-decoration:line-through; text-decoration-thickness:2px; color:var(--apagado)} /* Las anteriores, plegadas debajo de «Todo». */ .ag-anteriores{margin-top:18px} .ag-anteriores > summary{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:600; padding:6px 0; list-style:none} .ag-anteriores > summary::-webkit-details-marker{display:none} .ag-anteriores > summary::before{content:'▸'; color:var(--tinta-suave); transition:transform .15s} .ag-anteriores[open] > summary::before{transform:rotate(90deg)} .ag-anteriores[open] > summary{margin-bottom:8px} @media (prefers-reduced-motion: reduce){ .ag-anteriores > summary::before{transition:none} } /* El aviso de «ejemplo» dentro de un bloque. */ .aviso-ejemplo-bloque{margin:0; font-size:12.5px; color:var(--tinta-suave)} .aviso-ejemplo-bloque b{color:var(--tinta)} .bloque-cab .chip.ejemplo{margin-left:auto} /* Sus citas, en la ficha de una cita. */ .hist-cita{display:grid; grid-template-columns:150px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:9px 16px; font-size:14px} .hist-cuando{font-variant-numeric:tabular-nums; font-weight:600} .hist-que{color:var(--tinta-suave); min-width:0} .hist-que b{color:var(--azul-texto)} .hist-cita.esta{background:var(--azul-fondo)} .hist-cita.cancelada .hist-cuando, .hist-cita.cancelada .hist-que{text-decoration:line-through; color:var(--apagado)} .hist-cita.cancelada .chip{background:transparent; border:1px solid var(--linea); color:var(--apagado)} @media (max-width:640px){ .hist-cita{grid-template-columns:minmax(0, 1fr) auto; row-gap:2px} .hist-que{grid-column:1; grid-row:2} .hist-cita .chip{grid-column:2; grid-row:1 / 3} } /* ── Analítica: una ficha por valor ── */ .kpis{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px} .kpi{display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:var(--papel); border:1px solid var(--linea); border-radius:12px} .kpi-nombre{font-size:12.5px; font-weight:600; color:var(--tinta-suave)} .kpi-valor{font-size:22px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums} .kpi-valor small{margin-left:4px; font-size:12px; font-weight:500; color:var(--tinta-suave)} .kpi-pie{font-size:12px; color:var(--tinta-suave); line-height:1.45} .kpi.fuera{border-color:var(--esp-punto); background:var(--esp-fondo)} .kpi.fuera .kpi-pie b, .kpi.fuera .kpi-valor{color:var(--esp-texto)} b.tarde{color:var(--esp-texto)} /* ── Los tests: las respuestas, tal cual ── */ .test + .test{margin-top:14px} .test-titulo{margin:0 0 6px; font-size:14px} .respuestas .perfil-fila dd{white-space:pre-line} .sin-respuesta{margin:8px 0 0; font-size:12.5px; color:var(--tinta-suave)} .sin-respuesta b{color:var(--tinta)} /* ── La consulta ── */ .consulta-acciones{display:flex; flex-wrap:wrap; gap:10px} .consulta-acciones .btn, .consulta-acciones .mini{min-height:44px} .btn .icono, .mini .icono{width:18px; height:18px} .modal-corto{width:min(460px, calc(100vw - 32px))} .aviso.bien{background:var(--ok-fondo); color:var(--ok-texto); border-color:transparent} /* ── La ficha de la cita, en una cabecera ── */ .ficha-datos{display:flex; flex-wrap:wrap; gap:6px 0; margin:10px 0 0; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums} .ficha-datos span + span::before{content:'·'; margin:0 9px; color:var(--apagado); font-weight:400} .ficha-datos span[title]{cursor:help} .ficha-cita .ficha-cita-acciones{margin-top:16px} .preparacion{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--linea-suave)} .prep{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none} .prep .icono{width:14px; height:14px} .prep.si{background:var(--ok-fondo); color:var(--ok-texto)} .prep.si:hover{text-decoration:underline; text-underline-offset:3px} .prep.no{background:var(--sup-mudo); color:var(--tinta-suave)} .prep.no-se{background:var(--esp-fondo); color:var(--esp-texto); font-weight:500} .bloque-fecha{margin-left:auto; font-size:13px} details.sin-respuesta{margin:8px 0 0; font-size:12.5px; color:var(--tinta-suave)} details.sin-respuesta summary{cursor:pointer; width:max-content} details.sin-respuesta p{margin:6px 0 0} .ficha .test-titulo{margin:14px 0 6px} /* Cinco vistas en el conmutador: en el móvil, se reparten el ancho. */ @media (max-width:640px){ #agenda .conmutador a{font-size:12.5px; padding:5px 2px} } .ficha .ficha-cita{display:block} /* Las respuestas de un test: pregunta y respuesta en una línea, sin mayúsculas, compactas. */ .respuestas .perfil-fila{grid-template-columns:minmax(150px, 34%) 1fr; padding:8px 16px; gap:16px} .respuestas .perfil-fila dt{text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--tinta-suave)} .respuestas .perfil-fila dd{font-size:14px} @media (max-width:640px){ .respuestas .perfil-fila{grid-template-columns:1fr; gap:2px} } .ficha .perfil-datos{margin:0; background:var(--papel)} /* En el móvil, «Entrar» a la derecha de la fila, no en una tercera línea. */ @media (max-width:640px){ .ag-cita:not(.cancelada){grid-template-columns:48px minmax(0, 1fr) auto} .ag-cita:not(.cancelada) .ag-chips{grid-column:2} .ag-cita:not(.cancelada) .ag-accion{grid-column:3; grid-row:1 / span 2; align-self:center} } /* ── La llamada de confirmación, en la cabecera ── */ .llamada{margin:12px 0 0; padding:8px 12px; border-radius:10px; font-size:13.5px} .llamada.si{background:var(--ok-fondo); color:var(--ok-texto)} .llamada.no, .llamada.no-se{background:var(--esp-fondo); color:var(--esp-texto)} .llamada.mal{background:var(--mal-fondo); color:var(--mal-texto)} .llamada.neutro{background:var(--sup-mudo); color:var(--tinta-suave)} .ag-alerta{color:var(--mal-texto); font-weight:600; text-decoration:none} /* ── Los cuestionarios de otras áreas, plegados ── */ .plegable{background:var(--papel); border:1px solid var(--linea); border-radius:12px; overflow:hidden} .plegable + .plegable{margin-top:8px} .plegable > summary{cursor:pointer; padding:11px 16px; font-size:14px; list-style:none; display:flex; align-items:center; gap:6px} .plegable > summary::-webkit-details-marker{display:none} .plegable > summary::before{content:'▸'; color:var(--tinta-suave); transition:transform .15s} .plegable[open] > summary::before{transform:rotate(90deg)} .plegable .perfil-datos{border:0; border-top:1px solid var(--linea); border-radius:0} @media (prefers-reduced-motion: reduce){ .plegable > summary::before{transition:none} } /* Los otros informes de la ficha: el cuerpo, debajo del título; el texto libre, con sus saltos de línea. */ .plegable-cuerpo .sin-respuesta{margin:0; padding:8px 16px 12px} .informe-texto{margin:0; padding:12px 16px; border-top:1px solid var(--linea); font-size:14px; white-space:pre-line} .plegable-cuerpo > .vacio{margin:0; padding:12px 16px; border-top:1px solid var(--linea)} /* ── Los botones, otra vez al final ── */ .ficha-final{padding-top:4px} .ficha-final .ficha-cita-acciones{margin:0} .ficha .test + .test{margin-top:18px} .ficha .test-titulo{margin:0 0 8px} /* En «Pasadas» todo ha pasado: no se atenúa, que se lea igual de bien. */ .ag-pasadas .ag-cita.pasada .ag-hora, .ag-pasadas .ag-cita.pasada .ag-quien{opacity:1} /* Seis vistas: si en un móvil estrecho no caben, el conmutador se desliza de lado. */ #agenda .conmutador{max-width:100%; overflow-x:auto; scrollbar-width:none} #agenda .conmutador a{white-space:nowrap} /* ── El cierre de una cita ── */ .opciones-cierre{display:grid; gap:10px; grid-template-columns:1fr} .opciones-cierre .opcion{padding:14px 16px} .opciones-cierre .opcion:has(input:checked){border-color:var(--azul-punto); background:var(--azul-fondo)} .aviso.debug{background:var(--azul-fondo); color:var(--azul-texto)} /* Los tres pasos del plan */ .pasos-plan{display:flex; gap:8px; list-style:none; margin:0 0 16px; padding:0; flex-wrap:wrap} .pasos-plan li{display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--papel); border:1px solid var(--linea); font-size:13.5px; color:var(--tinta-suave)} .pasos-plan li span{display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; background:var(--sup-mudo); font-size:12px; font-weight:700} .pasos-plan li[aria-current="step"]{border-color:var(--azul-punto); color:var(--tinta); font-weight:600} .pasos-plan li[aria-current="step"] span{background:var(--azul-punto); color:#fff} .pasos-plan li.hecho span{background:var(--ok-fondo); color:var(--ok-texto)} .notas{margin:0 0 14px; padding-left:22px; display:flex; flex-direction:column; gap:8px} .notas li{padding:8px 12px; background:var(--sup-mudo); border-radius:10px; font-size:14px} .notas li span{white-space:pre-line} .notas li .enlace-boton{margin-left:8px; font-size:12.5px} /* El formulario del plan, con las secciones del del clínico */ .plan-form{display:flex; flex-direction:column; gap:12px} .plan-form h2{margin:12px 0 0; padding-bottom:6px; font-size:17px; border-bottom:1px solid var(--linea)} .plan-form h2:first-of-type{margin-top:0} .plan-form .campo{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600} .plan-form .campo small{font-weight:400; color:var(--tinta-suave)} .plan-form textarea, .plan-form input[type="number"], .plan-form select{font:inherit; font-weight:400; font-size:14.5px; padding:9px 11px; border:1px solid var(--linea-fuerte); border-radius:10px; background:var(--papel); color:var(--tinta); width:100%} .plan-form textarea{resize:vertical; min-height:60px} .rejilla-cifras{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px} @media (max-width:640px){ .rejilla-cifras{grid-template-columns:repeat(2, minmax(0, 1fr))} } .plan-form fieldset.campo{border:0; margin:0; padding:0} .plan-form legend{font-weight:600; font-size:13.5px; margin-bottom:6px} .check{display:flex; align-items:flex-start; gap:9px; padding:5px 0; font-weight:400; font-size:14px; cursor:pointer} .check input{margin-top:3px; accent-color:var(--azul-punto)} .dos-columnas{display:grid; grid-template-columns:1fr 1fr; gap:0 18px} @media (max-width:640px){ .dos-columnas{grid-template-columns:1fr} } .oblig{color:var(--mal-texto)} .payload{margin:12px 0 0; padding:12px; border-radius:10px; background:var(--sup-mudo); font:12.5px/1.5 var(--mono); overflow-x:auto; max-height:420px} #notas-cita .campo{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600} #notas-cita textarea{font:inherit; font-weight:400; font-size:14.5px; padding:10px 12px; border:1px solid var(--linea-fuerte); border-radius:10px; background:var(--papel); color:var(--tinta); resize:vertical} .plan-form .campo, #notas-cita .campo{margin:0} .plan-form .campo textarea{min-height:60px} /* ── Siguientes pasos de una paciente interesada ── */ .pasos-siguientes .paso-sig{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px} .paso-sig-que{display:flex; flex-direction:column; gap:2px; min-width:0} .paso-sig-que small{font-size:13px; color:var(--tinta-suave)} .paso-sig.hecho .paso-sig-que small{color:var(--ok-texto)} .paso-sig.plan{background:var(--azul-fondo)} .paso-sig .btn, .paso-sig .mini{flex:none} @media (max-width:560px){ .pasos-siguientes .paso-sig{flex-direction:column; align-items:stretch} } /* Toda su información, plegada */ .toda-info > summary{padding:13px 16px} .toda-info-cuerpo{padding:4px 16px 16px; display:flex; flex-direction:column; gap:20px} /* ── Disponibilidad: el calendario de tres meses ── */ .dc-calendario{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px} @media (max-width:900px){ .dc-calendario{grid-template-columns:1fr} } .dc-mes{background:var(--papel); border:1px solid var(--linea); border-radius:12px; padding:12px} .dc-mes h3{margin:0 0 8px; font-size:14px} .dc-sem, .dc-dias{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px} .dc-sem span{font-size:11px; font-weight:700; color:var(--apagado); text-align:center; padding-bottom:2px} .dc-dia{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px; min-height:46px; padding:4px 2px; border-radius:8px; text-decoration:none; color:var(--tinta); border:1px solid transparent} .dc-dia:hover{background:var(--linea-suave)} .dc-num{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums} .dc-dia.pasado{color:var(--apagado)} .dc-dia.pasado .dc-num{font-weight:500} .dc-dia.hoy .dc-num{color:var(--azul-punto)} .dc-dia.hoy{border-color:var(--azul-punto)} .dc-dia.elegido{background:var(--azul-fondo); border-color:var(--azul-punto)} .dc-dia:focus-visible{outline:2px solid var(--azul-punto); outline-offset:1px} /* Con citas: un número en un círculo arriba a la derecha. */ .dc-citas{position:absolute; top:2px; right:3px; min-width:15px; height:15px; padding:0 4px; border-radius:999px; background:var(--azul-punto); color:#fff; font-size:10px; font-weight:700; line-height:15px; text-align:center} /* Horas libres: debajo del número, en verde. */ .dc-libre{font-size:10.5px; font-weight:600; color:var(--ok-texto); background:var(--ok-fondo); border-radius:5px; padding:0 4px; white-space:nowrap} .dc-muestra{position:static; display:inline-block} .dc-detalle{margin-top:16px} .dc-detalle h3{margin:0 0 2px; font-size:16px} .dc-franja{display:grid; grid-template-columns:110px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 16px; font-size:14px} .dc-hora{font-weight:700; font-variant-numeric:tabular-nums} .dc-que{display:flex; align-items:center; gap:8px; min-width:0} .dc-que a{color:var(--tinta); font-weight:600; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .dc-que a:hover{text-decoration:underline} .dc-franja.libre{background:var(--ok-fondo)} .dc-franja.libre .dc-que{color:var(--ok-texto); font-weight:600} .dc-dur{font-size:12.5px; color:var(--ok-texto)} .dc-franja.cancelada .dc-hora, .dc-franja.cancelada .dc-que a{text-decoration:line-through; color:var(--apagado); font-weight:500} @media (max-width:560px){ .dc-franja{grid-template-columns:90px minmax(0, 1fr); row-gap:4px} .dc-franja > :last-child{grid-column:2} } /* ── Citas por cerrar, al final de las tareas ── */ .por-cerrar{margin-top:16px} .por-cerrar h3{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; font-size:14.5px} .por-cerrar h3 .tenue{font-weight:400; font-size:12.5px} /* ── El plan: paso 1 y revisión ── */ .plan-paso1, .plan-revision{display:flex; flex-direction:column; gap:14px} .opciones-plantilla{grid-template-columns:repeat(2, minmax(0, 1fr))} @media (max-width:640px){ .opciones-plantilla{grid-template-columns:1fr} } .pie-paso{align-items:center; gap:14px} .pie-paso .tenue{font-size:12.5px} .rev-titulo{margin:16px 0 6px; font-size:14px; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.05em} .plan-revision .perfil-datos{margin:0} .plan-revision .perfil-fila{grid-template-columns:minmax(140px, 30%) 1fr} .plan-revision .perfil-fila dd{white-space:pre-line} .perfil-fila.falta{background:var(--mal-fondo)} .articulos{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; padding:6px 16px 12px; border-top:1px solid var(--linea)} @media (max-width:640px){ .articulos{grid-template-columns:1fr} } /* El número de citas, debajo del día, como las horas libres: arriba a la derecha pisaba el número. */ .dc-dia .dc-citas{position:static; display:inline-block; min-width:16px; height:16px; line-height:16px; font-size:10px} .dc-dia{gap:2px} /* ── Disponibilidades ── */ .disp-filtros{display:flex; flex-wrap:wrap; gap:10px} .disp-filtros .conmutador{max-width:100%; overflow-x:auto; scrollbar-width:none} .disp-filtros .conmutador a{white-space:nowrap} .aviso-fuerte{padding:14px 18px; border-radius:12px; background:var(--esp-fondo); color:var(--esp-texto); border:1px solid var(--esp-punto)} .aviso-fuerte h2{margin:0 0 6px; font-size:16px} .aviso-fuerte ul{margin:0 0 6px; padding-left:20px} .aviso-fuerte p{margin:6px 0 0} .aviso-fuerte .tenue{color:var(--esp-texto); opacity:.8; font-size:13px} .tabla-envoltorio{overflow-x:auto; background:var(--papel); border:1px solid var(--linea); border-radius:12px} .tabla-semanas{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums} .tabla-semanas th, .tabla-semanas td{padding:9px 12px; text-align:right; border-top:1px solid var(--linea-suave); white-space:nowrap} .tabla-semanas thead th{border-top:0; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave)} .tabla-semanas th[scope="row"], .tabla-semanas thead th:first-child{text-align:left; font-weight:500} .tabla-semanas tr.pasada{color:var(--tinta-suave)} .tabla-semanas tr.actual{background:var(--azul-fondo)} .col-barra{width:30%; min-width:120px} .reparto{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--sup-mudo)} .b-primera{background:var(--azul-punto)} .b-mant{background:var(--ok-punto)} .b-otra{background:var(--linea-fuerte)} .b-muestra{display:inline-block; width:12px; height:10px; border-radius:3px; vertical-align:middle} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .dc-calendario.seis{grid-template-columns:repeat(3, minmax(0, 1fr))} @media (max-width:900px){ .dc-calendario.seis{grid-template-columns:1fr} } .dc-dia.sin-ranuras{background:var(--esp-fondo)} .dc-dia.sin-ranuras.elegido{background:var(--azul-fondo)} .dc-muestra-sin{display:inline-block; width:14px; height:12px; border-radius:4px; background:var(--esp-fondo); border:1px solid var(--esp-punto); vertical-align:middle} .disp-dia{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px} @media (max-width:900px){ .disp-dia{grid-template-columns:1fr} } .disp-dia h4{margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave)} .disp-prof{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; padding:10px 14px} .disp-prof-nombre{display:flex; flex-direction:column} .disp-prof-nombre small{font-size:12px; color:var(--tinta-suave)} @media (max-width:560px){ .disp-prof{grid-template-columns:1fr} } /* ── Entrar: la foto de la consulta de fondo y la tarjeta encima ── * La foto tiene la escena a la derecha (médico y paciente frente al «Senda Health» de la * pared) y la izquierda lisa: la tarjeta va a la izquierda, sobre la pared, y no tapa a nadie. * Un velo del color del fondo, más denso en la izquierda, mantiene el texto legible en los * dos temas. */ .pagina-entrar{min-height:100vh; background:var(--fondo-app) url(/img/entrar.jpg) center right / cover no-repeat fixed} .pagina-entrar::before{content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--fondo-app) 78%, transparent) 0%, color-mix(in srgb, var(--fondo-app) 35%, transparent) 45%, transparent 70%)} .pagina-entrar .barra-publica{background:color-mix(in srgb, var(--papel) 82%, transparent); backdrop-filter:blur(8px)} .pagina-entrar .contenido{position:relative; max-width:1100px} .pagina-entrar .entrar{margin:14vh 0 0 4vw; box-shadow:var(--sombra-alta); background:color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter:blur(6px)} @media (max-width:760px){ .pagina-entrar{background-position:72% center} .pagina-entrar::before{background:color-mix(in srgb, var(--fondo-app) 55%, transparent)} .pagina-entrar .entrar{margin:8vh auto 0} } /* ── Etiqueta de área ── */ .tag-area{display:inline-flex; align-items:center; margin-left:6px; padding:1px 7px; border-radius:6px; font-size:11px; font-weight:600; border:1px solid var(--linea); color:var(--tinta-suave); background:var(--papel)} .ficha-cita-etiquetas{flex-wrap:wrap} .ficha-cita-etiquetas .tag-area{margin-left:0} /* ── Primera cita, como la ve una paciente ── */ .pc-dias{display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:8px} @media (max-width:900px){ .pc-dias{grid-template-columns:repeat(5, minmax(0, 1fr))} } .pc-dia{display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border-radius:12px; background:var(--papel); border:1px solid var(--linea); text-decoration:none; color:var(--tinta)} .pc-dia:hover{border-color:var(--azul-punto)} .pc-dia b{font-size:20px; line-height:1.1} .pc-sem, .pc-mes{font-size:11.5px; color:var(--tinta-suave); text-transform:capitalize} .pc-dia small{margin-top:3px; font-size:11px; font-weight:600; color:var(--ok-texto)} .pc-dia.elegido{background:var(--azul-punto); border-color:var(--azul-punto); color:#fff} .pc-dia.elegido .pc-sem, .pc-dia.elegido .pc-mes, .pc-dia.elegido small{color:#fff} .pc-horas{margin-top:14px} .pc-horas h3{margin:0 0 8px; font-size:15px} .pc-hora{display:grid; grid-template-columns:110px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 16px; font-size:14px} .pc-hora .dc-que{gap:10px} .pc-hora.raro{background:var(--esp-fondo)} /* ── Primera cita: cambiar de día sin recargar ── * Los diez días llegan ya cargados. Cada uno es un botón de opción oculto (.pc-r) con su * etiqueta (.pc-dia); el panel del marcado se enseña con :has(). Diez reglas fijas, porque * la política de contenido no deja meter