/* Variables de color Elgom */
:root {
	--elgom-blue: #003366;
	--elgom-blue-hover: #004C99;
	--elgom-blue-light: #E0EAF4;
	--elgom-blue-dark: #001F3F;
	--elgom-orange: #F26C21;
	--elgom-orange-hover: #D4581A;
	--elgom-orange-light: #FCE4D4;
	--elgom-ink: #1F2937;
	--elgom-muted: #6B7280;
	--elgom-gray: #4a4a4a;
	--elgom-shadow-sm: 0 1px 2px rgba(0, 51, 102, 0.06);
	--elgom-shadow: 0 8px 24px rgba(0, 51, 102, 0.12);
	--elgom-shadow-lg: 0 18px 40px rgba(0, 51, 102, 0.22);
}

/* ============================================
   BOTONES PRIMARIOS
   ============================================ */

/* Boton primario - Naranja Elgom */
.btn-primary,
.btn.btn-primary,
.primary-action,
button.btn-primary,
a.btn-primary {
	background-color: var(--elgom-orange) !important;
	border-color: var(--elgom-orange) !important;
	color: #ffffff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.primary-action:hover,
button.btn-primary:hover,
a.btn-primary:hover {
	background-color: var(--elgom-orange-hover) !important;
	border-color: var(--elgom-orange-hover) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 4px rgba(242, 108, 33, 0.20);
}

.btn-primary:active,
.btn.btn-primary:active,
.primary-action:active {
	background-color: var(--elgom-orange-hover) !important;
	border-color: var(--elgom-orange-hover) !important;
}

.btn-primary:focus,
.btn.btn-primary:focus {
	box-shadow: 0 0 0 3px rgba(242, 108, 33, 0.15) !important;
	border-color: var(--elgom-orange) !important;
}

/* ============================================
   ENLACES Y NAVEGACI??N
   ============================================ */

/* Enlaces con color naranja en hover */
a:not(.btn):hover {
	color: var(--elgom-orange) !important;
	transition: color 0.2s ease;
}

/* Enlaces activos */
a.active,
.nav-link.active {
	color: var(--elgom-orange) !important;
}

.dropdown-menu-item .menu-item-title {
	color: white !important;
}

/* ============================================
   SIDEBAR PRINCIPAL
   ============================================ */

/* Fondo del sidebar con azul Elgom */
.body-sidebar {
	background: var(--elgom-blue) !important;
	border-right-color: var(--elgom-blue-hover) !important;
}

.header-logo-container {
	background-color: rgba(0, 0, 0, 0) !important;
}

.sidebar-header-menu {
	background-color: var(--elgom-blue) !important;
}

/* Enlaces del sidebar en blanco */
.body-sidebar .item-anchor,
.body-sidebar .sidebar-item-label,
.body-sidebar a,
.body-sidebar .collapse-sidebar-link {
	color: #ffffff !important;
	transition: all 0.2s ease-in-out;
}

/* Iconos del sidebar en blanco */
.body-sidebar .icon,
.body-sidebar svg {
	--icon-stroke: #ffffff !important;
	color: #ffffff !important;
}

/* Flecha del toggle de colapso del sidebar: flota sobre un fondo claro,
   no heredar el blanco de los iconos del sidebar */
.body-sidebar .collapse-sidebar-link svg,
.body-sidebar .collapse-sidebar-link .icon {
	--icon-stroke: var(--elgom-ink) !important;
	color: var(--elgom-ink) !important;
}

/* Contador de notificaciones en el sidebar: pill blanco + número oscuro legible
   (Frappe usa color gris --text-muted sobre --bg-gray-100, invisible sobre el azul) */
.body-sidebar .sidebar-notification-count,
.body-sidebar .sidebar-item-suffix .sidebar-notification-count {
	background-color: #ffffff !important;
	color: var(--elgom-ink) !important;
}

/* Hover en los items del sidebar - Naranja Elgom */
.body-sidebar .standard-sidebar-item:hover:not(.active-sidebar) {
	background-color: var(--elgom-orange) !important;
	border-radius: 8px;
}

.body-sidebar .standard-sidebar-item:hover:not(.active-sidebar) .item-anchor,
.body-sidebar .standard-sidebar-item:hover:not(.active-sidebar) .sidebar-item-label,
.body-sidebar .standard-sidebar-item:hover:not(.active-sidebar) a {
	color: #ffffff !important;
}

.body-sidebar .standard-sidebar-item:hover:not(.active-sidebar) .icon,
.body-sidebar .standard-sidebar-item:hover:not(.active-sidebar) svg {
	--icon-stroke: #ffffff !important;
	color: #ffffff !important;
}

/* Item activo del sidebar - Fondo claro */
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.active,
.body-sidebar .active-sidebar {
	background: rgba(255, 255, 255, 0.2) !important;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
	position: relative;
}

.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar .standard-sidebar-item.active .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active .sidebar-item-label,
.body-sidebar .active-sidebar .item-anchor,
.body-sidebar .active-sidebar .sidebar-item-label {
	color: #ffffff !important;
	font-weight: 600 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.body-sidebar .standard-sidebar-item.active-sidebar .icon,
.body-sidebar .standard-sidebar-item.active .icon,
.body-sidebar .active-sidebar .icon {
	--icon-stroke: #ffffff !important;
	color: #ffffff !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Divider en el sidebar */
.body-sidebar .divider {
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ocultar enlace "About" en el sidebar */
button.about-sidebar-link.btn.btn-ghost.btn-xs {
	display: none !important;
}

/* Brand logo en header del sidebar — versión blanca sobre azul */
.body-sidebar .sidebar-header-menu .header-logo-section img,
.body-sidebar .sidebar-header-menu img.app-logo,
.body-sidebar .app-logo {
	filter: brightness(0) invert(1);
	height: 28px !important;
	width: auto !important;
	max-width: 160px !important;
	padding: 6px 0;
}

.body-sidebar .sidebar-header-menu .sidebar-toggle-btn,
.body-sidebar .sidebar-header-menu .collapse-sidebar-link {
	color: #ffffff !important;
}

.body-sidebar .sidebar-header-menu {
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	padding: 12px 14px !important;
	min-height: 56px;
	display: flex;
	align-items: center;
}

/* ============================================
   ELEMENTOS DE NAVEGACION (OTROS SIDEBARS)
   ============================================ */

/* Sidebar de listas - Elemento activo */
.sidebar-item.active a,
.list-sidebar .list-link.active a {
	color: var(--elgom-orange) !important;
}

/* Sidebar de listas - Hover */
.sidebar-item:hover:not(.active),
.list-sidebar .list-link:hover:not(.active) {
	background-color: var(--elgom-orange-light) !important;
}

.sidebar-header:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.notification-body .message {
	color: var(--elgom-gray) !important;
}

/* ============================================
   PESTA??AS (TABS)
   ============================================ */

.std-form-layout .form-tabs-list {
	background-color: #f8fafc;
	border-bottom: 1px solid #dbe4ee;
	padding: 4px 8px 0;
}

.std-form-layout .form-tabs-list .form-tabs .nav-item .nav-link {
	background-color: #f1f5f9;
	border: 1px solid transparent;
	border-bottom: 2px solid transparent;
	border-radius: 6px 6px 0 0;
	color: #64748b;
	margin: 0 3px;
	padding: 8px 12px 7px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.std-form-layout .form-tabs-list .form-tabs .nav-item .nav-link:hover:not(.active) {
	background-color: #e7eef6;
	color: var(--elgom-blue) !important;
}

.std-form-layout .form-tabs-list .form-tabs .nav-item .nav-link.active {
	background-color: var(--elgom-blue-light);
	border-bottom-color: var(--elgom-orange);
	color: var(--elgom-blue) !important;
	font-weight: 600;
}

.std-form-layout .form-tabs-list .form-tabs .nav-item .nav-link:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.2);
	outline: none;
}

@media (max-width: 767px) {
	.std-form-layout .form-tabs-list {
		padding-left: 4px;
		padding-right: 4px;
	}

	.std-form-layout .form-tabs-list .form-tabs .nav-item .nav-link {
		margin-left: 2px;
		margin-right: 2px;
		padding-left: 9px;
		padding-right: 9px;
	}
}

.nav-tabs .nav-link.active {
	border-bottom-color: var(--elgom-orange) !important;
	color: var(--elgom-orange) !important;
}

.nav-tabs .nav-link:hover:not(.active) {
	color: var(--elgom-orange) !important;
}

/* ============================================
   TABLAS
   ============================================ */

/* Enlaces en tablas */
.table a:not(.btn):hover {
	color: var(--elgom-orange) !important;
}

/* ============================================
   BOTONES DE ACCI??N ESPEC??FICOS
   ============================================ */

/* Bot??n "Save" o "Submit" */
button[type="submit"]:not(.btn-danger),
.btn-save,
.form-actions .btn-primary {
	background-color: var(--elgom-orange) !important;
	border-color: var(--elgom-orange) !important;
}

/* Enlace men?? lateral */
.dropdown-menu-item .menu-item-title {
	color: #7B808A !important;
}

/* Ocultar botones de a??adir m??ltiples y subir archivo en child doctypes */
.grid-add-multiple-rows.btn.btn-xs.btn-secondary,
.grid-upload.btn.btn-xs.btn-secondary {
	display: none !important;
}

/* Bot??n de colapsar filas en child doctypes (dialogs y grids en formulario) */
.form-in-grid .grid-collapse-row.btn.btn-secondary.btn-sm.pull-right {
	background-color: var(--elgom-orange) !important;
	border-color: var(--elgom-orange) !important;
	color: #ffffff !important;
}

.form-in-grid .grid-collapse-row.btn.btn-secondary.btn-sm.pull-right:hover {
	background-color: var(--elgom-orange-hover) !important;
	border-color: var(--elgom-orange-hover) !important;
}

/* Elgom: reduce font size of SVG legend labels and ensure consistent fill color
   as a defensive measure to reduce chance of overlap for very long labels.
   Note: SVG <text> doesn't support CSS ellipsis; we enable truncation via
   frappe.utils.make_chart override in elgom.js. */
.dashboard-widget-box .frappe-chart .chart-legend text.legend-dataset-label,
.dashboard-widget-box .frappe-chart .chart-legend text.legend-dataset-value {
	font-size: 11px !important;
	fill: #6c7680 !important;
}

/* ============================================
   PLANIFICADOR - FULL WIDTH + FULL HEIGHT (Frappe v16)
   ============================================ */

/* Planificador typography: keep Frappe and Syncfusion on the same scale. */
body[data-route="planificador"],
body[data-route="planificador-ot"] {
    --pf-font-xs: 10px;
    --pf-font-sm: 12px;
    --pf-font-md: 13px;
    --pf-font-lg: 14px;
    --pf-font-family: var(--font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

body[data-route="planificador"] .planif-topbar,
body[data-route="planificador"] .planificador-container,
body[data-route="planificador"] .planif-toolbar,
body[data-route="planificador-ot"] .pot-page {
    font-family: var(--pf-font-family);
}

/* Syncfusion imports Roboto in its bundle; inherit the page font in this scope. */
body[data-route="planificador"] .e-control,
body[data-route="planificador-ot"] .e-control {
    font-family: inherit;
}

.pf-text-xs { font-size: var(--pf-font-xs); }
.pf-text-sm { font-size: var(--pf-font-sm); }
.pf-text-md { font-size: var(--pf-font-md); }
.pf-text-lg { font-size: var(--pf-font-lg); }

/* 1. Override Frappe v16 page container constraints */

body[data-route="planificador"] {
    overflow: hidden !important;
}

body[data-route="planificador"] .container.page-body {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body[data-route="planificador"] .page-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

body[data-route="planificador"] .page-content {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Force layout-main to use full width (override --page-max-width) */
body[data-route="planificador"] .layout-main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

body[data-route="planificador"] .layout-main-section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

body[data-route="planificador"] .layout-main-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

body[data-route="planificador"] .page-wrapper,
body[data-route="planificador"] .page-content,
body[data-route="planificador"] .layout-main,
body[data-route="planificador"] .layout-main-section-wrapper,
body[data-route="planificador"] .layout-main-section {
    
    min-height: 0 !important;
    overflow: hidden !important;
}

body[data-route="planificador"] .layout-side-section {
    display: none !important;
}

/* 3. The planificador root */
.planificador-container {
    display: flex !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 4. Calendar / Scheduler container (Syncfusion EJ2) */
body[data-route="planificador"] #planificador-calendar {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body[data-route="planificador"] #planificador-calendar .e-schedule {
    min-height: 0;
    border: none;
}

/* 5. Syncfusion EJ2 Scheduler overrides */

/* Today highlight */
body[data-route="planificador"] .e-schedule .e-today {
    background: rgba(242, 108, 33, 0.04) !important;
}

/* Now indicator */
body[data-route="planificador"] .e-schedule .e-current-time {
    background: var(--elgom-orange) !important;
    height: 2px !important;
}

body[data-route="planificador"] .e-schedule .e-current-timeline {
    --e-current-time-color: var(--elgom-orange);
}

/* Fix: appointment wrappers steal pointer events from sibling resource rows.
   All 428 wrappers are stacked at the same absolute origin, so late-DOM
   wrappers intercept mouseenter for early workers. Route events through
   .e-appointment and .e-more-indicator elements directly. */
body[data-route="planificador"] .e-appointment-wrapper {
    pointer-events: none;
}
body[data-route="planificador"] .e-appointment,
body[data-route="planificador"] .e-more-indicator {
    pointer-events: auto;
}

/* 6. Sidebar resource items */
.trabajador-item:hover,
.brigada-item:hover,
.vehiculo-item:hover,
.ot-card-item:hover {
    background: #e5e7eb !important;
}

.pf-group-header {
    user-select: none;
}

body[data-route="planificador"] .planif-sidebar {
    width: 300px;
    height: 95vh !important;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    overflow: hidden;
}

body[data-route="planificador"] .planif-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    overflow: hidden;
}

#lista-trabajadores {
    overflow-x: hidden;
}
.pf-group-body {
    overflow: hidden;
}

#lista-trabajadores .pf-group {
    flex-shrink: 0;
}
.pf-group-header:hover,
.section-toggle-header:hover {
    background: #e5e7eb !important;
}

.pf-group-header .pf-chevron {
    font-size: 8px;
    transition: transform 0.2s;
    display: inline-block;
}

.pf-group-header.collapsed .pf-chevron {
    transform: rotate(-90deg);
}

.pf-group-body {
    overflow: hidden;
}

body[data-route="planificador"] .planif-resources-scroll,
body[data-route="planificador"] .pf-group,
body[data-route="planificador"] .pf-group-body,
body[data-route="planificador"] #planificador-calendar .e-schedule,
body[data-route="planificador"] .e-schedule .e-content-wrap {
    min-height: 0;
}
/* 7. OT cards (see #10j for enhanced styles) */

/* 8. Context Menu (see #10k for enhanced styles) */

/* 9. Vacation/incident overlays on cells (see #10c for enhanced styles) */

/* 10. Tooltip flotante - MEJORADO */
.pf-tooltip {
    position: fixed;
    z-index: 10050;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 12px 25px -5px rgba(0,0,0,0.15), 0 4px 10px -2px rgba(0,0,0,0.05);
    padding: 0;
    min-width: 280px;
    max-width: 360px;
    pointer-events: none;
    font-size: 12px;
    line-height: 1.5;
    overflow: hidden;
}

.pf-tooltip-header {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 12px 8px;
}

.pf-tooltip-title {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    margin-bottom: 4px;
}

.pf-tooltip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.pf-tooltip-estado-trabajo {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    color: white;
    font-weight: 500;
}

.pf-tooltip-body {
    padding: 8px 12px 10px;
}

.pf-tooltip-row {
    font-size: 11px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.pf-tooltip-meta {
    display: grid;
    gap: 1px;
    margin-bottom: 3px;
}

.pf-tooltip-meta-row {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: center;
    column-gap: 4px;
    font-size: 11px;
    line-height: 1.2;
    color: #374151;
}

.pf-tooltip-meta-row .icon {
    width: 12px;
    height: 12px;
    justify-self: center;
}

.pf-tooltip-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
    margin-bottom: 3px;
}

.pf-tooltip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.pf-chip {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-chip-worker {
    background: #e5e7eb;
    color: #374151;
}

.pf-chip-brigada {
    background: #dbeafe;
    color: #1e40af;
}

.pf-chip-vehiculo {
    background: #d1fae5;
    color: #065f46;
}

.pf-chip-etiqueta {
    background: #f3f4f6;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pf-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* 10b. Etiqueta colored badge on events — absolute top-right inside appointment */
.pf-etiqueta-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255,255,255,0.85) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Syncfusion EJ2 appointment (event) styling */
body[data-route="planificador"] .e-schedule .e-appointment {
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
    padding-right: 18px;
    background-color: var(--pf-ev-bg, #dbeafe) !important;
    color: var(--pf-ev-text, #1e40af) !important;
    border-color: var(--pf-ev-border, #3b82f6) !important;
}

.e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: var(--elgom-orange) !important;
}

/* Planning status left border */
body[data-route="planificador"] .e-schedule .e-appointment[data-border-planificacion] {
    border-left: 4px solid var(--pf-border-planificacion, #9ca3af) !important;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge {
	position: absolute;
	top: 2px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: calc(100% - 8px);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	pointer-events: none;
	z-index: 8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
	border: 1px solid transparent;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--left {
	left: 2px;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--right {
	right: 2px;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--solo {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	max-width: calc(100% - 24px);
	justify-content: center;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--compact {
	padding: 1px 6px;
	font-size: 10px;
	max-width: calc(100% - 6px);
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--vacaciones {
	background: rgba(220, 252, 231, 0.95);
	border-color: rgba(22, 163, 74, 0.22);
	color: #166534;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--vacaciones-pendiente {
	background: rgba(255, 247, 237, 0.96);
	border-color: rgba(245, 158, 11, 0.28);
	color: #b45309;
}

body[data-route="planificador"] .e-schedule .pf-cell-badge--guardia {
	background: rgba(254, 226, 226, 0.97);
	border-color: rgba(220, 38, 38, 0.28);
	color: #b91c1c;
}

body[data-route="planificador"] .e-schedule .pf-cell-vacaciones,
body[data-route="planificador"] .e-schedule .pf-cell-incidencia {
    cursor: not-allowed !important;
}

body[data-route="planificador"] .e-schedule .pf-cell-guardia {
	cursor: context-menu !important;
}

body[data-route="planificador"] .e-schedule .pf-cell-vacaciones-pendiente {
    cursor: context-menu !important;
}

/* Weekend cells */
body[data-route="planificador"] .e-schedule .pf-cell-weekend {
    background: #f8fafc !important;
}

/* Vacation stripe */
body[data-route="planificador"] .e-schedule .pf-cell-vacaciones {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(34, 197, 94, 0.08) 4px,
        rgba(34, 197, 94, 0.08) 8px
    ) !important;
}

body[data-route="planificador"] .e-schedule .pf-cell-vacaciones-pendiente {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(245, 158, 11, 0.10) 4px,
        rgba(245, 158, 11, 0.10) 8px
    ) !important;
}

body[data-route="planificador"] .e-schedule .pf-cell-guardia {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 4px,
		rgba(239, 68, 68, 0.16) 4px,
		rgba(239, 68, 68, 0.16) 8px
	) !important;
	box-shadow: inset 0 -2px 0 rgba(185, 28, 28, 0.35);
}

body[data-route="planificador"] .e-schedule .pf-cell-has-badge {
	position: relative;
}

body[data-route="planificador"] .e-schedule .e-appointment.pf-event-has-guardia {
	position: relative;
	box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.4);
}

body[data-route="planificador"] .e-schedule .pf-event-guardia-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(254, 226, 226, 0.98);
	border: 1px solid rgba(220, 38, 38, 0.3);
	color: #b91c1c;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 3;
	max-width: calc(100% - 8px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body[data-route="planificador"] .e-schedule .e-appointment.pf-event-has-etiqueta.pf-event-has-guardia {
	padding-right: 40px;
}

body[data-route="planificador"] .e-schedule .e-appointment.pf-event-has-etiqueta .pf-event-guardia-badge {
	right: 22px;
	max-width: calc(100% - 44px);
}

/* Incidence stripe */
body[data-route="planificador"] .e-schedule .pf-cell-incidencia {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(239, 68, 68, 0.08) 4px,
        rgba(239, 68, 68, 0.08) 8px
    ) !important;
}

/* Drag-over highlight */
body[data-route="planificador"] .e-schedule .pf-drag-over {
    background: rgba(59, 130, 246, 0.12) !important;
    box-shadow: inset 0 0 0 2px #3b82f6 !important;
}

/* Appointment hover */
body[data-route="planificador"] .e-schedule .e-appointment:hover {
    filter: brightness(0.95);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

body[data-route="planificador"] .e-schedule .e-appointment.pf-event-selected {
    box-shadow: 0 0 0 2px #1d4ed8, 0 6px 14px rgba(29, 78, 216, 0.25) !important;
    filter: none !important;
    z-index: 6;
}

.pf-selection-status {
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* Syncfusion resource header styling */
body[data-route="planificador"] .e-schedule .e-resource-cells {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

body[data-route="planificador"] .e-schedule .e-resource-text {
    font-size: 12px;
}

/* Syncfusion header cells */
body[data-route="planificador"] .e-schedule .e-header-cells,
body[data-route="planificador"] .e-schedule .e-date-header-wrap .e-header-cells {
    font-size: 12px;
}

/* Syncfusion time slots */
body[data-route="planificador"] .e-schedule .e-time-slots {
    font-size: 10px;
    color: #6b7280;
}

/* Syncfusion header toolbar (hidden since we use our own) */
body[data-route="planificador"] .e-schedule .e-schedule-toolbar {
    display: none !important;
}

/* Work hours background */
body[data-route="planificador"] .e-schedule .e-work-cells {
    background: #ffffff;
}

/* Non-work hours */
body[data-route="planificador"] .e-schedule .e-nonwork-row .e-work-cells {
    background: #f9fafb;
}

/* Today cell with orange accent */
body[data-route="planificador"] .e-schedule .e-today .e-work-cells {
    background: rgba(242, 108, 33, 0.04) !important;
}

/* Timeline resource row hover */
body[data-route="planificador"] .e-schedule .e-resource-cells:hover {
    background: rgba(242, 108, 33, 0.06) !important;
}

/* Appointment text truncation */
body[data-route="planificador"] .e-schedule .e-appointment .e-subject {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 10j. Enhanced OT cards */
.ot-card-item {
    padding: 7px 8px;
    margin-bottom: 4px;
    border-radius: 5px;
    cursor: grab;
    font-size: 12px;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    background: #fafafa;
    border: 1px solid #f0f0f0;
}

.ot-card-item:hover {
    background: #e5e7eb !important;
    transform: translateX(2px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.ot-card-item.planned {
    border-left-color: #16a34a !important;
    border-left-width: 3px !important;
    opacity: 0.75;
}

.ot-card-top {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    justify-content: space-between;
}

.ot-card-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #1f2937;
    font-size: 11px;
}

.ot-meta-label {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 8px;
}

.ot-card-data {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 0;
}

.ot-data-row {
    font-size: 9px;
    color: #6b7280;
    line-height: 1.4;
}

.ot-estado-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.ot-tipo-badge {
    font-size: 9px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    background: #e7e8eb; 
    color: #4b5563;
    display: inline-block;
    width: fit-content;
    padding: 2px 8px;
}



/* Resizable OT list */
.lista-ots-resizable {
    resize: vertical !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
}

.lista-ots-resizable::-webkit-resizer {
    background: #e5e7eb;
    border-radius: 0 0 4px 0;
    width: 12px;
    height: 12px;
}

/* 10k. Enhanced context menu */
.pf-context-menu {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.15), 0 5px 15px -3px rgba(0,0,0,0.08);
    min-width: 170px;
    padding: 4px;
    animation: pf-fade-in 0.1s ease-out;
}

.pf-context-menu-item {
    padding: 7px 12px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    transition: background 0.1s;
}

.pf-context-menu-item:hover {
    background: #f3f4f6;
}

.pf-context-menu-item.danger {
    color: #dc2626;
}

.pf-context-menu-item.danger:hover {
    background: #fef2f2;
}

.pf-context-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 8px;
}

.pf-context-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.15);
    min-width: 150px;
    padding: 4px;
    margin-left: 4px;
}

.pf-context-menu-item.parent {
    position: relative;
}

/* 10e. Estado colored dots in context menu */
.pf-estado-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 10g. Conflict preview banner */
.pf-conflict-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 11px;
}

.pf-conflict-header {
    font-weight: 600;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 12px;
}

.pf-conflict-item {
    padding: 3px 0;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pf-conflict-tipo {
    display: inline-block;
    background: #fee2e2;
    color: #991b1b;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.pf-conflict-footer {
    margin-top: 6px;
    font-style: italic;
    color: #9ca3af;
    font-size: 10px;
}

/* 10i. Skeleton loader */
.pf-skeleton {
    padding: 10px 14px;
}

.pf-skeleton-line {
    height: 10px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pf-shimmer 1.5s ease infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.pf-skeleton-line:last-child {
    width: 60%;
}

@keyframes pf-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 10l. Drag-over highlight enhanced - now scoped to syncfusion */

/* 11. Frappe dialog on top of calendar */
.modal-dialog {
    z-index: 1050 !important;
}

/* 11b. Planificador: arreglar diálogos de child table.
       Estas reglas SOLO aplican en /app/planificador, gracias al selector
       body[data-route="planificador"]. No contaminan el resto de la app.

       Problema 1 — el popup "form-in-grid" (que sale al pulsar una fila de la
       child table Trabajadores/Brigadas/Vehículos/Etiquetas) era de 80% de
       ancho (max 900px) → "excesivamente ancho". Se reduce a 560px max.

       Problema 2 — el desplegable Awesomplete de los campos Link (Empleado,
       Brigada, Vehículo, Etiqueta) se cortaba al llegar al borde del diálogo.
       Causa: las capas que envuelven al <ul> tienen overflow:auto (el modal
       trae style="overflow:auto;" inline, el form-in-grid también). El
       desplegable NO es problema de z-index sino de clipping por overflow.
       Solución: forzar overflow:visible en TODAS las capas entre el modal y
       el <ul>, y delegar el scroll a un nivel más profundo (.form-area)
       que no contiene Awesomplete. */

/* 11b.1 — Quitar el overflow:auto/oculto que recorta el desplegable Awesomplete.
   Solo aplica al sub-dialog .form-in-grid (popup de fila de child table).
   El modal principal usa layout flex (sección 11c) y no necesita esta regla. */
body[data-route="planificador"] .form-in-grid,
body[data-route="planificador"] .form-in-grid .grid-form-body,
body[data-route="planificador"] .form-in-grid .grid-form-heading,
body[data-route="planificador"] .form-in-grid .form-section,
body[data-route="planificador"] .form-in-grid .section-body,
body[data-route="planificador"] .form-in-grid .form-column,
body[data-route="planificador"] .form-in-grid .frappe-control {
    overflow: visible !important;
    min-height: 0;
}

/* 11b.2 — Devolver el scroll al .form-area (que no contiene Awesomplete). */
body[data-route="planificador"] .form-in-grid .form-area {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
}

/* 11c — Modal principal: layout flex para que .modal-body scrollee
   dentro del viewport. Evita que el dialog de planificación se desborde
   cuando hay muchos campos (16+ en EG Planificacion). */
body[data-route="planificador"] .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
body[data-route="planificador"] .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 11c.1 — El diálogo de etiquetado masivo usa un modal más grande y sin
   scroll interno para que el selector de etiquetas se vea completo. */
body[data-route="planificador"] .pf-bulk-tags-dialog {
    max-width: min(92vw, 1200px);
}

body[data-route="planificador"] .pf-bulk-tags-dialog .modal-content {
    min-height: 520px;
    max-height: none;
}

body[data-route="planificador"] .pf-bulk-tags-dialog .modal-body {
    min-height: 380px;
    overflow: visible;
}

/* 11c.2 — Diálogo de filtros: modal "large" (900px) en vez de extra-large
   para no desperdiciar ancho, y altura cómoda para que las MultiSelectPills
   de trabajadores y etiquetas respiren al filtrar. */
body[data-route="planificador"] .pf-filter-dialog {
    max-width: min(90vw, 900px);
}

body[data-route="planificador"] .pf-filter-dialog .modal-content {
    min-height: 560px;
    max-height: 85vh;
}

body[data-route="planificador"] .pf-filter-dialog .modal-body {
    min-height: 380px;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
}

/* Dar más aire vertical a las MultiSelectPills dentro del filtro. */
body[data-route="planificador"] .pf-filter-dialog .form-group {
    margin-bottom: 18px;
}

body[data-route="planificador"] .pf-filter-dialog .control-input-wrapper {
    min-height: 80px;
}

/* 11d — Modal más ancho en el planificador (override de modal-xl).
   El DocType EG Planificacion tiene 16+ campos con Table MultiSelect
   anchos; con modal-xl (1140px) se generaba scroll horizontal. */
body[data-route="planificador"] .modal-xl {
    max-width: min(96vw, 1700px);
}

/* 11b.3 — Estrechar el popup del form-in-grid. */
body[data-route="planificador"] .grid-row-open .form-in-grid {
    width: min(560px, 92vw);
    max-width: 560px;
    height: auto;
}

/* 11b.4 — Asegurar que el <ul> de Awesomplete gana el stacking context y
           no queda tapado por el modal (z-index 1055) ni por el form-in-grid
           (z-index 1021). */
body[data-route="planificador"] .modal .awesomplete > ul,
body[data-route="planificador"] .modal .awesomplete > [role="listbox"] {
    z-index: 1100 !important;
    min-width: 280px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* 12. Animaciones */
@keyframes pf-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pf-context-menu,
.pf-tooltip {
    animation: pf-fade-in 0.12s ease-out;
}

/* ============================================
   14. SIDEBAR COLAPSABLE + SPLIT HANDLE
   ============================================ */

/* Collapsed sidebar */
body[data-route="planificador"] .planif-sidebar.collapsed {
	width: 0 !important;
	flex: 0 0 0 !important;
	min-width: 0 !important;
	overflow: hidden !important;
	border-right: none !important;
}

body[data-route="planificador"] .planif-sidebar.collapsed > * {
	display: none;
}

/* Split resize handle */
.planif-split-handle {
	width: 5px;
	cursor: col-resize;
	background: transparent;
	flex-shrink: 0;
	user-select: none;
	position: relative;
	z-index: 10;
	transition: background 0.15s ease;
}

.planif-split-handle:hover,
.planif-split-handle.active {
	background: var(--elgom-orange);
}

/* Sidebar toggle button in sidebar header */
body[data-route="planificador"] #btn-toggle-sidebar {
	transition: transform 0.2s ease;
}

/* Sidebar collapsed — button hidden (use toolbar button instead) */

/* ============================================
   15. SYNCFUSION TREEVIEW — CORPORATE THEMING
   ============================================ */

/* TreeView container inside sidebar */
body[data-route="planificador"] #treeview-recursos {
	padding: 4px 6px;
	font-size: 12px;
}

/* TreeView node hover — naranja corporativo sutil */
body[data-route="planificador"] .e-treeview .e-list-item.e-hover > .e-fullrow {
	background-color: rgba(242, 108, 33, 0.07) !important;
}

/* TreeView node active/selected — naranja corporativo */
body[data-route="planificador"] .e-treeview .e-list-item.e-active > .e-fullrow {
	background-color: rgba(242, 108, 33, 0.14) !important;
}

body[data-route="planificador"] .e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
	color: var(--elgom-orange) !important;
	font-weight: 600;
}

/* TreeView drag indicator */
body[data-route="planificador"] .e-treeview .e-list-item.e-drag-item.e-over {
	border-color: var(--elgom-orange) !important;
}

/* Checkbox: unchecked border color */
body[data-route="planificador"] .e-treeview .e-checkbox-wrapper .e-frame {
	border-color: #cbd5e1 !important;
}

body[data-route="planificador"] .e-treeview .e-checkbox-wrapper:hover .e-frame {
	border-color: var(--elgom-orange) !important;
}

/* Checkbox: checked state — naranja corporativo */
body[data-route="planificador"] .e-treeview .e-checkbox-wrapper .e-frame.e-check {
	background-color: var(--elgom-orange) !important;
	border-color: var(--elgom-orange) !important;
}

/* Checkbox: indeterminate state — naranja corporativo */
body[data-route="planificador"] .e-treeview .e-checkbox-wrapper .e-frame.e-indeterminate {
	background-color: var(--elgom-orange) !important;
	border-color: var(--elgom-orange) !important;
}

/* Checkbox ripple effect color */
body[data-route="planificador"] .e-treeview .e-checkbox-wrapper .e-ripple-container .e-ripple-element {
	background-color: rgba(242, 108, 33, 0.25) !important;
}

/* Checkbox check mark */
body[data-route="planificador"] .e-treeview .e-checkbox-wrapper .e-checkmark {
	color: #ffffff !important;
}

/* TreeView text — general */
body[data-route="planificador"] .e-treeview .e-list-text {
	font-size: 12px;
	color: #1f2937;
}

/* TreeView icon (expand/collapse arrow) */
body[data-route="planificador"] .e-treeview .e-icon-collapsible,
body[data-route="planificador"] .e-treeview .e-icon-expandable {
	color: var(--elgom-blue) !important;
	font-size: 10px;
}

/* ============================================
   16. SYNCFUSION SCHEDULER — DEEPER CORPORATE THEMING
   ============================================ */

/* View navigation active button */
body[data-route="planificador"] .e-schedule .e-active-view .e-tbar-btn-text,
body[data-route="planificador"] .e-schedule .e-active-view .e-btn-icon {
	color: var(--elgom-orange) !important;
}

/* Toolbar buttons hover */
body[data-route="planificador"] .e-schedule .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
	background: rgba(242, 108, 33, 0.06) !important;
}

/* Date header cells — subtle blue */
body[data-route="planificador"] .e-schedule .e-date-header-wrap .e-header-cells {
	border-bottom-color: var(--elgom-blue) !important;
}

/* Resource column headers */
body[data-route="planificador"] .e-schedule .e-resource-column-header {
	background: var(--elgom-blue-light) !important;
	color: var(--elgom-blue) !important;
	font-weight: 600;
	font-size: 12px;
}

/* Today header cell */
body[data-route="planificador"] .e-schedule .e-header-cells.e-current-day {
	color: var(--elgom-orange) !important;
	font-weight: 700;
}

/* Month view — appointment inside cells */
body[data-route="planificador"] .e-schedule .e-month-view .e-appointment {
	border-left: 3px solid transparent !important;
}

/* Quick info popup — override orange accent */
body[data-route="planificador"] .e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-header {
	background: var(--elgom-blue-light) !important;
	color: var(--elgom-blue) !important;
}

/* Empty cell hint */
body[data-route="planificador"] .e-schedule .e-work-cells.e-empty-cell {
	background: #fcfcfc;
}

/* ============================================
   17. SCROLLBAR WEBKIT — superficies de marca
   ============================================ */

.body-sidebar::-webkit-scrollbar,
.list-sidebar::-webkit-scrollbar,
body[data-route="planificador"] #treeview-recursos::-webkit-scrollbar,
body[data-route="planificador"] .lista-ots-resizable::-webkit-scrollbar {
	width: 6px;
}

.body-sidebar::-webkit-scrollbar-track,
.list-sidebar::-webkit-scrollbar-track,
body[data-route="planificador"] #treeview-recursos::-webkit-scrollbar-track,
body[data-route="planificador"] .lista-ots-resizable::-webkit-scrollbar-track {
	background: transparent;
}

.body-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.20);
	border-radius: 3px;
}

.list-sidebar::-webkit-scrollbar-thumb,
body[data-route="planificador"] #treeview-recursos::-webkit-scrollbar-thumb,
body[data-route="planificador"] .lista-ots-resizable::-webkit-scrollbar-thumb {
	background: var(--elgom-blue-light);
	border-radius: 3px;
}

.body-sidebar::-webkit-scrollbar-thumb:hover,
.list-sidebar::-webkit-scrollbar-thumb:hover,
body[data-route="planificador"] #treeview-recursos::-webkit-scrollbar-thumb:hover,
body[data-route="planificador"] .lista-ots-resizable::-webkit-scrollbar-thumb:hover {
	background: var(--elgom-orange);
}

/* ============================================
   18. NAVBAR (top bar del desk)
   ============================================ */

.navbar .navbar-home img,
.navbar .navbar-brand img,
.navbar-home > img,
.navbar .app-logo {
	height: 28px !important;
	width: auto !important;
	max-width: 140px !important;
	padding: 4px 0;
	transition: opacity 0.2s ease;
}

.navbar .navbar-home img:hover {
	opacity: 0.8;
}
/* Oculta navbar en /login (banda blanca) — data-path lo emite base.html; solo login, desk intacto */
body[data-path="login"] .navbar {
	display: none !important;
}

.navbar {
	background: #ffffff !important;
	border-bottom: 1px solid var(--elgom-blue-light) !important;
	box-shadow: var(--elgom-shadow-sm);
}

.navbar .nav-link,
.navbar .navbar-nav .nav-link {
	color: var(--elgom-ink) !important;
}

.navbar .nav-link:hover,
.navbar .navbar-nav .nav-link:hover {
	color: var(--elgom-orange) !important;
}

.navbar .nav-link.active,
.navbar .navbar-nav .nav-link.active {
	color: var(--elgom-orange) !important;
	font-weight: 600;
}

/* ============================================
   19. LOGIN — fondo azul corporativo, card blanca
   ============================================ */

body[data-path="login"],
body[data-route="login"] {
	background:
		url("/assets/elgom/images/login-bg.svg") center / cover no-repeat,
		linear-gradient(135deg, var(--elgom-blue) 0%, var(--elgom-blue-hover) 55%, #1B6FB8 100%) !important;
	min-height: 100vh;
	overflow-x: hidden;
}

.page-card-head img {
    max-height: 95px !important;
}
/* Card de login */
.page-card {
	background: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: var(--elgom-shadow-lg) !important;
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 36px 32px !important;
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}

.page-card .page-card-head {
	border-bottom: none !important;
	padding: 0 0 18px 0 !important;
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* Logo Elgom en el login */
.page-card .page-card-head img.app-logo,
.page-card .page-card-head img.frappe-logo,
.page-card .page-card-head .app-logo,
.page-card .app-logo {
	filter: none !important;
	height: 96px !important;
	width: auto !important;
	max-width: 320px !important;
	margin: 0 auto 12px !important;
}

.page-card .page-card-head .app-logo + *,
.page-card .page-card-head img + .text-muted,
.page-card .page-card-head .page-card-title,
.page-card .page-card-head .lead {
	color: var(--elgom-muted) !important;
	font-size: 13px !important;
	font-weight: 500;
}

/* Form controls en el login */
.page-card .form-control,
.page-card input[type="text"],
.page-card input[type="email"],
.page-card input[type="password"] {
	border: 1.5px solid var(--elgom-blue-light) !important;
	border-radius: 8px !important;
	padding: 10px 14px 10px 38px !important;
	height: auto !important;
	font-size: 14px !important;
	color: var(--elgom-ink);
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-card .form-control:focus,
.page-card input:focus {
	border-color: var(--elgom-blue) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.15) !important;
}

.page-card-head img {
	max-height: 100px;
}

.page-card-head h4 {
	margin-top: 1rem;
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.01em;
	color: #ffffff !important;
}

/* Botón de login */
.page-card .btn-login,
.page-card button[type="submit"],
.page-card .form-sign-in .btn-primary,
.btn-login {
	background: var(--elgom-orange) !important;
	border: 1px solid var(--elgom-orange) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 11px 18px !important;
	height: auto !important;
	width: 100% !important;
	margin-top: 8px !important;
	letter-spacing: 0.2px;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.page-card .btn-login:hover,
.page-card button[type="submit"]:hover,
.btn-login:hover {
	background: var(--elgom-orange-hover) !important;
	border-color: var(--elgom-orange-hover) !important;
	box-shadow: 0 6px 16px rgba(242, 108, 33, 0.30) !important;
}

.page-card .btn-login:active,
.btn-login:active {
	transform: translateY(1px);
}

/* Forgot password / sign-up links */
.page-card a,
.page-card .for-forgot-password a,
.page-card .signup-instead a {
	color: var(--elgom-blue) !important;
	font-weight: 500;
}

.page-card a:hover,
.page-card .for-forgot-password a:hover,
.page-card .signup-instead a:hover {
	color: var(--elgom-orange) !important;
}

/* Brand footer en login */
.page-card-footer,
.page-card .text-muted,
.page-card .page-card-body small {
	color: var(--elgom-muted) !important;
	font-size: 12px;
}

/* Logo al pie (cuando Frappe lo muestra) */
body[data-path="login"] .page-card .powered-by,
body[data-route="login"] .page-card .powered-by,
body[data-path="login"] .page-card .text-center img,
body[data-route="login"] .page-card .text-center img {
	filter: grayscale(1);
	opacity: 0.5;
}

/* ============================================
   20. FOCUS / ACCESSIBILITY
   ============================================ */

.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible,
.standard-sidebar-item:focus-visible,
a:focus-visible {
	outline: 2px solid var(--elgom-blue) !important;
	outline-offset: 2px;
}

button:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid var(--elgom-blue);
	outline-offset: 2px;
}

/* ============================================
   21. BOTONES SECUNDARIOS
   ============================================ */

.btn-secondary {
	background: #ffffff !important;
	border: 1.5px solid var(--elgom-blue-light) !important;
	color: var(--elgom-blue) !important;
	font-weight: 500;
	transition: all 0.15s ease;
}

.btn-secondary:hover {
	background: var(--elgom-blue-light) !important;
	border-color: var(--elgom-blue) !important;
	color: var(--elgom-blue) !important;
}

.btn-secondary:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.15) !important;
}

/* ============================================
   22. INDICADORES / BADGES DE ESTADO — Elgom
   ============================================ */

.indicator-pill {
	font-weight: 600;
	letter-spacing: 0.2px;
}

.indicator-pill.green,
.indicator-pill.success {
	background: #DCFCE7 !important;
	color: #166534 !important;
}

.indicator-pill.orange,
.indicator-pill.warning {
	background: var(--elgom-orange-light) !important;
	color: var(--elgom-orange-hover) !important;
}

.indicator-pill.blue,
.indicator-pill.info {
	background: var(--elgom-blue-light) !important;
	color: var(--elgom-blue) !important;
}

.indicator-pill.red,
.indicator-pill.danger {
	background: #FEE2E2 !important;
	color: #991B1B !important;
}

.indicator-pill.gray,
.indicator-pill.default {
	background: #F1F5F9 !important;
	color: var(--elgom-muted) !important;
}

/* ============================================
   23. TÍTULOS / HEADINGS EN FORMULARIOS
   ============================================ */

.h1, .h2, .h3, h1, h2, h3 {
	color: var(--elgom-blue);
}

.head-title {
	color: var(--elgom-blue) !important;
	font-weight: 700 !important;
}

/* ============================================
   24. LINKS EN TABLAS Y DETALLES
   ============================================ */

.form-dashboard-section a,
.widget a,
.print-format a {
	color: var(--elgom-blue);
}

.form-dashboard-section a:hover,
.widget a:hover {
	color: var(--elgom-orange);
}

/* ── Heat map workload badges (sidebar) ─────────────────────────── */
.pf-tree-node {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
}
.pf-tree-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pf-load-badge {
	display: inline-block;
	flex-shrink: 0;
	padding: 1px 6px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #fff;
}
.pf-load-low {
	background: #22c55e;
}
.pf-load-mid {
	background: #eab308;
}
.pf-load-high {
	background: #f97316;
}
.pf-load-overload {
	background: #ef4444;
}
.pf-load-info {
	background: #64748b;
}

/* ── Gantt OT (scope exclusivo planificador-ot) ─────────────────── */
body[data-route="planificador-ot"] .pot-page {
	background: #ffffff;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-toolbar {
	background: #ffffff !important;
	border-bottom: 1px solid #e5e7eb !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-splitter .e-split-bar,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-splitter .e-resize-handler {
	background: rgba(0, 51, 102, 0.14) !important;
	border-color: var(--elgom-blue) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-splitter .e-split-bar.e-split-bar-active,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-splitter .e-split-bar:hover,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-splitter .e-resize-handler:hover {
	background: var(--elgom-blue) !important;
	border-color: var(--elgom-blue-hover) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-treegrid .e-headercell,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-chart-row-cell.e-header-cell,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-timeline-header-table-container .e-header-cell-label {
	background: #ffffff !important;
	color: var(--elgom-ink) !important;
	font-weight: 600;
	border-color: #e5e7eb !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-row[aria-selected="true"],
body[data-route="planificador-ot"] .pot-page .e-gantt .e-chart-row.e-active-container {
	background: rgba(0, 51, 102, 0.04) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-row[aria-selected="true"] .e-rowcell,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-row.e-selectionbackground,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-chart-row-border {
	background: rgba(0, 51, 102, 0.04) !important;
	box-shadow: none !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-focused,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-focus,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-rowcell:focus,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-headercell:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: #e5e7eb !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-toolbar .e-toolbar-item .e-tbar-btn,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-toolbar .e-toolbar-item .e-btn {
	border-radius: 6px;
	color: var(--elgom-ink) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-toolbar .e-toolbar-item .e-btn:hover {
	background: rgba(242, 108, 33, 0.08) !important;
	color: var(--elgom-orange-hover) !important;
}

body[data-route="planificador-ot"] .pot-page .pot-toolbar-btn-disabled,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-toolbar-item .e-disabled {
	opacity: 0.45 !important;
	filter: grayscale(0.2);
}

/* ── Taskbars corporativos ── */
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-parent-taskbar {
	background: var(--elgom-blue) !important;
	border-color: var(--elgom-blue) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-child-taskbar {
	background: var(--elgom-orange) !important;
	border-color: var(--elgom-orange-hover) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-parent-progressbar,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-parent-progressbar-inner-div {
	background: rgba(255, 255, 255, 0.32) !important;
	border-color: rgba(255, 255, 255, 0.42) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-child-progressbar,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-child-progressbar-inner-div,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-child-manualprogressbar,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-critical-child-manualprogressbar,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-child-critical-progressbar-inner-div {
	background: rgba(255, 255, 255, 0.34) !important;
	border-color: rgba(255, 255, 255, 0.45) !important;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-parent-taskbar:hover,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-gantt-child-taskbar:hover {
	outline: 2px solid rgba(0, 51, 102, 0.25);
	outline-offset: 1px;
}

body[data-route="planificador-ot"] .pot-page .e-gantt .e-taskbar-main-container.e-active-child-task,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-taskbar-main-container.e-active-parent-task {
	outline: 2px solid rgba(0, 51, 102, 0.25);
	outline-offset: 1px;
}

/* ── Conectores de dependencias ── */
body[data-route="planificador-ot"] .pot-page .e-gantt .e-connector-line,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-connector-line-right-arrow,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-connector-line-left-arrow {
	border-color: var(--elgom-blue) !important;
	color: var(--elgom-blue) !important;
}

/* ── Hover rows ── */
body[data-route="planificador-ot"] .pot-page .e-gantt .e-grid .e-row:hover .e-rowcell,
body[data-route="planificador-ot"] .pot-page .e-gantt .e-chart-row:hover {
	background: rgba(242, 108, 33, 0.04) !important;
}
/* ── Topbar colapsable: sesion + scheduler controls (planificador) ── */
.planif-topbar {
	background: var(--fg-color);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: stretch;
	gap: 6px;
	padding-left: 12px;
}
.planif-topbar-toggle {
	min-width: 32px;
	height: 32px;
	padding: 0;
	line-height: 32px;
	align-self: center;
}
.planif-topbar-filter-btn {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 360px;
}
.planif-topbar-filter-btn.has-filters {
	font-weight: 600;
}
.planif-topbar-sep {
	color: #94a3b8;
	margin: 0 4px;
}
.planif-topbar-filters,
.planif-topbar-session {
	font-weight: 500;
	color: #1a202c;
}
.planif-topbar-body {
	flex: 1;
	display: block;
	overflow: hidden;
	transition: max-height 0.2s ease;
	max-height: 130px;
}
.planif-topbar[data-collapsed="true"] .planif-topbar-body {
	max-height: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Topbar fila unica: sesion | summary | spacer | finde + refresh */
.planif-topbar-row {
	padding: 10px 16px 10px 0;
	background: var(--fg-color);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.planif-topbar-row .planif-session-control {
	min-width: 220px;
	flex: 1;
	max-width: 480px;
	display: flex;
	align-items: center;
}
.planif-topbar-row .planif-session-control .form-group {
	width: 100%;
	margin-bottom: 0;
}
.planif-topbar-row .planif-session-control .control-input {
	width: 100%;
}
.planif-topbar-row .planif-session-control select {
	width: 100%;
}
.planif-topbar-row .planif-session-control .control-input-wrapper,
.planif-topbar-row .planif-session-control .control-value,
.planif-topbar-row .planif-session-control .control-input,
.planif-topbar-row .planif-session-control .frappe-control,
.planif-topbar-row .planif-session-control select,
.planif-topbar-row .btn.btn-sm {
	min-height: 32px;
}
.planif-topbar-row .planif-topbar-field,
.planif-topbar-row .planif-topbar-field-sm {
	display: flex;
	align-items: center;
}
.planif-topbar-row .planif-topbar-field {
	min-width: 180px;
	flex: 0 1 220px;
}
.planif-topbar-row .planif-topbar-field-sm {
	min-width: 130px;
	flex: 0 1 150px;
}
.planif-topbar-row .planif-topbar-field .form-group,
.planif-topbar-row .planif-topbar-field-sm .form-group {
	width: 100%;
	margin-bottom: 0;
}
.planif-topbar-row .planif-topbar-field .frappe-control,
.planif-topbar-row .planif-topbar-field-sm .frappe-control {
	min-height: 32px;
}
.planif-topbar-row .planif-topbar-field input,
.planif-topbar-row .planif-topbar-field-sm input {
	min-height: 32px;
}
.planif-topbar-spacer {
	flex: 1;
	min-width: 12px;
}
.planif-topbar-check {
	display: flex;
	align-items: center;
}
.planif-topbar-check-inner .checkbox {
	margin: 0;
}
.planif-topbar-row button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.planif-topbar-row .icon {
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	vertical-align: -2px;
}
.planif-topbar-row .btn.btn-sm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Scheduler toolbar: use Desk-sized controls and move bulk actions to one menu. */
body[data-route="planificador"] .planif-toolbar {
	align-items: center;
	background: var(--fg-color);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex-shrink: 0;
	gap: 8px;
	min-height: 48px;
	padding: 8px 12px;
}
body[data-route="planificador"] .planif-toolbar-navigation,
body[data-route="planificador"] .pf-selection-actions {
	align-items: center;
	display: flex;
	gap: 6px;
}
body[data-route="planificador"] .planif-toolbar-range {
	color: var(--text-color);
	font-size: var(--text-sm);
	font-weight: 600;
	margin-left: 4px;
}
body[data-route="planificador"] .planif-toolbar-spacer {
	flex: 1 1 auto;
	min-width: 12px;
}
body[data-route="planificador"] .pf-selection-actions .dropdown-menu {
	min-width: 230px;
}
body[data-route="planificador"] .pf-selection-actions .dropdown-item {
	font-size: var(--text-sm);
}
body[data-route="planificador"] .planif-toolbar .btn-group {
	flex-shrink: 0;
}

@media (max-width: 1100px) {
	body[data-route="planificador"] .planif-toolbar {
		flex-wrap: wrap;
	}
	body[data-route="planificador"] .planif-toolbar-spacer {
		display: none;
	}
	body[data-route="planificador"] .planif-toolbar-range {
		flex: 1 1 220px;
	}
}

/* ── planificador-ot: topbar context + meta + gantt host ──────────── */
body[data-route="planificador-ot"] {
	overflow: hidden !important;
}
body[data-route="planificador-ot"] .container.page-body,
body[data-route="planificador-ot"] .page-wrapper,
body[data-route="planificador-ot"] .page-content,
body[data-route="planificador-ot"] .layout-main,
body[data-route="planificador-ot"] .layout-main-section-wrapper,
body[data-route="planificador-ot"] .layout-main-section {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
body[data-route="planificador-ot"] .layout-side-section {
	display: none !important;
}
body[data-route="planificador-ot"] .pot-page {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: #ffffff;
}
body[data-route="planificador-ot"] .pot-topbar {
	position: relative;
	z-index: 12;
}
body[data-route="planificador-ot"] .pot-topbar .planif-topbar-body,
body[data-route="planificador-ot"] .pot-topbar .planif-topbar-row,
body[data-route="planificador-ot"] .pot-topbar .planif-topbar-field,
body[data-route="planificador-ot"] .pot-topbar .frappe-control,
body[data-route="planificador-ot"] .pot-topbar .control-input-wrapper,
body[data-route="planificador-ot"] .pot-topbar .awesomplete {
	overflow: visible !important;
}
body[data-route="planificador-ot"] .pot-topbar .awesomplete > ul,
body[data-route="planificador-ot"] .pot-topbar .awesomplete > [role="listbox"] {
	z-index: 20 !important;
	min-width: 220px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
body[data-route="planificador-ot"] .pot-content {
	display: flex;
	flex: 1;
	min-height: 0;
}
body[data-route="planificador-ot"] .pot-context-inline {
	font-size: 12px;
	color: var(--primary);
	font-weight: 500;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body[data-route="planificador-ot"] .pot-context-inline:empty {
	display: none;
}
body[data-route="planificador-ot"] .pot-meta-inline {
	font-size: 12px;
	color: var(--text-muted);
	white-space: nowrap;
}
body[data-route="planificador-ot"] .pot-meta-inline:empty {
	display: none;
}
body[data-route="planificador-ot"] .pot-host {
	flex: 1;
	min-height: 400px;
	background: #fff;
}
body[data-route="planificador-ot"] .pot-side-panel {
	width: 320px;
	min-height: 400px;
	background: #f9fafb;
	border-left: 1px solid #e5e7eb;
	overflow-y: auto;
	padding: 16px;
	font-size: 13px;
}
body[data-route="planificador-ot"] .pot-side-panel-header {
	font-weight: 600;
	font-size: 14px;
	color: var(--elgom-ink, #1F2937);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e5e7eb;
}
body[data-route="planificador-ot"] .pot-side-panel-section {
	margin-bottom: 16px;
}
body[data-route="planificador-ot"] .pot-side-panel-section-title {
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}
body[data-route="planificador-ot"] .pot-side-panel-resource {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	margin-bottom: 4px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: box-shadow 0.15s;
}
body[data-route="planificador-ot"] .pot-side-panel-resource:hover {
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body[data-route="planificador-ot"] .pot-side-panel-resource-kind {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
	text-transform: uppercase;
	white-space: nowrap;
}
body[data-route="planificador-ot"] .pot-side-panel-resource-kind.trabajador { background: #dbeafe; color: #1e40af; }
body[data-route="planificador-ot"] .pot-side-panel-resource-kind.brigada { background: #d1fae5; color: #065f46; }
body[data-route="planificador-ot"] .pot-side-panel-resource-kind.vehiculo { background: #fef3c7; color: #92400e; }
body[data-route="planificador-ot"] .pot-side-panel-resource-name {
	font-weight: 500;
	color: var(--elgom-ink, #1F2937);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body[data-route="planificador-ot"] .pot-side-panel-empty {
	color: #9ca3af;
	font-size: 12px;
	padding: 12px 0;
	text-align: center;
}
@media (max-width: 1023px) {
	body[data-route="planificador-ot"] .pot-content {
		flex-direction: column;
	}
	body[data-route="planificador-ot"] .pot-side-panel {
		width: 100%;
		max-height: 280px;
		border-left: none;
		border-top: 1px solid #e5e7eb;
	}
}

/* ── mi-planificacion (mobile-first, read-only) ────────────────────── */
.miplan-container { padding: 8px; max-width: 100%; box-sizing: border-box; }
.miplan-header { margin-bottom: 4px; }
.miplan-header h3 { margin: 0 0 8px; font-size: 16px; }
.miplan-date-row {
	display: flex; gap: 8px; padding: 8px;
	background: #f9fafb; border-bottom: 1px solid var(--border-color, #e2e8f0);
	align-items: flex-end; flex-wrap: wrap;
}
.miplan-date-row .form-group { flex: 1; min-width: 120px; margin: 0; }
.miplan-date-row .control-label { font-size: 11px; margin-bottom: 2px; }
.miplan-date-row #miplan-aplicar { flex: 0 0 auto; height: fit-content; }
.miplan-day-group { padding: 4px 0 8px; }
.miplan-day-header {
	font-size: 14px; font-weight: 600;
	color: var(--elgom-ink, #1F2937);
	padding: 8px 4px 4px;
	text-transform: capitalize;
}
.miplan-day-cards { display: flex; flex-direction: column; gap: 8px; }
.miplan-guardia-summary {
	align-items: center;
	border-bottom: 1px solid var(--border-color, #e2e8f0);
	color: var(--text-muted, #6B7280);
	display: flex;
	font-size: var(--text-sm, 12px);
	gap: 8px;
	padding: 8px 4px;
}
.miplan-link { text-decoration: none; color: inherit; display: block; }
.miplan-link:hover .miplan-card {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.miplan-card {
	background: #fff;
	border: 1px solid var(--border-color, #e2e8f0);
	border-left: 4px solid var(--elgom-blue, #003366);
	border-radius: 6px; padding: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease;
}
.miplan-card--borrador    { border-left-color: var(--elgom-muted, #6B7280); }
.miplan-card--planificada { border-left-color: var(--elgom-blue, #003366); }
.miplan-card--confirmada  { border-left-color: #10b981; }
.miplan-card--en-curso    { border-left-color: #f59e0b; }
.miplan-card--completada  { border-left-color: var(--elgom-blue-dark, #001F3F); opacity: 0.7; }
.miplan-card--cancelada   {
	border-left-color: #9CA3AF; opacity: 0.5;
	text-decoration: line-through;
}
.miplan-card--vacaciones  { border-left-color: #a78bfa; background: #faf5ff; }
.miplan-card--guardia     { border-left-color: #f59e0b; background: #fffbeb; }
.miplan-card-time {
	font-size: 16px; font-weight: 700;
	color: var(--elgom-blue, #003366);
	font-variant-numeric: tabular-nums;
}
.miplan-card--vacaciones .miplan-card-time { color: #7c3aed; }
.miplan-card--guardia .miplan-card-time { color: #b45309; }
.miplan-card--cancelada .miplan-card-time { text-decoration: line-through; }
.miplan-card-title { font-size: 15px; font-weight: 600; margin-top: 4px; word-break: break-word; }
.miplan-card-subtitle { font-size: 13px; color: var(--elgom-muted, #6B7280); margin-top: 2px; }
.miplan-card-meta { font-size: 12px; color: var(--elgom-muted, #6B7280); margin-top: 2px; }
.miplan-card-footer {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	margin-top: 8px; padding-top: 8px;
	border-top: 1px solid #f3f4f6;
}
.miplan-card-badge {
	display: inline-block; font-size: 10px; font-weight: 600;
	padding: 2px 8px; border-radius: 3px;
	background: #f3f4f6; color: #374151;
}
.miplan-card-badge--brigada {
	background: #FCE4D4; color: #F26C21;
}
.miplan-card-estado {
	margin-left: auto;
	display: inline-block; font-size: 10px; font-weight: 600;
	padding: 2px 8px; border-radius: 3px;
	background: #f3f4f6; color: #374151;
	text-transform: uppercase; letter-spacing: 0.5px;
}
.miplan-card--vacaciones .miplan-card-estado {
	background: #ede9fe; color: #7c3aed;
}
.miplan-card--guardia .miplan-card-estado {
	background: #fef3c7; color: #b45309;
}
.miplan-card--confirmada .miplan-card-estado { background: #d1fae5; color: #047857; }
.miplan-card--en-curso .miplan-card-estado { background: #fef3c7; color: #b45309; }
.miplan-empty {
	text-align: center; padding: 40px 16px;
	color: var(--elgom-muted, #6B7280);
}
.miplan-empty a { color: var(--elgom-blue, #003366); }

@media (min-width: 768px) {
	.miplan-container { max-width: 720px; margin: 0 auto; }
}

/* ============================================
   HIPPO IMPORT PAGE
   ============================================ */

body[data-route="import-hippo-works"] {
	overflow: hidden !important;
}

body[data-route="import-hippo-works"] .main-section {
	display: flex !important;
	flex-direction: column !important;
	height: 100vh !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body[data-route="import-hippo-works"] #body,
body[data-route="import-hippo-works"] #page-import-hippo-works {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	width: 100% !important;
}

body[data-route="import-hippo-works"] .container.page-body {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body[data-route="import-hippo-works"] .page-wrapper,
body[data-route="import-hippo-works"] .page-content,
body[data-route="import-hippo-works"] .layout-main,
body[data-route="import-hippo-works"] .layout-main-section-wrapper,
body[data-route="import-hippo-works"] .layout-main-section,
body[data-route="import-hippo-works"] .page-body {
	max-width: 100% !important;
	width: 100% !important;
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

body[data-route="import-hippo-works"] .layout-side-section {
	display: none !important;
}

body[data-route="import-hippo-works"] .page-content .row {
	margin: 0 !important;
	width: 100% !important;
}

body[data-route="import-hippo-works"] .page-content {
	flex: 1 !important;
}

.hippo-split-container {
	flex: 1 !important;
}

.hippo-badge {
	display: inline-block;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 4px;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

.hippo-type-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.hippo-detail-header {
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.hippo-detail-type-icon {
	font-size: 20px;
}

.hippo-detail-type-label {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 600;
	text-transform: uppercase;
}

.hippo-detail-body {
	padding: 8px 12px;
}

.hippo-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 4px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 11px;
}

.hippo-detail-label {
	font-weight: 600;
	color: #6b7280;
	flex-shrink: 0;
	margin-right: 8px;
	min-width: 90px;
}

.hippo-detail-value {
	color: #1f2937;
	text-align: right;
	word-break: break-word;
}

.hippo-detail-errors {
	margin-top: 10px;
	padding: 8px 10px;
	background: #fff3e0;
	border: 1px solid #ffcc80;
	border-radius: 4px;
}

.hippo-error-item {
	color: #e65100;
	font-size: 11px;
	padding: 2px 0;
}

.hippo-detail-history {
	padding: 8px 12px;
	border-top: 1px solid #e2e8f0;
}

.hippo-detail-history h6 {
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	margin: 0 0 6px;
}

body[data-route="import-hippo-works"] .dt {
	height: 100% !important;
	font-size: 12px !important;
}

body[data-route="import-hippo-works"] .datatable .dt-header {
	border-bottom: 1px solid #e2e8f0 !important;
}

body[data-route="import-hippo-works"] .datatable .dt-header .dt-cell--header {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	padding: 6px 6px !important;
	border-right: 1px solid #f0f0f0 !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell {
	font-size: 11px !important;
	padding: 4px 6px !important;
	border-right: 1px solid #f0f0f0 !important;
	border-bottom: 1px solid #f3f4f6 !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell:last-child {
	border-right: none !important;
}

body[data-route="import-hippo-works"] .datatable .dt-scrollable {
	flex: 1 !important;
	min-height: 0 !important;
	overflow-y: auto !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--col-0 {
	min-width: 44px !important;
	width: 44px !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--col-0 .dt-cell__content {
	overflow: visible !important;
	text-overflow: clip !important;
	padding: 4px 2px !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--col-1 .dt-cell__content {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

body[data-route="import-hippo-works"] .datatable .dt-checkbox input[type="checkbox"] {
	margin: 0 !important;
	vertical-align: middle !important;
}

body[data-route="import-hippo-works"] .datatable .dt-checkbox {
	text-align: center !important;
	padding: 2px !important;
}

body[data-route="import-hippo-works"] .datatable .dt-row--highlight .dt-cell {
	background-color: #f0f7ff !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--editing {
	padding: 0 !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--editing .form-control {
	border: none !important;
	border-radius: 0 !important;
	height: 36px !important;
	font-size: 11px !important;
	box-shadow: none !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--editing select.form-control {
	padding: 4px 6px !important;
}

body[data-route="import-hippo-works"] .datatable .dt-cell--editing .flatpickr-input {
	padding: 4px 6px !important;
}

body[data-route="import-hippo-works"] .datatable .dt-footer {
	display: none !important;
}

body[data-route="import-hippo-works"] #hippo-datatable-container {
	overflow: hidden !important;
}

body[data-route="import-hippo-works"] #hippo-datatable-container .datatable {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body[data-route="import-hippo-works"] #hippo-datatable-container .dt {
	height: 100%;
}

#hippo-detail-content {
	overflow-y: auto !important;
}

/* Final planificador typography overrides. Keep the visual hierarchy small and predictable. */
body[data-route="planificador"] .pf-tooltip { font-size: var(--pf-font-sm); }
body[data-route="planificador"] .pf-tooltip-title { font-size: var(--pf-font-md); }
body[data-route="planificador"] .pf-tooltip-row,
body[data-route="planificador"] .pf-tooltip-meta-row { font-size: var(--pf-font-sm); }
body[data-route="planificador"] .pf-tooltip-label,
body[data-route="planificador"] .pf-chip,
body[data-route="planificador"] .pf-tooltip-estado-trabajo { font-size: var(--pf-font-xs); }

body[data-route="planificador"] .ot-card-item { font-size: var(--pf-font-sm); }
body[data-route="planificador"] .ot-card-name {
    font-size: var(--pf-font-md);
    font-weight: 600;
}
body[data-route="planificador"] .ot-estado-badge { font-size: var(--pf-font-sm); }
body[data-route="planificador"] .ot-data-row {
    font-size: var(--pf-font-xs);
    line-height: 1.35;
}
body[data-route="planificador"] .ot-meta-label,
body[data-route="planificador"] .ot-tipo-badge { font-size: var(--pf-font-xs); }

body[data-route="planificador"] .planif-sidebar {
    min-width: 0;
    overflow-x: hidden;
}
body[data-route="planificador"] .lista-ots-resizable,
body[data-route="planificador"] .ot-card-item {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

body[data-route="planificador"] .e-schedule .e-appointment,
body[data-route="planificador"] .e-schedule .e-appointment .e-subject,
body[data-route="planificador"] .e-schedule .e-resource-cells,
body[data-route="planificador"] .e-schedule .e-resource-text,
body[data-route="planificador"] .e-schedule .e-header-cells,
body[data-route="planificador"] .e-schedule .e-date-header-wrap .e-header-cells,
body[data-route="planificador"] .e-treeview .e-list-text {
    font-size: var(--pf-font-sm);
}

body[data-route="planificador"] .e-schedule .e-resource-cells,
body[data-route="planificador"] .e-schedule .e-resource-text {
    font-weight: 500;
}

body[data-route="planificador"] .e-schedule .e-time-slots,
body[data-route="planificador"] .e-treeview .e-icon-collapsible,
body[data-route="planificador"] .e-treeview .e-icon-expandable {
    font-size: var(--pf-font-xs);
}

body[data-route="planificador"] .e-schedule .pf-cell-badge,
body[data-route="planificador"] .e-schedule .pf-event-guardia-badge,
body[data-route="planificador"] .e-schedule .pf-cell-badge--compact {
    font-size: var(--pf-font-xs);
}

body[data-route="planificador"] .pf-context-menu-item,
body[data-route="planificador"] .planif-toolbar-range,
body[data-route="planificador"] .pf-selection-actions .dropdown-item {
    font-size: var(--pf-font-md);
}

/* ── Mediciones diarias: fila que supera la cantidad de referencia ── */
.grid-row.medicion-linea-supera > .data-row {
    background: var(--warning-bg, var(--bs-warning-bg-subtle, #fff8e1));
}

/* ── Mediciones diarias: ejecutado hoy visible de un vistazo ── */
.grid-row.medicion-linea-ejecutada:not(.medicion-linea-supera) > .data-row {
    background: #fce4d4;
}
.grid-row.medicion-linea-ejecutada [data-fieldname="cantidad_ejecutada"] .static-area,
.grid-row.medicion-linea-ejecutada [data-fieldname="cantidad_ejecutada"] input {
    color: #d4581a;
    font-weight: 700;
}
.grid-row.medicion-linea-sin-ejecucion > .data-row {
    opacity: 0.55;
}