/* ============================================================
   RH Simple sobre Upzet.

   ESTA HOJA CAMBIA EL COLOR, NO EL DISEÑO.

   La versión anterior hacía las dos cosas: además de repintar la paleta
   le quitaba a las tarjetas su sombra para ponerles un borde, cambiaba
   su radio, y sustituía el fondo del tema por un papel cálido. El
   resultado es que la plataforma tenía el menú de Upzet pero el cuerpo
   seguía siendo el sistema viejo. Eso se revirtió: de Upzet se respeta
   la superficie, el espaciado, la tipografía y los componentes.

   Lo único que se cambia es la identidad —el verde de marca y el ámbar
   en lugar del azul del template— más un puñado de correcciones sobre
   cosas que Upzet da por hechas y aquí no aplican, cada una comentada.

   Se carga DESPUÉS de bootstrap, app y mdi.
   ============================================================ */

:root {
  /* --- La paleta de RH Simple --- */
  --rh-ink:    #0f2f37;   /* tinta: menú lateral, textos fuertes */
  --rh-ink-2:  #12424d;
  --rh-teal:   #0d7a6f;   /* marca */
  --rh-teal-d: #0a6459;
  --rh-amber:  #c8791f;   /* avisos y acento */
  --rh-red:    #b23a48;   /* peligro */
  --rh-slate:  #334155;

  /* --- Bootstrap, repintado ---
     Sólo el tono. El fondo del cuerpo, el de las tarjetas, los radios y
     las sombras se dejan como los trae el tema. */
  --bs-primary:      #0d7a6f;
  --bs-primary-rgb:  13, 122, 111;
  --bs-secondary:    #334155;
  --bs-secondary-rgb: 51, 65, 85;
  --bs-success:      #0d7a6f;
  --bs-success-rgb:  13, 122, 111;
  --bs-warning:      #c8791f;
  --bs-warning-rgb:  200, 121, 31;
  --bs-danger:       #b23a48;
  --bs-danger-rgb:   178, 58, 72;
  --bs-info:         #12424d;
  --bs-info-rgb:     18, 66, 77;

  --bs-link-color:       #0d7a6f;
  --bs-link-hover-color: #0a6459;

  /* Las variantes suaves. Bootstrap las deriva de su propia paleta, no
     de --bs-success y compañía, así que repintar sólo el color fuerte
     dejaba las etiquetas de estado en el verde y el ámbar de fábrica.
     De aquí salen .bg-*-subtle y .text-*-emphasis, que es con lo que
     está hecho badge(). */
  --bs-success-bg-subtle:       #0d7a6f1a;
  --bs-success-text-emphasis:   #0a6459;
  --bs-warning-bg-subtle:       #c8791f1a;
  --bs-warning-text-emphasis:   #9c5c14;
  --bs-danger-bg-subtle:        #b23a481a;
  --bs-danger-text-emphasis:    #8c2c37;
  --bs-secondary-bg-subtle:     #3341551a;
  --bs-secondary-text-emphasis: #334155;
  --bs-primary-bg-subtle:       #0d7a6f1a;
  --bs-primary-text-emphasis:   #0a6459;

  /* --- Upzet: menú lateral --- */
  --bs-sidebar-bg:                     #0f2f37;
  --bs-sidebar-menu-item-color:        #ffffffb0;
  --bs-sidebar-menu-item-icon-color:   #ffffff8c;
  --bs-sidebar-menu-item-hover-color:  #ffffff;
  --bs-sidebar-menu-item-active-color: #ffffff;
  --bs-sidebar-menu-sub-item-color:    #ffffff96;
}

/* Bootstrap arma cada botón con sus propias variables, así que el
   --bs-primary de arriba no basta para repintarlos. */
.btn-primary {
  --bs-btn-bg: var(--rh-teal);           --bs-btn-border-color: var(--rh-teal);
  --bs-btn-hover-bg: var(--rh-teal-d);   --bs-btn-hover-border-color: var(--rh-teal-d);
  --bs-btn-active-bg: var(--rh-teal-d);  --bs-btn-active-border-color: var(--rh-teal-d);
  --bs-btn-disabled-bg: var(--rh-teal);  --bs-btn-disabled-border-color: var(--rh-teal);
  --bs-btn-focus-shadow-rgb: 13, 122, 111;
}
.btn-warning {
  --bs-btn-bg: var(--rh-amber);          --bs-btn-border-color: var(--rh-amber);
  --bs-btn-color: #fff;                  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ad681a;            --bs-btn-hover-border-color: #ad681a;
  --bs-btn-active-color: #fff;           --bs-btn-active-bg: #ad681a;
  --bs-btn-focus-shadow-rgb: 200, 121, 31;
}
.btn-danger {
  --bs-btn-bg: var(--rh-red);            --bs-btn-border-color: var(--rh-red);
  --bs-btn-hover-bg: #9a323e;            --bs-btn-hover-border-color: #9a323e;
  --bs-btn-active-bg: #9a323e;
  --bs-btn-focus-shadow-rgb: 178, 58, 72;
}
.btn-dark {
  --bs-btn-bg: var(--rh-ink);            --bs-btn-border-color: var(--rh-ink);
  --bs-btn-hover-bg: var(--rh-ink-2);    --bs-btn-hover-border-color: var(--rh-ink-2);
  --bs-btn-active-bg: var(--rh-ink-2);
}
.btn-outline-primary {
  --bs-btn-color: var(--rh-teal);        --bs-btn-border-color: var(--rh-teal);
  --bs-btn-hover-bg: var(--rh-teal);     --bs-btn-hover-border-color: var(--rh-teal);
  --bs-btn-active-bg: var(--rh-teal);    --bs-btn-active-border-color: var(--rh-teal);
  --bs-btn-focus-shadow-rgb: 13, 122, 111;
}

.bg-primary { background-color: var(--rh-teal) !important; }
.bg-warning { background-color: var(--rh-amber) !important; }
.bg-danger  { background-color: var(--rh-red)  !important; }
.bg-success { background-color: var(--rh-teal) !important; }
.text-primary { color: var(--rh-teal) !important; }
.text-warning { color: var(--rh-amber) !important; }
.text-danger  { color: var(--rh-red)  !important; }
.text-success { color: var(--rh-teal) !important; }

/* El foco de los campos, en verde de marca en vez del azul del tema. */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--rh-teal);
  box-shadow: 0 0 0 .2rem rgba(13, 122, 111, .15);
}
.form-check-input:checked { background-color: var(--rh-teal); border-color: var(--rh-teal); }

/* Las etiquetas de estado dicen «vencido» o «sin firmar», así que se
   les sube el peso: las del tema son demasiado tenues para eso. */
.badge { font-weight: 600; letter-spacing: .01em; }

/* ---- Menú lateral --------------------------------------------------
   Upzet marca el renglón activo con su color primario. En RH Simple el
   que dice «dónde estoy» siempre ha sido el ámbar. */
#sidebar-menu ul li a.active {
  background: var(--rh-amber);
  border-radius: 8px;
  font-weight: 600;
}
/* La regla de Upzet es más específica que la nuestra: sin esto el texto
   se quedaba con su color apagado sobre el ámbar y no se leía. */
#sidebar-menu ul li a.active,
#sidebar-menu ul li a.active span,
#sidebar-menu ul li a.active i,
.vertical-menu #sidebar-menu ul li a.active { color: #fff !important; }
#sidebar-menu ul li a:hover { color: #fff; }
#sidebar-menu ul li.menu-title {
  color: #ffffff59; font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 700;
}

/* ---- Correcciones sobre lo que Upzet asume y aquí no aplica --------
   La caja de marca: el tema la dibuja con dos logos (claro y oscuro).
   Aquí hay uno solo, y si la empresa no ha subido el suyo va el nombre
   en texto, que tiene que caber sin desbordarse. */
.navbar-brand-box {
  width: var(--bs-sidebar-width); background: var(--rh-ink);
  display: flex; align-items: center; padding: 0 18px;
}
.navbar-brand-box .logo { display: flex; align-items: center; min-width: 0; }
.logo-txt {
  color: #fff; font-weight: 700; font-size: 17px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}

/* En móvil la cabecera necesita reservar espacio para buscar,
   notificaciones y la cuenta. Esta hoja se carga después de app.min.css,
   por lo que el ancho fijo de escritorio de arriba anulaba la regla móvil
   del tema y dejaba el menú de usuario fuera de la pantalla. */
@media (max-width: 991px) {
  .navbar-brand-box { width: auto; padding: 0 12px; }
}
@media (max-width: 380px) {
  .navbar-brand-box { display: none; }
}

/* Los botones de la barra superior: el tema los pinta para su cabecera,
   que aquí lleva los iconos del sistema y no su juego de widgets. */
#page-topbar .header-item {
  background: transparent; border: none; box-shadow: none;
  color: var(--rh-slate); display: inline-flex; align-items: center;
}
#page-topbar .header-item:hover { background: var(--bs-tertiary-bg); color: var(--rh-ink); }

/* La fotografía del personal, dentro de los avatares de Upzet. */
.avatar-foto { object-fit: cover; object-position: center top; background: var(--rh-ink); }

/* La fecha de la cabecera: sólo la inicial en mayúscula. En español el
   «de» y el mes van en minúscula, y capitalize los subía todos. */
.page-title-right .fecha { text-transform: none; }
.page-title-right .fecha::first-letter { text-transform: uppercase; }

/* ---- Pantalla de acceso -------------------------------------------
   Es la del tema: su fondo de patrón con el velo oscuro encima. El velo
   lleva el tinta de la marca en vez del negro puro, que es lo único que
   se cambia aquí. */
.bg-overlay { background-color: var(--rh-ink) !important; opacity: .85 !important; }
.account-pages { position: relative; z-index: 1; }

/* ============================================================
   MODO OSCURO

   Bootstrap 5.3 —el que trae el tema— cambia de piel con
   data-bs-theme="dark" en <html>: superficie #1d222e, texto #79859c y
   el resto de sus variables. Eso ya funciona solo; aquí va únicamente
   lo de la marca, que sobre oscuro no puede ser el mismo color que
   sobre claro.

   LOS COLORES ESTÁN VALIDADOS, NO ELEGIDOS A OJO. El validador de
   paletas los pasa contra la superficie oscura en las seis
   comprobaciones. El rojo de marca (#b23a48) NO pasa ahí —2.72:1
   contra el fondo, por debajo del mínimo de 3:1— así que en oscuro se
   usa #e05780, que sí lo hace sin acercarse demasiado al ámbar: el
   par más difícil queda en ΔE 15.4 a visión normal y 9.8 con deutan.
   El verde y el ámbar pasan tal cual y no se tocan.
   ============================================================ */
[data-bs-theme="dark"] {
  --rh-teal:   #12a892;   /* el verde de marca, un paso más claro */
  --rh-teal-d: #0d8d7a;
  --rh-red:    #e05780;   /* validado: el #b23a48 no llega a 3:1 aquí */
  --rh-slate:  #8a97ad;

  --bs-primary:      #12a892;
  --bs-primary-rgb:  18, 168, 146;
  --bs-success:      #12a892;
  --bs-success-rgb:  18, 168, 146;
  --bs-danger:       #e05780;
  --bs-danger-rgb:   224, 87, 128;

  --bs-link-color:       #12a892;
  --bs-link-hover-color: #3ec4b0;

  /* Las variantes suaves, sobre oscuro: el fondo sube de opacidad y el
     texto se aclara, porque un 10% de tinte sobre negro no se ve. */
  --bs-success-bg-subtle:       #12a89226;
  --bs-success-text-emphasis:   #3ec4b0;
  --bs-warning-bg-subtle:       #c8791f33;
  --bs-warning-text-emphasis:   #e0a15c;
  --bs-danger-bg-subtle:        #e0578026;
  --bs-danger-text-emphasis:    #f08aa6;
  --bs-secondary-bg-subtle:     #8a97ad26;
  --bs-secondary-text-emphasis: #aab5c7;
  --bs-primary-bg-subtle:       #12a89226;
  --bs-primary-text-emphasis:   #3ec4b0;
}

/* El menú lateral ya era tinta oscura; en modo oscuro se iguala con la
   superficie del tema para que no quede un bloque más negro al lado. */
[data-bs-theme="dark"] {
  --bs-sidebar-bg: #171b26;
}
[data-bs-theme="dark"] .navbar-brand-box { background: #171b26; }
[data-bs-theme="dark"] #page-topbar { background: var(--bs-secondary-bg); }

/* El mapa de checadas: su fondo claro deslumbra sobre la página oscura
   mientras cargan las teselas. */
[data-bs-theme="dark"] .mapa { background: #2a3040; }
[data-bs-theme="dark"] .mapa-credito { background: #1d222ed9; color: #aab5c7; }
[data-bs-theme="dark"] .mapa-credito a { color: #aab5c7; }

/* ============================================================
   Calendario de vacaciones: mini-calendario del empleado.
   ============================================================ */
.vac-dia {
  width: 32px; height: 32px;
  vertical-align: middle;
  border-radius: 6px;
  font-size: 13px;
  transition: all .15s ease;
}
.vac-disponible { background: transparent; color: var(--bs-body-color); }
.vac-seleccionado {
  background: var(--rh-teal) !important;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid #0d7a6f66;
}
.vac-feriado {
  background: #7c3aed33 !important;
  color: #5b21b6 !important;
  font-weight: 700;
  border: 1px solid #7c3aed55;
}
.vac-descanso {
  background: #2563eb22 !important;
  color: #1d4ed8 !important;
  border: 1px solid #2563eb44;
}
[data-bs-theme="dark"] .vac-seleccionado { background: #12a892 !important; color: #fff !important; }
[data-bs-theme="dark"] .vac-feriado { background: #7c3aed44 !important; color: #c4b5fd !important; border-color: #7c3aed66; }
[data-bs-theme="dark"] .vac-descanso { background: #2563eb33 !important; color: #93c5fd !important; border-color: #2563eb55; }