/* ASISTENTE CLÍNICO · la hoja de estilos entera. * * LA PALETA ES LA DEL PANEL DEL MCP, para que el ecosistema se vea como una sola casa: * cabecera blanca con el logo en azul, fondo gris muy claro, tarjetas blancas con un borde * suave, el azul de Senda para lo que se pulsa y lo que está en curso, verde para lo hecho * y naranja para lo que se ha pasado de plazo. * * El modo noche sigue al sistema: solo se redefinen los colores, nunca los componentes. */ :root{ --fondo-app:#F2F4F7; --papel:#FFFFFF; --tinta:#111827; --tinta-suave:#667085; --apagado:#98A2B3; --linea:#E4E7EC; --linea-suave:#F0F2F5; --linea-fuerte:#D0D5DD; --sup-mudo:#F2F4F7; --enlace:#3347DB; /* El azul de Senda: botones, lo que está en curso y el logo. */ --azul-punto:#3347DB; --azul-hondo:#2536B8; --azul-fondo:#EEF1FD; --azul-texto:#2536B8; --ok-fondo:#E8F6EE; --ok-texto:#177A43; --ok-punto:#22A35A; --esp-fondo:#FEF4E6; --esp-texto:#B54708; --esp-punto:#F79009; --mal-fondo:#FEF0EF; --mal-texto:#B42318; --mal-punto:#F04438; --sombra:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --sombra-alta:0 12px 32px rgba(16,24,40,.14), 0 4px 8px rgba(16,24,40,.06); --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; color-scheme:light; } /* EL MODO NOCHE, de tres maneras: siguiendo al sistema (por defecto), o forzado a claro u * oscuro con el selector de la cabecera, que deja `data-tema` en . Los colores oscuros * se escriben dos veces —para el sistema y para el forzado— porque CSS no deja compartir un * bloque entre una media query y un selector. */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --fondo-app:#0C111D; --papel:#161B26; --tinta:#F5F5F6; --tinta-suave:#94969C; --apagado:#61646C; --linea:#252B37; --linea-suave:#1D2230; --linea-fuerte:#333A47; --sup-mudo:#1D2230; --enlace:#8098F9; --azul-punto:#5570F1; --azul-hondo:#8098F9; --azul-fondo:rgba(85,112,241,.16); --azul-texto:#A4B4FC; --ok-fondo:rgba(34,163,90,.16); --ok-texto:#6CE9A6; --ok-punto:#22A35A; --esp-fondo:rgba(247,144,9,.16); --esp-texto:#FDB022; --esp-punto:#F79009; --mal-fondo:rgba(240,68,56,.16); --mal-texto:#FDA29B; --mal-punto:#F04438; --sombra:0 1px 2px rgba(0,0,0,.3); --sombra-alta:0 12px 32px rgba(0,0,0,.5); color-scheme:dark; } } :root[data-tema="oscuro"]{ --fondo-app:#0C111D; --papel:#161B26; --tinta:#F5F5F6; --tinta-suave:#94969C; --apagado:#61646C; --linea:#252B37; --linea-suave:#1D2230; --linea-fuerte:#333A47; --sup-mudo:#1D2230; --enlace:#8098F9; --azul-punto:#5570F1; --azul-hondo:#8098F9; --azul-fondo:rgba(85,112,241,.16); --azul-texto:#A4B4FC; --ok-fondo:rgba(34,163,90,.16); --ok-texto:#6CE9A6; --ok-punto:#22A35A; --esp-fondo:rgba(247,144,9,.16); --esp-texto:#FDB022; --esp-punto:#F79009; --mal-fondo:rgba(240,68,56,.16); --mal-texto:#FDA29B; --mal-punto:#F04438; --sombra:0 1px 2px rgba(0,0,0,.3); --sombra-alta:0 12px 32px rgba(0,0,0,.5); color-scheme:dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0; background:var(--fondo-app); color:var(--tinta); font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif} a{color:var(--enlace)} h1,h2,h3{text-wrap:balance} :focus-visible{outline:2px solid var(--azul-punto); outline-offset:2px} /* ── La cabecera, como la del panel del MCP: blanca, el logo en azul y quién ha entrado a la derecha, que al pulsarlo abre su menú. */ .barra{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; padding:0 24px; background:var(--papel); border-bottom:1px solid var(--linea)} .marca{display:flex; align-items:center; gap:12px; color:var(--tinta); text-decoration:none; font-size:19px; font-weight:600; white-space:nowrap} .marca b{color:var(--azul-punto); font-weight:700} .logo{width:30px; height:22px; flex:none} .usuario{display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border:1px solid transparent; border-radius:12px; background:none; color:var(--tinta); font:inherit; cursor:pointer; min-width:0} .usuario:hover, .usuario:focus-visible{background:var(--sup-mudo); border-color:var(--linea)} .avatar{width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--azul-fondo); color:var(--azul-texto); font-size:13px; font-weight:700} .usuario-texto{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; min-width:0} .usuario-nombre{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px} .usuario-correo{font-size:12.5px; color:var(--tinta-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px} .flecha{width:16px; height:16px; flex:none; color:var(--tinta-suave)} .contenido{padding:28px 24px 64px} @media (max-width:640px){ .barra{padding:0 14px; height:58px} .marca{font-size:16px; gap:8px} .marca .marca-senda{display:none} .usuario-texto{display:none} .contenido{padding:20px 16px 48px} } /* ── El menú de la persona: justo debajo de su nombre, pegado a la esquina. Es un popover del propio navegador —sin JavaScript—, así que se cierra con Esc o pinchando fuera. */ .menu-usuario{inset:auto; position:fixed; top:60px; right:20px; margin:0; width:260px; padding:6px; border:1px solid var(--linea); border-radius:12px; background:var(--papel); color:var(--tinta); box-shadow:var(--sombra-alta)} .menu-cab{padding:10px 12px 12px; border-bottom:1px solid var(--linea-suave); margin-bottom:4px} .menu-cab b{display:block; font-size:14px} .menu-cab span{font-size:12.5px; color:var(--tinta-suave); word-break:break-all} .menu-usuario a, .menu-usuario button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0; border-radius:8px; background:none; color:var(--tinta); font:inherit; font-size:14px; text-align:left; text-decoration:none; cursor:pointer} .menu-usuario a:hover, .menu-usuario button:hover, .menu-usuario a:focus-visible, .menu-usuario button:focus-visible{background:var(--sup-mudo)} .menu-usuario .salir{color:var(--mal-texto); border-top:1px solid var(--linea-suave); border-radius:0 0 8px 8px; margin-top:4px} .menu-usuario svg{width:17px; height:17px; flex:none; color:var(--tinta-suave)} .menu-usuario .salir svg{color:var(--mal-texto)} /* ── 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} }