/* ========================================================================== Material Design 3 — Tema base Sistema de gestión de citas de psicología -------------------------------------------------------------------------- Los tokens de COLOR (--md-sys-color-*) NO se definen aquí: los inyecta includes/md3_theme.php derivándolos del color de marca de cada tenant (tabla configuracion_tenant) mediante Md3Palette. Este archivo define el resto del sistema — tipografía, forma, elevación, espaciado, motion — y las clases de componente que los consumen. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS DE SISTEMA -------------------------------------------------------------------------- */ :root { /* --- Tipografía: escala tipográfica MD3 ------------------------------- */ --md-sys-typescale-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --md-sys-typescale-font-brand: var(--md-sys-typescale-font); --md-sys-typescale-display-large-size: 3.5625rem; /* 57px */ --md-sys-typescale-display-large-line: 4rem; /* 64px */ --md-sys-typescale-display-medium-size: 2.8125rem; /* 45px */ --md-sys-typescale-display-medium-line: 3.25rem; /* 52px */ --md-sys-typescale-display-small-size: 2.25rem; /* 36px */ --md-sys-typescale-display-small-line: 2.75rem; /* 44px */ --md-sys-typescale-headline-large-size: 2rem; /* 32px */ --md-sys-typescale-headline-large-line: 2.5rem; /* 40px */ --md-sys-typescale-headline-medium-size: 1.75rem; /* 28px */ --md-sys-typescale-headline-medium-line: 2.25rem; /* 36px */ --md-sys-typescale-headline-small-size: 1.5rem; /* 24px */ --md-sys-typescale-headline-small-line: 2rem; /* 32px */ --md-sys-typescale-title-large-size: 1.375rem; /* 22px */ --md-sys-typescale-title-large-line: 1.75rem; /* 28px */ --md-sys-typescale-title-medium-size: 1rem; /* 16px */ --md-sys-typescale-title-medium-line: 1.5rem; /* 24px */ --md-sys-typescale-title-small-size: 0.875rem; /* 14px */ --md-sys-typescale-title-small-line: 1.25rem; /* 20px */ --md-sys-typescale-body-large-size: 1rem; /* 16px */ --md-sys-typescale-body-large-line: 1.5rem; /* 24px */ --md-sys-typescale-body-medium-size: 0.875rem; /* 14px */ --md-sys-typescale-body-medium-line: 1.25rem; /* 20px */ --md-sys-typescale-body-small-size: 0.75rem; /* 12px */ --md-sys-typescale-body-small-line: 1rem; /* 16px */ --md-sys-typescale-label-large-size: 0.875rem; /* 14px */ --md-sys-typescale-label-large-line: 1.25rem; /* 20px */ --md-sys-typescale-label-medium-size: 0.75rem; /* 12px */ --md-sys-typescale-label-medium-line: 1rem; /* 16px */ --md-sys-typescale-label-small-size: 0.6875rem; /* 11px */ --md-sys-typescale-label-small-line: 1rem; /* 16px */ /* --- Forma: radios MD3 ------------------------------------------------ */ /* Esquinas más redondeadas en todo el sistema (petición de diseño). */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: 8px; --md-sys-shape-corner-small: 12px; --md-sys-shape-corner-medium: 16px; --md-sys-shape-corner-large: 20px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* --- Espaciado: ritmo de 8px ------------------------------------------ */ --md-sys-spacing-0: 0; --md-sys-spacing-1: 4px; /* medio paso */ --md-sys-spacing-2: 8px; --md-sys-spacing-3: 12px; --md-sys-spacing-4: 16px; --md-sys-spacing-5: 24px; --md-sys-spacing-6: 32px; --md-sys-spacing-7: 40px; --md-sys-spacing-8: 48px; --md-sys-spacing-9: 64px; /* --- Opacidad de state layers (§ Interaction states) ------------------- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; --md-sys-state-dragged-opacity: 0.16; --md-sys-state-disabled-content-opacity: 0.38; --md-sys-state-disabled-container-opacity: 0.12; /* --- Motion: curvas y duraciones MD3 ---------------------------------- */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-long2: 500ms; } /* -------------------------------------------------------------------------- 2. ELEVACIÓN Niveles MD3 0/1/3/6/8/12dp. Cada nivel son dos sombras (key + ambient). La sombra usa --md-sys-color-shadow, así que se adapta al modo oscuro. -------------------------------------------------------------------------- */ :root { --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 2px 0 rgb(var(--md-sys-color-shadow-rgb) / 0.30), 0 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb) / 0.15); --md-sys-elevation-2: 0 1px 2px 0 rgb(var(--md-sys-color-shadow-rgb) / 0.30), 0 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb) / 0.15); --md-sys-elevation-3: 0 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb) / 0.15), 0 1px 3px 0 rgb(var(--md-sys-color-shadow-rgb) / 0.30); --md-sys-elevation-4: 0 6px 10px 4px rgb(var(--md-sys-color-shadow-rgb) / 0.15), 0 2px 3px 0 rgb(var(--md-sys-color-shadow-rgb) / 0.30); --md-sys-elevation-5: 0 8px 12px 6px rgb(var(--md-sys-color-shadow-rgb) / 0.15), 0 4px 4px 0 rgb(var(--md-sys-color-shadow-rgb) / 0.30); --md-sys-elevation-6: 0 12px 17px 2px rgb(var(--md-sys-color-shadow-rgb) / 0.15), 0 5px 22px 4px rgb(var(--md-sys-color-shadow-rgb) / 0.12); } /* Alias por dp, para leer la intención en el markup. */ .md-elevation-0 { box-shadow: var(--md-sys-elevation-0); } .md-elevation-1 { box-shadow: var(--md-sys-elevation-1); } /* 1dp */ .md-elevation-3 { box-shadow: var(--md-sys-elevation-2); } /* 3dp */ .md-elevation-6 { box-shadow: var(--md-sys-elevation-3); } /* 6dp */ .md-elevation-8 { box-shadow: var(--md-sys-elevation-4); } /* 8dp */ .md-elevation-12 { box-shadow: var(--md-sys-elevation-5); } /* 12dp */ /* -------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; /* Escala global -10%: reduce tipografía y espaciados en rem de todo el sistema (tokens del tema + utilidades Tailwind, que usan rem). */ font-size: 90%; } body { margin: 0; background-color: var(--md-sys-color-background); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); } /* El cambio claro/oscuro no debe animar cada caja de la página. */ .md-theme-switching * { transition: none !important; } ::selection { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } /* Scrollbar acorde al tema */ * { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); } ::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); } /* -------------------------------------------------------------------------- 4. TIPOGRAFÍA — clases de la escala MD3 -------------------------------------------------------------------------- */ .md-display-large, .md-display-medium, .md-display-small, .md-headline-large, .md-headline-medium, .md-headline-small, .md-title-large, .md-title-medium, .md-title-small, .md-body-large, .md-body-medium, .md-body-small, .md-label-large, .md-label-medium, .md-label-small { font-family: var(--md-sys-typescale-font); margin: 0; } .md-display-large { font-size: var(--md-sys-typescale-display-large-size); line-height: var(--md-sys-typescale-display-large-line); font-weight: 400; letter-spacing: -0.25px; } .md-display-medium { font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line); font-weight: 400; letter-spacing: 0; } .md-display-small { font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line); font-weight: 400; letter-spacing: 0; } .md-headline-large { font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line); font-weight: 400; letter-spacing: 0; } .md-headline-medium { font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line); font-weight: 400; letter-spacing: 0; } .md-headline-small { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); font-weight: 400; letter-spacing: 0; } .md-title-large { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: 500; letter-spacing: 0; } .md-title-medium { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); font-weight: 500; letter-spacing: 0.15px; } .md-title-small { font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line); font-weight: 500; letter-spacing: 0.1px; } .md-body-large { font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line); font-weight: 400; letter-spacing: 0.5px; } .md-body-medium { font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); font-weight: 400; letter-spacing: 0.25px; } .md-body-small { font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); font-weight: 400; letter-spacing: 0.4px; } .md-label-large { font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line); font-weight: 500; letter-spacing: 0.1px; } .md-label-medium { font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line); font-weight: 500; letter-spacing: 0.5px; } .md-label-small { font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line); font-weight: 500; letter-spacing: 0.5px; } /* -------------------------------------------------------------------------- 5. STATE LAYERS + RIPPLE Cada componente interactivo lleva una capa de estado por encima del contenedor y por debajo del contenido, con la opacidad que marca MD3. -------------------------------------------------------------------------- */ .md-state-layer { position: relative; overflow: hidden; isolation: isolate; } .md-state-layer::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-state-layer > * { position: relative; z-index: 1; } .md-state-layer:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-state-layer:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); } .md-state-layer:active::before { opacity: var(--md-sys-state-pressed-opacity); } /* Anillo de foco visible y consistente (accesibilidad por teclado). */ .md-state-layer:focus-visible, .md-focus-ring:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } /* Ripple: la onda que expande md3-theme.js al hacer clic. */ .md-ripple { position: absolute; border-radius: 50%; transform: scale(0); opacity: 0.12; background-color: currentColor; pointer-events: none; z-index: 0; /* siempre por debajo del contenido (z-index:1) */ animation: md-ripple-expand var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard-decelerate) forwards; } @keyframes md-ripple-expand { to { transform: scale(1); opacity: 0; } } /* -------------------------------------------------------------------------- 6. BOTONES Las cinco variantes MD3: filled, tonal, outlined, text y elevated. Altura 40px, radio full, label-large. Ripple vía .md-state-layer. -------------------------------------------------------------------------- */ .md-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--md-sys-spacing-2); min-height: 36px; padding: 0 var(--md-sys-spacing-5); border: none; border-radius: var(--md-sys-shape-corner-full); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line); font-weight: 500; letter-spacing: 0.1px; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-btn::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-btn > * { position: relative; z-index: 1; } .md-btn:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-btn:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); } .md-btn:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-btn:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } /* Iconos dentro del botón: 18px, alineados al texto. */ .md-btn .material-symbols-rounded, .md-btn .material-symbols-outlined, .md-btn i { font-size: 18px; width: 18px; height: 18px; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; } /* --- Variantes --- */ /* Filled: la acción principal de la pantalla. */ .md-btn-filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .md-btn-filled:hover { box-shadow: var(--md-sys-elevation-1); } /* Tonal: acción importante que no compite con la principal. */ .md-btn-tonal { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .md-btn-tonal:hover { box-shadow: var(--md-sys-elevation-1); } /* Outlined: acción secundaria; borde en lugar de relleno. */ .md-btn-outlined { background-color: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); } .md-btn-outlined:focus-visible { border-color: var(--md-sys-color-primary); } /* Text: acción de baja prioridad (cancelar, "ver más"). */ .md-btn-text { background-color: transparent; color: var(--md-sys-color-primary); padding: 0 var(--md-sys-spacing-3); } /* Elevated: outlined con sombra, para separarse de fondos con patrón. */ .md-btn-elevated { background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-primary); box-shadow: var(--md-sys-elevation-1); } .md-btn-elevated:hover { box-shadow: var(--md-sys-elevation-2); } /* Destructivo: eliminar, cancelar cita. */ .md-btn-error { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); } .md-btn-error:hover { box-shadow: var(--md-sys-elevation-1); } /* Tamaños */ .md-btn-sm { min-height: 32px; padding: 0 var(--md-sys-spacing-4); font-size: var(--md-sys-typescale-label-medium-size); } .md-btn-lg { min-height: 43px; padding: 0 var(--md-sys-spacing-6); } .md-btn-block { width: 100%; } /* Estado deshabilitado — mismo tratamiento para todas las variantes. */ .md-btn:disabled, .md-btn[aria-disabled='true'], .md-btn.md-disabled { cursor: not-allowed; box-shadow: none; background-color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-container-opacity)); color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-content-opacity)); border-color: transparent; } .md-btn-text:disabled, .md-btn-outlined:disabled { background-color: transparent; } .md-btn-outlined:disabled { border-color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-container-opacity)); } .md-btn:disabled::before { opacity: 0 !important; } /* --- Icon button: acción sin etiqueta (48px de área táctil) --- */ .md-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; padding: 0; border: none; border-radius: var(--md-sys-shape-corner-full); background-color: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; overflow: hidden; isolation: isolate; transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-icon-btn::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-icon-btn > * { position: relative; z-index: 1; } .md-icon-btn:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-icon-btn:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); } .md-icon-btn:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-icon-btn:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } .md-icon-btn-filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .md-icon-btn-tonal { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } /* --- FAB: acción principal flotante (nueva cita, nuevo paciente) --- */ .md-fab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--md-sys-spacing-2); min-width: 56px; height: 50px; padding: 0 var(--md-sys-spacing-4); border: none; border-radius: var(--md-sys-shape-corner-large); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: var(--md-sys-elevation-3); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-label-large-size); font-weight: 500; cursor: pointer; overflow: hidden; isolation: isolate; text-decoration: none; transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-fab::before { content: ''; position: absolute; inset: 0; z-index: 0; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-fab > * { position: relative; z-index: 1; } .md-fab:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-fab:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-fab:hover { box-shadow: var(--md-sys-elevation-4); } /* -------------------------------------------------------------------------- 7. TARJETAS Tres variantes MD3. Se usan en fichas de paciente, KPIs y listados. -------------------------------------------------------------------------- */ .md-card { display: block; border-radius: var(--md-sys-shape-corner-medium); background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); overflow: hidden; transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } /* Elevated — 1dp en reposo, 3dp al pasar el cursor. */ .md-card-elevated { background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-1); } /* Filled — sin sombra, se apoya en el color del contenedor. */ .md-card-filled { background-color: var(--md-sys-color-surface-container-highest); box-shadow: var(--md-sys-elevation-0); } /* Outlined — borde de 1px, la más sobria; ideal para listados densos. */ .md-card-outlined { background-color: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: var(--md-sys-elevation-0); } /* Solo las tarjetas que son un enlace/acción reaccionan al cursor. */ .md-card-interactive { cursor: pointer; position: relative; isolation: isolate; overflow: hidden; } .md-card-interactive::before { content: ''; position: absolute; inset: 0; z-index: 0; background-color: var(--md-sys-color-on-surface); opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-card-interactive > * { position: relative; z-index: 1; } .md-card-interactive:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-card-interactive:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-card-interactive.md-card-elevated:hover { box-shadow: var(--md-sys-elevation-2); } .md-card-body { padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); } .md-card-header { padding: var(--md-sys-spacing-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); } .md-card-footer { padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); border-top: 1px solid var(--md-sys-color-outline-variant); display: flex; align-items: center; gap: var(--md-sys-spacing-2); } /* -------------------------------------------------------------------------- 8. CAMPOS DE FORMULARIO Text fields MD3 (filled y outlined). Prioridad alta: son la pantalla más usada junto al calendario. -------------------------------------------------------------------------- */ .md-field { position: relative; display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); width: 100%; } .md-field-label { font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); font-weight: 500; letter-spacing: 0.4px; color: var(--md-sys-color-on-surface-variant); } .md-field-label .md-required { color: var(--md-sys-color-error); margin-left: 2px; } /* Control base: aplica a input, select y textarea. */ .md-input, .md-select, .md-textarea { width: 100%; box-sizing: border-box; min-height: 36px; padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line); transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-textarea { min-height: 96px; resize: vertical; } .md-input::placeholder, .md-textarea::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.7; } .md-input:hover, .md-select:hover, .md-textarea:hover { border-color: var(--md-sys-color-on-surface); } /* Foco: borde de 2px en primary, sin desplazar el layout. */ .md-input:focus, .md-select:focus, .md-textarea:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); } .md-input:disabled, .md-select:disabled, .md-textarea:disabled { background-color: rgb(var(--md-sys-color-on-surface-rgb) / 0.04); border-color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-container-opacity)); color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-content-opacity)); cursor: not-allowed; } /* Variante filled: fondo tonal y subrayado, la que MD3 usa por defecto. */ .md-field-filled .md-input, .md-field-filled .md-select, .md-field-filled .md-textarea { background-color: var(--md-sys-color-surface-container-highest); border: none; border-bottom: 1px solid var(--md-sys-color-on-surface-variant); border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0; } .md-field-filled .md-input:focus, .md-field-filled .md-select:focus, .md-field-filled .md-textarea:focus { border-bottom: 2px solid var(--md-sys-color-primary); box-shadow: none; } /* Select: flecha propia (la nativa no se puede tematizar). */ .md-select { appearance: none; -webkit-appearance: none; padding-right: var(--md-sys-spacing-8); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2373777f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--md-sys-spacing-3) center; background-size: 24px; cursor: pointer; } /* Texto de ayuda y error bajo el campo. */ .md-field-support { display: flex; align-items: center; gap: var(--md-sys-spacing-1); padding: 0 var(--md-sys-spacing-4); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); color: var(--md-sys-color-on-surface-variant); } .md-field-error .md-input, .md-field-error .md-select, .md-field-error .md-textarea, .md-input.md-invalid { border-color: var(--md-sys-color-error); } .md-field-error .md-field-support, .md-field-error .md-field-label { color: var(--md-sys-color-error); } /* Prefijo/sufijo dentro del campo (ej. $ en importes, icono de búsqueda). */ .md-field-affix { position: relative; display: flex; align-items: center; } .md-field-affix .md-input { padding-left: var(--md-sys-spacing-8); } .md-field-affix-icon { position: absolute; left: var(--md-sys-spacing-3); display: flex; align-items: center; color: var(--md-sys-color-on-surface-variant); pointer-events: none; } /* Checkbox y radio con el color del tema. */ .md-checkbox, .md-radio { width: 18px; height: 18px; accent-color: var(--md-sys-color-primary); cursor: pointer; } /* Switch MD3 */ .md-switch { position: relative; display: inline-block; width: 52px; height: 32px; flex-shrink: 0; } .md-switch input { opacity: 0; width: 0; height: 0; } .md-switch-track { position: absolute; inset: 0; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-highest); border: 2px solid var(--md-sys-color-outline); cursor: pointer; transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-switch-track::before { content: ''; position: absolute; left: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background-color: var(--md-sys-color-outline); transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized), width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized), height var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-switch input:checked + .md-switch-track { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); } .md-switch input:checked + .md-switch-track::before { transform: translateX(20px); width: 24px; height: 24px; margin-top: -12px; left: 0; background-color: var(--md-sys-color-on-primary); } .md-switch input:focus-visible + .md-switch-track { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } /* -------------------------------------------------------------------------- 9. NAVEGACIÓN Navigation Drawer (desktop), Navigation Bar (móvil) y Top App Bar. -------------------------------------------------------------------------- */ /* --- Top App Bar --- */ .md-top-bar { display: flex; align-items: center; gap: var(--md-sys-spacing-2); min-height: 58px; padding: 0 var(--md-sys-spacing-4); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } /* Al hacer scroll pasa a surface-container + 3dp (patrón "on scroll" de MD3). */ .md-top-bar-scrolled { background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); } .md-top-bar-title { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: 500; margin: 0; } /* --- Navigation Drawer (lista lateral) --- */ .md-nav-drawer { background-color: var(--md-sys-color-surface-container-low); border-right: 1px solid var(--md-sys-color-outline-variant); } /* Cada ítem: píldora completa de 56px, el patrón de MD3. */ .md-nav-item { position: relative; display: flex; align-items: center; gap: var(--md-sys-spacing-3); height: 40px; padding: 0 var(--md-sys-spacing-3); margin-bottom: var(--md-sys-spacing-1); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line); font-weight: 500; cursor: pointer; overflow: hidden; isolation: isolate; transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-nav-item::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-nav-item > * { position: relative; z-index: 2; } /* El ripple, insertado por JS como hijo del ítem, va SIEMPRE bajo el contenido. */ .md-nav-item > .md-ripple { z-index: 0; } .md-nav-item:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-nav-item:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); } .md-nav-item:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-nav-item:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } /* Ítem activo: contenedor secundario, como marca la especificación. */ .md-nav-item-active { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .md-nav-item-icon { display: flex; align-items: center; justify-content: center; width: 24px; flex-shrink: 0; /* Sobre el state layer y el ripple, siempre. Evita el parpadeo (contenido que desaparece un instante) al hacer clic, cuando el ripple se inserta. */ position: relative; z-index: 3; } .md-nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 3; } /* El ripple del nav-item nunca debe tapar su contenido, ni siquiera el instante en que se inserta como último hijo durante el clic. */ .md-nav-item > .md-ripple { z-index: 0 !important; } /* Badge numérico al final del ítem. */ .md-nav-item-badge { margin-left: auto; flex-shrink: 0; font-size: var(--md-sys-typescale-label-small-size); font-weight: 500; padding: 2px var(--md-sys-spacing-2); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); } .md-nav-section-label { padding: var(--md-sys-spacing-4) var(--md-sys-spacing-4) var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-title-small-size); font-weight: 500; color: var(--md-sys-color-on-surface-variant); } .md-nav-divider { height: 1px; margin: var(--md-sys-spacing-2) var(--md-sys-spacing-4); background-color: var(--md-sys-color-outline-variant); border: 0; } /* --- Navigation Bar (móvil, fija abajo) --- */ .md-nav-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-around; height: 80px; padding: var(--md-sys-spacing-3) var(--md-sys-spacing-2); background-color: var(--md-sys-color-surface-container); border-top: 1px solid var(--md-sys-color-outline-variant); } .md-nav-bar-item { display: flex; flex-direction: column; align-items: center; gap: var(--md-sys-spacing-1); flex: 1; min-width: 0; padding: 0 var(--md-sys-spacing-1); color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: var(--md-sys-typescale-label-medium-size); font-weight: 500; } /* El indicador activo es una píldora tras el icono, no el icono coloreado. */ .md-nav-bar-indicator { display: flex; align-items: center; justify-content: center; width: 64px; height: 32px; border-radius: var(--md-sys-shape-corner-full); transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-nav-bar-item-active { color: var(--md-sys-color-on-surface); } .md-nav-bar-item-active .md-nav-bar-indicator { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .md-nav-bar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- 10. DIÁLOGOS / MODALES — 24dp de radio, elevación 3 (6dp) -------------------------------------------------------------------------- */ .md-scrim { position: fixed; inset: 0; z-index: 50; background-color: rgb(var(--md-sys-color-scrim-rgb) / 0.32); backdrop-filter: blur(2px); animation: md-fade-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-dialog { position: relative; width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 96px); display: flex; flex-direction: column; border-radius: var(--md-sys-shape-corner-extra-large); background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-3); animation: md-dialog-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); } .md-dialog-header { padding: var(--md-sys-spacing-5) var(--md-sys-spacing-5) var(--md-sys-spacing-4); display: flex; align-items: center; gap: var(--md-sys-spacing-3); } .md-dialog-title { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); font-weight: 400; margin: 0; } .md-dialog-body { padding: 0 var(--md-sys-spacing-5); overflow-y: auto; flex: 1; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); } .md-dialog-actions { display: flex; justify-content: flex-end; gap: var(--md-sys-spacing-2); padding: var(--md-sys-spacing-5); } @keyframes md-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes md-dialog-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* -------------------------------------------------------------------------- 11. CHIPS Y BADGES DE ESTADO Los estados de cita (confirmada, pendiente, cancelada...) usan pares container/on-container para mantener el contraste en ambos modos. -------------------------------------------------------------------------- */ .md-chip { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); height: 32px; padding: 0 var(--md-sys-spacing-3); border-radius: var(--md-sys-shape-corner-small); border: 1px solid var(--md-sys-color-outline); background-color: transparent; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-large-size); font-weight: 500; white-space: nowrap; text-decoration: none; } .md-chip-filled { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; } .md-chip-selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; } .md-chip .material-symbols-rounded { font-size: 18px; } /* Badge de estado (más compacto que un chip). */ .md-badge { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); padding: 2px var(--md-sys-spacing-2); border-radius: var(--md-sys-shape-corner-small); font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line); font-weight: 500; white-space: nowrap; } .md-badge-primary { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .md-badge-secondary { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .md-badge-tertiary { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .md-badge-error { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } .md-badge-success { background-color: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); } .md-badge-warning { background-color: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); } .md-badge-neutral { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } /* -------------------------------------------------------------------------- 12. LISTAS -------------------------------------------------------------------------- */ .md-list { margin: 0; padding: var(--md-sys-spacing-1) 0; list-style: none; } .md-list-item { position: relative; display: flex; align-items: center; gap: var(--md-sys-spacing-4); min-height: 43px; padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); color: var(--md-sys-color-on-surface); text-decoration: none; isolation: isolate; } .md-list-item-interactive { cursor: pointer; overflow: hidden; } .md-list-item-interactive::before { content: ''; position: absolute; inset: 0; z-index: 0; background-color: var(--md-sys-color-on-surface); opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-list-item-interactive > * { position: relative; z-index: 1; } .md-list-item-interactive:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-list-item-interactive:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-list-item-headline { font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line); } .md-list-item-support { font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); color: var(--md-sys-color-on-surface-variant); } .md-list-divider { height: 1px; background-color: var(--md-sys-color-outline-variant); border: 0; margin: 0; } /* -------------------------------------------------------------------------- 13. TABLAS -------------------------------------------------------------------------- */ .md-table-wrapper { width: 100%; overflow-x: auto; border-radius: var(--md-sys-shape-corner-medium); border: 1px solid var(--md-sys-color-outline-variant); background-color: var(--md-sys-color-surface); } .md-table { width: 100%; border-collapse: collapse; } .md-table thead th { padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); text-align: left; background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line); font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--md-sys-color-outline-variant); } .md-table tbody td { padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); color: var(--md-sys-color-on-surface); } .md-table tbody tr:last-child td { border-bottom: none; } .md-table tbody tr { transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-table-hover tbody tr:hover { background-color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-hover-opacity)); } /* -------------------------------------------------------------------------- 14. CALENDARIO DE CITAS Prioridad especial: es la pantalla más usada del sistema. -------------------------------------------------------------------------- */ .md-calendar { background-color: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-large); padding: var(--md-sys-spacing-4); box-shadow: var(--md-sys-elevation-1); } .md-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-spacing-2); margin-bottom: var(--md-sys-spacing-4); } .md-calendar-month { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: 500; color: var(--md-sys-color-on-surface); text-transform: capitalize; } .md-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--md-sys-spacing-1); } .md-calendar-weekday { display: flex; align-items: center; justify-content: center; height: 36px; font-size: var(--md-sys-typescale-label-medium-size); font-weight: 500; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; } /* Cada día es un círculo de 40px (el "date picker" de MD3). */ .md-calendar-day { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 36px; border: none; border-radius: var(--md-sys-shape-corner-full); background-color: transparent; color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-body-large-size); cursor: pointer; isolation: isolate; overflow: hidden; transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-calendar-day::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-calendar-day > * { position: relative; z-index: 1; } .md-calendar-day:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-calendar-day:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-calendar-day:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } /* Hoy: solo un contorno, sin relleno. */ .md-calendar-day-today { border: 1px solid var(--md-sys-color-primary); color: var(--md-sys-color-primary); font-weight: 500; } /* Seleccionado: relleno primary. */ .md-calendar-day-selected { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 500; } .md-calendar-day-disabled, .md-calendar-day:disabled { color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-content-opacity)); cursor: not-allowed; pointer-events: none; } .md-calendar-day-outside { color: var(--md-sys-color-outline); } /* Punto indicador de "hay citas este día". */ .md-calendar-day-dot::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: var(--md-sys-color-tertiary); z-index: 2; } .md-calendar-day-selected.md-calendar-day-dot::after { background-color: var(--md-sys-color-on-primary); } /* --- Franjas horarias: la rejilla de selección de hora --- */ .md-timeslot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--md-sys-spacing-2); } .md-timeslot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 43px; padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-label-large-size); font-weight: 500; cursor: pointer; isolation: isolate; overflow: hidden; transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-timeslot::before { content: ''; position: absolute; inset: 0; z-index: 0; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-timeslot > * { position: relative; z-index: 1; } .md-timeslot:hover::before { opacity: var(--md-sys-state-hover-opacity); } .md-timeslot:active::before { opacity: var(--md-sys-state-pressed-opacity); } .md-timeslot:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } .md-timeslot-selected { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .md-timeslot-disabled, .md-timeslot:disabled { background-color: rgb(var(--md-sys-color-on-surface-rgb) / 0.04); border-color: transparent; color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-content-opacity)); cursor: not-allowed; pointer-events: none; text-decoration: line-through; } /* -------------------------------------------------------------------------- 15. SNACKBAR — reemplazo visual de los toasts existentes -------------------------------------------------------------------------- */ .md-snackbar { position: fixed; z-index: 2000; /* por encima de cualquier modal/scrim del sistema */ left: 50%; bottom: var(--md-sys-spacing-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--md-sys-spacing-3); min-height: 43px; max-width: min(560px, calc(100vw - 32px)); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); border-radius: var(--md-sys-shape-corner-extra-small); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); box-shadow: var(--md-sys-elevation-3); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); animation: md-snackbar-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); } .md-snackbar-leaving { animation: md-snackbar-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-accelerate) forwards; } /* El icono de estado colorea solo el icono: el fondo sigue siendo inverse-surface. */ .md-snackbar-icon-success { color: var(--md-sys-color-success); } .md-snackbar-icon-error { color: var(--md-sys-color-error-container); } .md-snackbar-icon-warning { color: var(--md-sys-color-warning); } .md-snackbar-icon-info { color: var(--md-sys-color-inverse-primary); } @keyframes md-snackbar-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes md-snackbar-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 16px); } } /* -------------------------------------------------------------------------- 16. BANNERS / ALERTAS EN LÍNEA -------------------------------------------------------------------------- */ .md-banner { display: flex; align-items: flex-start; gap: var(--md-sys-spacing-3); padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); border-radius: var(--md-sys-shape-corner-medium); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); } .md-banner-info { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .md-banner-success { background-color: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); } .md-banner-warning { background-color: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); } .md-banner-error { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } /* -------------------------------------------------------------------------- 17. UTILIDADES -------------------------------------------------------------------------- */ /* Superficies por rol */ .md-surface { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); } .md-surface-container-lowest { background-color: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); } .md-surface-container-low { background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); } .md-surface-container { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); } .md-surface-container-high { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } .md-surface-container-highest{ background-color: var(--md-sys-color-surface-container-highest);color: var(--md-sys-color-on-surface); } /* Texto por rol */ .md-on-surface { color: var(--md-sys-color-on-surface); } .md-on-surface-variant { color: var(--md-sys-color-on-surface-variant); } .md-text-primary { color: var(--md-sys-color-primary); } .md-text-error { color: var(--md-sys-color-error); } /* Espaciado en múltiplos de 8 */ .md-gap-1 { gap: var(--md-sys-spacing-1); } .md-gap-2 { gap: var(--md-sys-spacing-2); } .md-gap-3 { gap: var(--md-sys-spacing-3); } .md-gap-4 { gap: var(--md-sys-spacing-4); } .md-gap-5 { gap: var(--md-sys-spacing-5); } .md-gap-6 { gap: var(--md-sys-spacing-6); } .md-stack { display: flex; flex-direction: column; } .md-stack-4 { display: flex; flex-direction: column; gap: var(--md-sys-spacing-4); } .md-stack-5 { display: flex; flex-direction: column; gap: var(--md-sys-spacing-5); } .md-row { display: flex; align-items: center; } /* Divisor */ .md-divider { height: 1px; background-color: var(--md-sys-color-outline-variant); border: 0; margin: 0; } /* Iconos: ajusta el peso óptico de Material Symbols. */ .material-symbols-rounded, .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; user-select: none; vertical-align: middle; /* Los Material Symbols dibujan cada icono como una LIGADURA: el texto "person_add" se sustituye por su glifo. El CSS que sirve Google solo declara -webkit-font-feature-settings (con prefijo), y Chrome en Android ya no lo aplica, de modo que en el móvil se veía el nombre del icono en vez del dibujo. Aquí se declaran las propiedades estándar. */ font-feature-settings: 'liga' 1; font-variant-ligatures: common-ligatures discretionary-ligatures; -webkit-font-feature-settings: 'liga' 1; white-space: nowrap; word-wrap: normal; direction: ltr; text-transform: none; letter-spacing: normal; /* Mientras la fuente de iconos no ha llegado, el navegador pintaría el NOMBRE del icono ("person_add") con la tipografía de respaldo. Se evita recortando el texto al ancho del icono: se ve un hueco en lugar de una palabra suelta, y al cargar la fuente aparece el dibujo. */ overflow: hidden; max-width: 1.2em; text-indent: 0; } /* Cuando la fuente ya está lista se quita el recorte: algunos glifos (flechas anchas, iconos de dos caracteres) necesitan algo más de caja. */ .fuentes-listas .material-symbols-rounded, .fuentes-listas .material-symbols-outlined { overflow: visible; max-width: none; } .md-icon-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .md-icon-18 { font-size: 18px; } .md-icon-20 { font-size: 20px; } .md-icon-24 { font-size: 24px; } .md-icon-32 { font-size: 32px; } .md-icon-40 { font-size: 40px; } .md-icon-48 { font-size: 48px; } /* Solo para lectores de pantalla */ .md-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 18. ACCESIBILIDAD -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .md-ripple { display: none; } } @media print { .md-nav-drawer, .md-nav-bar, .md-top-bar, .md-fab, .md-snackbar { display: none !important; } .md-card, .md-table-wrapper { box-shadow: none !important; border: 1px solid #ccc; } } /* -------------------------------------------------------------------------- 19. CAPA DE COMPATIBILIDAD -------------------------------------------------------------------------- El proyecto tiene ~200 campos de formulario y ~140 botones escritos con utilidades Tailwind antes de esta migración. En vez de reescribir cada etiqueta, aquí se les da el acabado MD3 por selector de atributo. Es deliberadamente específico: solo alcanza elementos que ya declaraban ese aspecto (w-full + border en un campo, bg-primary en un botón), así que no afecta a nada que no fuera ya un campo o un botón. Al refactorizar una página a clases .md-* explícitas, estas reglas dejan de aplicarle porque las .md-* ganan por especificidad y orden. ------------------------------------------------------------------------ */ /* --- Campos de formulario escritos con utilidades --- */ input[class*="w-full"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.md-input), select[class*="w-full"]:not(.md-select), textarea[class*="w-full"]:not(.md-textarea), input[class*="border"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.md-input), select[class*="border"]:not(.md-select), textarea[class*="border"]:not(.md-textarea) { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); font-family: var(--md-sys-typescale-font); transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } /* Altura compacta (40px) sin pisar el padding que ya tuvieran. */ input[class*="w-full"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.md-input), select[class*="w-full"]:not(.md-select) { min-height: 36px; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.md-input):hover, select:not(.md-select):hover, textarea:not(.md-textarea):hover { border-color: var(--md-sys-color-on-surface); } /* Foco MD3: borde primary de 2px, sin el anillo difuso de Tailwind. */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.md-input):focus, select:not(.md-select):focus, textarea:not(.md-textarea):focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); --tw-ring-color: transparent; --tw-ring-shadow: 0 0 #0000; } input::placeholder, textarea::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.7; } /* Checkbox, radio y color pickers heredan el color del tema. */ input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--md-sys-color-primary); } /* Campos deshabilitados / de solo lectura */ input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] { background-color: rgb(var(--md-sys-color-on-surface-rgb) / 0.04); color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-content-opacity)); border-color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-disabled-container-opacity)); } /* Etiquetas de formulario */ label { color: var(--md-sys-color-on-surface-variant); } /* --- Botones escritos con utilidades --- */ button[class*="bg-primary"], a[class*="bg-primary"], button[class*="bg-secondary"], a[class*="bg-secondary"] { border-radius: var(--md-sys-shape-corner-full); font-weight: 500; letter-spacing: 0.1px; transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), filter var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } button[class*="bg-primary"]:hover, a[class*="bg-primary"]:hover, button[class*="bg-secondary"]:hover, a[class*="bg-secondary"]:hover { box-shadow: var(--md-sys-elevation-1); } button[class*="bg-primary"]:active, a[class*="bg-primary"]:active, button[class*="bg-secondary"]:active, a[class*="bg-secondary"]:active { box-shadow: none; filter: brightness(0.94); } /* Foco visible por teclado en cualquier control interactivo. */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } /* --- Tablas escritas con utilidades --- */ table th { color: var(--md-sys-color-on-surface-variant); font-weight: 500; } table td { color: var(--md-sys-color-on-surface); } /* --- Contenedores tipo tarjeta --- */ [class*="rounded-"][class*="shadow"] { transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } /* Los
y bordes sueltos siguen el token de contorno. */ hr { border-color: var(--md-sys-color-outline-variant); } /* Enlaces de texto dentro del contenido. */ main a:not([class]) { color: var(--md-sys-color-primary); text-decoration-color: rgb(var(--md-sys-color-primary-rgb) / 0.4); } /* -------------------------------------------------------------------------- 20. INDICADOR DE PROGRESO Sustituye a fa-spin, que dejó de existir al retirar Font Awesome. -------------------------------------------------------------------------- */ .md-spin { animation: md-spin-rotate 1.4s linear infinite; transform-origin: center; display: inline-block; } @keyframes md-spin-rotate { to { transform: rotate(360deg); } } /* Indicador circular MD3 para estados de carga sin icono. */ .md-progress-circular { width: 40px; height: 36px; border: 4px solid var(--md-sys-color-surface-container-highest); border-top-color: var(--md-sys-color-primary); border-radius: 50%; animation: md-spin-rotate 1s linear infinite; } /* Barra de progreso indeterminada. */ .md-progress-linear { position: relative; height: 4px; width: 100%; overflow: hidden; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-highest); } .md-progress-linear::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit; background-color: var(--md-sys-color-primary); animation: md-progress-slide 1.6s var(--md-sys-motion-easing-standard) infinite; } @keyframes md-progress-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .md-spin, .md-progress-circular, .md-progress-linear::after { animation: none; } } /* -------------------------------------------------------------------------- 21. MODALES EXISTENTES -------------------------------------------------------------------------- Los 15 modales del proyecto usan el patrón `fixed inset-0` + panel interior. Aquí reciben el acabado de un Dialog MD3 —scrim correcto, radio de 28px, elevación 6dp y animación de entrada— sin reescribir su markup ni tocar el JS que los abre y cierra (siguen funcionando con .hidden). ------------------------------------------------------------------------ */ /* El velo: MD3 usa scrim al 32%, no negro al 50%. */ div[class*="fixed"][class*="inset-0"][class*="bg-black"] { background-color: rgb(var(--md-sys-color-scrim-rgb) / 0.32) !important; backdrop-filter: blur(2px); } /* El panel interior del modal. */ div[class*="fixed"][class*="inset-0"][class*="bg-black"] > div:not(.md-dialog) { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-sys-elevation-3); } /* La animación solo debe correr al abrirse, no mientras está oculto. */ div[class*="fixed"][class*="inset-0"][class*="bg-black"]:not(.hidden) > div:not(.md-dialog) { animation: md-dialog-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); } /* Cabecera y pie separados por el contorno del tema. */ div[class*="fixed"][class*="inset-0"][class*="bg-black"] > div [class*="border-b"] { border-bottom-color: var(--md-sys-color-outline-variant); } div[class*="fixed"][class*="inset-0"][class*="bg-black"] > div [class*="border-t"] { border-top-color: var(--md-sys-color-outline-variant); } /* Botón de cierre (×) con área táctil y state layer. */ div[class*="fixed"][class*="inset-0"][class*="bg-black"] button[onclick*="hidden"] { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } div[class*="fixed"][class*="inset-0"][class*="bg-black"] button[onclick*="hidden"]:hover { background-color: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-hover-opacity)); color: var(--md-sys-color-on-surface); } /* -------------------------------------------------------------------------- 22. MINIMALISTA: SIN DEGRADADOS -------------------------------------------------------------------------- El diseño acordado usa colores planos. Cualquier degradado de Tailwind (bg-gradient-*, from-*, to-*, via-*) se aplana al color sólido de marca. Se cubre el markup existente sin reescribirlo; el resultado es un bloque de color primario liso donde antes había una transición. ------------------------------------------------------------------------ */ [class*="bg-gradient-"] { background-image: none !important; } /* Los degradados de marca (from-primary → to-secondary) pasan a primary liso. */ [class*="from-primary"], [class*="bg-gradient-"][class*="to-secondary"], [class*="bg-gradient-"][class*="to-primary"] { background-color: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary); } /* Degradados sobre fondos claros (from-slate-50, to-teal-50…) → superficie. */ [class*="bg-gradient-"][class*="from-slate"], [class*="bg-gradient-"][class*="from-gray"], [class*="bg-gradient-"][class*="to-teal-50"], [class*="bg-gradient-"][class*="to-blue-50"] { background-color: var(--md-sys-color-surface) !important; color: var(--md-sys-color-on-surface); } /* Las tarjetas KPI de estadísticas (from-blue-500, from-green-500…) usan el color pleno de su rol en lugar de una transición. */ [class*="bg-gradient-"][class*="from-blue"] { background-color: var(--md-sys-color-primary) !important; color: var(--md-sys-color-on-primary); } [class*="bg-gradient-"][class*="from-green"] { background-color: var(--md-sys-color-success) !important; color: var(--md-sys-color-on-success); } [class*="bg-gradient-"][class*="from-purple"] { background-color: var(--md-sys-color-secondary) !important; color: var(--md-sys-color-on-secondary); } [class*="bg-gradient-"][class*="from-yellow"] { background-color: var(--md-sys-color-warning) !important; color: var(--md-sys-color-on-warning); } [class*="bg-gradient-"][class*="from-red"] { background-color: var(--md-sys-color-error) !important; color: var(--md-sys-color-on-error); } /* -------------------------------------------------------------------------- 23. LIST BOXES / SELECTS — versión moderna -------------------------------------------------------------------------- Aplica a los .md-select y a los ~49 no se puede tematizar de forma fiable. El script md3-select.js envuelve cada real queda oculto y sincronizado, así que el POST y la lógica de la página no cambian. ------------------------------------------------------------------------ */ .md-select-wrap { position: relative; width: 100%; } /* Botón que muestra el valor actual (reemplaza visualmente al real se oculta pero sigue en el DOM (envía el POST). */ .md-select-native-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* -------------------------------------------------------------------------- 26. INPUTS DE FECHA/HORA — apariencia moderna y consistente -------------------------------------------------------------------------- Los nativos se ven distintos en cada navegador. Aquí se les da el mismo tratamiento que al resto de campos y se tematiza el icono del selector, manteniendo el datepicker nativo (que es accesible y funciona en móvil) pero integrado con el diseño. ------------------------------------------------------------------------ */ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { position: relative; min-height: 36px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-font); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3); cursor: pointer; transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover { border-color: var(--md-sys-color-on-surface); } input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px rgb(var(--md-sys-color-primary-rgb) / 0.12); } /* El icono del calendario/reloj: tinta primary y área táctil cómoda. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: var(--md-sys-shape-corner-full); padding: 4px; /* Recolorea el icono negro por defecto al azul de marca. */ filter: invert(24%) sepia(63%) saturate(1200%) hue-rotate(180deg) brightness(70%); transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover { background-color: rgb(var(--md-sys-color-primary-rgb) / 0.10); } /* En modo oscuro el icono debe aclararse. */ :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(70%) sepia(30%) saturate(600%) hue-rotate(180deg) brightness(110%); } /* -------------------------------------------------------------------------- 27. TRANSICIÓN DE WIZARD — leve y sutil -------------------------------------------------------------------------- Solo un fundido suave con un mínimo desplazamiento vertical. Sin barrido ni deslizamiento lateral: el paso simplemente aparece con delicadeza. ------------------------------------------------------------------------ */ .md-wizard-step { /* Transición rápida y ágil (~200ms) entre pasos. */ animation: md-wizard-fade 200ms var(--md-sys-motion-easing-standard-decelerate) both; } @keyframes md-wizard-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .md-wizard-step { animation: none !important; } } /* -------------------------------------------------------------------------- 28. DATEPICKER MODERNO (calendario desplegable para input[type=date]) -------------------------------------------------------------------------- md3-theme.js envuelve cada con este calendario, que comparte el lenguaje visual del resto (superficies, primary, radios). El input nativo queda sincronizado detrás para no romper formularios. ------------------------------------------------------------------------ */ .md-dp-wrap { position: relative; } /* Campo visible que abre el calendario. */ .md-dp-field { display: flex; align-items: center; gap: var(--md-sys-spacing-2); width: 100%; min-height: 40px; box-sizing: border-box; padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-body-large-size); cursor: pointer; transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-dp-field:hover { border-color: var(--md-sys-color-on-surface); } .md-dp-wrap.md-open .md-dp-field { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px rgb(var(--md-sys-color-primary-rgb) / 0.12); } .md-dp-field .md-dp-icon { color: var(--md-sys-color-primary); flex-shrink: 0; } .md-dp-field .md-dp-text { flex: 1; } .md-dp-field[data-empty="true"] .md-dp-text { color: var(--md-sys-color-on-surface-variant); } /* Panel del calendario. */ .md-dp-panel { position: absolute; z-index: 1500; top: calc(100% + 4px); left: 0; width: 288px; max-width: calc(100vw - 24px); padding: var(--md-sys-spacing-3); border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-3); opacity: 0; transform: scale(0.96); transform-origin: top left; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); } .md-dp-wrap.md-open .md-dp-panel, .md-dp-panel.md-dp-detached { opacity: 1; transform: scale(1); pointer-events: auto; } .md-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--md-sys-spacing-2); } .md-dp-month { font-weight: 600; font-size: var(--md-sys-typescale-title-small-size); color: var(--md-sys-color-on-surface); text-transform: capitalize; } .md-dp-nav { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 50%; color: var(--md-sys-color-on-surface-variant); cursor: pointer; transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-dp-nav:hover { background: rgb(var(--md-sys-color-on-surface-rgb) / 0.08); } .md-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .md-dp-dow { text-align: center; font-size: var(--md-sys-typescale-label-small-size); font-weight: 600; color: var(--md-sys-color-on-surface-variant); padding: 4px 0; text-transform: uppercase; } .md-dp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 50%; font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface); cursor: pointer; transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-dp-day:hover { background: rgb(var(--md-sys-color-on-surface-rgb) / 0.08); } .md-dp-day.md-today { border: 1px solid var(--md-sys-color-primary); color: var(--md-sys-color-primary); font-weight: 600; } .md-dp-day.md-selected { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 600; } .md-dp-day.md-empty { visibility: hidden; cursor: default; } .md-dp-day:disabled { color: rgb(var(--md-sys-color-on-surface-rgb) / 0.38); cursor: not-allowed; } .md-dp-actions { display: flex; justify-content: flex-end; gap: var(--md-sys-spacing-2); margin-top: var(--md-sys-spacing-2); padding-top: var(--md-sys-spacing-2); border-top: 1px solid var(--md-sys-color-outline-variant); } .md-dp-btn { border: none; background: transparent; color: var(--md-sys-color-primary); font-weight: 600; font-size: var(--md-sys-typescale-label-large-size); padding: 6px 12px; border-radius: var(--md-sys-shape-corner-full); cursor: pointer; } .md-dp-btn:hover { background: rgb(var(--md-sys-color-primary-rgb) / 0.08); } /* El input date real, oculto pero presente (envía el valor al formulario). */ .md-dp-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } @media (prefers-reduced-motion: reduce) { .md-dp-panel { transition: none; } } /* El input date se oculta hasta que el datepicker JS lo reemplaza, para no ver el campo nativo un instante. Solo si el runtime está activo (html.md-js), así sin JS el input sigue usable. */ html.md-js input[type="date"]:not([data-md-enhanced]):not([data-md-native]) { opacity: 0; position: absolute; pointer-events: none; height: 0; margin: 0; padding: 0; border: 0; }