/* === Acentos Grupo T&C === */
:root {
  --color-primary: #FF6B00; /* acento principal */
  --color-secondary: #1A2433;
  --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: #e55f00 !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: #ff6b00 !important;
  border-color: #ff6b00 !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: #e65f00 !important; /* tono más oscuro al hover */
  border-color: #e65f00 !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: #ff6b00 !important;      /* acento T&C */
  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: #ff6b00 !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:#ff6b00 !important;      /* naranja T&C */
  border-color:#ff6b00 !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:#ff6b00 !important;
  border-color:#ff6b00 !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:#ff6b00 !important;            /* hover naranja */
}

/* 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:#ff6b00 !important;
  border-color:#ff6b00 !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:#ff6b00 !important; /* activo naranja */
  border-color:#ff6b00 !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(255,107,0,.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:#ff6b00 !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:#ff6b00 !important;
  box-shadow:0 0 0 .2rem rgba(255,107,0,.15) !important;
}


/* FIN enviar correo */


/* Menu derecha */



/* FIN menu derecha*/


/* ALERTAS */

/* ===== Alerts - Dark mode (T&C naranja) ===== */
html.dark-mode #messagestack .alert-info{
  /* relleno sutil para que no “queme” */
  background: rgba(255, 107, 0, .12) !important; /* #ff6b00 */
  border: 1px solid #ff6b00 !important;
  box-shadow: inset 4px 0 0 #ff6b00 !important; /* barra lateral tipo Elastic */
  color: #ffe6d6 !important; /* texto legible sobre fondo oscuro */
}

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 naranja: */
/*
html.dark-mode #messagestack .alert-warning{
  background: rgba(255, 107, 0, .12) !important;
  border-color: #ff6b00 !important;
  box-shadow: inset 4px 0 0 #ff6b00 !important;
  color: #ffe6d6 !important;
}
*/


/* ===== Alerts - Light mode (T&C naranja) ===== */
html:not(.dark-mode) #messagestack .alert-info{
  background: #fff3ea !important;        /* suave sobre blanco */
  border: 1px solid #ff6b00 !important;   /* naranja T&C */
  box-shadow: inset 4px 0 0 #ff6b00 !important; /* barrita lateral */
  color: #6b2b00 !important;              /* texto accesible */
}

html:not(.dark-mode) #messagestack .alert-info a{
  color: #c04a00 !important;
  text-decoration: underline;
}
html:not(.dark-mode) #messagestack .alert-info a:hover{
  color: #ff6b00 !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 para mejor contraste */
html:not(.dark-mode) #messagestack .alert-info > i.icon:before{
  color: #6b2b00 !important;   /* marrón oscuro derivado del naranja */
  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;
}


/* (Opcional) unifica “warning” al naranja también en claro: */
/*
html:not(.dark-mode) #messagestack .alert-warning{
  background: #fff3ea !important;
  border-color: #ff6b00 !important;
  box-shadow: inset 4px 0 0 #ff6b00 !important;
  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; /* el SVG está en el mismo folder que custom.css */
  color: transparent;              /* oculta el glifo del icon-font */
  text-indent: -9999px;            /* por si acaso */
  overflow: hidden;                /* por si el SVG se sale */
}

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

/* Efecto hover con aro naranja */
.sebmenu .sebicon.usermenu:hover{
  box-shadow: 0 0 0 2px #ff6b00;
  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;  /* gris oscuro */
  border-color: #3b4247 !important;
}
html:not(.dark-mode) .custom-switch .custom-control-label::before{
  background-color: #e5e7eb !important;  /* gris claro */
  border-color: #d1d5db !important;
}

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

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

/* 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(255,107,0,.35) !important;
  border-color: #ff6b00 !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: #ff6b00 !important;
  border-color:     #ff6b00 !important;
}

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

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

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

/* Disabled (mantiene el color de texto por modo) */
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)
   Paleta T&C + fixes de layout
   =============================== */

/* Variables de color por defecto (modo claro) */
#datepicker,
.calendar-datepicker {
  --brand: #ff6d00;
  --dp-bg: #ffffff;
  --dp-fg: #222c32;
  --dp-subtle: #6b7680;
  --dp-border: #d6dde4;
  --dp-cell-bg: #f4f6f8;
  --dp-hover-bg: #fff4eb;
  --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: #0b0f12; /* el naranja sobre dark queda bien con texto muy oscuro o blanco; usa blanco si lo prefieres */
  --dp-selected-fg: #ffffff;
}

/* Contenedor principal del datepicker */
#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; /* deja sitio para las flechas */
  box-sizing: border-box !important;
}

/* Título + selects mes/año centrados */
#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 de navegación: tamaño fijo + centradas + sin “salirse” */
#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; /* evita que el “cuadro” se desborde */
}

#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 de días */
#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 y columna de semanas */
#datepicker .ui-datepicker th,
.calendar-datepicker .ui-datepicker th {
  color: var(--dp-subtle) !important;
  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 de día */
#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 del día */
#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;
}

/* Días del 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 (marcado) */
#datepicker .ui-state-highlight,
.calendar-datepicker .ui-state-highlight {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: transparent !important;
}

/* Día seleccionado/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;
}

/* Accesibilidad: foco visible sin desplazar layout */
#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 (lista de calendarios) – opcional si la usas */
#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 (Roundcube - Dimarza/T&C Base) === */

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 con ligera textura y animación de luz */
body.task-login::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.05) 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); }
}

/* Contenedor principal */
#login-form {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.6) !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);
}

/* Animación de aparición */
@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); }
}

/* Campos */
#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: #E2B400 !important;
  box-shadow: 0 0 12px rgba(226,180,0,0.35) !important;
}

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

/* Botón */
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(226,180,0,0.45) !important;
}

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

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

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



/* === LOGIN ULTRA MODERNO - 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;
}

/* Sutiles aros de luz en el fondo */
html:not(.dark-mode) body.task-login::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at 70% 80%, rgba(255, 195, 0, 0.08) 0%, transparent 70%) no-repeat;
  animation: moveGlowLight 35s linear infinite;
  z-index: 0;
}
@keyframes moveGlowLight {
  0% { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(10%, -10%) rotate(360deg); }
}

/* Tarjeta central: clara, con sombra profunda suave */
html:not(.dark-mode) #login-form {
  background: linear-gradient(135deg, #fffdfa 0%, #fffaf1 100%) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  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;
}

/* Campos de texto */
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: #ff7a00 !important;
  box-shadow: 0 0 8px rgba(255,122,0,0.3) !important;
}

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

/* Botón de login */
html:not(.dark-mode) .btn-primary {
  background: linear-gradient(90deg, #ff6b00, #ff6b00) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(255,107,0,0.25) !important;
  transition: all 0.3s ease !important;
}
html:not(.dark-mode) .btn-primary:hover {
  background: linear-gradient(90deg, #ffb300, #ff6b00) !important;
  box-shadow: 0 8px 20px rgba(255,107,0,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: #ff6b00 !important;
  text-decoration: underline !important;
}

/* Animación ligera de entrada */
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;
}