/* Tema visual — marca "Odonto Medic Sonri Salud" (variante azul del logo del cliente), inspirado en el diseño de coa.pe: tipografía Plus Jakarta Sans, titulares grandes, botones tipo píldora con un azul vivo de acento sobre el azul marino de marca (tomado del logo). */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { --background: #f5f2ef; --surface: #ffffff; --surface-hover: #f7f4f1; --border: #e2e6ed; --foreground: #1c2430; --muted: #626d7d; --accent: #003c90; --accent-oscuro: #002a66; --accent-tint: #dbe9fb; --accent-foreground: #ffffff; --accent-vivo: #0a5cff; --calido: #b45309; --calido-tint: #fdf1de; --calido-foreground: #ffffff; --danger: #b3261e; --danger-fondo: #fbe9e7; /* Insignias de estado — pastilla con fondo claro y texto del mismo tono, igual que las etiquetas de doctoralia (p. ej. "Consulta online"). */ --ambar: #92600a; --ambar-fondo: #fdf1de; --azul: #145da0; --azul-fondo: #e3f1fd; --verde: #1e7d3c; --verde-fondo: #e5f6ea; --gris: #736c64; --gris-fondo: #ece8e4; --rojo: #b3261e; --rojo-fondo: #fbe9e7; --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05); --sombra-media: 0 8px 24px rgba(0, 0, 0, 0.1); } /* Paleta de color de la página pública — Carlos puede elegir la tonalidad desde Configuración sin tocar código; [data-tema] en redefine solo los 4 tonos de acento, todo lo demás (tipografía, layout) es igual para cualquier color elegido. "azul" es el valor por defecto, ya cubierto por :root arriba, así que no necesita su propio bloque. */ body[data-tema="rosa"] { --accent: #c2255c; --accent-oscuro: #8a1a42; --accent-tint: #fce4ec; --accent-vivo: #ff4d8d; } body[data-tema="morado"] { --accent: #6741d9; --accent-oscuro: #4c2889; --accent-tint: #ece4fc; --accent-vivo: #8b5cf6; } body[data-tema="turquesa"] { --accent: #0f9b8e; --accent-oscuro: #0b6e64; --accent-tint: #dbf5f2; --accent-vivo: #14b8a6; } body[data-tema="verde"] { --accent: #2f9e44; --accent-oscuro: #216e30; --accent-tint: #e3f6e8; --accent-vivo: #40c057; } body[data-tema="gris"] { --accent: #495057; --accent-oscuro: #343a40; --accent-tint: #e9ecef; --accent-vivo: #6c757d; } body[data-tema="dorado"] { --accent: #a6780a; --accent-oscuro: #7a5300; --accent-tint: #fbf0d9; --accent-vivo: #d4a017; } body[data-tema="coral"] { --accent: #e8590c; --accent-oscuro: #b93815; --accent-tint: #fde8e0; --accent-vivo: #ff7452; } body[data-tema="rosa_lila"] { --accent: #ae3ec9; --accent-oscuro: #862e9c; --accent-tint: #f8e3f7; --accent-vivo: #e64980; } /* El logo (logo-icon.png / logo-sonrisalud.png) es un solo archivo en tono rosa — se gira de tono con filter: hue-rotate() para que coincida con la paleta elegida, en vez de necesitar 9 imágenes distintas. En el panel interno del personal (que no tiene selector de color, siempre es azul) se deja fijo en azul. */ .sidebar .marca-icono, .caja-login .logo-caja { filter: hue-rotate(237deg); } .navbar-publica .marca-icono, .footer-marca img, .hero-logo img { filter: hue-rotate(237deg); /* azul: tema por defecto de la página pública */ } body[data-tema="rosa"] .navbar-publica .marca-icono, body[data-tema="rosa"] .footer-marca img, body[data-tema="rosa"] .hero-logo img { filter: none; } body[data-tema="morado"] .navbar-publica .marca-icono, body[data-tema="morado"] .footer-marca img, body[data-tema="morado"] .hero-logo img { filter: hue-rotate(277deg); } body[data-tema="turquesa"] .navbar-publica .marca-icono, body[data-tema="turquesa"] .footer-marca img, body[data-tema="turquesa"] .hero-logo img { filter: hue-rotate(196deg); } body[data-tema="verde"] .navbar-publica .marca-icono, body[data-tema="verde"] .footer-marca img, body[data-tema="verde"] .hero-logo img { filter: hue-rotate(153deg); } body[data-tema="gris"] .navbar-publica .marca-icono, body[data-tema="gris"] .footer-marca img, body[data-tema="gris"] .hero-logo img { filter: hue-rotate(232deg) saturate(0.25); } body[data-tema="dorado"] .navbar-publica .marca-icono, body[data-tema="dorado"] .footer-marca img, body[data-tema="dorado"] .hero-logo img { filter: hue-rotate(64deg); } body[data-tema="coral"] .navbar-publica .marca-icono, body[data-tema="coral"] .footer-marca img, body[data-tema="coral"] .hero-logo img { filter: hue-rotate(43deg); } body[data-tema="rosa_lila"] .navbar-publica .marca-icono, body[data-tema="rosa_lila"] .footer-marca img, body[data-tema="rosa_lila"] .hero-logo img { filter: hue-rotate(310deg); } * { box-sizing: border-box; } body { margin: 0; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--foreground); background: var(--background); min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .layout { display: flex; min-height: 100vh; } /* --- Barra lateral --- */ .sidebar { width: 226px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 1.25rem 1rem; } .sidebar .marca { font-weight: 800; font-size: 1.15rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: var(--accent); } .marca-icono { height: 30px; width: auto; display: block; } /* Insignia "en qué modo estás" — para que nunca se confunda el login del personal (/login) con el del portal de pacientes (/portal/ingresar), que son sesiones completamente separadas. */ .badge-modo { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-oscuro); white-space: nowrap; } .sidebar .badge-modo { display: block; width: fit-content; margin: -1rem 0 1.25rem; } .enlace-personal { font-size: 0.8rem; color: var(--muted); margin-left: 0.5rem; } .enlace-personal:hover { color: var(--accent); } .sidebar nav a { display: block; padding: 0.55rem 0.75rem; border-radius: 10px; color: var(--foreground); margin-bottom: 0.15rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .sidebar nav a:hover { background: var(--surface-hover); text-decoration: none; } .sidebar nav a.activo { background: var(--accent-tint); color: var(--accent-oscuro); font-weight: 700; } .sidebar .usuario { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; } .sidebar .usuario form { margin-top: 0.5rem; } .sidebar .enlace-portal { display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); font-size: 0.82rem; color: var(--muted); } .sidebar .enlace-portal a { font-weight: 600; } .contenido { flex: 1; padding: 1.75rem 2rem; max-width: 980px; } h1 { letter-spacing: -0.01em; margin-bottom: 0.25rem; color: var(--foreground); } h1::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 6px; background: var(--accent); border-radius: 2px; } .subtitulo { color: var(--muted); margin-top: 0.5rem; margin-bottom: 1.5rem; } /* --- Tarjetas / métricas --- */ .metricas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .metrica { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 14px; padding: 0.9rem 1.2rem; box-shadow: var(--sombra-suave); min-width: 160px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); } .metrica.acento-turquesa { border-top-color: var(--azul); } .metrica.acento-coral { border-top-color: var(--calido); } .metrica .valor { font-size: 1.6rem; font-weight: 800; color: var(--foreground); } .metrica .etiqueta { color: var(--muted); font-size: 0.85rem; } .tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--sombra-suave); } /* --- Formularios --- */ label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; color: var(--foreground); } input, select, textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; margin-bottom: 0.9rem; font-family: inherit; background: var(--surface); color: var(--foreground); } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-tint); border-color: var(--accent); } .fila { display: flex; gap: 1rem; flex-wrap: wrap; } .fila > * { flex: 1; min-width: 180px; } button, .boton { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 1.2rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; color: var(--foreground); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease; } button:hover, .boton:hover { transform: translateY(-1px); background: var(--surface-hover); box-shadow: var(--sombra-suave); text-decoration: none; } button.primario, .boton.primario { background: var(--accent-vivo); border-color: transparent; color: var(--accent-foreground); font-weight: 600; } button.primario:hover, .boton.primario:hover { background: var(--accent-oscuro); box-shadow: var(--sombra-media); } button.calido, .boton.calido { background: var(--calido); border-color: transparent; color: var(--calido-foreground); } button.calido:hover, .boton.calido:hover { filter: brightness(1.08); box-shadow: var(--sombra-media); } button.peligro, .boton.peligro { background: var(--danger-fondo); border-color: var(--danger); color: var(--danger); } button.chico, .boton.chico { padding: 0.3rem 0.85rem; font-size: 0.82rem; } button.grande, .boton.grande { padding: 0.8rem 1.6rem; font-size: 1rem; } /* --- Tablas y listas --- */ table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; } th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; } /* --- Insignias de estado --- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; } .badge-pendiente { background: var(--ambar-fondo); color: var(--ambar); } .badge-confirmada { background: var(--azul-fondo); color: var(--azul); } .badge-asistio { background: var(--verde-fondo); color: var(--verde); } .badge-cancelada { background: var(--gris-fondo); color: var(--gris); } .badge-activo { background: var(--azul-fondo); color: var(--azul); } .badge-completado { background: var(--verde-fondo); color: var(--verde); } .badge-cancelado { background: var(--gris-fondo); color: var(--gris); } .badge-pagado { background: var(--verde-fondo); color: var(--verde); } .badge-debe { background: var(--rojo-fondo); color: var(--rojo); } .alerta { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.92rem; } .alerta-error { background: var(--danger-fondo); color: var(--danger); } .alerta-exito { background: var(--verde-fondo); color: var(--verde); } .alerta-info { background: var(--azul-fondo); color: var(--azul); } .caja-login { max-width: 380px; margin: 3rem auto; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sombra-media); } .caja-login h1 { text-align: center; } .caja-login h1::after { margin-left: auto; margin-right: auto; } .logo-caja { display: block; max-width: 220px; width: 100%; height: auto; margin: 0 auto 0.5rem; } .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; } .tabs a { padding: 0.6rem 1rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .tabs a.activo { color: var(--accent); border-color: var(--accent); } .muted { color: var(--muted); font-size: 0.88rem; } .selector-temas { display: flex; flex-wrap: wrap; gap: 0.6rem; } .opcion-tema { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem 0.5rem 0.5rem; border: 2px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--foreground); transition: border-color 0.15s ease; } .opcion-tema input { position: absolute; opacity: 0; width: 0; height: 0; } .opcion-tema .muestra-tema { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); flex-shrink: 0; } .opcion-tema.activo { border-color: var(--accent); background: var(--accent-tint); } /* --- Calendario semanal de citas --- */ .calendario-scroll { overflow-x: auto; } table.calendario-semana { border-collapse: separate; border-spacing: 0; min-width: 760px; } table.calendario-semana th, table.calendario-semana td { border: 1px solid var(--border); padding: 0; font-size: 0.82rem; } table.calendario-semana thead th { padding: 0.5rem 0.4rem; background: var(--accent-tint); color: var(--accent-oscuro); text-transform: none; letter-spacing: 0; font-size: 0.85rem; position: sticky; top: 0; } table.calendario-semana thead th.col-hoy { background: #cadef7; } table.calendario-semana .col-hora { width: 58px; min-width: 58px; text-align: center; color: var(--muted); font-weight: 600; font-size: 0.78rem; background: var(--background); position: sticky; left: 0; } td.celda-libre, td.celda-ocupada { height: 44px; vertical-align: middle; text-align: center; background: var(--surface); } td.celda-libre.col-hoy { background: #f1f6fd; } a.slot-libre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 100%; width: 100%; color: var(--muted); padding: 3px 0; } a.slot-libre:hover { background: var(--accent-tint); text-decoration: none; color: var(--accent); } a.slot-libre .icono-diente { fill: #c4d9f2; } a.slot-libre:hover .icono-diente { fill: var(--accent); } a.slot-libre span { font-size: 0.68rem; line-height: 1; } td.celda-ocupada { padding: 0; } td.celda-ocupada a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; width: 100%; padding: 4px 3px; color: inherit; } td.celda-ocupada a:hover { text-decoration: none; filter: brightness(0.96); } td.celda-ocupada a strong { font-size: 0.74rem; line-height: 1.1; } td.celda-ocupada a .hora-cita { font-size: 0.68rem; opacity: 0.85; } td.celda-ocupada.badge-pendiente { background: var(--ambar-fondo); color: var(--ambar); } td.celda-ocupada.badge-confirmada { background: var(--azul-fondo); color: var(--azul); } td.celda-ocupada.badge-asistio { background: var(--verde-fondo); color: var(--verde); } /* Celda "Ocupado" del calendario público del portal — a diferencia de la del panel interno, nunca dice quién la ocupa, así que no necesita un link ni badge de estado, solo un fondo neutro que la distinga de las libres. */ td.celda-no-disponible { height: 44px; vertical-align: middle; text-align: center; background: var(--gris-fondo); color: var(--gris); font-size: 0.7rem; font-weight: 600; } .leyenda-calendario { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 0.9rem; margin-bottom: 0; } .leyenda-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.85rem; } .leyenda-item .icono-diente { fill: #c4d9f2; vertical-align: middle; } /* ====================================================================== Portal público de citas (/portal/*) — misma paleta seria/profesional, con un hero en el verde-azulado de marca (como la cabecera de doctoralia) en vez de un tono oscuro tipo "app". ====================================================================== */ .pagina-publica { background: var(--background); min-height: 100vh; } .topbar-publica { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 2rem; background: var(--accent-oscuro); color: #fff; font-size: 0.82rem; } .topbar-datos { display: flex; gap: 1.25rem; flex-wrap: wrap; opacity: 0.92; } .topbar-redes { display: flex; gap: 0.6rem; } .topbar-redes a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 0.85rem; text-decoration: none; } .topbar-redes a:hover { background: rgba(255, 255, 255, 0.3); } .navbar-publica { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1rem 2rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .navbar-publica .marca { font-weight: 800; font-size: 1.2rem; color: var(--accent); display: flex; align-items: center; gap: 0.55rem; } .navbar-publica nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .navbar-publica nav a.boton { padding: 0.5rem 1rem; } .hero-publica { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-oscuro) 100%); color: #fff; padding: 3.5rem 2rem; text-align: center; position: relative; overflow: hidden; } .hero-publica::before { content: "🦷"; position: absolute; font-size: 14rem; opacity: 0.08; right: -1.5rem; top: -3rem; transform: rotate(-12deg); } .hero-logo { position: relative; width: 84px; height: 84px; margin: 0 auto 1.25rem; background: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-media); } .hero-logo img { width: 60px; height: auto; } .hero-publica h1 { position: relative; font-size: 3.2rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.9rem; color: #fff; } .hero-publica h1::after { display: none; } .hero-publica p { font-size: 1.1rem; opacity: 0.92; max-width: 560px; margin: 0 auto 1.75rem; } .hero-publica .acciones-hero { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .hero-publica .boton { background: #fff; color: var(--accent-oscuro); border-color: transparent; } .hero-publica .boton.calido { background: var(--calido); color: #fff; } .seccion-publica { max-width: 1040px; margin: 0 auto; padding: 2.5rem 2rem; } .seccion-publica h2 { margin-bottom: 0.3rem; color: var(--foreground); } .seccion-publica > p.subtitulo { margin-top: 0; } .franja-confianza { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 2.5rem; padding: 1.5rem 2rem; background: var(--surface); border-bottom: 1px solid var(--border); } .franja-confianza-item { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.92rem; color: var(--foreground); } .franja-confianza-item svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; } .grid-especialidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; } .tarjeta-especialidad { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-suave); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tarjeta-especialidad:hover { transform: translateY(-3px); box-shadow: var(--sombra-media); } .foto-especialidad { aspect-ratio: 4 / 3; overflow: hidden; background: var(--accent-tint); } .foto-especialidad img { width: 100%; height: 100%; object-fit: cover; display: block; } .tarjeta-especialidad-texto { padding: 1.1rem 1.25rem 1.4rem; } .tarjeta-especialidad h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--foreground); } .tarjeta-especialidad p { margin: 0; font-size: 0.9rem; line-height: 1.45; } .seccion-servicios { max-width: 1280px; padding-top: 1.75rem; padding-bottom: 1.75rem; } .servicios-layout { display: flex; gap: 1.75rem; align-items: flex-start; } .servicios-principal { flex: 1; min-width: 0; } .servicios-principal h2 { margin-bottom: 0.2rem; } .servicios-principal > p.subtitulo { margin-top: 0; margin-bottom: 1.1rem; } .grid-especialidades.compacta { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-especialidades.compacta .foto-especialidad { aspect-ratio: 1 / 1; } .grid-especialidades.compacta .tarjeta-especialidad-texto { padding: 1.25rem 1.4rem 1.6rem; } .grid-especialidades.compacta h3 { font-size: 1.25rem; margin-bottom: 0.4rem; } .grid-especialidades.compacta p { font-size: 0.98rem; line-height: 1.5; } .servicios-equipo { width: 400px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.9rem; box-shadow: var(--sombra-suave); } .servicios-equipo h3 { margin: 0 0 1.4rem; font-size: 1.3rem; color: var(--foreground); } .tarjeta-odontologo-compacta { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.4rem; } .tarjeta-odontologo-compacta:last-child { margin-bottom: 0; } .foto-odontologo { width: 110px; height: 110px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; flex-shrink: 0; overflow: hidden; } .foto-odontologo img { width: 100%; height: 100%; object-fit: cover; } .tarjeta-odontologo-compacta strong { display: block; font-size: 1.3rem; color: var(--foreground); line-height: 1.3; } .tarjeta-odontologo-compacta p { margin: 0.25rem 0 0; font-size: 1.05rem; } @media (max-width: 1180px) { .grid-especialidades.compacta { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 780px) { .servicios-layout { flex-direction: column; } .servicios-equipo { width: 100%; } } @media (max-width: 460px) { .grid-especialidades.compacta { grid-template-columns: 1fr; } } .grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .tarjeta-servicio, .tarjeta-odontologo { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem; box-shadow: var(--sombra-suave); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tarjeta-servicio:hover, .tarjeta-odontologo:hover { transform: translateY(-3px); box-shadow: var(--sombra-media); } .tarjeta-servicio .icono, .tarjeta-odontologo .icono { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent); font-size: 1.3rem; margin-bottom: 0.75rem; } .tarjeta-servicio h3, .tarjeta-odontologo h3 { margin: 0 0 0.3rem; font-size: 1.02rem; color: var(--foreground); } .tarjeta-servicio .precio { font-weight: 800; color: var(--accent); margin-top: 0.4rem; } .caja-publica { max-width: 420px; margin: 2.5rem auto; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sombra-media); } .caja-publica h1 { text-align: center; font-size: 1.5rem; } .caja-publica h1::after { margin-left: auto; margin-right: auto; } .caja-publica .enlace-secundario { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--muted); } /* --- Selector de franjas del portal (solo Libre/Ocupado, sin nombres) --- */ .selector-fecha { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .grid-franjas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; } .slot-franja { display: block; text-align: center; padding: 0.6rem 0.4rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.88rem; color: var(--foreground); } .slot-franja:hover { border-color: var(--accent); background: var(--accent-tint); text-decoration: none; } .slot-franja.seleccionada { background: var(--accent); border-color: transparent; color: #fff; } .slot-franja.ocupada { background: var(--gris-fondo); color: var(--gris); cursor: not-allowed; opacity: 0.6; } .footer-publica { padding: 3rem 2rem 0; color: rgba(255, 255, 255, 0.82); font-size: 0.88rem; border-top: none; margin-top: 1rem; background: var(--accent-oscuro); } .footer-contenido { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 1.75rem; padding-bottom: 2.25rem; } .footer-columna p { margin: 0.3rem 0; color: rgba(255, 255, 255, 0.82); } .footer-marca { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: #fff; font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.9rem !important; } .footer-marca img { height: 42px; width: auto; } .footer-slogan { color: rgba(255, 255, 255, 0.72); line-height: 1.5; margin: 0 !important; } .footer-titulo { font-weight: 700; color: #fff; margin-bottom: 0.6rem !important; font-size: 0.95rem; } .footer-boton { display: inline-block; margin-top: 0.7rem; padding: 0.5rem 1.15rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-weight: 600; font-size: 0.82rem; text-decoration: none; } .footer-boton:hover { background: #fff; color: var(--accent-oscuro); text-decoration: none; } .footer-redes { display: flex; gap: 0.6rem; margin-top: 0.6rem; } .footer-redes a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.85rem; } .footer-redes a:hover { background: #fff; color: var(--accent-oscuro); } .footer-mapa { max-width: 1180px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 1.5rem; } .footer-mapa iframe { display: block; border-radius: 12px; } .footer-copy { max-width: 1180px; margin: 0 auto; text-align: center; padding: 1.5rem 0; font-size: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 1.5rem; color: rgba(255, 255, 255, 0.65); } @media (max-width: 900px) { .footer-contenido { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .footer-contenido { grid-template-columns: 1fr; } } @media (max-width: 720px) { .layout { flex-direction: column; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } .contenido { padding: 1.25rem; } .navbar-publica { padding: 1rem; } .topbar-publica { padding: 0.5rem 1rem; } .hero-publica { padding: 2.5rem 1.25rem; } .seccion-publica { padding: 2rem 1.25rem; } .footer-publica { padding: 2rem 1.25rem 0; } } /* --- Odontograma 3D --- */ .odonto-layout { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.25rem; } .odonto-visor { flex: 2; min-width: 0; } .odonto-canvas-tarjeta { margin-bottom: 0; } .odonto-canvas { width: 100%; height: 480px; border-radius: 10px; overflow: hidden; background: #f3efe9; touch-action: none; } .odonto-canvas canvas { display: block; width: 100%; height: 100%; } .odonto-ayuda { margin: 0.6rem 0 0; } .odonto-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); } .odonto-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--foreground); } .odonto-color { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); display: inline-block; flex-shrink: 0; } .odonto-panel { flex: 1; min-width: 300px; max-height: 640px; overflow-y: auto; position: sticky; top: 1.25rem; } .odonto-panel h3 { margin: 1.1rem 0 0.5rem; font-size: 0.98rem; } .odonto-caras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0; } .odonto-chip-cara { display: flex; align-items: center; gap: 0.45rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.85rem; cursor: pointer; text-align: left; } .odonto-chip-cara:hover { background: var(--surface-hover); } .odonto-chip-cara.activa { border-color: var(--accent); background: var(--accent-tint); font-weight: 700; } .odonto-lista-eventos { list-style: none; padding: 0; margin: 0 0 0.75rem; font-size: 0.88rem; } .odonto-lista-eventos li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .odonto-lista-eventos li:last-child { border-bottom: none; } .odonto-form-evento { border-top: 1px dashed var(--border); padding-top: 0.75rem; } .odonto-form-evento label { font-size: 0.82rem; margin-top: 0.4rem; } .odonto-form-evento input, .odonto-form-evento select, .odonto-form-evento textarea { margin-bottom: 0.5rem; } .odonto-galeria { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .odonto-galeria-vacia { margin: 0.25rem 0; } .odonto-radiografia { width: 120px; } .odonto-radiografia-miniatura { display: block; width: 120px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-hover); } .odonto-radiografia-miniatura img { width: 100%; height: 100%; object-fit: cover; } .odonto-radiografia-pdf { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--muted); background: var(--surface-hover); } .odonto-radiografia-info { font-size: 0.78rem; margin-top: 0.3rem; } .odonto-radiografia-info form { display: inline; } .odonto-radiografia-info button { padding: 0.15rem 0.4rem; font-size: 0.72rem; } @media (max-width: 900px) { .odonto-layout { flex-direction: column; } .odonto-panel { position: static; max-height: none; width: 100%; } .odonto-canvas { height: 380px; } }