/* === Acentos Grupo T&C === */
:root {
  --color-primary: #FF6B00; /* acento principal */
  --color-secondary: #1A2433;
  --color-text: #e0e0e0;
  --color-bg-dark: #1c1c1c;
}
/* Bton de cuerpo y mensaje completo ocultarlos */
input[name="s_mods[]"][value="body"] {display:none!important} 
label[for="icochk6"] {display:none!important} 
input[name="s_mods[]"][value="text"] {display:none!important} 
label[for="icochk7"] {display:none!important}

 
/* 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;
}
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;
}

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.svg') 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;
}