/*----------------------------------------------------------------------------------------------*/
/* PANEL PRINCIPAL - versión moderna (blanco + verde plano), en línea con el login                */
/* Este archivo no modifica cstyle.css: sólo pisa los selectores del header/menú/contenido/footer  */
/*----------------------------------------------------------------------------------------------*/

body {
	background-color: #ffffff;
	background-image: none;
}

#container {
	width: 1010px;
	margin: 12px auto 30px auto;
	float: none;
	border: 1px solid var(--tempo-brand);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(15, 40, 25, 0.14);
	background-color: #ffffff;
}

/* -------------------- Header -------------------- */

#top {
	float: none;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 6px 24px;
	background-image: none;
	background-color: var(--tempo-header-bg);
	border: 0;
	border-bottom: 1px solid var(--tempo-header-border);
	border-radius: 17px 17px 0 0;
}

#logo {
	float: none;
	width: auto;
	height: 54px;
	margin: 0;
}

#top-right {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

#usuario {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	color: var(--tempo-header-text);
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}

#fecha {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	color: var(--tempo-subtitle-text);
	font-size: 11px;
	text-align: left;
}

#cerrarsesion {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
}

#cerrarsesion a#logout {
	display: inline-block;
	border: 1px solid var(--tempo-brand);
	border-radius: 8px;
	background-color: #ffffff;
	color: var(--tempo-brand);
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 6px 12px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#cerrarsesion a#logout:hover {
	background-color: var(--tempo-brand);
	color: #ffffff;
}

/* -------------------- Contenido + menú -------------------- */

#contenido {
	width: 1010px;
	float: none;
	background-color: #ffffff;
	background-image: none;
	border: 0;
}

#contenido_womenu {
	width: 1010px;
	float: none;
	background-color: #ffffff;
	border: 0;
	box-sizing: border-box;
	padding: 24px 24px 30px 24px;
	border-radius: 0 0 17px 17px;
}

#columna-menu {
	width: 185px;
	height: auto;
	min-height: 600px;
	background-image: none;
	background-color: var(--tempo-light-bg);
	border-right: 1px solid var(--tempo-light-border);
	padding-top: 8px;
	box-sizing: border-box;
}

#content {
	width: 825px;
	box-sizing: border-box;
	padding: 20px 24px 24px 24px;
	background-color: #ffffff;
}

/* -------------------- Menú vertical -------------------- */

.ddsmoothmenu-v ul {
	width: 185px;
	background-image: none;
	background-color: transparent;
	font: normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.ddsmoothmenu-v ul li {
	background-image: none;
	padding-left: 0;
}

.ddsmoothmenu-v ul li a {
	color: var(--tempo-brand-dark);
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 18px 14px;
	border-bottom: 1px solid var(--tempo-light-border);
	border-right: 0;
	border-left: 3px solid transparent;
	box-sizing: border-box;
}

.ddsmoothmenu-v ul li a:link,
.ddsmoothmenu-v ul li a:visited,
.ddsmoothmenu-v ul li a:active {
	color: var(--tempo-brand-dark);
	padding-top: 18px;
	height: auto;
}

.ddsmoothmenu-v ul li a:hover {
	background-color: #ffffff;
	color: var(--tempo-brand);
	border-left: 3px solid var(--tempo-brand);
}

.ddsmoothmenu-v ul li a.selected {
	color: var(--tempo-brand);
	background-color: #ffffff;
	border-left: 3px solid var(--tempo-brand);
}

/* Submenú flotante (Definiciones, Herramientas, Ayuda) */
.ddsmoothmenu-v ul li ul {
	width: 230px;
	background-color: var(--tempo-light-bg);
	border: 1px solid var(--tempo-light-border);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(15, 40, 25, 0.12);
	padding: 6px 0 14px 0;
}

.ddsmoothmenu-v ul li ul li {
	background-image: none;
	padding-left: 0;
}

.ddsmoothmenu-v ul li ul li a {
	color: var(--tempo-brand-dark);
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 12px 18px;
	border-bottom: 0;
	border-left: 3px solid transparent;
}

.ddsmoothmenu-v ul li ul li a:hover {
	background-color: var(--tempo-hover-bg);
	color: var(--tempo-brand);
	border-left: 3px solid var(--tempo-brand);
}

/* -------------------- Footer -------------------- */

#footer {
	clear: both;
	width: 1010px;
	height: auto;
	box-sizing: border-box;
	padding: 20px 24px;
	text-align: right;
	font-size: 12px;
	color: #ffffff;
	background-image: none;
	background-color: var(--tempo-header-bg);
	border: 0;
	border-top: 1px solid var(--tempo-header-border);
	border-radius: 0 0 17px 17px;
}

#pie-datos {
	color: var(--tempo-subtitle-text);
	font-size: 11px;
}

/* -------------------- jQuery UI (grillas, botones, filtros) -------------------- */
/* La app usa el theme "le-frog" (verde oscuro) para jqGrid, los botones y los
   combos de filtro (dropdownchecklist). Estas reglas lo llevan a la misma
   paleta blanco + verde plano del resto de la app, sin tocar el theme original. */

.ui-widget-header {
	border: 1px solid var(--tempo-header-border);
	background: var(--tempo-header-bg) none;
	color: #ffffff;
	font-weight: bold;
	text-shadow: none;
}

.ui-widget-content {
	border: 1px solid var(--tempo-border);
	background: #ffffff none;
	color: var(--tempo-text-dark);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid var(--tempo-brand);
	background: #ffffff none;
	color: var(--tempo-brand);
	font-weight: bold;
	text-shadow: none;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: var(--tempo-brand);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid var(--tempo-brand);
	background: var(--tempo-brand) none;
	color: #ffffff;
	text-shadow: none;
}

.ui-state-hover a,
.ui-state-hover a:hover {
	color: #ffffff;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid var(--tempo-brand-dark);
	background: var(--tempo-brand-dark) none;
	color: #ffffff;
	text-shadow: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid var(--tempo-selected-border);
	background: var(--tempo-selected-bg) none;
	color: var(--tempo-brand);
}

/* Iconos: verdes en estado normal (antes blancos, invisibles sobre fondo blanco) */
.ui-icon,
.ui-state-default .ui-icon {
	background-image: url(themes/le-frog/images/ui-icons_1e7a40_256x240.png);
}

/* Grilla (jqGrid) */
.ui-jqgrid {
	border: 1px solid var(--tempo-grid-border) !important;
	border-radius: 10px;
	overflow: hidden;
}

.ui-jqgrid .ui-jqgrid-titlebar {
	border-radius: 10px 10px 0 0;
	padding: 10px 12px !important;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ui-jqgrid .ui-jqgrid-htable th {
	background: var(--tempo-light-bg);
	border-color: var(--tempo-light-border) !important;
	color: var(--tempo-brand-dark);
}

.ui-jqgrid .ui-jqgrid-htable th div {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ui-jqgrid tr.jqgrow td {
	border-bottom-color: var(--tempo-border-soft) !important;
}

.ui-jqgrid tr.ui-row-ltr td {
	border-right-color: var(--tempo-input-bg-alt) !important;
}

.ui-jqgrid .ui-jqgrid-pager {
	border-top: 1px solid var(--tempo-border) !important;
	border-radius: 0 0 10px 10px;
}

/* Filtros sobre la grilla (Buscar / Grupos / Estados) */
.grid-filter-row {
	margin-bottom: 16px;
}

.grid-filter-col input[type='text'] {
	border: 1px solid var(--tempo-input-border);
	border-radius: 8px;
	background: var(--tempo-input-bg);
	padding: 2px 8px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.grid-filter-col input[type='text']:focus {
	border: 1px solid var(--tempo-brand);
	background: #ffffff;
	outline: none;
}

/* Botones de acción (Nuevo, Editar, ID reloj, etc.) — aplica a TODAS las
   pantallas con listados (Empleados, Grupos, Sectores, Usuarios, Conceptos,
   Marcas, etc.), ya que todas comparten el mismo patrón div.actions > button */
.ui-button, button.ui-state-default {
	border-radius: 8px !important;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.actions {
	overflow: hidden;
	margin-top: 8px;
}

.actions button {
	margin: 0 8px 8px 0;
}

.actions button .ui-button-text {
	padding: 3px 12px !important;
	font-size: 12px !important;
}

/* Barra de acciones de Marcas: con una fila seleccionada aparecen muchos
   botones juntos (Nueva, Editar, Tipo, Origen, Eliminar, Importar,
   Reprocesar, Exportar, Ubicación, Chequear Secuencia, Usuario) y no entraban
   en un renglón. Los achicamos y forzamos una sola fila (con scroll horizontal
   de respaldo si en una pantalla muy angosta no entraran igual). */
.actions-compact {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	overflow-x: auto;
}

.actions-compact > * {
	flex: 0 0 auto;
}

.actions-compact button {
	margin: 0 3px 0 0 !important;
	font-size: 11px !important;
	white-space: nowrap;
}

.actions-compact button .ui-button-text {
	padding: 4px 7px !important;
}

/* Usuario, Chequear y Ubicacion siempre pegados a la derecha de la barra */
.actions-compact .actions-right {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-left: auto;
	flex: 0 0 auto;
}

/* Encabezado de la grilla (título, ej. "Empleados"): mismo verde que el
   header de la pantalla. Aplica a toda grilla (.ui-jqgrid es genérico). */
.ui-jqgrid .ui-jqgrid-titlebar {
	background: var(--tempo-header-bg);
	border-color: var(--tempo-header-border);
	color: var(--tempo-header-text);
	text-align: left;
}

.ui-jqgrid .ui-jqgrid-title {
	float: left;
	display: block;
}

/* -------------------- Ventanas modales (Horarios, Notificaciones, Datos, etc.) -------------------- */
/* Todas se generan desde WebComponentsHelper::createModal, así que este bloque
   aplica a cualquier modal de la app (misma estructura .modal > .modal-header + .modal-body) */

.modal {
	border: 1px solid var(--tempo-border-mid);
	border-radius: 14px;
	padding: 0;
	background-color: #ffffff;
	box-shadow: 0 16px 40px rgba(15, 40, 25, 0.18);
	-moz-box-shadow: 0 16px 40px rgba(15, 40, 25, 0.18);
	-webkit-box-shadow: 0 16px 40px rgba(15, 40, 25, 0.18);
}

.modal-header {
	background-color: var(--tempo-header-bg);
	padding: 14px 58px 14px 22px;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
}

.modal-header h1,
.modal-header h2 {
	float: left;
	margin: 0;
	padding: 0;
	border-bottom: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	color: var(--tempo-header-text);
}

.modal .subtitle {
	float: right;
	margin-top: 4px;
	color: var(--tempo-subtitle-text);
	font-size: 12px;
	font-weight: normal;
}

.modal-body {
	padding: 20px 22px 26px 22px;
	border-radius: 0 0 13px 13px;
}

.modal-body::after {
	content: "";
	display: table;
	clear: both;
}

.modal a.close {
	top: 7px;
	right: 12px;
	background-image: none;
	background-color: transparent;
	border-radius: 0;
	color: var(--tempo-header-text);
	font-size: 24px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
}

.modal a.close::before {
	content: "\00d7";
}

/* La grilla dentro de un modal repite el título en su propia franja
   (ej. "Horarios" adentro de la ventana "Horarios"), así que la sacamos */
.modal-body .ui-jqgrid-titlebar {
	display: none;
}

/* Filas de botones al pie de un modal (ej. Fijo/Flexible/... y Exportar/Usuario):
   las hacemos flotar para que se acomoden en un mismo renglón en vez de apilarse,
   y separadas de la grilla de arriba */
.modal-body div[style*="margin-top: 10px"] {
	float: left;
	margin-top: 18px !important;
	margin-right: 20px;
	overflow: hidden;
}

.modal-body button {
	border-radius: 8px;
}

/* Checkboxes y radios en verde, en vez del azul por defecto del navegador
   (aplica en toda la app: formularios, modales, etc.) */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--tempo-brand);
}

/* Los labels de formularios traen un ancho fijo de 100px desde main.min.css
   (bundle de producción), insuficiente para textos largos como "Requiere
   autorización:". Le damos más espacio dentro de los modales. */
.modal-body form label {
	width: 150px;
	color: var(--tempo-brand-dark);
}

/* Ventana "Crear/Editar notificación": un poco de aire antes y después del
   bloque de checkboxes "Aplicar en" */
.form_row.aplica-en-start {
	margin-top: 22px !important;
}

.form_row.aplica-en-end {
	margin-bottom: 22px !important;
}

.aplica-en-row {
	margin-top: 2px !important;
}

/* -------------------- Calendario (datepicker) -------------------- */
/* Mismo verde del header de las ventanas, texto blanco */
.ui-datepicker .ui-datepicker-header {
	background: var(--tempo-header-bg);
	border: 1px solid var(--tempo-header-border);
	color: var(--tempo-header-text);
}

.ui-datepicker .ui-datepicker-title {
	color: var(--tempo-header-text);
	font-weight: bold;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	border: 0;
	background: transparent;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	background-image: url(themes/le-frog/images/ui-icons_ffffff_256x240.png);
}

.ui-datepicker th {
	color: var(--tempo-brand);
}

.ui-datepicker td a {
	border-radius: 3px;
	display: block;
	text-align: right;
}

/* Opciones seleccionadas en cajas de selección múltiple (Conceptos, Empleados,
   etc.): verde en vez del azul por defecto del navegador. Aplica en toda
   la app, no solo en el modal de Informes. */
select[multiple] option:checked {
	background: linear-gradient(var(--tempo-brand), var(--tempo-brand));
	color: #ffffff;
}

/* Modal "Crear/editar usuario": las cajas de Roles/Grupos/Empleados/etc.
   (clase .box_view, 325px c/u desde cstyle.css) se pasaban del ancho del
   modal (700px) sumadas a la columna de botones del medio (50px). */
.modal-body table select.box_view {
	width: 280px;
}

/* Modal "Crear/editar reloj": tabla simple etiqueta+campo sin espaciado propio */
.form-table {
	border-collapse: separate;
	border-spacing: 0;
}

.form-table td {
	padding-top: 9px;
	padding-bottom: 9px;
	vertical-align: middle;
}

.form-table td:first-child {
	padding-right: 14px;
	color: var(--tempo-brand-dark);
}

/* Tablas de conceptos dentro de modales (Crear archivo, Condiciones, etc.):
   mismo aspecto que el encabezado de columnas de la grilla (gris-verde,
   texto oscuro en negrita), en vez del verde sólido original. Sin mayúsculas
   para no romper columnas angostas como "Desglosar sector"/"Mostrar cero". */
.tablas {
	border: 1px solid var(--tempo-border);
	margin-top: 14px;
}

.tablas td {
	border-bottom: 1px dotted var(--tempo-border);
	padding-top: 8px;
}

.tablas > thead > tr {
	background-color: var(--tempo-header-bg);
	border-bottom: 1px solid var(--tempo-header-border);
	color: #ffffff;
	height: auto;
}

.tablas th {
	border-bottom: 1px solid var(--tempo-header-border);
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	padding: 4px 6px;
	line-height: 1.25;
}

/* Botones circulares +/- (agregar/quitar renglón de horario, etc.):
   cstyle.css les fuerza font-size:200% !important pensado para otro ícono,
   lo que deforma el símbolo. Lo centramos con un tamaño prolijo y fijo. */
.buttonAddRemove,
.buttonAddRemoveDay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px !important;
	font-weight: bold;
	line-height: 1 !important;
	padding: 0 !important;
}

.buttonAddRemove .ui-button-text,
.buttonAddRemoveDay .ui-button-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1 !important;
}

/* -------------------- Páginas de Herramientas (Importar empleados, marcas, etc.) -------------------- */
/* Mismo aspecto que las ventanas modales: franja gris-verde con el título y
   recuadro redondeado, en vez del <fieldset>/<legend> original. */
.tool-panel {
	max-width: 620px;
	margin-top: 8px;
	border: 1px solid var(--tempo-border-mid);
	border-radius: 14px;
	overflow: hidden;
	background-color: #ffffff;
	box-shadow: 0 16px 40px rgba(15, 40, 25, 0.10);
}

.tool-panel-header {
	background-color: var(--tempo-header-bg);
	padding: 14px 58px 14px 22px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	color: var(--tempo-header-text);
	position: relative;
}

.tool-panel-header a.tool-panel-close {
	position: absolute;
	top: 7px;
	right: 12px;
	height: 35px;
	width: 35px;
	background-image: none;
	background-color: transparent;
	border-radius: 0;
	color: var(--tempo-header-text);
	font-size: 24px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.tool-panel-header a.tool-panel-close::before {
	content: "\00d7";
}

.tool-panel-body {
	padding: 24px 22px 22px 22px;
}

/* Separa el botón "Examinar" del navegador del texto "no se ha
   seleccionado archivo" en los campos de tipo archivo */
input[type="file"]::file-selector-button {
	margin-right: 12px;
}

/* -------------------- Ventanas de alerta/confirmación (jquery.alerts) -------------------- */
/* Mismo aspecto que el resto de los modales: franja de color con el título,
   recuadro blanco redondeado, botones en el mismo estilo. */

#popup_container {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	min-width: 320px;
	max-width: 600px;
	background: #ffffff;
	border: 1px solid var(--tempo-header-border);
	color: var(--tempo-text-dark);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(15, 40, 25, 0.18);
}

#popup_title {
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	line-height: 1.4em;
	color: var(--tempo-header-text);
	background: var(--tempo-header-bg);
	border: 0;
	cursor: default;
	padding: 8px 20px;
	margin: 0;
}

#popup_content {
	background-image: none !important;
	padding: 20px 22px;
	margin: 0;
}

#popup_content.alert,
#popup_content.confirm,
#popup_content.prompt {
	background-image: none;
}

#popup_message {
	max-height: 300px;
	overflow: auto;
	padding-left: 0;
	color: var(--tempo-text-dark);
}

#popup_panel {
	text-align: right;
	margin: 20px 0 0 0;
}

#popup_prompt {
	margin: 0.5em 0;
	box-sizing: border-box;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--tempo-input-border);
	border-radius: 8px;
	background: var(--tempo-input-bg);
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
}

#popup_panel input {
	font-size: 100%;
	width: auto;
}

#popup_ok,
#popup_cancel {
	box-sizing: border-box;
	display: inline-block;
	min-width: 90px;
	padding: 8px 16px;
	margin-left: 8px;
	border-radius: 8px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
}

#popup_ok {
	border: 2px solid var(--tempo-brand);
	background-color: #ffffff;
	color: var(--tempo-brand);
	transition: background-color 0.15s ease, color 0.15s ease;
}

#popup_ok:hover {
	background-color: var(--tempo-brand);
	color: #ffffff;
}

#popup_cancel {
	border: 1px solid var(--tempo-input-border);
	background-color: #ffffff;
	color: var(--tempo-text-dark);
}

#popup_cancel:hover {
	background-color: var(--tempo-input-bg);
}

/* Los links sueltos (ej. la lista de "empleados con errores" en Ver informe)
   tienen un verde fijo (#3b7f1e) puesto en cstyle.css. Lo llevamos al color
   del tema, para que no quede descolgado si el tema activo no es verde. */
a {
	color: var(--tempo-brand);
}

/* Regla forzada específica: hay dos lugares distintos donde se arma la lista
   de "empleados con errores" (Ver informe, y el detalle de horario del
   empleado) y algo les gana a la regla general de arriba. Apuntamos directo
   al contenedor conocido con !important para asegurar que gane siempre. */
#error_employee a {
	color: var(--tempo-brand) !important;
}

/* Cualquier <input> "suelto" (sin clase propia, ej. los campos de filtro
   "Buscar" que acompañan las cajas de selección múltiple) se ponía verde
   sólido al enfocarlo, por una regla vieja de cstyle.css. Lo llevamos al
   color del tema. */
input:focus {
	background-color: var(--tempo-input-bg);
	border: 1px solid var(--tempo-brand);
	color: var(--tempo-text-dark);
}

/* Mismo problema que el de arriba, pero para <textarea> (ej. el campo
   "Descripcion" del modal "Asignar datos"): quedaba verde sólido fijo
   al escribir, por la misma regla vieja de cstyle.css. */
textarea:focus {
	background-color: var(--tempo-input-bg);
	border: 1px solid var(--tempo-brand);
	color: var(--tempo-text-dark);
}

/* Pequeño margen a la izquierda de la primera columna de cualquier grilla,
   tanto en el encabezado como en los datos */
.ui-jqgrid .ui-jqgrid-htable th:first-child > div {
	padding-left: 8px;
}

.ui-jqgrid tr.jqgrow td:first-child,
.ui-jqgrid tr.jqgfirstrow td:first-child,
.ui-jqgrid tr.jqgroup td:first-child,
.ui-jqgrid tr.jqfoot td:first-child {
	padding-left: 8px;
}

/* Cuando la primera columna es el checkbox de selección (grillas con
   multiselect, ej. Grupos/Informes), el margen de arriba desalinea el
   checkbox del encabezado respecto de los de cada fila. En ese caso, en vez
   de margen, los centramos a ambos para que queden en la misma posición. */
.ui-jqgrid .ui-jqgrid-htable th:first-child:has(input[type="checkbox"]) > div {
	padding-left: 0 !important;
	text-align: center;
}

.ui-jqgrid tr.jqgrow td:first-child:has(input[type="checkbox"]) {
	padding-left: 0 !important;
	text-align: center;
}

/* Ícono ▶ de "este ítem tiene submenú" (Definiciones, Herramientas, Ayuda):
   antes era una imagen verde fija (right-green.png). Lo reemplazamos por un
   triángulo dibujado en CSS, con el color del tema, y ocultamos la imagen. */
.ddsmoothmenu-v ul li a img.rightarrowclass {
	display: none;
}

.ddsmoothmenu-v ul li a:has(img.rightarrowclass) {
	position: relative;
}

.ddsmoothmenu-v ul li a:has(img.rightarrowclass)::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	margin-top: -4px;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--tempo-brand-dark);
}

/* Filtros "Grupos" y "Estado" (Empleados, Grupos, Informes) usan el plugin
   dropdownchecklist, que les aplica la clase .ui-state-default (fondo blanco,
   texto en negrita del color del tema) igual que un botón. Los normalizamos
   para que se vean como un <select> común, igual que el resto de los filtros. */
.ui-dropdownchecklist-selector.ui-state-default {
	border: 1px solid #a9a9a9 !important;
	background: #ffffff !important;
	color: #000000 !important;
	font-weight: normal !important;
	text-shadow: none !important;
}

.ui-dropdownchecklist-text {
	color: #000000 !important;
	font-weight: normal !important;
}

/* Sacar las líneas que separan cada opción dentro del desplegable de
   "Grupos"/"Estado" */
.ui-dropdownchecklist-dropcontainer div,
.ui-dropdownchecklist-dropcontainer li,
.ui-dropdownchecklist-dropcontainer label,
.ui-dropdownchecklist-item {
	border-bottom: none !important;
	border-top: none !important;
}

/* Ventana "Ver informe" (Grupos e Informes): poner "Mostrar totales por:" y
   "Opciones:" en dos columnas, una al lado de la otra, en vez de una debajo
   de la otra. Los detecto por ser dos ".details-containers" consecutivos
   (el tercer uso más abajo, para "Marcas", no tiene un hermano pegado y
   queda afuera de esta regla). */
.details-containers:has(+ .details-containers) {
	width: 48%;
	float: left;
	margin-bottom: 15px;
}

.details-containers + .details-containers {
	width: 48%;
	float: left;
	margin-bottom: 15px;
	margin-left: 4%;
}

.details-containers + .details-containers + * {
	clear: both;
}

/* Ventana "Ver informe": el botón OK y el bloque de "Generando informe..."
   con la barra de progreso quedaban centrados por el colapso de las
   columnas flotantes de arriba. Los llevamos a la izquierda, debajo de
   "Mostrar totales por:" */
#view_report_prompt #submit,
#report_prompt #submit {
	clear: both;
	display: block;
	float: left;
	margin: 15px 8px 0 0;
	text-align: left;
}

#view_report_prompt #auto_correct {
	float: left !important;
	margin: 15px 0 0 0 !important;
}

#view_report_prompt #chequeando_secuencia {
	clear: both !important;
	text-align: left;
	padding-top: 35px !important;
	overflow: hidden;
}

/* Ventana "Asignar horario": cabezal de la columna Sector. Antes eran dos
   botones "+"/"-" superpuestos; ahora es la palabra "Sector" con un
   triangulito (▶ cerrado / ▼ abierto) que hace de mostrar/ocultar. */
.sector-toggle-th {
	white-space: nowrap;
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.sector-toggle-btn {
	display: inline-block;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin-left: 6px !important;
	vertical-align: middle;
	cursor: pointer;
	border-style: solid !important;
	border-color: transparent !important;
	border-left-width: 5px !important;
	border-right-width: 5px !important;
	border-top-width: 6px !important;
	border-bottom-width: 0 !important;
	border-top-color: #ffffff !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.sector-toggle-btn-open {
	border-top-width: 0 !important;
	border-bottom-width: 6px !important;
	border-left-width: 5px !important;
	border-right-width: 5px !important;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-top-color: transparent !important;
	border-bottom-color: #ffffff !important;
}

/* Ventana "Asignar horario": los cabezales "+"/"-" (columnas de agregar/quitar
   tramo) también van en blanco, igual que el resto del texto sobre el fondo
   azul de esa fila. */
#del_1_title,
#add_1_title,
th[id^="del_"][id$="_title"],
th[id^="add_"][id$="_title"] {
	color: #ffffff !important;
}

/* Ventana "Asignar horario" con 5+ intervalos (se agranda horizontalmente):
   1) la barra de scroll horizontal quedaba pegada/superpuesta con la última
      fila de la tabla, por falta de espacio reservado para ella.
   2) el desplegable de "Sector" se abre 300px de ancho (fijo, de fábrica)
      pegado a la izquierda de su propio select; en el intervalo más a la
      derecha eso lo empuja bien afuera de la ventana. Lo achicamos un poco
      para que sea menos probable que se pase, y si el select está pegado al
      borde derecho, lo abrimos hacia la izquierda en vez de la derecha. */
#schedule_prompt .form_content {
	padding-bottom: 18px;
}

#schedule_prompt td[id^="sector_"] div.chosen-drop {
	width: 220px;
	position: absolute;
}

/* El control visible de "Sector" (cerrado o abierto) siempre mide lo mismo,
   así la celda de la tabla no se reacomoda al desplegar la lista (lo que
   antes corría el resto del encabezado). Apuntamos por la celda contenedora
   (td#sector_N) en vez de por clase, porque esa clase no se hereda igual en
   los intervalos clonados (2do en adelante). */
#schedule_prompt td[id^="sector_"] .chosen-container,
#schedule_prompt td[id^="sector_"] .chosen-container.chosen-with-drop {
	width: 76px !important;
}

/* La celda de Sector pasa de position:static a position:absolute (y viceversa)
   cada vez que se abre/cierra el desplegable — un mecanismo que ya traía la
   app. Sin un ancho fijo, la celda "se achica" al volverse absolute (toma
   el ancho de su contenido en vez del ancho de columna), y la tabla se
   reacomoda un poquito cada vez — eso es lo que se va notando/acumulando al
   cerrar o volver a scrollear. Le damos un ancho fijo para que no cambie
   nunca, esté en static o en absolute. */
#schedule_prompt td[id^="sector_"] {
	width: 82px;
	min-width: 82px;
	max-width: 82px;
	box-sizing: border-box;
}

/* Herramientas: Calculadora de horas */
.calc-hours-modes {
	margin-top: 6px;
}

.calc-hours-mode-btn {
	background-color: #ffffff;
	border: 1px solid var(--tempo-brand);
	color: var(--tempo-brand);
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 3px 12px;
	line-height: 1.4;
	margin-right: 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.calc-hours-mode-btn .ui-button-text {
	padding: 3px 12px !important;
	font-size: 12px !important;
}

.calc-hours-mode-btn:hover {
	background-color: var(--tempo-brand);
	color: #ffffff;
}

.calc-hours-result {
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	display: none;
}

.calc-hours-result.calc-hours-ok,
.calc-hours-result.calc-hours-error {
	display: block;
}

.calc-hours-result.calc-hours-ok {
	background-color: var(--tempo-light-bg);
	border: 1px solid var(--tempo-light-border);
	color: var(--tempo-brand-dark);
}

.calc-hours-result.calc-hours-error {
	background-color: var(--tempo-error-bg);
	border: 1px solid var(--tempo-error-border);
	color: var(--tempo-error-text);
}

/* El menú (ddsmoothmenu) trae su propia franja gris de "sombra" como un div
   aparte (.ddshadow), técnica vieja de antes de que existiera box-shadow.
   La ocultamos: el submenú ya tiene su propia sombra puesta en CSS. */
.ddshadow {
	display: none !important;
}