/* ========================================================================== Contadores de Agua — estilos propios Todo el dimensionado usa rem para que el control de tamaño de letra (A− / A / A+) escale el diseño completo sin romperlo. ========================================================================== */ :root { --ca-transicion: 0.25s ease; } /* Niveles de tamaño de letra controlados por data-fs en */ html[data-fs="87"] { font-size: 87.5%; } html[data-fs="100"] { font-size: 100%; } html[data-fs="112"] { font-size: 112.5%; } html[data-fs="125"] { font-size: 125%; } body { min-height: 100vh; display: flex; flex-direction: column; transition: font-size var(--ca-transicion), background-color var(--ca-transicion), color var(--ca-transicion); } /* Cambio de tema suave también en tarjetas, tablas y formularios */ .card, .table, .form-control, .form-select, .alert, .offcanvas, .dropdown-menu { transition: background-color var(--ca-transicion), color var(--ca-transicion), border-color var(--ca-transicion); } main { flex: 1 0 auto; } /* Animación suave de entrada del contenido */ .ca-fade-in { animation: ca-fade-in 0.35s ease both; } @keyframes ca-fade-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } } /* Tarjetas con elevación suave al pasar el ratón */ .card { transition: transform var(--ca-transicion), box-shadow var(--ca-transicion); } .card.ca-hover:hover { transform: translateY(-0.2rem); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } /* Enlaces y botones con transición suave */ a, .btn, .nav-link { transition: color var(--ca-transicion), background-color var(--ca-transicion), border-color var(--ca-transicion), box-shadow var(--ca-transicion); } /* Página de login centrada */ .ca-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #0d6efd 0%, #0a4fb5 60%, #063a87 100%); } .ca-login-card { width: 100%; max-width: 26rem; } /* Login en modo oscuro: degradado más profundo */ [data-bs-theme="dark"] .ca-login-page { background: linear-gradient(160deg, #0a2a52 0%, #06203f 60%, #041729 100%); } /* Respetar la preferencia de menos movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }