/*
 * Colores de marca RAMGESTION.
 * Este archivo lo carga classes/layout.php automáticamente si existe
 * (comprobación file_exists) - sobrevive a las regeneraciones del proyecto,
 * no hace falta tocar nada en el Designer para que se aplique.
 *
 * Rojo tomado del inspector del navegador sobre ramgestion.es (#84303e).
 *
 * Todo con !important: el style.css del tema (harbor) se carga después de
 * este archivo y repite las mismas reglas con la misma especificidad, así
 * que sin !important gana siempre el del tema.
 *
 * A propósito NO se toca el color general de texto/enlaces (a, .text-primary):
 * eso rompía la legibilidad de botones y del menú lateral (ambos usan <a>
 * por dentro). Solo se tocan: botones principales, pestañas de año/filtros
 * por fecha, paneles de filtro de la barra lateral, y el elemento
 * seleccionado del menú.
 */

:root {
	--brand-red: #84303e;
	--brand-red-dark: #6b2732;
}

/* Botones principales (Añadir nuevo, Guardar, Liquidar horas extra...) */
.btn-primary,
.btn-primary:focus {
	background-color: var(--brand-red) !important;
	border-color: var(--brand-red) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover {
	background-color: var(--brand-red-dark) !important;
	border-color: var(--brand-red-dark) !important;
}

/* Pestañas de filtro (años, en horas_extra_mov, horario_extra, etc.) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--brand-red) !important;
	border-top-color: var(--brand-red) !important;
	border-bottom-color: transparent !important;
}
.nav-tabs > li.active > a {
	box-shadow: inset 0 2px 0 var(--brand-red) !important;
}

/* Paneles de filtro de la barra lateral (Fecha, Pagado, Semana, Mes...) */
.filter-field.panel-info > .panel-heading {
	background-color: var(--brand-red) !important;
	border-color: var(--brand-red) !important;
	color: #ffffff !important;
}
.filter-field.panel-info > .panel-heading a {
	color: #ffffff !important;
}

/* Menú lateral: elemento activo/seleccionado (selector real confirmado en
   styles/bootstrap/harbor/small/style.css: li.active > [data-menu-link]) */
.r-vbar-page .r-left .r-menu li.active > [data-menu-link] {
	background: var(--brand-red) !important;
	color: #ffffff !important;
}

/* Checkboxes / radios con color de tema */
.checkbox input[type="checkbox"]:checked + label::after,
.radio input[type="radio"]:checked + label::after {
	background-color: var(--brand-red) !important;
}

/* El tema harbor pone overflow:hidden en la tabla que envuelve los campos
   de los formularios (solo para redondear las esquinas), y de paso recorta
   cualquier desplegable que se salga de sus límites -- selector de fecha,
   autocompletados, etc. Selector confirmado en vivo con DevTools sobre
   "Horarios, Añadir nuevo" (breadcrumb: div.r-grid > table#form_grid_1).
   Se libera aquí; el único coste es que las esquinas redondeadas de esa
   tabla dejan de recortar el contenido en el borde exacto (efecto casi
   imperceptible en la práctica). */
.r-grid > table[data-location="grid"] {
	overflow: visible !important;
}

/* Mismo problema, distinta variante de página: en los popups de "Añadir
   evento" (p. ej. horario2_add.php) la tabla del formulario cuelga de
   .r-small-page > .r-edit-form en vez de .r-grid, y el tema le pone el
   mismo overflow:hidden solo por las esquinas redondeadas -- recorta el
   selector de fecha del campo "Hora". Selector confirmado en
   styles/bootstrap/harbor/small/style.css (regla ".function-add .r-small-page
   > .r-edit-form"), no adivinado. */
.function-add .r-small-page > .r-edit-form,
.function-edit .r-small-page > .r-edit-form,
.function-view .r-small-page > .r-edit-form {
	overflow: visible !important;
}

/* El calendario desplegable (plugin bootstrap-datetimepicker, clases propias
   del plugin, no del tema) hereda un color de texto casi blanco de algún
   sitio de la app -- probablemente pensado para fondos oscuros como el menú
   lateral -- y sale con el contraste invertido: los días del mes en vez de
   ser los más legibles salen los más claros, y los de fuera de mes al
   revés. Se fuerza aquí el contraste correcto sobre fondo blanco. */
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
	color: #333333 !important;
}
.bootstrap-datetimepicker-widget table td.day.old,
.bootstrap-datetimepicker-widget table td.day.new {
	color: #999999 !important;
}
.bootstrap-datetimepicker-widget table td.day.disabled {
	color: #cccccc !important;
}
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next,
.bootstrap-datetimepicker-widget table th.picker-switch,
.bootstrap-datetimepicker-widget table th.dow {
	color: #333333 !important;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table th.picker-switch:hover {
	color: #333333 !important;
	background: #eeeeee !important;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
	color: #ffffff !important;
	background: var(--brand-red) !important;
}

/* Centra los botones de fichaje (Entrada/Pausa/Volver/Salida) en
   horario_view / horario_view1 (ordenador y móvil): cada botón ya tiene
   width:200px fijado en styles/pages/horario_view*.css, pero el <span> que
   lo envuelve lo pone el propio motor de PHPRunner a ancho completo (regla
   suya: "span[data-itemid] { display:block }"), así que sin esto queda
   pegado al borde izquierdo de su celda en vez de centrado - confirmado en
   vivo con DevTools sobre horario_view.php (ordenador). */
[data-page="horario_view"][data-itemid="custom_button"] > .btn,
[data-page="horario_view"][data-itemid="custom_button1"] > .btn,
[data-page="horario_view"][data-itemid="custom_button2"] > .btn,
[data-page="horario_view"][data-itemid="custom_button3"] > .btn,
[data-page="horario_view1"][data-itemid="custom_button"] > .btn,
[data-page="horario_view1"][data-itemid="custom_button1"] > .btn,
[data-page="horario_view1"][data-itemid="custom_button2"] > .btn,
[data-page="horario_view1"][data-itemid="custom_button3"] > .btn {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* La tabla entera del formulario (botones + recuadro "Horas del día") no
   está centrada en la página - confirmado en vivo con DevTools: el
   recuadro de horas tiene el borde puesto directamente en su <td>
   (data-cellid="grid_c9"), sin ningún contenedor más ancho alrededor, así
   que aunque el contenido de cada celda se centre por dentro, el bloque
   completo se queda pegado a la izquierda si la tabla en sí no se centra.
   :has() se usa para no depender del id de la tabla (podría cambiar al
   regenerar en el Designer), solo de que contenga algo de esta página. */
table.r-edit-form:has([data-page="horario_view"]),
table.r-edit-form:has([data-page="horario_view1"]) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* En móvil (horario_view1) la celda del recuadro "Horas del día" tiene un
   padding-left:110px propio del Designer (styles/pages/horario_view1.css)
   que no existe en la versión de escritorio - ahí es donde se ve el
   recuadro pegado a la izquierda pese a que la tabla ya está centrada
   (línea de arriba): con ese hueco de más a la izquierda, el navegador
   sigue midiendo el ancho de la celda como si arrancara desde ahí. Se
   anula solo para esta celda (los botones ya se ven bien en móvil, no se
   tocan sus celdas). */
[data-cellid="grid_c9"][data-page="horario_view1"] {
	padding-left: 0 !important;
}

/* Centra el texto de "Horas del día" (etiqueta y valor) dentro de su caja:
   probado en vivo con DevTools sobre horario_view1 (móvil), confirmado que
   funciona. Se usa text-align-last en vez de text-align porque el motor sí
   declara "text-align:left" con bastante especificidad para esta etiqueta
   en pantallas estrechas (ver styles/bootstrap/harbor/small/style.css,
   dentro de "@media (max-width: 767px)"), y ganarle esa pelea de
   especificidad es más frágil que usar una propiedad que el motor no
   declara en ningún sitio. */
[data-page="horario_view"][data-itemid="edit_field_label"],
[data-page="horario_view"][data-itemid="integrated_edit_field11"],
[data-page="horario_view1"][data-itemid="edit_field_label"],
[data-page="horario_view1"][data-itemid="integrated_edit_field11"] {
	text-align-last: center !important;
}

/* El botón de plegar/expandir el menú lateral (arriba del todo, junto al
   logo) no tiene color propio en el CSS compilado del tema Harbor - hay un
   comentario en su origen (styles/bootstrap/harbor/small/style.css) que
   sugiere que debía tomar el color de marca de la barra, pero quedó
   desactivado - así que hereda un tono claro que se pierde sobre el fondo
   blanco de esa celda (confirmado en vivo con DevTools: el icono es
   invisible ahí, aunque el botón sigue funcionando al pulsarlo a ciegas).
   "fill" cubre el caso de que el icono sea un SVG en vez de un icon-font. */
[data-itemtype="expand_button"] a,
[data-itemtype="expand_button"] a *,
[data-itemtype="collapse_button"] a,
[data-itemtype="collapse_button"] a * {
	color: #434343 !important;
	fill: #434343 !important;
}

/* Menú del usuario (Perfil/Desconectarse/Cambiar contraseña) en móvil: el
   tema fija el texto a #203653 (azul marino oscuro) para este desplegable
   por debajo de 768px - casi el mismo tono que el fondo azul marino de
   marca de esta app, de ahí que fuera invisible. Selector real confirmado
   en vivo con DevTools (no es ".navbar-nav .open .dropdown-menu" como se
   había supuesto antes, sino este). */
@media screen and (max-width: 767px) {
	.navbar .navbar-form .dropdown-menu a {
		color: #ffffff !important;
	}
	.navbar .navbar-form .dropdown-menu a:hover,
	.navbar .navbar-form .dropdown-menu a:focus {
		color: #ffffff !important;
		background-color: rgba(255, 255, 255, 0.12) !important;
	}
}

/* Etiquetas de color (badges) para campos con formateador "view" personalizado,
   p.ej. facturado/tipo en partes_trabajo, estado en proyectos/tareas_proyectos.
   Cuando ese formateador devuelve HTML con "style" en línea, el desplegable de
   filtro de esa columna se corrompe -- reutiliza el mismo HTML formateado para
   la lista de valores distintos, y los dos puntos/punto y coma del style rompen
   el widget (checkbox en blanco en vez de la etiqueta). Confirmado en vivo sobre
   la columna "Facturado" de partes_trabajo. La solución es no usar "style" en
   línea nunca en estos formateadores: solo "class", con el color definido aquí. */
.rc-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 25px;
	color: #ffffff;
}
.rc-badge-rojo   { background-color: indianred; }
.rc-badge-verde  { background-color: mediumseagreen; }
.rc-badge-gris   { background-color: silver; }
.rc-badge-azul   { background-color: blue; }
.rc-badge-marron { background-color: peru; }