/* Sistema visual de la casa (tokens --rv-* y componentes rv-*). Sale de includes/estilos_nf.php (03/09/2026): estaba incrustado en cada pantalla que lo pinta. En fichero lo guarda el navegador y deja de viajar en cada página. NO editar el PHP para volver a incrustarlo. */ /* ==== Reservas — guía estética (misma que Servicios v2) ==== */ :root { --rv-primary: #2E86AB; --rv-primary-dark: #236B8E; --rv-primary-tint: #EAF4F8; --rv-bg: #F5F6F8; --rv-card: #FFFFFF; --rv-border: #E8EBEE; --rv-border-soft: #F0F2F4; --rv-text: #1C2634; --rv-secondary: #4A5866; --rv-muted: #5F6E7C; /* atenuado con contraste AA (~4.8:1 sobre blanco) */ --rv-ok: #227952; --rv-ok-tint: #EAF6F0; --rv-warn: #9A6B00; --rv-warn-tint: #FFF4DB; /* Ámbar para TEXTO PEQUEÑO sobre el tinte: --rv-warn da 4,29:1 sobre --rv-warn-tint y AA pide 4,5:1 — este da 5,17:1 (medido). Nació como literal en la rejilla de Asignación y se sube a token para que la siguiente pantalla no repita el dilema. */ --rv-warn-strong: #8A5F00; --rv-danger: #C03A3A; --rv-danger-tint: #FDEDED; --rv-info: #0E6E8C; --rv-info-tint: #E0F3F8; --rv-radius: 14px; --rv-radius-sm: 8px; --rv-shadow: 0 10px 30px rgba(16, 30, 46, 0.08); --rv-font: 'Outfit', system-ui, -apple-system, sans-serif; --rv-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Colores por TIPO de servicio (despacho: Sábana, Asignación, Historial). FUENTE ÚNICA: existían tres juegos casi iguales —bloques de la Sábana, filas de Asignación y pastillas del Historial, más una copia en JS— y ajustar un tono obligaba a acordarse de cuatro sitios. Dos niveles por tipo, deliberados: -bg (tinte FUERTE, para bloques y pastillas pequeñas) y -bg2 (tinte SUAVE, para el fondo de una fila entera, que a plena intensidad cansa). UN solo texto por tipo, medido AA sobre los dos fondos (4,6–10:1). */ --rv-srv-lle-bg: #EEF4DB; --rv-srv-lle-bg2: #F5F9E7; --rv-srv-lle-tx: #4D6509; --rv-srv-sal-bg: #FBD9DF; --rv-srv-sal-bg2: #FDF0F2; --rv-srv-sal-tx: #7D0018; --rv-srv-exc-bg: #FEF5DA; --rv-srv-exc-bg2: #FEF9E8; --rv-srv-exc-tx: #8A6703; --rv-srv-dis-bg: #DEEFF2; --rv-srv-dis-bg2: #EDF6F8; --rv-srv-dis-tx: #13505C; --rv-srv-vip-bg: #E8E7F3; --rv-srv-vip-bg2: #F1F0F8; --rv-srv-vip-tx: #38355F; --rv-srv-otro-bg: #EEF1F4; --rv-srv-otro-bg2: #F4F6F8; --rv-srv-otro-tx: #5F6E7C; } /* Ancho de página: UNO SOLO para todo el programa (29/09/2026, petición del propietario: «cada pantalla tiene un ancho diferente»). Hasta ese día había tres —1600px centrados, ancho completo y 960px centrados— y al saltar de una pantalla a otra el título cambiaba de sitio. Ahora toda pantalla ocupa el ancho de la ventana con el mismo margen, y el título arranca siempre en el mismo punto. El width:100% NO es decorativo y no se puede quitar: el es un contenedor flex en columna (includes/header.php, para anclar el pie abajo) y .rv-page es un hijo directo suyo. Sin un ancho definido la página se dimensiona a su contenido: el ancho pasaba a depender de lo ancha que fuera la tabla (en Pagos, la web se encogía a cada tecla del buscador). */ .rv-page { font-family: var(--rv-font); color: var(--rv-text); background: var(--rv-bg); min-height: 80vh; padding: 24px; width: 100%; max-width: none; margin-left: auto; margin-right: auto; } /* rv-page-full ya es lo normal; se conserva la clase para no tocar las pantallas que la llevan. */ .rv-page.rv-page-full { max-width: none; } /* rv-page-form: formulario de una columna. La PÁGINA mide lo mismo que las demás (el título no se mueve) y solo el contenido se queda en 960px, pegado a la izquierda: estirar las etiquetas a toda la ventana solo separa cada texto de su campo. Se hace con el relleno derecho y no con un tope en los hijos para no tocar las ventanas (position:fixed) que cuelgan de la página. */ .rv-page.rv-page-form { padding-right: max(24px, calc(100% - 984px)); } @media (max-width: 768px) { .rv-page.rv-page-form { padding-right: 14px; } } /* Formulario de una columna dentro de una página que no es rv-page-form. */ .rv-cuerpo-form { max-width: 960px; } .rv-page h1, .rv-page h2, .rv-page h3, .rv-page h4, .rv-page h5 { font-family: var(--rv-font); } .rv-page input, .rv-page select, .rv-page button, .rv-page textarea { font-family: inherit; } .rv-mono { font-family: var(--rv-mono); } .rv-muted { color: var(--rv-muted); } /* Texto SOLO para lectores de pantalla: lo que un icono, una barra o una fila de estrellas dicen a la vista y a nadie más. No es display:none, que lo escondería también de ellos — se saca de la vista conservándolo en el árbol del documento. */ .rv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rv-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .rv-header h1 { font-size: 1.45rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .rv-header .rv-subtitle { color: var(--rv-muted); font-size: 0.85rem; margin-top: 2px; } /* Volver: icono a la derecha de la cabecera. De texto competía con el título, que es lo que hay que leer. Área de 38px para el dedo y el nombre dentro en .rv-sr — un title no lo anuncia ningún lector de pantalla. */ /* Vale también en un