:root {
  --color-primary: #015984; /* azul sepcon engranaje */
  --color-secondary: white; /* blanco central */
  --color-accent: #015984; /* dorado tipografía */
  --color-text: #e0e0e0;
  --color-text-whitemode: black;
  --color-bg-dark: #1c1c1c;
  --degrade-color: rgba(1, 88, 132, 0.19);
  --icono-login: white;
  --login-whitemode: #01598475;
}
 
/* Botón principal */
input.button.mainaction {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
input.button.mainaction:hover {
  background: var(--color-primary) !important;
}

/* Links y hover de menú */
a,
.mailboxlist li a {
  color: var(--color-text) !important;
}
/* Override solo en modo claro */
html:not(.dark-mode) a,
html:not(.dark-mode) .mailboxlist li a { color: #111827 !important; }

a:hover,
.mailboxlist li.selected > a,
.mailboxlist li a:hover {
  color: var(--color-primary) !important;
}

/* Sidebar */
#taskbar a {
  color: #fff !important; /* iconos/sidebar blancos */
}
#taskbar a:hover,
#taskbar a:focus {
  color: var(--color-primary) !important; /* solo al pasar */
}

/* Header */
#header {
  background-color: #2a2a2a !important; /* gris oscuro sobrio */
  border-bottom: 3px solid var(--color-primary) !important; /* detalle naranja */
}
#header #taskbar a {
  color: #fff !important;
}
#header #taskbar a:hover {
  color: var(--color-primary) !important;
}
.task-login #logo {
 max-height:160px;
}
html.dark-mode #logo {
 opacity: inherit !important;
}
#login-form #logo {
  max-width: 220px !important;
  height: auto !important;
  margin: 0 auto 25px auto !important;
  display: block !important;
}
/* Botón principal del login - estilo Grupo T&C */
body.task-login .btn-primary {
  background-color: var(--color-primary) !important;
  border-color: #C0181D !important;
  color: #fff !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.task-login .btn-primary:hover,
body.task-login .btn-primary:focus {
  background-color: var(--color-primary) !important; /* tono más claro al hover */
  border-color: var(--color-primary) !important;
}

/* ===== Light mode: texto negro + hover naranja ===== */
html:not(.dark-mode) .mailboxlist li a,
html:not(.dark-mode) .menu a,
html:not(.dark-mode) .listing a,
html:not(.dark-mode) .header a,
html:not(.dark-mode) body {
  color: #111 !important;        /* negro legible */
}

/* Hover/activo en naranja T&C */
html:not(.dark-mode) .mailboxlist li a:hover,
html:not(.dark-mode) .menu a:hover,
html:not(.dark-mode) .listing a:hover,
html:not(.dark-mode) .header a:hover,
html:not(.dark-mode) .mailboxlist li.selected > a {
  color: #C0181D !important;      /* acento rojo */
  text-decoration: none !important;
}

/* Iconos de la izquierda: negros por defecto, naranja al pasar */
html:not(.dark-mode) .sebicon,
html:not(.dark-mode) .mailboxlist li a:before {
  color: #111 !important;
}
html:not(.dark-mode) .sebicon:hover,
html:not(.dark-mode) .mailboxlist li a:hover:before,
html:not(.dark-mode) .mailboxlist li.selected > a:before {
  color: #C0181D !important;
}





/* enviar correo */



/***** === COMPOSE (task-mail action-compose) === *****/
body.task-mail.action-compose { /* ancla de ámbito */ }

/* 1) Botón ENVIAR (izquierda) */
body.task-mail.action-compose .btn.btn-primary.sendmain{
  background:#474b4f !important;      /* plomo estándar */
  border-color:#474b4f !important;
  color:#fff !important;
  transition:background-color .15s ease,border-color .15s ease;
}
body.task-mail.action-compose .btn.btn-primary.sendmain:hover,
body.task-mail.action-compose .btn.btn-primary.sendmain:focus{
  background:#C0181D !important;      /* rojo */
  border-color:#C0181D !important;
  color:#fff !important;
}

/* 2) Botón “Adjuntar un archivo” (sidebar derecho) y secundarios del header */
body.task-mail.action-compose .btn.btn-secondary{
  background:#3c4044 !important;       /* plomo oscuro */
  border-color:#3c4044 !important;
  color:#fff !important;
}
body.task-mail.action-compose .btn.btn-secondary:hover,
body.task-mail.action-compose .btn.btn-secondary:focus{
  background:#C0181D !important;
  border-color:#C0181D !important;
  color:#fff !important;
}

/* 3) Toolbar (Guardar, Adjuntar, Firma, Respuestas…) */
body.task-mail.action-compose #toolbar-menu a{
  color:#a8b0b7 !important;            /* gris calmado */
  text-decoration:none !important;
}
body.task-mail.action-compose #toolbar-menu a:hover,
body.task-mail.action-compose #toolbar-menu a:focus{
  color:#C0181D !important;            /* hover rojo */
}

/* 4) Chips “Cc / Cco” compactos a la derecha del campo Para */
body.task-mail.action-compose #compose-headers .input-group-append a.form-control{
  background:#3c4044 !important;
  border-color:#3c4044 !important;
  color:#fff !important;
}
body.task-mail.action-compose #compose-headers .input-group-append a.form-control:hover{
  background:#C0181D !important;
  border-color:#C0181D !important;
}

/* 5) Interruptores (Alta importancia, Confirmación, DSN) - Bootstrap custom switch */
body.task-mail.action-compose .custom-control-label::before{
  background-color:#666 !important;    /* inactivo gris */
  border-color:#666 !important;
}
body.task-mail.action-compose .custom-control-input:checked ~ .custom-control-label::before{
  background-color:#C0181D !important; /* activo rojo */
  border-color:#C0181D !important;
}
/* foco accesible en el switch */
body.task-mail.action-compose .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow:0 0 0 .2rem rgba(192,24,29,.25) !important;
}

/* 6) Icono de enviar en móviles (arriba, a la derecha) */
body.task-mail.action-compose .only_small_screen .sebicon.sendicon{
  color:#a8b0b7 !important;
}
body.task-mail.action-compose .only_small_screen:hover .sebicon.sendicon{
  color:#C0181D !important;
}

/* 7) Campos de entrada: bordes sutiles que no compiten con el acento */
/* SOLO MODO OSCURO — inputs del composer */
html.dark-mode body.task-mail.action-compose .form-control,
html.dark-mode body.task-mail.action-compose .custom-select,
html.dark-mode body.task-mail.action-compose .recipient-input,
html.dark-mode body.task-mail.action-compose .input-group-text,
html.dark-mode body.task-mail.action-compose textarea {
  border-color: #2f363a !important;
  background: #1f262a !important;
  color: #e8edef !important;
}


body.task-mail.action-compose .form-control:focus{
  border-color:#C0181D !important;
  box-shadow:0 0 0 .2rem rgba(192,24,29,.15) !important;
}


/* FIN enviar correo */


/* Menu derecha */



/* FIN menu derecha*/


/* ALERTAS */

/* ===== Alerts - Dark mode (rojo) ===== */
html.dark-mode #messagestack .alert-info{
  background: rgba(192,24,29,.12) !important;
  border: 1px solid #C0181D !important;
  box-shadow: inset 4px 0 0 #C0181D !important;
  color: #ffe6d6 !important;
}

html.dark-mode #messagestack .alert-info a{
  color: #ffd0b8 !important;
  text-decoration: underline;
}
html.dark-mode #messagestack .alert-info a:hover{
  color: #ffffff !important;
}

html.dark-mode #messagestack .alert-info .close{
  color: #ffb387 !important;
  opacity: 1 !important;
}
html.dark-mode #messagestack .alert-info .close:hover{
  color: #ffffff !important;
}

/* (Opcional) si quieres que “warning” también sea rojo: */
/*
html.dark-mode #messagestack .alert-warning{
  background: rgba(192,24,29,.12) !important;
  border-color: #C0181D !important;
  box-shadow: inset 4px 0 0 #C0181D !important;
  color: #ffe6d6 !important;
}
*/


/* ===== Alerts - Light mode (rojo) ===== */
html:not(.dark-mode) #messagestack .alert-info{
  background: #fff3ea !important;
  border: 1px solid #C0181D !important;
  box-shadow: inset 4px 0 0 #C0181D !important;
  color: #6b2b00 !important;
}

html:not(.dark-mode) #messagestack .alert-info a{
  color: #9F1317 !important;
  text-decoration: underline;
}
html:not(.dark-mode) #messagestack .alert-info a:hover{
  color: #C0181D !important;
}

html:not(.dark-mode) #messagestack .alert-info .close{
  color: #A33E00 !important;
  opacity: 1 !important;
}
html:not(.dark-mode) #messagestack .alert-info .close:hover{
  color: #000 !important;
}

/* Icono de las alertas (modo claro): más oscuro */
html:not(.dark-mode) #messagestack .alert-info > i.icon:before{
  color: #6b2b00 !important;
  text-shadow: none !important;
}

/* (opcional) si un selector más específico pisa el anterior */
html:not(.dark-mode) #messagestack .alert-info i.icon.info:before{
  color: #6b2b00 !important;
}


/* FIN ALERTAS*/




/* Avatar del menú superior derecho con el logo de T&C */
.sebmenu .sebicon.usermenu{
  display:inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: url('logo-header.webp') center/110% no-repeat;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* Anula el glifo del icon-font */
.sebmenu .sebicon.usermenu:before{
  content: none !important;
}

/* Efecto hover con aro rojo */
.sebmenu .sebicon.usermenu:hover{
  box-shadow: 0 0 0 2px #C0181D;
  cursor: pointer;
}




/* ============================
   Switches / Toggles (global)
   ============================ */

/* Transiciones suaves */
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after{
  transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

/* --- Estado OFF (pista/track) --- */
html.dark-mode .custom-switch .custom-control-label::before{
  background-color: #2f363a !important;
  border-color: #3b4247 !important;
}
html:not(.dark-mode) .custom-switch .custom-control-label::before{
  background-color: #e5e7eb !important;
  border-color: #d1d5db !important;
}

/* --- Estado ON (pista/track) --- */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before{
  background-color: #C0181D !important;
  border-color: #C0181D !important;
}

/* Botón/knob del switch */
.custom-switch .custom-control-input:checked ~ .custom-control-label::after{
  background-color: #ffffff !important;
}

/* Hover/Focus halo en cualquier modo */
.custom-switch .custom-control-input:not(:disabled) ~ .custom-control-label:hover::before,
.custom-switch .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow: 0 0 0 .18rem rgba(192,24,29,.35) !important;
  border-color: #C0181D !important;
}

/* Deshabilitados */
.custom-switch .custom-control-input:disabled ~ .custom-control-label{
  opacity: .45 !important;
  cursor: not-allowed;
}



/* Botones primarios T&C — base */
.btn-primary{
  background-color: #C0181D !important;
  border-color:     #C0181D !important;
}

/* Texto según modo */
html:not(.dark-mode) .btn-primary{ color:#111 !important; }
html.dark-mode       .btn-primary{ color:#fff !important; }

/* Hover/Focus */
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .btn-primary:focus{
  background-color:var(--color-primary) !important;
  border-color:var(--color-primary) !important;
  color:#111 !important;
  box-shadow:0 0 0 .2rem rgba(192,24,29,.28) !important;
}
html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus{
  background-color:var(--color-primary) !important;
  border-color:var(--color-primary) !important;
  color:#fff !important;
  box-shadow:0 0 0 .2rem rgba(192,24,29,.35) !important;
}

/* Active/pressed */
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  background-color:#9F1317 !important;
  border-color:#9F1317 !important;
}

/* Disabled */
html:not(.dark-mode) .btn-primary:disabled,
html:not(.dark-mode) .btn-primary.disabled{
  color:#111 !important;
  opacity:.55 !important;
}
html.dark-mode .btn-primary:disabled,
html.dark-mode .btn-primary.disabled{
  color:#fff !important;
  opacity:.55 !important;
}



/* CALENDARIO */

/* ===============================
   Mini-calendario (jQuery UI Datepicker)
   =============================== */

/* Variables de color por defecto (modo claro) */
#datepicker,
.calendar-datepicker {
  --brand: #015984;
  --dp-bg: #ffffff;
  --dp-fg: #222c32;
  --dp-subtle: #6b7680;
  --dp-border: #d6dde4;
  --dp-cell-bg: #f4f6f8;
  --dp-hover-bg: rgba(1, 89, 132,.12);
  --dp-selected-bg: var(--brand);
  --dp-selected-fg: #ffffff;
}

/* Modo oscuro */
html.dark-mode #datepicker,
html.dark-mode .calendar-datepicker {
  --dp-bg: #1f272a;
  --dp-fg: #e8edef;
  --dp-subtle: #9aa3ab;
  --dp-border: #2e373c;
  --dp-cell-bg: #263239;
  --dp-hover-bg: #2b3940;
  --dp-selected-bg: var(--brand);
  --dp-selected-fg: #ffffff;
}

/* Contenedor principal */
#datepicker .ui-datepicker,
.calendar-datepicker .ui-datepicker {
  background: var(--dp-bg) !important;
  color: var(--dp-fg) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
  padding: 0 0 8px 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Header */
#datepicker .ui-datepicker-header,
.calendar-datepicker .ui-datepicker-header {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 44px !important;
  padding: 8px 44px !important;
  box-sizing: border-box !important;
}

/* Título */
#datepicker .ui-datepicker-title,
.calendar-datepicker .ui-datepicker-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

#datepicker .ui-datepicker-title select,
.calendar-datepicker .ui-datepicker-title select {
  height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--dp-fg) !important;
  outline:none!important;
  box-shadow:none!important;
}

/* Flechas */
#datepicker .ui-datepicker-prev,
#datepicker .ui-datepicker-next,
.calendar-datepicker .ui-datepicker-prev,
.calendar-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 20px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: 8px !important;
  background: var(--dp-cell-bg) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#datepicker .ui-datepicker-prev,
.calendar-datepicker .ui-datepicker-prev { left: 6px !important; }
#datepicker .ui-datepicker-next,
.calendar-datepicker .ui-datepicker-next { right: 6px !important; }

#datepicker .ui-datepicker-prev:hover,
#datepicker .ui-datepicker-next:hover,
.calendar-datepicker .ui-datepicker-prev:hover,
.calendar-datepicker .ui-datepicker-next:hover {
  background: var(--dp-hover-bg) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* Iconos internos */
#datepicker .ui-datepicker .ui-icon,
.calendar-datepicker .ui-datepicker .ui-icon {
  margin: 0 !important;
  transform: none !important;
}

/* Tabla */
#datepicker .ui-datepicker-calendar,
.calendar-datepicker .ui-datepicker-calendar {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 6px !important;
  padding: 0 8px 8px !important;
}

/* Cabeceras */
#datepicker .ui-datepicker th,
.calendar-datepicker .ui-datepicker th {
  color: var(--dp-subtle) !important;
  font

font-weight:600!important;border:0!important;padding:4px 0!important;text-transform:none!important}
#datepicker .ui-datepicker-week-col,.calendar-datepicker .ui-datepicker-week-col{color:var(--dp-subtle)!important}

/* Celdas */
#datepicker .ui-datepicker td,.calendar-datepicker .ui-datepicker td{border:0!important;padding:0!important}

#datepicker .ui-datepicker td a,.calendar-datepicker .ui-datepicker td a{
display:inline-flex!important;width:2.2rem!important;height:2.2rem!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;border:1px solid transparent!important;color:var(--dp-fg)!important;background:transparent!important;text-decoration:none!important;box-sizing:border-box!important;transition:background .15s,border-color .15s,color .15s!important}

/* Hover */
#datepicker .ui-datepicker td a:hover,.calendar-datepicker .ui-datepicker td a:hover{
background:var(--dp-hover-bg)!important;border-color:var(--dp-border)!important}

/* Otro mes */
#datepicker .ui-datepicker td a.ui-priority-secondary,.calendar-datepicker .ui-datepicker td a.ui-priority-secondary{
color:var(--dp-subtle)!important}

/* Hoy */
#datepicker .ui-state-highlight,
.calendar-datepicker .ui-state-highlight{
border-color:var(--brand)!important;color:var(--brand)!important;background:transparent!important}

/* Activo */
#datepicker .ui-state-active,.calendar-datepicker .ui-state-active{
background:var(--dp-selected-bg)!important;color:var(--dp-selected-fg)!important;border-color:var(--dp-selected-bg)!important;text-shadow:none!important}

/* Foco */
#datepicker .ui-datepicker td a:focus,.calendar-datepicker .ui-datepicker td a:focus{
outline:2px solid var(--brand)!important;outline-offset:2px!important}

/* Línea inferior */
#datepicker + .calendarprop,.calendar-datepicker + .calendarprop{
border-top:1px solid var(--dp-border)!important;background:var(--dp-cell-bg)!important}

.ui-datepicker .ui-datepicker-next:before,.ui-datepicker .ui-datepicker-prev:before{margin:1em}

html.dark-mode .fc-time-grid-event.fc-v-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable:hover{color:inherit!important;border-color:inherit!important}


/* FIN CALENDARIO */


/* === LOGIN ULTRA MODERNO === */

p { margin-bottom:0 !important ;}

body.task-login {
  background: radial-gradient(ellipse at top left, #121317 0%, #0c0e12 100%) !important;
  font-family: "Inter", "Barlow", "Segoe UI", sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  color: #e4e6eb !important;
}

/* Fondo animado */
body.task-login::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at 30% 30%, rgb(0 115 183 / 12%) 0%, transparent 70%) no-repeat;
  animation: moveGlow 20s linear infinite;
  z-index: 0;
}
@keyframes moveGlow {
  0% { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(-20%, -20%) rotate(360deg); }
}

/* Caja */
#login-form {
  position: relative !important;
  z-index: 2 !important;
  background: var(--degrade-color) !important;
  backdrop-filter: blur(22px) saturate(200%) !important;
  border: 1px solid var(--degrade-color) !important;
  border-radius: 20px !important;

  /* sombra corregida – SIN naranja ni degradado cálido */
  box-shadow: 0 0 30px var(--degrade-color) !important;

  padding: 55px 60px 60px 60px !important;
  max-width: 420px !important;
  width: 90% !important;
  transition: all .5s ease !important;
  animation: fadeInScale .9s cubic-bezier(0.16,1,0.3,1);
}




/* Fade-in */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.94) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Logo */
#login-form #logo {
  max-width: 130px !important;
  display: block !important;
  margin: 0 auto 35px auto !important;
  animation: floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Inputs */
#login-form input[type="text"],
#login-form input[type="password"] {
  background: var(--degrade-color) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 15px !important;
  height: 46px !important;
  padding: 0 15px !important;
  transition: all 0.25s ease !important;
}
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  border-color: #0073b7 !important;
  box-shadow: 0 0 12px rgba(0,115,183,1) !important;
}

/* Iconos */
#login-form .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--icono-login) !important;
  font-size: 1.2rem !important;
  padding-right: 6px !important;
  padding: 0 !important;
}

/* Botón login */
body.task-login .btn-primary {
  border: none !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  height: 46px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 18px var(--color-primary) !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
}
body.task-login .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px var(--color-primary) !important; /* rojo real */
}


/* Texto */
#login-form label,
#login-form a {
  color: #bbb !important;
  font-size: 0.9rem !important;
}
#login-form a:hover {
  color: #E2B400 !important;
  text-decoration: underline;
}

/* Margen */
body.task-login #login-form .form-group {
  margin-bottom: 15px !important;
}
#login-form input::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

/* Sombra interna */
#login-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
      145deg,
      rgba(192,24,29,0.08),
      rgba(192,24,29,0.12)
  );
  pointer-events: none;
}




/* ===== SEPCon: MODO CLARO SIN ROJOS (FORZAR AZUL) ===== */
html:not(.dark-mode){
  --brand:var(--color-primary)!important;
  --brand-hover:var(--color-primary)!important;
  --brand-pressed:var(--color-primary)!important;
  --brand-rgb:var(--color-primary-rgb)!important;
  }
  
  /* Links/hover en claro: azul */
  html:not(.dark-mode) a:hover,
  html:not(.dark-mode) .mailboxlist li.selected > a,
  html:not(.dark-mode) .mailboxlist li a:hover{color:var(--color-primary)!important;}
  html:not(.dark-mode) .sebicon:hover,
  html:not(.dark-mode) .mailboxlist li a:hover:before,
  html:not(.dark-mode) .mailboxlist li.selected > a:before{color:var(--color-primary)!important;}
  
  /* Botones primarios en claro: azul */
  html:not(.dark-mode) .btn-primary,
  html:not(.dark-mode) body.task-login .btn-primary{
  background:var(--color-primary)!important;
  border-color:var(--color-primary)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(var(--color-primary-rgb),.25)!important;
  }
  html:not(.dark-mode) .btn-primary:hover,
  html:not(.dark-mode) body.task-login .btn-primary:hover{
  background:var(--color-primary)!important;
  border-color:var(--color-primary)!important;
  box-shadow:0 8px 20px rgba(var(--color-primary-rgb),.35)!important;
  transform:translateY(-2px);
  }
  
  /* ALERTAS en claro: azul */
  html:not(.dark-mode) #messagestack .alert-info{
  background:rgba(var(--color-primary-rgb),.08)!important;
  border:1px solid var(--color-primary)!important;
  box-shadow:inset 4px 0 0 var(--color-primary)!important;
  color:#0b2230!important;
  }
  html:not(.dark-mode) #messagestack .alert-info a{
  color:var(--color-primary)!important;
  text-decoration:underline!important;
  }
  html:not(.dark-mode) #messagestack .alert-info a:hover{color:var(--color-primary)!important;}
  html:not(.dark-mode) #messagestack .alert-info .close{color:var(--color-primary)!important;opacity:1!important;}
  html:not(.dark-mode) #messagestack .alert-info > i.icon:before,
  html:not(.dark-mode) #messagestack .alert-info i.icon.info:before{color:#0b2230!important;}
  
  /* SWITCH halo en claro: azul */
  html:not(.dark-mode) .custom-switch .custom-control-input:not(:disabled) ~ .custom-control-label:hover::before,
  html:not(.dark-mode) .custom-switch .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow:0 0 0 .18rem rgba(var(--color-primary-rgb),.30)!important;
  border-color:var(--color-primary)!important;
  }
  html:not(.dark-mode) .custom-switch .custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--color-primary)!important;
  border-color:var(--color-primary)!important;
  }
  
  /* DATEPICKER: marca/hover/activo en azul */
  html:not(.dark-mode) #datepicker,
  html:not(.dark-mode) .calendar-datepicker{
  --brand:var(--color-primary)!important;
  --dp-hover-bg:rgba(var(--color-primary-rgb),.12)!important;
  --dp-selected-bg:var(--color-primary)!important;
  }
  html:not(.dark-mode) #datepicker .ui-state-highlight,
  html:not(.dark-mode) .calendar-datepicker .ui-state-highlight{
  border-color:var(--color-primary)!important;
  color:var(--color-primary)!important;
  }
  html:not(.dark-mode) #datepicker .ui-state-active,
  html:not(.dark-mode) .calendar-datepicker .ui-state-active{
  background:var(--color-primary)!important;
  border-color:var(--color-primary)!important;
  color:#fff!important;
  }
  
  /* LOGIN CLARO: mismo estilo que oscuro pero claro, sin rojos */
  html:not(.dark-mode) body.task-login{
  background:radial-gradient(circle at 30% 30%,#fffef7 0%,#faf7ee 60%,#f8f4e8 100%)!important;
  color:#111!important;
  }
  
  html:not(.dark-mode) #login-form{
  background-color: var(--login-whitemode) !important;
  border:1px solid rgba(var(--color-primary-rgb),.20)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.6) inset!important;
  }
  html:not(.dark-mode) #login-form::before{
  background:linear-gradient(145deg,rgba(var(--color-primary-rgb),.08),rgba(var(--color-primary-rgb),.12))!important;
  }
  html:not(.dark-mode) #login-form .input-group-text{color:var(--color-primary)!important;}
  html:not(.dark-mode) #login-form input[type="text"],
  html:not(.dark-mode) #login-form input[type="password"]{
  background:#f9f9f9!important;
  border:1px solid #d9d9d9!important;
  color:#111!important;
  }
  html:not(.dark-mode) #login-form input[type="text"]:focus,
  html:not(.dark-mode) #login-form input[type="password"]:focus{
  border-color:var(--color-primary)!important;
  box-shadow:0 0 0 .22rem rgba(var(--color-primary-rgb),.22)!important;
  }
  html:not(.dark-mode) #login-form a:hover{color:var(--color-primary)!important;text-decoration:underline!important;}
  
/* Placeholder negro SOLO en modo claro – fuerza total */
html:not(.dark-mode) #rcmloginuser::placeholder { color:#0000004b!important; opacity:1!important; }
html:not(.dark-mode) #rcmloginuser::-webkit-input-placeholder { color:#0000004b!important; opacity:1!important; }
html:not(.dark-mode) #rcmloginuser::-moz-placeholder { color:#0000004b!important; opacity:1!important; }
html:not(.dark-mode) #rcmloginuser:-ms-input-placeholder { color:#0000004b!important; }

/* Placeholder negro SOLO en modo claro – fuerza total */
html:not(.dark-mode) #rcmloginpwd::placeholder { color:#0000004b!important; opacity:1!important; }
html:not(.dark-mode) #rcmloginpwd::-webkit-input-placeholder { color:#0000004b!important; opacity:1!important; }
html:not(.dark-mode) #rcmloginpwd::-moz-placeholder { color:#0000004b!important; opacity:1!important; }
html:not(.dark-mode) #rcmloginpwd:-ms-input-placeholder { color:#0000004b!important; }

/* ===== LOGIN: Glow animado también en modo claro ===== */
html:not(.dark-mode) body.task-login::before{
  content:""!important;
  position:absolute!important;
  width:300%!important;
  height:300%!important;
  inset:auto!important;
  background: radial-gradient(circle at 30% 30%, rgba(1, 88, 132, 0.603), transparent 90%) no-repeat;
  animation:moveGlow 20s linear infinite!important;
  z-index:0!important;
  }