:root {
  --color-primary: #C0181D; /* rojo engranaje */
  --color-secondary: #004D9E; /* azul central */
  --color-accent: #E2B400; /* dorado tipografía */
  --color-text: #e0e0e0;
  --color-bg-dark: #1c1c1c;
}
 
/* 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: #D61D22 !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: #C0181D !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: #D61D22 !important; /* tono más claro al hover */
  border-color: #D61D22 !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:#D61D22 !important;
  border-color:#D61D22 !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:#D61D22 !important;
  border-color:#D61D22 !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: #C0181D;
  --dp-bg: #ffffff;
  --dp-fg: #222c32;
  --dp-subtle: #6b7680;
  --dp-border: #d6dde4;
  --dp-cell-bg: #f4f6f8;
  --dp-hover-bg: rgba(192,24,29,.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: rgba(192 24 29 / 7%) !important;
  backdrop-filter: blur(22px) saturate(200%) !important;
  border: 1px solid rgba(192, 24, 29, 0.35) !important;
  border-radius: 20px !important;

  /* sombra corregida – SIN naranja ni degradado cálido */
  box-shadow: 0 0 30px rgba(192,24,29,0.20) !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: rgba(255,255,255,0.06) !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: #C0181D !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: #fff !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 rgba(192,24,29,0.4) !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 rgba(192,24,29,0.45) !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;
}




/* === LOGIN MODO CLARO === */
html:not(.dark-mode) body.task-login {
  background: radial-gradient(circle at 30% 30%, #fffef7 0%, #faf7ee 60%, #f8f4e8 100%) !important;
  color: #1a1a1a !important;
}

html:not(.dark-mode) body.task-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 65% 50%,
        rgba(192, 24, 29, 0.20) 0%,
        rgba(192, 24, 29, 0.10) 30%,
        rgba(192, 24, 29, 0.04) 55%,
        rgba(255, 255, 255, 0.9) 100%
    );
    animation: moveGlowLight 25s linear infinite;
    z-index: 0;
}

@keyframes moveGlowLight {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(30%, -20%) rotate(120deg); }
  66%  { transform: translate(-20%, 20%) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}


/* Caja */
html:not(.dark-mode) #login-form {
  box-shadow: 0 10px 40px rgba(0,0,0,0.08), 
              0 0 0 1px rgba(255,255,255,0.6) inset !important;
  color: #222 !important;
}


/* Logo */
html:not(.dark-mode) #login-form #logo {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08)) !important;
  max-width: 120px !important;
  margin-bottom: 35px !important;
}

/* Inputs */
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;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
}
html:not(.dark-mode) #login-form input[type="text"]:focus,
html:not(.dark-mode) #login-form input[type="password"]:focus {
  border-color: #D61D22 !important;
  box-shadow: 0 0 8px rgba(192,24,29,0.3) !important;
}

/* Iconos */
html:not(.dark-mode) #login-form .input-group-text {
  color: #C0181D !important;
  background: transparent !important;
}

/* Botón */
html:not(.dark-mode) .btn-primary {
  background: linear-gradient(90deg, #C0181D, #C0181D) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(192,24,29,0.25) !important;
  transition: all 0.3s ease !important;
}
html:not(.dark-mode) .btn-primary:hover {
  background: linear-gradient(90deg, #D61D22, #C0181D) !important;
  box-shadow: 0 8px 20px rgba(192,24,29,0.35) !important;
  transform: translateY(-2px);
}

/* Texto complementario */
html:not(.dark-mode) #login-form label,
html:not(.dark-mode) #login-form a {
  color: #555 !important;
}
html:not(.dark-mode) #login-form a:hover {
  color: #C0181D !important;
  text-decoration: underline !important;
}

/* Fade-in claro */
html:not(.dark-mode) #login-form {
  animation: fadeInLight 0.9s ease-out;
}
@keyframes fadeInLight {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quota-display {
  text-align:center;
  padding:10px 0;
  font-size:0.9em;
  color:var(--color-text);
  opacity:0.7;
}

/* ===== PLACEHOLDER MODO CLARO (FORZADO) ===== */
html:not(.dark-mode) body.task-login #login-form input.form-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}