/* ==========================================================================
   Aseder Mail — Roundcube Elastic skin overrides
   Brand: Academic Green #2F6F4F · Warm Slate · Geist font
   Inyectado vía meta.json (styles/aseder.css) desde el Dockerfile
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Fuente global
   -------------------------------------------------------------------------- */
html, body, input, textarea, select, button, td, th, a {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* --------------------------------------------------------------------------
   Variables — sobreescribir el azul de elastic con verde Aseder
   -------------------------------------------------------------------------- */
:root {
  --color-main:              #2F6F4F;
  --color-main-dark:         #245A40;
  --color-btn-primary-bg:    #2F6F4F;
  --color-btn-primary-hover: #245A40;
  --color-link:              #2F6F4F;
  --color-success:           #2F6F4F;
}

/* --------------------------------------------------------------------------
   Página de login
   -------------------------------------------------------------------------- */
.task-login #rcmail-body,
body.task-login {
  background: linear-gradient(160deg, #EEF5F0 0%, #FAFAF8 55%) !important;
  min-height: 100vh;
}

#login-form,
form#login {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 24px rgba(20, 53, 36, 0.10), 0 1px 4px rgba(20, 53, 36, 0.06) !important;
  border: 1px solid #ECECE7 !important;
}

/* Logo en login — Aseder */
#login-logo,
.loginbox .logo,
#login .logo {
  display: flex !important;
  justify-content: center !important;
  padding: 20px 0 12px !important;
}

#login-logo img,
.loginbox .logo img,
#login .logo img {
  width: 160px !important;
  height: 120px !important;
  object-fit: contain !important;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(20, 53, 36, 0.08);
}

/* --------------------------------------------------------------------------
   Barra lateral izquierda (taskmenu / sidebar)
   -------------------------------------------------------------------------- */
#taskmenu,
#sidebar,
nav#sidebar {
  background-color: #245A40 !important;
  border-right: 1px solid #1A4530 !important;
}

#taskmenu a,
#taskmenu span.inner {
  color: rgba(255, 255, 255, 0.80) !important;
}

#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu a.active {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

#taskmenu a.selected::before,
#taskmenu a.active::before {
  background-color: #82B294 !important;
}

/* Carpetas */
#folderlist-content li a.selected,
#folderlist-content li a:focus,
ul#folderlist li.selected > a {
  color: #2F6F4F !important;
  background-color: #EEF5F0 !important;
  font-weight: 600 !important;
  border-radius: 4px;
}

#folderlist-content li a:hover {
  background-color: #F5F5F2 !important;
  border-radius: 4px;
}

/* Contador de no leídos */
span.unreadcount,
a span.unreadcount {
  background-color: #2F6F4F !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Toolbar / header
   -------------------------------------------------------------------------- */
#topnav,
#topbar,
.topline,
#header {
  background-color: #2F6F4F !important;
  border-bottom: 1px solid #245A40 !important;
}

#topnav a,
#topbar a,
.topline a,
#header a,
#topnav button,
#topbar button {
  color: rgba(255, 255, 255, 0.90) !important;
}

#topnav a:hover,
#topbar a:hover,
#header a:hover,
#topnav button:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

/* Toolbar de acciones (sobre la lista de mensajes) */
#toolbar,
.toolbar {
  background-color: #FAFAF8 !important;
  border-bottom: 1px solid #ECECE7 !important;
}

/* --------------------------------------------------------------------------
   Botones primarios (Enviar, Guardar, etc.)
   -------------------------------------------------------------------------- */
a.button.mainaction,
button.mainaction,
input[type=submit].mainaction,
.button.mainaction,
.btn-primary,
button[type=submit].btn,
#compose-send {
  background-color: #2F6F4F !important;
  border-color: #2F6F4F !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

a.button.mainaction:hover,
button.mainaction:hover,
.button.mainaction:hover,
.btn-primary:hover {
  background-color: #245A40 !important;
  border-color: #245A40 !important;
}

a.button.mainaction:active,
button.mainaction:active {
  background-color: #1A4530 !important;
  border-color: #1A4530 !important;
}

/* Botones secundarios — hover en verde */
a.button:not(.mainaction):hover,
button:not(.mainaction):not([disabled]):hover,
.button:not(.mainaction):hover {
  color: #2F6F4F !important;
  border-color: #2F6F4F !important;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a, a:visited {
  color: #2F6F4F;
}
a:hover {
  color: #1A4530;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Checkboxes / radio
   -------------------------------------------------------------------------- */
input[type=checkbox]:checked,
input[type=radio]:checked {
  accent-color: #2F6F4F;
}

/* Para custom checkboxes de elastic */
.form-check-input:checked,
input.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #2F6F4F !important;
  border-color: #2F6F4F !important;
}

/* --------------------------------------------------------------------------
   Inputs — foco
   -------------------------------------------------------------------------- */
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #2F6F4F !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 79, 0.15) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   Lista de mensajes
   -------------------------------------------------------------------------- */
#messagelist,
table#messagelist {
  background-color: #ffffff;
}

#messagelist tbody tr:hover td {
  background-color: #F5F5F2 !important;
  cursor: pointer;
}

#messagelist tbody tr.selected td,
#messagelist tbody tr.focused td {
  background-color: #EEF5F0 !important;
}

/* Asunto no leído */
#messagelist tbody tr.unread .subject a,
#messagelist tbody tr.unread td.subject {
  color: #1A4530 !important;
  font-weight: 600 !important;
}

/* Indicador de no leído (banda de color) */
#messagelist tbody tr.unread td.flags span,
.unread-indicator {
  color: #2F6F4F !important;
}

/* --------------------------------------------------------------------------
   Panel de lectura (message body)
   -------------------------------------------------------------------------- */
#messageview .subject h2,
.message-subject {
  color: #161410;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Citas en respuestas */
#messageview blockquote,
div.message-part blockquote {
  border-left: 3px solid #B3D1BD !important;
  color: #6F6D66 !important;
}

/* --------------------------------------------------------------------------
   Ventana de composición
   -------------------------------------------------------------------------- */
#compose-subject:focus,
#compose-from:focus {
  border-color: #2F6F4F !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 79, 0.12) !important;
}

/* Zona de arrastrar adjuntos */
#compose-attachments.droptarget.hover,
.droptarget.hover {
  border: 2px dashed #2F6F4F !important;
  background-color: #EEF5F0 !important;
}

/* --------------------------------------------------------------------------
   Tabs / sub-navegación
   -------------------------------------------------------------------------- */
ul.tabrow li.selected a,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #2F6F4F !important;
  border-bottom-color: #2F6F4F !important;
}

.nav-tabs .nav-link:hover {
  color: #245A40 !important;
}

/* --------------------------------------------------------------------------
   Diálogos / popups
   -------------------------------------------------------------------------- */
.ui-dialog .ui-dialog-titlebar,
.modal-header {
  background-color: #2F6F4F !important;
  color: #ffffff !important;
  border-radius: 6px 6px 0 0;
}

.ui-dialog .ui-dialog-titlebar .ui-button,
.modal-header .close,
.modal-header .btn-close {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* --------------------------------------------------------------------------
   Alertas / notificaciones
   -------------------------------------------------------------------------- */
#notifications .notice,
.noticecontainer .notice {
  border-radius: 6px !important;
  font-size: 13px !important;
}

#notifications .notice.notice-success,
.notice-success {
  background-color: #EEF5F0 !important;
  border-left: 4px solid #2F6F4F !important;
  color: #1A4530 !important;
}

#notifications .notice.notice-error,
.notice-error {
  border-left: 4px solid #B42318 !important;
}

#notifications .notice.notice-warning,
.notice-warning {
  border-left: 4px solid #B47A06 !important;
}

/* --------------------------------------------------------------------------
   Autocompletado de contactos
   -------------------------------------------------------------------------- */
#autocompletepopup li:hover,
#autocompletepopup li.selected,
ul.autocompletelist li.selected {
  background-color: #EEF5F0 !important;
  color: #1A4530 !important;
}

/* --------------------------------------------------------------------------
   Calendario / agenda (si el plugin está activo)
   -------------------------------------------------------------------------- */
.fc-button-primary,
.button-primary {
  background-color: #2F6F4F !important;
  border-color: #2F6F4F !important;
}

.fc-button-primary:hover {
  background-color: #245A40 !important;
}

.fc-event,
.fc-event-main {
  background-color: #2F6F4F !important;
  border-color: #245A40 !important;
}

/* --------------------------------------------------------------------------
   Fondo de página general
   -------------------------------------------------------------------------- */
body,
#rcmailcontent,
#layout {
  background-color: #FAFAF8 !important;
}

/* --------------------------------------------------------------------------
   Scrollbars — minimal
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #BFBDB3 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: #DDDCD5;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #BFBDB3;
  background-clip: padding-box;
  border: 2px solid transparent;
}