/**
 * Webshero — skin derivado de Elastic (solo overrides de marca).
 * Los updates de Plesk no tocan esta carpeta; la base se importa de elastic.
 */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");
@import url("../../elastic/styles/styles.min.css");

:root {
	--ws-ink: #161514;
	--ws-ink-soft: #2a2826;
	--ws-muted: #6b6660;
	--ws-cream: #F9F4E9;
	--ws-auth-bg: #f4f2ef;
	--ws-terracotta: #C25C3F;
	--ws-blue: #164193;
	--ws-green: #2f8a4f;
	--ws-sage: #A8B47E;
	--ws-border: #E6E2DC;
	--ws-radius-md: 12px;
	--ws-radius-lg: 18px;
	--ws-radius-pill: 100px;
	--ws-shadow-lg: 0 18px 40px -16px rgba(22, 21, 20, .22);
	--ws-shadow-btn-h: 0 8px 22px -10px rgba(22, 21, 20, .35);
	--ws-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Tipografía ---- */
body,
input,
button,
select,
textarea,
.form-control,
.btn {
	font-family: var(--ws-font);
}

/* ---- Enlaces ---- */
a { color: var(--ws-blue); }
a:hover { color: #0f2e69; }
.btn-link { color: var(--ws-blue); }
.ui.alert a:not(.btn) { color: var(--ws-blue); }

/* ---- Login: shell auth con card blanca sobre crema ---- */
.task-login #layout-content { background: var(--ws-auth-bg); }
.task-login #logo { top: 12vh; max-height: 84px; }
#login-form {
	top: 16vh;
	max-width: 380px;
	background: #fff;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-lg);
	box-shadow: var(--ws-shadow-lg);
	padding: 2.25rem 2rem;
}
#login-footer { color: var(--ws-muted); }

/* ---- Botones ---- */
.btn {
	border-radius: var(--ws-radius-pill);
	font-weight: 600;
	transition: background 180ms cubic-bezier(.2, .7, .3, 1), box-shadow 180ms cubic-bezier(.2, .7, .3, 1);
}
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
	color: #fff;
	background: var(--ws-ink);
	border-color: var(--ws-ink);
}
.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus,
.btn-primary:not(:disabled):active {
	color: #fff;
	background: var(--ws-ink-soft);
	border-color: var(--ws-ink-soft);
	box-shadow: var(--ws-shadow-btn-h);
}

/* ---- Inputs y focus (borde ink + halo neutro suave) ---- */
.form-control { border-color: var(--ws-border); border-radius: var(--ws-radius-md); }
.form-control:focus {
	color: var(--ws-ink);
	border-color: var(--ws-ink);
	box-shadow: 0 0 0 .2rem rgba(22, 21, 20, .08);
}
.input-group-text input:focus { border-color: var(--ws-ink) !important; }
.input-group-text {
	background: var(--ws-cream);
	border-color: var(--ws-border);
	color: var(--ws-ink);
}
.input-group > :first-child {
	border-top-left-radius: var(--ws-radius-md);
	border-bottom-left-radius: var(--ws-radius-md);
}
.input-group > :last-child {
	border-top-right-radius: var(--ws-radius-md);
	border-bottom-right-radius: var(--ws-radius-md);
}
.recipient-input.focus,
.multi-input > .content.focused,
.tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label,
.formcontent.raweditor .CodeMirror-focused {
	border-color: var(--ws-ink);
	box-shadow: 0 0 0 .2rem rgba(22, 21, 20, .08);
}

/* ---- Switches / checkboxes ---- */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--ws-sage);
	background-color: var(--ws-sage);
}
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: var(--ws-ink);
}
.custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--ws-blue);
	background-color: var(--ws-blue);
}

/* ---- Menú de tareas (rail izquierdo): ink ---- */
#taskmenu { background: var(--ws-ink); }
#taskmenu a:hover,
#taskmenu a:focus { background: var(--ws-ink-soft); }
#taskmenu a.selected,
#taskmenu a.selected:hover { color: #fff; background: var(--ws-ink-soft); }
#taskmenu .action-buttons a { color: #fff; }
#taskmenu .action-buttons a:hover { color: #fff; background: var(--ws-ink-soft); }

/* ---- Listas: selección crema, foco ink ---- */
.listing li.selected,
.listing tr.selected td { color: var(--ws-ink); background-color: var(--ws-cream); }
.listing li.selected > a { color: var(--ws-ink); }
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(--ws-ink);
}

/* ---- Menús contextuales / popovers ---- */
.popover .menu li a:not(.disabled):hover { color: var(--ws-ink); background-color: var(--ws-cream); }
.popover .menu .dropbutton a.dropdown:hover { background-color: var(--ws-cream); }
.popupmenu .listing li > a:not(.disabled):hover { color: var(--ws-ink); background-color: var(--ws-cream); }
.popupmenu .listing li.selected { color: var(--ws-ink); background-color: var(--ws-cream); }
.googie_list li.googie_list_onhover { color: var(--ws-ink); background-color: var(--ws-cream); }

/* ---- Badges / contadores / avisos ---- */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount { background: var(--ws-blue); color: #fff; }
#messagestack .alert-info.information { background-color: var(--ws-blue); }
.quota-widget .value { background-color: var(--ws-blue); }

/* ---- Botón flotante móvil ---- */
.floating-action-buttons a.button {
	background: var(--ws-ink);
	box-shadow: 0 0 5px 5px rgba(22, 21, 20, .12);
}

/* ---- jQuery UI (datepicker, menús) ---- */
.ui-menu .ui-state-active { background-color: var(--ws-ink) !important; }
.ui-slider .ui-slider-handle.ui-state-active { background: var(--ws-ink); border-color: var(--ws-ink); }
.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight { background: var(--ws-cream); color: var(--ws-ink); }
.ui-datepicker a.ui-state-active { background: var(--ws-ink) !important; color: #fff !important; }

/* ---- Editor TinyMCE ---- */
div.tox.focused { border-color: var(--ws-ink) !important; box-shadow: 0 0 0 .2rem rgba(22, 21, 20, .08) !important; }
div.tox .tox-dialog__footer .tox-button,
div.tox .tox-dialog__footer .tox-button.disabled,
div.tox .tox-dialog__footer .tox-button:disabled,
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
	background: var(--ws-ink);
	border-color: var(--ws-ink);
}
div.tox .tox-dialog .tox-dialog__body-nav-item--active { color: var(--ws-blue); }
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(--ws-ink); box-shadow: 0 0 0 .2rem rgba(22, 21, 20, .08); }