/* ============================================================================ ChatON — panel del consultorio. Mobile-first, estética serena para salud. ========================================================================== */ :root { --amber: #ffb02e; --amber-deep: #b07a12; --marca-900: #7a5410; --marca-700: #b07a12; --marca-600: #ffb02e; --marca-500: #ffb02e; --marca-50: #fff7e8; --sobre-marca: #3a2700; /* texto sobre rellenos de marca: oscuro en ámbar */ --tinta: #0f172a; --tinta-2: #475569; --tenue: #94a3b8; --linea: #e8edf2; --fondo: #f6f8fa; --tarjeta: #ffffff; --ok: #0c2e54; --espera: #b45309; --espera-bg: #fef3c7; --alerta: #be123c; --alerta-bg: #ffe4e6; --sombra: 0 1px 2px rgb(15 23 42 / 6%), 0 8px 24px -12px rgb(15 23 42 / 18%); --radio: 16px; /* Serie principal de los gráficos de métricas: un paso oscuro de la marca, validado por contraste (≥3:1 sobre blanco) y separación CVD contra --alerta en todos los temas. Teal la pisa (su 700 pierde croma). */ --viz-serie: var(--marca-700); /* Segunda serie (obras sociales en el devengado): magenta, la única familia de tono libre entre los 7 temas. Validada por CVD contra cada --viz-serie; esmeralda y grafito la pisan (magenta-verde y magenta-gris confunden en deutan/protan). */ --viz-serie-2: #be185d; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ── Temas de marca ── Cada paleta redefine la rampa de marca (--marca-*). El default es ámbar (ChatON, en :root); el resto se activa con data-tema en (lo setea el panel según la config). Los colores de estado (--ok/--espera/--alerta) NO cambian: son semánticos. Las variantes (teal, azul…) usan texto blanco sobre el 600; el ámbar default usa texto oscuro sobre sus rellenos. */ :root[data-tema="azul"] { --marca-900: #1e3a8a; --marca-700: #1d4ed8; --marca-600: #2563eb; --marca-500: #3b82f6; --marca-50: #eff6ff; --sobre-marca: #fff; } :root[data-tema="indigo"] { --marca-900: #312e81; --marca-700: #4338ca; --marca-600: #4f46e5; --marca-500: #6366f1; --marca-50: #eef2ff; --sobre-marca: #fff; } :root[data-tema="violeta"] { --marca-900: #4c1d95; --marca-700: #6d28d9; --marca-600: #7c3aed; --marca-500: #8b5cf6; --marca-50: #f5f3ff; --sobre-marca: #fff; } :root[data-tema="esmeralda"] { --marca-900: #064e3b; --marca-700: #047857; --marca-600: #059669; --marca-500: #10b981; --marca-50: #ecfdf5; --sobre-marca: #fff; --viz-serie-2: #1d4ed8; /* magenta-verde confunde en deutan: azul */ } :root[data-tema="grafito"] { --marca-900: #1e293b; --marca-700: #334155; --marca-600: #475569; --marca-500: #64748b; --marca-50: #f8fafc; --sobre-marca: #fff; --viz-serie-2: #b07a12; /* magenta-gris confunde en protan: ámbar oscuro */ } :root[data-tema="teal"] { --marca-900: #134e4a; --marca-700: #0f766e; --marca-600: #0d9488; --marca-500: #14b8a6; --marca-50: #f0fdfa; --sobre-marca: #fff; --viz-serie: var(--marca-600); /* el 700 teal queda gris (croma bajo el piso) */ } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-size: 16px; line-height: 1.5; } .oculto { display: none !important; } button { font-family: inherit; cursor: pointer; } /* ── Login ── */ .login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 80% at 50% 0%, var(--marca-50), transparent 60%), var(--fondo); } .login-card { width: 100%; max-width: 380px; background: var(--tarjeta); border-radius: 22px; padding: 36px 26px 30px; box-shadow: var(--sombra); } .marca { text-align: center; margin-bottom: 26px; } .marca-logo { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(150deg, var(--marca-500), var(--marca-700)); box-shadow: 0 8px 20px -6px rgb(13 148 136 / 55%); } .marca h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; } .marca-sub { margin: 2px 0 0; color: var(--tenue); font-size: 14px; } /* Marca ChatON en el login: chip oscuro para que el ámbar del mark/wordmark prenda. */ .login-card .marca { background: linear-gradient(180deg, #0c2e54, #07223d); border-radius: 16px; padding: 22px 18px 18px; } .login-card .marca-logo { width: 52px; height: 52px; background: none; box-shadow: none; border-radius: 0; } .login-card .marca h1 { color: #f1efe8; font-weight: 300; } .login-card .marca .on { color: var(--amber); font-weight: 700; } .login-card .marca-sub { color: #8e9aa6; } .login-paso { display: flex; flex-direction: column; gap: 12px; } .campo { display: block; } .campo span { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; } .campo input, .campo textarea, .formulario input, .formulario select, .formulario textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--linea); border-radius: 12px; font-size: 16px; color: var(--tinta); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marca-500); box-shadow: 0 0 0 4px var(--marca-50); } /* Textarea: sin la fuente monospace del navegador, alto cómodo y redimensionable. */ .campo textarea { min-height: 76px; line-height: 1.45; font-family: inherit; resize: vertical; } .campo textarea::placeholder { color: var(--tenue); } /* ── Buscador de pacientes (autocompletado) ── */ .typeahead { position: relative; } .typeahead-lista { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; background: #fff; border: 1.5px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); } .typeahead-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 9px; cursor: pointer; } .typeahead-item:hover { background: var(--marca-50); } .typeahead-item small { color: var(--tenue); font-size: 12px; } #in-codigo { text-align: center; letter-spacing: 8px; font-size: 24px; font-weight: 700; } .ayuda { font-size: 14px; color: var(--tinta-2); margin: 0 0 4px; } .login-error { margin: 14px 0 0; text-align: center; color: var(--alerta); font-size: 14px; font-weight: 500; } /* ── Botones ── */ .btn { border: none; border-radius: 12px; padding: 13px 16px; font-size: 15px; font-weight: 600; transition: transform 0.08s, filter 0.15s, background 0.15s; } .btn:active { transform: scale(0.98); } .btn-primario { background: var(--marca-600); color: var(--sobre-marca); box-shadow: 0 6px 16px -8px rgb(176 122 18 / 45%); } .btn-texto { background: transparent; color: var(--marca-700); } .btn-texto:hover { background: var(--marca-50); } .btn-claro { background: #fff; color: var(--marca-700); border: 1.5px solid currentColor; padding: 8px 14px; font-size: 14px; } .btn-mini { padding: 7px 13px; font-size: 13px; border-radius: 9px; } .btn:disabled { opacity: 0.5; cursor: default; } .btn:disabled:active { transform: none; } .btn-ok { background: var(--ok); color: #fff; border: none; } .btn-no { background: transparent; color: var(--alerta); border: 1.5px solid currentColor; } /* Acción destructiva (eliminar): hereda el aspecto de btn-claro, en rojo. */ .btn-peligro { color: var(--alerta); } .btn-ancho { width: 100%; margin-bottom: 12px; } /* ── Formulario de alta (cartilla) ── */ .formulario .campo, .formulario .chk-solo { margin-bottom: 12px; } .formulario input[type="checkbox"] { width: auto; padding: 0; margin: 0; accent-color: var(--marca-600); } .chk { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tinta); } .chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ── Opciones tipo radio (tarjetas seleccionables) ── */ .opciones-radio { display: flex; flex-direction: column; gap: 8px; } .opcion-radio { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .opcion-radio:hover { border-color: var(--marca-500); } /* El radio nativo: lo sacamos del width:100% del formulario y lo alineamos. */ .opcion-radio input[type="radio"] { width: auto; flex: none; margin: 1px 0 0; padding: 0; accent-color: var(--marca-600); cursor: pointer; } .opcion-txt { display: flex; flex-direction: column; gap: 2px; } .opcion-tit { font-size: 14px; font-weight: 600; color: var(--tinta); line-height: 1.3; } .opcion-sub { font-size: 12.5px; color: var(--texto-suave, #667); line-height: 1.35; } .opcion-radio:has(input[type="radio"]:checked) { border-color: var(--marca-600); background: var(--marca-50); box-shadow: 0 0 0 3px var(--marca-50); } .form-titulo { font-size: 15px; font-weight: 700; color: var(--tinta); margin-bottom: 12px; } /* ── App: estructura ── */ .app { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 78px; /* deja lugar a la tabbar */ } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; background: linear-gradient(150deg, var(--marca-700), var(--marca-900)); color: #fff; border-radius: 0 0 22px 22px; position: sticky; top: 0; z-index: 10; } .topbar-eyebrow { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; } .topbar h1 { margin: 2px 0 0; font-size: 20px; letter-spacing: -0.3px; } .icono-btn { background: rgb(255 255 255 / 15%); border: none; color: #fff; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; } .contenido { flex: 1; padding: 16px 16px 8px; /* 740 para que la grilla semanal (46px + 7×94 = 704) entre sin scroll en desktop. En mobile manda el width:100%, así que no cambia nada. */ max-width: 740px; width: 100%; margin: 0 auto; } /* ── Tabbar inferior (estilo app) ── */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: rgb(255 255 255 / 92%); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 20; } .tab { position: relative; flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 600; color: var(--tenue); border-radius: 10px; } /* Conteo de pendientes sobre el ícono del nav. */ .cuenta { position: absolute; top: 2px; left: 50%; margin-left: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--alerta); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .tab-ico { font-size: 20px; filter: grayscale(1) opacity(0.6); transition: filter 0.15s; } .tab.activo { color: var(--marca-700); } .tab.activo .tab-ico { filter: none; } /* ── Secciones y tarjetas ── */ .seccion-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tenue); margin: 18px 2px 10px; } .seccion-titulo:first-child { margin-top: 4px; } /* Contador junto al título de sección (p.ej. obras sociales con/sin cobertura). */ .seccion-cuenta { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; margin-left: 8px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: middle; } .seccion-cuenta--ok { background: var(--marca-50); color: var(--marca-700); } .seccion-cuenta--off { background: var(--alerta-bg); color: var(--alerta); } /* Aviso de filas no reconocidas tras importar la cartilla. */ .aviso-import { position: relative; background: var(--espera-bg); border-color: #fcd34d; } .aviso-titulo { font-weight: 700; color: var(--espera); margin-bottom: 2px; } .aviso-lista { margin: 0; padding-left: 18px; max-height: 180px; overflow-y: auto; font-size: 13px; color: var(--tinta-2); } .aviso-lista li { margin: 2px 0; } .aviso-cerrar { position: absolute; top: 8px; right: 10px; border: none; background: none; font-size: 20px; line-height: 1; color: var(--espera); cursor: pointer; padding: 0; } .card { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 11px; box-shadow: var(--sombra); } .card.tap { cursor: pointer; transition: transform 0.08s; } .card.tap:active { transform: scale(0.99); } .card-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .card-titulo { font-weight: 700; font-size: 15px; } .card-ident { min-width: 0; } /* Teléfono bajo el nombre cuando el paciente ya está agendado: chiquito y tenue. */ .card-tel { display: block; color: var(--tenue); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 1px; } /* El número junto al nombre en el encabezado de la charla abierta. */ .charla-tel { margin-left: 8px; color: var(--tenue); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; } .card-sub { color: var(--tinta-2); font-size: 14px; margin-top: 2px; } .card-meta { color: var(--tenue); font-size: 13px; margin-top: 6px; } .card-hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--marca-700); font-size: 15px; white-space: nowrap; } .acciones { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; } /* Botón a lo ancho del sheet (acción propia, fuera de la fila de acciones). */ .btn-bloque { display: block; width: 100%; margin-top: 12px; } /* ── Badges de estado ── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.reservada, .badge.pendiente_validacion { background: var(--espera-bg); color: var(--espera); } .badge.confirmada, .badge.confirmado, .badge.completada, .badge.atiende, .badge.resuelta { background: var(--marca-50); color: var(--marca-700); } .badge.rechazado, .badge.ausente, .badge.derivada, .badge.no-atiende { background: var(--alerta-bg); color: var(--alerta); } /* ── Listas vacías / carga ── */ .vacio { text-align: center; color: var(--tenue); padding: 48px 20px; } .vacio-ico { font-size: 40px; display: block; margin-bottom: 10px; filter: grayscale(0.3); } /* ── Métricas (dashboard) ── */ .mtc-filtros { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 10px; } .mtc-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 11px; } .mtc-tile { margin-bottom: 0; padding: 12px 14px; } .mtc-label { font-size: 12px; font-weight: 600; color: var(--tinta-2); } .mtc-valor { font-size: 26px; font-weight: 650; color: var(--tinta); margin-top: 2px; line-height: 1.15; } .mtc-sub { font-size: 12px; color: var(--tenue); margin-top: 2px; } .mtc-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); margin: 8px 0 12px; } .mtc-leyenda span { display: inline-flex; align-items: center; gap: 5px; } .mtc-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .mtc-plot { display: flex; gap: 8px; margin-top: 6px; } .mtc-eje-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 150px; font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; flex-shrink: 0; } .mtc-cols { display: flex; align-items: flex-end; gap: 6px; flex: 1; height: 150px; /* Gridlines finas: base, mitad y techo (mismo paso que los ticks). */ background: linear-gradient(to bottom, var(--linea) 1px, transparent 1px) top / 100% 50% repeat-y; border-bottom: 1px solid var(--linea); min-width: 0; } .mtc-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; } .mtc-pila { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; max-width: 24px; width: 100%; margin: 0 auto; } .mtc-seg { width: 100%; min-height: 2px; } /* Gap de superficie de 2px entre segmentos apilados; punta redondeada solo arriba de la pila (la base queda cuadrada contra el eje). */ .mtc-pila .mtc-seg:first-child { border-radius: 4px 4px 0 0; } .mtc-pila .mtc-seg + .mtc-seg { margin-top: 2px; } .mtc-seg-serie { background: var(--viz-serie); } .mtc-seg-serie2 { background: var(--viz-serie-2); } .mtc-seg-ausente { background: var(--alerta); } .mtc-seg-agendada, .mtc-seg-gris { background: var(--tenue); } .mtc-aviso { font-size: 12px; color: var(--espera); background: var(--espera-bg); border-radius: 8px; padding: 6px 10px; margin-top: 10px; } .mtc-aviso button { border: none; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; } .mtc-detalle { overflow-x: auto; } .mtc-sub-titulo { font-size: 12px; color: var(--tenue); margin: 2px 0 8px; } .mtc-eje-x { display: block; text-align: center; font-size: 10px; color: var(--tenue); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtc-grafico { overflow: hidden; } .mtc-detalle { margin-top: 12px; font-size: 13px; } .mtc-detalle summary { cursor: pointer; color: var(--tinta-2); } .mtc-tabla { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; } .mtc-tabla th, .mtc-tabla td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--linea); font-size: 12px; } .mtc-tabla th:first-child, .mtc-tabla td:first-child { text-align: left; } .mtc-tabla th { color: var(--tenue); font-weight: 600; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Charla ── */ .charla { min-height: 100dvh; display: flex; flex-direction: column; } .banda-derivada, .banda-ventana { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--alerta-bg); color: var(--alerta); padding: 10px 16px; font-size: 14px; font-weight: 500; } .banda-ventana .btn { flex-shrink: 0; } .chat { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--fondo); } .responder { display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--tarjeta); } .responder input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 999px; padding: 10px 14px; font-size: 15px; } .responder button { flex: 0 0 auto; } .card.atenuado { opacity: 0.55; } .burbuja { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 15px; white-space: pre-wrap; word-break: break-word; box-shadow: var(--sombra); } .burbuja.cliente { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; } .burbuja.asistente { align-self: flex-end; background: var(--marca-600); color: var(--sobre-marca); border-bottom-right-radius: 5px; } /* Adjuntos (fotos/PDF) que mandó el paciente, dentro de la burbuja. */ .adjunto { margin-top: 8px; } /* Foto: miniatura enmarcada con un pie (ícono + acción). Toda la tarjeta es el enlace que abre la imagen a tamaño completo. */ .adjunto-foto { display: block; width: 240px; max-width: 100%; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--tarjeta); text-decoration: none; color: inherit; cursor: zoom-in; transition: box-shadow 0.15s ease; } .adjunto-foto:hover { box-shadow: var(--sombra); } .adjunto-foto img { display: block; width: 100%; max-height: 300px; object-fit: cover; background: var(--fondo); } .adjunto-pie { display: flex; align-items: center; gap: 7px; padding: 8px 11px; font-size: 13px; font-weight: 500; color: var(--tinta-2); border-top: 1px solid var(--linea); } .adjunto-pie .ico { font-size: 15px; line-height: 1; } .adjunto-pie .accion { margin-left: auto; color: var(--marca-700); } /* PDF (y fallback de una foto que no decodificó): ficha horizontal con el ícono en un cuadro tintado de marca. */ .adjunto-archivo { display: flex; align-items: center; gap: 11px; width: 240px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); text-decoration: none; color: inherit; transition: box-shadow 0.15s ease; } .adjunto-archivo:hover { box-shadow: var(--sombra); } .adjunto-archivo .ico { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--marca-50); font-size: 20px; } .adjunto-archivo .cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .adjunto-archivo .titulo { font-size: 14px; font-weight: 600; color: var(--tinta); } .adjunto-archivo .accion { font-size: 12.5px; font-weight: 500; color: var(--marca-700); } .adjunto-cargando, .adjunto-error { font-size: 13px; opacity: 0.7; } /* ── Toast ── */ .toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: 50; box-shadow: var(--sombra); animation: subir 0.2s ease; } @keyframes subir { from { opacity: 0; transform: translate(-50%, 8px); } } /* ── Ajustes: sub-navegación (prácticas / equipo / cartilla) ── */ .subnav { display: flex; gap: 6px; background: var(--gris-100, #eef2f3); border-radius: 12px; padding: 4px; margin-bottom: 14px; } .subtab { flex: 1; border: none; background: none; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--tenue); border-radius: 9px; } .subtab.activo { background: #fff; color: var(--marca-700); box-shadow: var(--sombra); } /* ── Editor de horarios (consultorio y profesionales) ── */ .horarios-edit { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; } [hidden] { display: none !important; } .dia-grupo { display: flex; flex-direction: column; gap: 6px; } .dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dia-cab .chk { font-size: 13px; } .dia-bloques { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; } .bloque-row { display: grid; grid-template-columns: 1fr auto 1fr auto auto; align-items: center; gap: 6px; } .bloque-row input[type="time"] { margin: 0; } .bloque-sep { font-size: 13px; color: var(--texto-suave, #667); } .bloque-mod { margin: 0; font-size: 13px; } .bloque-mod[hidden] { display: none !important; } .btn-icono { border: none; background: transparent; color: #b54; font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .btn-icono:hover { background: rgba(187, 85, 68, 0.12); } .campo-ayuda { margin: 2px 0 8px; font-size: 12.5px; color: var(--texto-suave, #667); line-height: 1.45; } /* ── Aviso de serie en curso (alta manual) ── */ .aviso-serie { margin: 2px 0 4px; padding: 10px 12px; border: 1px solid var(--marca-600); border-radius: 10px; background: var(--marca-50); display: flex; flex-direction: column; gap: 4px; } .aviso-serie-txt { font-size: 13px; line-height: 1.45; color: var(--marca-900); } /* Acciones de excepción del aviso. La ruta principal (sumar a la serie) no pide acción, así que van como links chicos al pie, sin competir en peso visual con el texto: continuar con el alta ya es "seguir la serie". */ .aviso-serie-acciones { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; } .aviso-serie-acciones .btn-texto { font-size: 13px; font-weight: 500; padding: 4px 6px; margin: 0 -6px; text-decoration: underline; text-underline-offset: 2px; } /* El hover con fondo marca-50 es invisible acá (el aviso ya es marca-50): la señal de hover pasa a ser el cambio de color. */ .aviso-serie-acciones .btn-texto:hover { background: transparent; color: var(--marca-900); } .aviso-serie-acciones .btn-peligro { color: var(--alerta); } .aviso-serie-acciones .btn-peligro:hover { color: var(--alerta); background: var(--alerta-bg); } /* ── Agenda: calendario semanal ── */ .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; } .cal-nav-btn { width: 42px; height: 42px; border: 1px solid var(--linea); background: #fff; border-radius: 12px; font-size: 24px; line-height: 1; color: var(--marca-700); } .cal-rango { display: flex; flex-direction: column; align-items: center; } .cal-rango strong { font-size: 15px; } .cal-hoy { padding: 0 6px; font-size: 13px; } .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); } .cal-cabs, .cal-grid { display: grid; grid-template-columns: 46px repeat(7, minmax(94px, 1fr)); min-width: 700px; } .cal-cabs { position: sticky; top: 0; z-index: 2; background: var(--tarjeta); border-bottom: 1px solid var(--linea); } .cal-dia-cab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; font-size: 12px; color: var(--tinta-2); border-left: 1px solid var(--linea); } .cal-dia-cab b { font-size: 16px; color: var(--tinta); } .cal-dia-cab.cerrado { color: var(--tenue); } .cal-reducido { font-size: 9.5px; line-height: 1; color: var(--espera); font-weight: 600; } .cal-dia-cab.es-hoy { color: var(--marca-700); } .cal-dia-cab.es-hoy b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--marca-600); color: #fff; } .cal-grid { position: relative; } .cal-hora { position: relative; border-top: 1px solid var(--linea); } .cal-hora:first-child { border-top: none; } .cal-hora span { position: absolute; top: -7px; right: 5px; font-size: 10.5px; color: var(--tenue); background: var(--tarjeta); padding: 0 2px; } .cal-col { position: relative; border-left: 1px solid var(--linea); background: repeating-linear-gradient( to bottom, transparent 0, transparent 55px, var(--linea) 55px, var(--linea) 56px ); } .cal-col.cerrado { /* Día sin atención: gris neutro (no del tema) bajo las líneas horarias. */ background-color: rgb(15 23 42 / 4.5%); } .cal-col.es-hoy { background-color: var(--marca-50); } .cal-turno { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; border: none; border-radius: 8px; text-align: left; overflow: hidden; font-size: 11px; line-height: 1.15; color: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / 22%); } .cal-turno-h { font-weight: 700; opacity: 0.92; } /* ── Color de etiqueta del profesional ── */ .prof-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; outline-offset: 2px; } .swatch.sel { border-color: var(--tinta-1, #0f172a); box-shadow: 0 0 0 2px #fff inset; } .swatch-sin { background: #fff; border: 2px dashed #cbd5e1; position: relative; } .swatch-sin::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: #ef4444; transform: rotate(-45deg); } .swatch-sin.sel { border-style: solid; border-color: var(--tinta-1, #0f172a); } .cal-turno-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-turno.reservada { background: var(--marca-50); color: var(--marca-900); border: 1px solid var(--marca-600); /* Si el turno trae color de profesional, su border-left:4px (inline) pisa el lado izquierdo; este borde fino enmarca el resto sin duplicar la franja. */ } .cal-turno.confirmada { background: var(--marca-700); } .cal-turno.completada { background: #64748b; } .cal-turno.ausente, .cal-turno.cancelada { background: #cbd5e1; color: var(--tinta-2); } /* ── Turno anterior (ya terminó) ── Se lee como pasado: atenuado, desaturado y sin sombra, pero legible y clickeable. El estado de fondo se conserva bajo el velo. */ .cal-turno.pasada { opacity: 0.52; filter: saturate(0.55); box-shadow: none; } .cal-turno.pasada:active { opacity: 0.72; } /* ── FAB (nuevo turno) ── */ .fab { position: fixed; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); border: none; border-radius: 999px; padding: 13px 20px; font-size: 15px; font-weight: 700; color: var(--sobre-marca); background: var(--marca-600); box-shadow: 0 8px 20px -6px rgb(176 122 18 / 50%); z-index: 30; } .fab:active { transform: scale(0.97); } /* ── Sheet (detalle / alta de turno) ── */ .sheet-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgb(15 23 42 / 45%); } .sheet { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); background: var(--tarjeta); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px -10px rgb(15 23 42 / 35%); animation: sheet-subir 0.2s ease; } @keyframes sheet-subir { from { transform: translateY(24px); opacity: 0.5; } } .sheet-titulo { font-size: 17px; font-weight: 700; margin-bottom: 14px; } .detalle { margin-bottom: 16px; } .detalle-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14px; } .detalle-fila:last-child { border-bottom: none; } .detalle-fila > span:first-child { color: var(--tinta-2); } .campo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .campo select { width: 100%; padding: 12px; border: 1.5px solid var(--linea); border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--tinta); background: #fff; } .campo select:focus { outline: none; border-color: var(--marca-500); box-shadow: 0 0 0 4px var(--marca-50); } /* ── Selector de color de marca (Ajustes) ── */ .tema-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .tema-swatch { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--linea); transition: transform 0.1s ease; } .tema-swatch:hover { transform: scale(1.08); } .tema-swatch.activo { border-color: var(--tarjeta); box-shadow: 0 0 0 2px var(--sw); } /* ── Nota del turno (detalle de la agenda) ── */ .nota-turno { margin: 10px 0 2px; } .nota-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; min-height: 20px; } .nota-guardada { font-size: 13px; color: var(--tinta-2); opacity: 0; transition: opacity 0.2s; } .nota-guardada.visible { opacity: 1; }