/*
 * Captive Core — marca para Roundcube (piel Elastic).
 * Tokens: CaptiveCore_Branding/tokens.json (core-navy #263247, captive-green #98C246).
 * Las reglas de fondo y selección se limitan al modo claro (html:not(.dark-mode)).
 */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Inter-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Poppins-700.woff2') format('woff2')}

:root{
  --cc-navy:#263247; --cc-navy-500:#3A4A63; --cc-navy-300:#5B6B82; --cc-navy-900:#1C2535;
  --cc-green:#98C246; --cc-green-700:#6F9E2E; --cc-green-100:#EAF3D9;
  --cc-warm-bg:#F7F6F3; --cc-warm-border:#EAE7E1; --cc-text:#4A4640;
}

/* ---------- Tipografía ---------- */
body, input, select, textarea, button, .btn, .popover, .form-control, .listing, .menu {
  font-family:'Inter','Aptos','Calibri',sans-serif;
}
h1, h2, h3, .header .header-title, .boxtitle, legend, .formcontent legend {
  font-family:'Poppins','Aptos','Calibri',sans-serif;
}

/* ---------- Barra lateral ---------- */
#layout-menu { background-color:var(--cc-navy) !important; }
#layout-menu #logo { opacity:1; }
#taskmenu a { color:#c9d1dc; }
#taskmenu a:hover, #taskmenu a:focus { color:#fff; background-color:var(--cc-navy-500); }
#taskmenu a.selected, #taskmenu a.selected:hover { color:var(--cc-green); background-color:var(--cc-navy-900); }

/* ---------- Botón principal ---------- */
.btn-primary, .button.mainaction, button.mainaction, input.mainaction, .btn.mainaction {
  background-color:var(--cc-green) !important; border-color:var(--cc-green) !important;
  color:var(--cc-navy) !important; font-weight:600;
}
.btn-primary:hover, .btn-primary:focus, .button.mainaction:hover, .button.mainaction:focus,
button.mainaction:hover, button.mainaction:focus, .btn.mainaction:hover {
  background-color:var(--cc-green-700) !important; border-color:var(--cc-green-700) !important; color:#fff !important;
}

/* ---------- Selección en listas (modo claro) ---------- */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) table.listing tr.selected > td,
html:not(.dark-mode) table.records-table tr.selected > td {
  background-color:var(--cc-green-100) !important; color:var(--cc-navy) !important;
}
html:not(.dark-mode) .listing li.selected > a:before { color:var(--cc-green-700) !important; }

/* Contadores de no leídos */
.listing li .unreadcount, .unreadcount, #taskmenu .unread-count {
  background-color:var(--cc-green) !important; color:var(--cc-navy) !important;
}

/* ---------- Foco y casillas ---------- */
.form-control:focus, .custom-select:focus, select:focus, textarea:focus, input:focus {
  border-color:var(--cc-green) !important; box-shadow:0 0 0 .2rem rgba(152,194,70,.30) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
input.form-check-input:checked, .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color:var(--cc-green) !important; border-color:var(--cc-green) !important;
}

/* Enlaces de contenido (modo claro) */
html:not(.dark-mode) .formcontent a, html:not(.dark-mode) .propform a, html:not(.dark-mode) .boxcontent a { color:var(--cc-navy-500); }
html:not(.dark-mode) .formcontent a:hover, html:not(.dark-mode) .propform a:hover { color:var(--cc-green-700); }

/* ---------- Pantalla de acceso ---------- */
body.task-login {
  background:linear-gradient(160deg, var(--cc-navy) 0%, var(--cc-navy-900) 55%, var(--cc-navy-500) 100%) !important;
  background-attachment:fixed !important;
}
body.task-login #layout, body.task-login #layout-content { background:transparent !important; }
.task-login #logo { max-height:170px; top:10vh; opacity:1; }
.task-login #login-form .formbuttons .button.mainaction { border-radius:6px; }
.task-login #login-form .input-group-text { background-color:#fff; }
#login-footer, #login-footer a { color:#c9d1dc !important; }
#login-footer a:hover { color:var(--cc-green) !important; }
#login-footer::after {
  content:"Tu departamento de IT, sin la complejidad";
  display:block; margin-top:.75rem; font-family:'Poppins','Aptos','Calibri',sans-serif;
  font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--cc-green);
}

/* ---------- Azul de Elastic (#37beff / #00acff) → paleta Captive Core ---------- */
/* Enlaces: verde oscuro de la marca (#5C8A1E, state-ok-fg); el verde claro no da contraste sobre blanco. */
/* :where() deja la especificidad de un simple "a": sustituye el azul general sin pisar las listas. */
:where(html:not(.dark-mode)) a, :where(html:not(.dark-mode)) .btn-link, html:not(.dark-mode) .ui.alert a:not(.btn) { color:#5C8A1E; }
:where(html.dark-mode) a, :where(html.dark-mode) .btn-link { color:var(--cc-green); }
#taskmenu .action-buttons a, #taskmenu .action-buttons a:hover { color:var(--cc-green); }
#taskmenu .action-buttons a:hover { background:var(--cc-navy-500); }
.btn-primary.disabled, .btn-primary:disabled { background:var(--cc-green) !important; border-color:var(--cc-green) !important; }
.btn-primary:focus { box-shadow:0 0 0 .2rem rgba(152,194,70,.5) !important; }
.quota-widget .value { background-color:var(--cc-green); }
.floating-action-buttons a.button { background:var(--cc-green); color:var(--cc-navy); box-shadow:0 0 5px 5px var(--cc-green-100); }
.ui-menu .ui-state-active, .popover .menu li a:not(.disabled):hover, .popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover, .popupmenu .listing li.selected, .googie_list li.googie_list_onhover {
  background-color:var(--cc-green) !important; color:var(--cc-navy) !important;
}
.ui-datepicker a.ui-state-active { background:var(--cc-green) !important; color:var(--cc-navy) !important; }
.ui-slider .ui-slider-handle.ui-state-active { background:var(--cc-green); border-color:var(--cc-green-700); }
#messagestack .alert-info.information { background-color:var(--cc-navy-500); }
.folderlist li.mailbox .unreadcount, .folderlist li.mailbox.recent > a > .unreadcount { background:var(--cc-green); color:var(--cc-navy); }
html:not(.dark-mode) .table-widget table.options-table tr.selected td { background-color:var(--cc-green-100); }
/* Indicador de foco en listas (borde izquierdo) */
html:not(.touch) .listing li > a:focus, html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td { border-left-color:var(--cc-green) !important; }
/* Foco en editores, destinatarios, etiquetas, ficheros y TinyMCE */
.formcontent.raweditor .CodeMirror-focused, .multi-input > .content.focused, .recipient-input.focus, .tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label, div.tox.focused,
div.tox .tox-color-input > input:focus, div.tox .tox-listboxfield .tox-listbox--select:focus, div.tox .tox-textarea:focus, div.tox .tox-textfield:focus {
  border-color:var(--cc-green) !important; box-shadow:0 0 0 .2rem rgba(152,194,70,.30) !important;
}
.input-group-text input:focus { border-color:var(--cc-green) !important; }
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color:var(--cc-green); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { border-color:var(--cc-green); background-color:var(--cc-green); }
div.tox .tox-dialog__footer .tox-button, div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
  background:var(--cc-green); border-color:var(--cc-green); color:var(--cc-navy);
}
div.tox .tox-dialog .tox-dialog__body-nav-item--active { color:var(--cc-green-700); }