/* Tema Rutaplan para URUCAT (urplan7) - colores de la portada, modo claro y oscuro. ARBIS 23/10/2026.
   Se carga despues de style.css: solo sobrescribe colores. El modo va en <html data-tema="claro|oscuro">. */

:root, html[data-tema="claro"] {
	--rp-primario: #087f88;
	--rp-primario-hover: #066b73;
	--rp-acento: #04a4b0;
	--rp-primario-suave: rgba(8, 127, 136, .12);
	--rp-fondo: #eef3f4;
	--rp-superficie: #ffffff;
	--rp-superficie-2: #f5f8f9;
	--rp-texto: #14202b;
	--rp-texto-suave: #5f6b75;
	--rp-borde: #dbe3e6;
	--rp-cabecera: #ffffff;
	--rp-lateral: linear-gradient(180deg, #06606c 0%, #0a4a55 100%);
	--rp-lateral-texto: #e3f3f5;
	--rp-lateral-hover: rgba(255, 255, 255, .10);
	--rp-lateral-borde: rgba(255, 255, 255, .08);
	--rp-entrada: #ffffff;
	--rp-sombra: 0 1px 3px rgba(16, 42, 50, .08);
}

html[data-tema="oscuro"] {
	--rp-primario: #13a6b1;
	--rp-primario-hover: #0f8f99;
	--rp-acento: #2cc3cd;
	--rp-primario-suave: rgba(19, 166, 177, .16);
	--rp-fondo: #0d171b;
	--rp-superficie: #15232a;
	--rp-superficie-2: #1b2d35;
	--rp-texto: #e2edf0;
	--rp-texto-suave: #92a5ac;
	--rp-borde: #284049;
	--rp-cabecera: #121f25;
	--rp-lateral: linear-gradient(180deg, #0b1a1f 0%, #081216 100%);
	--rp-lateral-texto: #cfe1e5;
	--rp-lateral-hover: rgba(19, 166, 177, .14);
	--rp-lateral-borde: rgba(255, 255, 255, .05);
	--rp-entrada: #0f1c22;
	--rp-sombra: 0 1px 3px rgba(0, 0, 0, .4);
	color-scheme: dark;
}

/* ---------- Estructura ---------- */
body, .page-content, .wrapper, .web { background: var(--rp-fondo) !important; color: var(--rp-texto); }
.top-navbar, .top-navbar .top-navbar-inner { background: var(--rp-cabecera) !important; border-bottom: 2px solid var(--rp-primario) !important; }
.logo-brand { background: var(--rp-cabecera) !important; color: var(--rp-primario) !important; }
.top-nav-content .navbar-nav > li > a, .top-navbar .navbar-nav > li > a { color: var(--rp-texto) !important; }
.top-nav-content .navbar-nav > li > a:hover, .top-nav-content .navbar-nav > li.open > a { background: var(--rp-primario-suave) !important; color: var(--rp-primario) !important; }

.sidebar-left { background: var(--rp-lateral) !important; color: var(--rp-lateral-texto) !important; }
ul.sidebar-menu li a { color: var(--rp-lateral-texto) !important; border-bottom-color: var(--rp-lateral-borde) !important; background: transparent; }
ul.sidebar-menu li a:hover, ul.sidebar-menu li.selected a, ul.sidebar-menu li.active > a { background: var(--rp-lateral-hover) !important; color: #fff !important; }
ul.sidebar-menu li ul.submenu, ul.sidebar-menu li ul.submenu li a { background: rgba(0, 0, 0, .14) !important; color: var(--rp-lateral-texto) !important; border-bottom-color: var(--rp-lateral-borde) !important; }
ul.sidebar-menu li ul.submenu li a:hover, ul.sidebar-menu li ul.submenu li.selected a { background: var(--rp-lateral-hover) !important; color: #fff !important; }
.sidebar-left .icon-sidebar { color: var(--rp-acento) !important; }

/* ---------- Tarjetas, paneles, modales, menus ---------- */
.the-box, .panel, .panel-body, .well, .modal-content, .dropdown-menu, .nav-dropdown-content, .popover, .tab-content {
	background: var(--rp-superficie) !important; color: var(--rp-texto) !important; border-color: var(--rp-borde) !important;
}
.the-box { box-shadow: var(--rp-sombra); }
.panel-heading, .panel-footer, .modal-header, .modal-footer, .nav-dropdown-heading { background: var(--rp-superficie-2) !important; color: var(--rp-texto) !important; border-color: var(--rp-borde) !important; }
.panel-primary > .panel-heading, .panel-info > .panel-heading { background: var(--rp-primario) !important; color: #fff !important; border-color: var(--rp-primario) !important; }
.dropdown-menu > li > a { color: var(--rp-texto) !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--rp-primario-suave) !important; color: var(--rp-primario) !important; }
.modal-backdrop.in { opacity: .55; }
.close { color: var(--rp-texto); opacity: .6; }

/* ---------- Tipografia y enlaces ---------- */
h1, h2, h3, h4, h5, h6, .page-heading { color: var(--rp-texto); }
.text-muted, .help-block, small { color: var(--rp-texto-suave); }
a { color: var(--rp-primario); }
a:hover, a:focus { color: var(--rp-primario-hover); }
.text-primary, .text-info { color: var(--rp-primario) !important; }
hr { border-color: var(--rp-borde); }

/* ---------- Tablas ---------- */
.table, .table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td,
table.dataTable, table.dataTable thead th, table.dataTable tbody td { color: var(--rp-texto); border-color: var(--rp-borde) !important; }
.table > tbody > tr, table.dataTable tbody tr { background: var(--rp-superficie); }
.table-striped > tbody > tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd { background: var(--rp-superficie-2) !important; }
.table-hover > tbody > tr:hover, table.dataTable.hover tbody tr:hover { background: var(--rp-primario-suave) !important; }
.table-th-block thead tr { background: var(--rp-superficie-2) !important; color: var(--rp-texto) !important; }
.table-th-block.table-primary thead tr, .table-th-block.table-success thead tr, .table-th-block.table-info thead tr, .table-th-block.table-dark thead tr {
	background: var(--rp-primario) !important; color: #fff !important;
}
.dataTables_wrapper, .dataTables_wrapper label, .dataTables_info { color: var(--rp-texto-suave) !important; }

/* ---------- Formularios ---------- */
.form-control, input:not([type]), input.hasDatepicker, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], select, textarea,
.chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices, .chosen-container .chosen-drop, .bootstrap-timepicker-widget, .datepicker {
	background: var(--rp-entrada) !important; color: var(--rp-texto) !important; border-color: var(--rp-borde) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus, .chosen-container-active .chosen-single, .chosen-container-active .chosen-choices {
	border-color: var(--rp-primario) !important; box-shadow: 0 0 0 3px var(--rp-primario-suave) !important; outline: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--rp-texto-suave); opacity: .8; }
.chosen-container .chosen-results li { color: var(--rp-texto); }
.chosen-container .chosen-results li.highlighted { background: var(--rp-primario) !important; color: #fff !important; }
.chosen-container-multi .chosen-choices li.search-choice { background: var(--rp-primario-suave) !important; color: var(--rp-texto) !important; border-color: var(--rp-borde) !important; }
label, .control-label { color: var(--rp-texto); }

/* ---------- Botones ---------- */
.btn-primary, .btn-info, .btn-warning.btn-perspective { background: var(--rp-primario) !important; border-color: var(--rp-primario) !important; color: #fff !important; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus { background: var(--rp-primario-hover) !important; border-color: var(--rp-primario-hover) !important; color: #fff !important; }
.btn-default { background: var(--rp-superficie) !important; color: var(--rp-texto) !important; border-color: var(--rp-borde) !important; }
.btn-default:hover { background: var(--rp-superficie-2) !important; }
.btn-success { background-color: #1f8a5b !important; border-color: #1f8a5b !important; color: #fff !important; }

/* ---------- Navegacion: pestanas, paginacion, migas ---------- */
.nav-tabs { border-bottom-color: var(--rp-borde) !important; }
.nav-tabs > li > a { color: var(--rp-texto-suave) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: var(--rp-superficie) !important; color: var(--rp-primario) !important; border-color: var(--rp-borde) var(--rp-borde) transparent !important; }
.nav-pills > li.active > a { background: var(--rp-primario) !important; }
.pagination > li > a, .pagination > li > span, .paginate_button { background: var(--rp-superficie) !important; color: var(--rp-primario) !important; border-color: var(--rp-borde) !important; }
.pagination > .active > a, .pagination > .active > span, .paginate_button.current { background: var(--rp-primario) !important; border-color: var(--rp-primario) !important; color: #fff !important; }
.breadcrumb { background: var(--rp-superficie-2) !important; color: var(--rp-texto-suave); }
.progress-bar-primary, .progress-bar-info, .bg-primary, .bg-info, .label-primary, .label-info, .badge-primary { background-color: var(--rp-primario) !important; }

/* ---------- Pie ---------- */
.footer, footer { background: var(--rp-superficie) !important; color: var(--rp-texto-suave) !important; border-color: var(--rp-borde) !important; }

/* ---------- Login (portada) en modo oscuro ---------- */
html[data-tema="oscuro"] .rp-login, html[data-tema="oscuro"] .rp-der { background: var(--rp-fondo) !important; }
html[data-tema="oscuro"] .rp-caja h2, html[data-tema="oscuro"] .rp-caja label { color: var(--rp-texto) !important; }
html[data-tema="oscuro"] .rp-caja input.form-control { background: var(--rp-entrada) !important; color: var(--rp-texto) !important; border-color: var(--rp-borde) !important; }

/* ---------- Boton de modo claro / oscuro ---------- */
#rpTemaBtn {
	position: fixed; left: 312px; top: 10px; z-index: 2000;
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rp-borde);
	background: var(--rp-superficie); color: var(--rp-primario); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; padding: 0;
}
#rpTemaBtn:hover { background: var(--rp-primario); color: #fff; }

/* ---------- Aspecto mas amable: tipografia, radios, sombras (sin tocar anchos ni margenes) ---------- */
body, .form-control, .btn, .table, .dropdown-menu, .modal-content, .chosen-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body { line-height: 1.5; }
.page-heading { font-weight: 700; letter-spacing: -.2px; }
.the-box, .panel, .modal-content { border-radius: 12px !important; border: 1px solid var(--rp-borde) !important; }
.panel-heading { border-radius: 12px 12px 0 0 !important; }
.modal-content { box-shadow: 0 18px 50px rgba(0, 0, 0, .25) !important; overflow: visible; }
/* 23/10/2026 ticket #2559: el overflow:hidden recortaba los desplegables chosen que se
   salen de la caja del modal (Cambiar Estado). Se redondean cabecera y pie para mantener
   las esquinas limpias sin necesidad de recortar. */
.modal-header { border-radius: 12px 12px 0 0 !important; }
.modal-footer { border-radius: 0 0 12px 12px !important; }
.dropdown-menu { border-radius: 10px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .15) !important; padding: 6px 0; }
.btn { border-radius: 8px !important; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; text-shadow: none !important; }
.btn-xs { border-radius: 6px !important; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--rp-primario-suave) !important; }
.form-control, .chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices { border-radius: 8px !important; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.chosen-container .chosen-drop { border-radius: 0 0 8px 8px !important; }
.table > thead > tr > th, table.dataTable thead th { font-weight: 600; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }
.table > tbody > tr > td { vertical-align: middle; }
.table-th-block thead tr th:first-child { border-top-left-radius: 8px; }
.table-th-block thead tr th:last-child { border-top-right-radius: 8px; }
.pagination > li > a, .pagination > li > span { border-radius: 6px !important; margin: 0 2px; }
.nav-tabs > li > a { border-radius: 8px 8px 0 0 !important; font-weight: 600; }
.label, .badge { border-radius: 999px !important; font-weight: 600; }
ul.sidebar-menu li a { transition: background-color .15s ease, color .15s ease; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rp-borde); border-radius: 8px; border: 2px solid var(--rp-fondo); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Tarjetas de indicadores del panel (cuad-grande) ---------- */
.cuad-grande { background: var(--rp-superficie) !important; box-shadow: var(--rp-sombra); border-radius: 12px !important; }
.cuad-grande .g-label { color: var(--rp-texto-suave) !important; }

/* ---------- Logotipos con fondo blanco ---------- */
.logo-brand img, .logo_cabecera_size { border-radius: 8px; }
html[data-tema="oscuro"] .logo-brand img, html[data-tema="oscuro"] .logo_cabecera_size { background: #fff; padding: 2px 6px; }
html[data-tema="oscuro"] footer img, html[data-tema="oscuro"] .footer img { border-radius: 8px; }
@media (max-width: 767px) { #rpTemaBtn { left: auto; right: 12px; top: auto; bottom: 12px; } }

/* ---------- Filas de DataTables (pares/impares y columna ordenada) ---------- */
table.dataTable tbody tr, table.dataTable tbody tr.even, .table > tbody > tr.even { background-color: var(--rp-superficie) !important; }
table.dataTable tbody tr.odd, .table > tbody > tr.odd { background-color: var(--rp-superficie-2) !important; }
table.dataTable tbody tr > td, table.dataTable tbody tr > td.sorting_1, table.dataTable tbody tr > td.sorting_2,
table.dataTable.display tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_1 { background-color: transparent !important; color: var(--rp-texto) !important; }
table.dataTable tbody tr:hover, table.dataTable tbody tr:hover > td { background-color: var(--rp-primario-suave) !important; }
table.dataTable.no-footer { border-bottom-color: var(--rp-borde) !important; }

/* En la portada (login) el boton de modo va arriba a la derecha */
body:has(.rp-login) #rpTemaBtn { left: auto; right: 18px; top: 18px; }

/* 23/10/2026: celdas con color de estado fijo (panel de arrastres: naranja, verde, azul, gris BLOQUEADO).
   En modo oscuro el fondo sigue siendo claro, así que el texto va oscuro para que se lea. */
html[data-tema="oscuro"] td[style*="background-color:#"],
html[data-tema="oscuro"] td[style*="background-color:#"] :is(p,span,small,div,b,strong){color:#14202b !important}

/* 24/10/2026 (Jaime): formularios mas compactos y legibles. Etiquetas y campos mas pequenos,
   etiquetas en gris oscuro semibold, menos aire vertical entre filas. */
.the-box label, .panel label, .modal label, form label { font-size:12.5px !important; font-weight:600 !important; color:var(--rp-texto-suave) !important; margin-bottom:3px !important; letter-spacing:.1px; }
.the-box .radio label, .the-box .checkbox label, form input[type=radio] + label, form input[type=checkbox] + label,
.the-box label:has(> input[type=radio]), .the-box label:has(> input[type=checkbox]) { font-weight:500 !important; font-size:12.5px !important; }
.the-box .form-control, .panel .form-control, .modal .form-control, form .form-control,
.the-box input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]), .the-box select,
.chosen-container .chosen-single, .chosen-container-multi .chosen-choices { font-size:13px !important; height:32px !important; min-height:32px !important; padding-top:4px !important; padding-bottom:4px !important; }
.chosen-container .chosen-single { line-height:22px !important; }
.chosen-container .chosen-results li { font-size:13px !important; }
.the-box .form-group, form .form-group { margin-bottom:9px !important; }
.the-box .help-block, .the-box small, .the-box .text-muted { font-size:11.5px !important; }
.the-box .btn, form .btn { font-size:13px; }
.the-box .btn-xs { font-size:12px; }
h1.page-heading, .page-heading, .the-box h1 { font-size:22px !important; }
.the-box, .the-box form { font-size:13px; }
.the-box .form-group > p { font-size:11.5px !important; line-height:1.35 !important; margin:3px 0 0 !important; }
.btn-xs, .btn-xs * { font-size:12px !important; }
.btn-xs { padding:3px 9px !important; }
/* 24/10/2026 (Jaime): buscadores aun mas compactos */
.the-box > form > br:first-child, .the-box form > br:first-of-type { display:none; }
.the-box .form-group, form .form-group { margin-bottom:5px !important; }
.the-box .form-group:has(input[type=radio]), .the-box .form-group:has(input[type=checkbox]) { margin-bottom:0 !important; line-height:18px !important; min-height:0 !important; }
.the-box input[type=radio], .the-box input[type=checkbox] { margin-top:2px !important; }
.the-box label, form label { margin-bottom:1px !important; line-height:16px !important; }
.the-box .form-control, form .form-control, .the-box input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]), .the-box select,
.chosen-container .chosen-single { height:29px !important; min-height:29px !important; padding-top:3px !important; padding-bottom:3px !important; }
.chosen-container .chosen-single { line-height:21px !important; }
.the-box { padding:8px 12px !important; }
.the-box .row { margin-bottom:0 !important; }
.the-box .form-group > p { margin-top:2px !important; line-height:1.25 !important; }

/* 27/10/2026 (Jaime): panel de trafico (PAN_report) mas compacto y con las dos barras de scroll siempre visibles.
   La tabla medía ~4.300 x 46.000 px y la barra horizontal quedaba al final del todo. */
form#PAN_report .table-responsive { max-height: calc(100vh - 150px) !important; overflow: auto !important; }
form#PAN_report .table-responsive thead th { position: sticky; top: 0; z-index: 5; background: var(--rp-superficie, #fff); }
form#PAN_report td.droppable { padding: 4px !important; }
form#PAN_report td.droppable .draggable { width: 118px !important; margin: 3px !important; }
form#PAN_report .nota-box { padding: 4px 5px !important; font-size: 11px !important; min-height: 0 !important; height: auto !important; line-height: 1.2 !important; }
form#PAN_report .nota-box p { font-size: 9px !important; line-height: 1.25 !important; margin: 2px 0 0 !important; }
form#PAN_report .nota-box { width: 100% !important; max-width: 118px !important; box-sizing: border-box !important; white-space: normal !important; word-break: break-word; }
form#PAN_report td div[style*="box-sizing:border-box"] * { font-size: 12px !important; line-height: 1.35 !important; }
form#PAN_report td div[style*="padding:8px; background:"] { padding: 4px 6px !important; font-size: 10px !important; margin: 3px 0 !important; }
form#PAN_report td div[style*="text-align:center; margin-top:8px"] * { font-size: 10px !important; }
form#PAN_report .deca_cabfranja .btn { font-size: 11px !important; padding: 2px 6px !important; }
form#PAN_report { margin-bottom: 0 !important; }
form#PAN_report .the-box { margin-bottom: 4px !important; padding-bottom: 6px !important; }
/* 27/10/2026 (Jaime): tarjetas del panel todas del mismo tamano; la barra de probabilidad al ancho de la tarjeta */
form#PAN_report .draggable .progress-bar { width: 100% !important; max-width: 118px !important; box-sizing: border-box !important; }
form#PAN_report .draggable .nota-box { height: 100px !important; min-height: 100px !important; overflow: hidden !important; display: flex !important; flex-direction: column; justify-content: center; align-items: center; }