/* Legal Works - Agenda procesal calendar 3D - 20260630 */ .cdk-overlay-pane .mat-datepicker-content, .cdk-overlay-pane .mat-datetimepicker-content, .cdk-overlay-pane .ngx-mat-datetimepicker-content, .cdk-overlay-pane .ngx-mat-timepicker, .cdk-overlay-pane .ngx-mat-datetime-content { border: 1px solid rgba(96, 202, 255, 0.34) !important; border-radius: 18px !important; overflow: hidden !important; background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.20), transparent 34%), linear-gradient(180deg, #f8fcff 0%, #eaf6ff 100%) !important; box-shadow: 0 28px 75px rgba(2, 8, 23, 0.34), 0 0 0 1px rgba(125, 211, 252, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } .cdk-overlay-pane .mat-calendar { background: transparent !important; color: #09233b !important; padding: 8px !important; } .cdk-overlay-pane .mat-calendar-header, .cdk-overlay-pane .mat-calendar-controls { color: #09233b !important; } .cdk-overlay-pane .mat-calendar-period-button, .cdk-overlay-pane .mat-calendar-previous-button, .cdk-overlay-pane .mat-calendar-next-button { border-radius: 12px !important; color: #09233b !important; font-weight: 950 !important; text-shadow: 0 1px 0 #ffffff !important; } .cdk-overlay-pane .mat-calendar-previous-button:hover, .cdk-overlay-pane .mat-calendar-next-button:hover, .cdk-overlay-pane .mat-calendar-period-button:hover { background: rgba(14, 165, 233, 0.12) !important; box-shadow: 0 8px 18px rgba(14, 165, 233, 0.16) !important; } .cdk-overlay-pane .mat-calendar-table-header th, .cdk-overlay-pane .mat-calendar-body-label { color: #12384f !important; font-weight: 950 !important; text-shadow: 0 1px 0 #ffffff !important; } .cdk-overlay-pane .mat-calendar-body-cell { outline: none !important; perspective: 460px; } .cdk-overlay-pane .mat-calendar-body-cell-content { border-radius: 9px !important; color: #09233b !important; font-weight: 950 !important; transform: translateZ(0); transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease !important; text-shadow: 0 1px 0 #ffffff, 0 2px 0 rgba(47, 127, 166, 0.16), 0 4px 8px rgba(15, 23, 42, 0.12) !important; } .cdk-overlay-pane .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content, .cdk-overlay-pane .mat-calendar-body-cell.cdk-keyboard-focused .mat-calendar-body-cell-content, .cdk-overlay-pane .mat-calendar-body-cell.cdk-program-focused .mat-calendar-body-cell-content { color: #ffffff !important; background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.50), transparent 34%), linear-gradient(145deg, #0ea5e9 0%, #0b6f9d 58%, #053452 100%) !important; border: 1px solid rgba(186, 230, 253, 0.95) !important; transform: translateY(-3px) rotateX(10deg) scale(1.09) !important; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.42), 0 0 18px rgba(56, 189, 248, 0.92), 0 10px 18px rgba(2, 8, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 -4px 7px rgba(2, 8, 23, 0.24) !important; text-shadow: 0 1px 0 rgba(2, 8, 23, 0.55), 0 0 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(125, 211, 252, 0.95) !important; } .cdk-overlay-pane .mat-calendar-body-selected, .cdk-overlay-pane .mat-calendar-body-active .mat-calendar-body-cell-content { color: #ffffff !important; background: radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.48), transparent 32%), linear-gradient(145deg, #0f8fd1 0%, #075985 64%, #02243c 100%) !important; border: 1px solid rgba(186, 230, 253, 0.95) !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.36), 0 0 16px rgba(14, 165, 233, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.56), inset 0 -5px 9px rgba(2, 8, 23, 0.25) !important; text-shadow: 0 1px 0 rgba(2, 8, 23, 0.50), 0 0 10px rgba(255, 255, 255, 0.80) !important; } .cdk-overlay-pane .mat-calendar-body-today:not(.mat-calendar-body-selected) { border-color: rgba(14, 165, 233, 0.72) !important; box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important; } .cdk-overlay-pane .mat-calendar-body-disabled .mat-calendar-body-cell-content { color: rgba(71, 85, 105, 0.44) !important; text-shadow: none !important; } .cdk-overlay-pane .mat-calendar-arrow { fill: #0f4d6b !important; } /* Rueda de hora/minuto del datetime picker */ .cdk-overlay-pane .ngx-mat-timepicker table, .cdk-overlay-pane .ngx-mat-datetime-content table { background: transparent !important; } .cdk-overlay-pane .ngx-mat-timepicker .mat-button, .cdk-overlay-pane .ngx-mat-datetime-content .mat-button, .cdk-overlay-pane .ngx-mat-timepicker button, .cdk-overlay-pane .ngx-mat-datetime-content button { border-radius: 10px !important; color: #09233b !important; font-weight: 950 !important; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important; text-shadow: 0 1px 0 #ffffff, 0 2px 0 rgba(47, 127, 166, 0.14) !important; } .cdk-overlay-pane .ngx-mat-timepicker .mat-button:hover, .cdk-overlay-pane .ngx-mat-datetime-content .mat-button:hover, .cdk-overlay-pane .ngx-mat-timepicker button:hover, .cdk-overlay-pane .ngx-mat-datetime-content button:hover { color: #ffffff !important; background: linear-gradient(145deg, #0ea5e9, #075985) !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.34), 0 0 16px rgba(56, 189, 248, 0.78), 0 8px 18px rgba(2, 8, 23, 0.20) !important; text-shadow: 0 1px 0 rgba(2, 8, 23, 0.50), 0 0 10px rgba(255, 255, 255, 0.88) !important; } /* V2 - Agregar Actividad: datetime picker completo, incluyendo horas */ .cdk-overlay-pane .mat-datetimepicker-content, .cdk-overlay-pane .mat-datetimepicker-content .mat-datetimepicker-calendar, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar, .cdk-overlay-pane .mat-datetimepicker-content .mat-datetimepicker-time, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"], .cdk-overlay-pane .mat-datetimepicker-content [class*="clock"] { background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.18), transparent 34%), linear-gradient(180deg, #f8fcff 0%, #e6f6ff 100%) !important; color: #09233b !important; } .cdk-overlay-pane .mat-datetimepicker-content { border: 1px solid rgba(96, 202, 255, 0.44) !important; border-radius: 18px !important; box-shadow: 0 30px 80px rgba(2, 8, 23, 0.36), 0 0 0 1px rgba(125, 211, 252, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; } .cdk-overlay-pane .mat-datetimepicker-content td, .cdk-overlay-pane .mat-datetimepicker-content th, .cdk-overlay-pane .mat-datetimepicker-content span, .cdk-overlay-pane .mat-datetimepicker-content .mat-button-wrapper, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-cell-content { color: #09233b !important; font-weight: 950 !important; text-shadow: 0 1px 0 #ffffff, 0 2px 0 rgba(47, 127, 166, 0.15), 0 4px 9px rgba(15, 23, 42, 0.10) !important; } .cdk-overlay-pane .mat-datetimepicker-content button, .cdk-overlay-pane .mat-datetimepicker-content .mat-button, .cdk-overlay-pane .mat-datetimepicker-content [role="button"], .cdk-overlay-pane .mat-datetimepicker-content td, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-cell-content { border-radius: 10px !important; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease !important; } .cdk-overlay-pane .mat-datetimepicker-content button:hover, .cdk-overlay-pane .mat-datetimepicker-content .mat-button:hover, .cdk-overlay-pane .mat-datetimepicker-content [role="button"]:hover, .cdk-overlay-pane .mat-datetimepicker-content td:hover, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content { color: #ffffff !important; background: radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.50), transparent 34%), linear-gradient(145deg, #0ea5e9 0%, #0b6f9d 58%, #053452 100%) !important; transform: translateY(-3px) scale(1.07) !important; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.42), 0 0 18px rgba(56, 189, 248, 0.92), 0 10px 18px rgba(2, 8, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -4px 7px rgba(2, 8, 23, 0.24) !important; text-shadow: 0 1px 0 rgba(2, 8, 23, 0.55), 0 0 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(125, 211, 252, 0.95) !important; } .cdk-overlay-pane .mat-datetimepicker-content button:hover span, .cdk-overlay-pane .mat-datetimepicker-content .mat-button:hover span, .cdk-overlay-pane .mat-datetimepicker-content [role="button"]:hover span, .cdk-overlay-pane .mat-datetimepicker-content td:hover span, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-cell:hover .mat-calendar-body-cell-content { color: #ffffff !important; text-shadow: 0 1px 0 rgba(2, 8, 23, 0.55), 0 0 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(125, 211, 252, 0.95) !important; } .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-selected, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-active .mat-calendar-body-cell-content, .cdk-overlay-pane .mat-datetimepicker-content .mat-primary, .cdk-overlay-pane .mat-datetimepicker-content .mat-accent, .cdk-overlay-pane .mat-datetimepicker-content [aria-pressed="true"], .cdk-overlay-pane .mat-datetimepicker-content [aria-selected="true"] { color: #ffffff !important; background: radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.48), transparent 32%), linear-gradient(145deg, #0f8fd1 0%, #075985 64%, #02243c 100%) !important; border-color: rgba(186, 230, 253, 0.95) !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.36), 0 0 16px rgba(14, 165, 233, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.56), inset 0 -5px 9px rgba(2, 8, 23, 0.25) !important; } .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-body-selected span, .cdk-overlay-pane .mat-datetimepicker-content [aria-pressed="true"] span, .cdk-overlay-pane .mat-datetimepicker-content [aria-selected="true"] span { color: #ffffff !important; } .cdk-overlay-pane .mat-datetimepicker-content .mat-datetimepicker-calendar-header, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-header, .cdk-overlay-pane .mat-datetimepicker-content .mat-calendar-controls { background: transparent !important; color: #09233b !important; } /* Columnas de hora/minuto/meridiano del selector de actividades */ .cdk-overlay-pane .mat-datetimepicker-content [class*="hour"], .cdk-overlay-pane .mat-datetimepicker-content [class*="minute"], .cdk-overlay-pane .mat-datetimepicker-content [class*="meridian"], .cdk-overlay-pane .mat-datetimepicker-content [class*="ampm"], .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] button, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] .mat-button, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] td, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] span { font-weight: 950 !important; color: #09233b !important; text-shadow: 0 1px 0 #ffffff, 0 2px 0 rgba(47, 127, 166, 0.16), 0 4px 9px rgba(15, 23, 42, 0.12) !important; } .cdk-overlay-pane .mat-datetimepicker-content [class*="hour"]:hover, .cdk-overlay-pane .mat-datetimepicker-content [class*="minute"]:hover, .cdk-overlay-pane .mat-datetimepicker-content [class*="meridian"]:hover, .cdk-overlay-pane .mat-datetimepicker-content [class*="ampm"]:hover, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] button:hover, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] .mat-button:hover, .cdk-overlay-pane .mat-datetimepicker-content [class*="time"] td:hover { color: #ffffff !important; background: radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.50), transparent 34%), linear-gradient(145deg, #0ea5e9 0%, #0b6f9d 58%, #053452 100%) !important; transform: translateY(-2px) scale(1.06) !important; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.38), 0 0 16px rgba(56, 189, 248, 0.82), 0 8px 16px rgba(2, 8, 23, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; }