/* ==========================================================================
   AMAI Mail — rediseño moderno sobre Elastic (skin hijo: elastic-amai)
   Carga SOLO en webmail.amai.run (plugin amai_branding). No afecta a Elastic
   ni a los otros clientes. Tokens alineados con AMAI Budget (globals.css).
   Tema claro y oscuro (Elastic usa html.dark-mode). Poppins auto-alojada.
   ========================================================================== */

/* --------------------------------------------------------- Poppins (self) */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-500.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'); }

/* ---------------------------------------------------------------- Tokens -- */
:root {
	--amai-jade-50:  #e6f9f0;
	--amai-jade-400: #1fd78c;
	--amai-jade:     #00a86b;
	--amai-jade-600: #008c59;
	--amai-jade-700: #006e46;
	--amai-jade-glow: rgba(0, 168, 107, 0.25);

	/* Superficies — claro */
	--amai-app-bg:  #eef0f2;   /* fondo entre paneles */
	--amai-fg:      #121212;
	--amai-card:    #ffffff;    /* paneles */
	--amai-muted:   #f9fafb;
	--amai-border:  #e5e7eb;
	--amai-rail:    #ffffff;
	--amai-rail-fg: #374151;
	--amai-accent:  #e6f9f0;    /* fondo seleccionado */
	--amai-accent-fg: #006e46;
	--amai-hover:   #f3f4f6;

	--amai-radius:    10px;
	--amai-radius-lg: 14px;
	--amai-radius-pill: 9999px;
	--amai-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px -2px rgba(0,0,0,.06);
	--amai-shadow-lg: 0 10px 30px -5px rgba(0,0,0,.14), 0 4px 8px -4px rgba(0,0,0,.08);
}

html.dark-mode {
	/* Un solo negro AMAI en TODAS las superficies (#121212). La separación
	   de paneles se hace solo con bordes sutiles, sin huecos de distinto negro. */
	--amai-app-bg:  #121212;
	--amai-fg:      #ffffff;
	--amai-card:    #121212;
	--amai-muted:   #1a1a1a;
	--amai-border:  #262626;
	--amai-rail:    #121212;
	--amai-rail-fg: #d1d5db;
	--amai-accent:  #15301f;    /* tinte jade para seleccionado */
	--amai-accent-fg: #1fd78c;
	--amai-hover:   #1e1e1e;
	--amai-shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.5);
	--amai-shadow-lg: 0 12px 40px rgba(0,0,0,.65);
}

/* ----------------------------------------------------------- Tipografía -- */
body,
.form-control,
input, button, select, textarea,
.listing, .messagelist, table,
#taskmenu, .toolbar, .menu, .popupmenu,
h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ============================================== SEPARACIÓN DE PANELES ===== */
/* Solo en desktop (layout-large/widescreen) y fuera del login.              */
html.layout-large body:not(.task-login) #layout,
html.layout-widescreen body:not(.task-login) #layout {
	background: var(--amai-app-bg) !important;
	gap: 8px;
	padding: 8px;
	box-sizing: border-box;
}

html.layout-large body:not(.task-login) #layout > #layout-menu,
html.layout-large body:not(.task-login) #layout > #layout-sidebar,
html.layout-large body:not(.task-login) #layout > #layout-list,
html.layout-large body:not(.task-login) #layout > #layout-content,
html.layout-widescreen body:not(.task-login) #layout > #layout-menu,
html.layout-widescreen body:not(.task-login) #layout > #layout-sidebar,
html.layout-widescreen body:not(.task-login) #layout > #layout-list,
html.layout-widescreen body:not(.task-login) #layout > #layout-content {
	border-radius: var(--amai-radius-lg) !important;
	background: var(--amai-card) !important;
	box-shadow: var(--amai-shadow) !important;
	border: 1px solid var(--amai-border) !important;
	overflow: hidden;
}

/* Quitar bordes/sombras internas de Elastic que duplican líneas */
#layout > #layout-menu { border-right: 0 !important; }
#layout-sidebar, #layout-list { border-right: 0 !important; }
/* Splitters discretos sobre el fondo */
.splitter { background: transparent !important; }

/* ------------------------------------------------- Rail de tareas (menu) - */
/* Rail más ancho para que "Configuración" entre completo (sin achicar letra) */
html.layout-large #layout-menu,
html.layout-widescreen #layout-menu,
#layout-menu, #taskmenu {
	width: 98px !important;
	min-width: 98px !important;
	background-color: var(--amai-rail) !important;
}
#taskmenu a {
	color: var(--amai-rail-fg) !important;
	border-radius: var(--amai-radius) !important;
	margin: 3px auto;          /* centrado horizontal consistente en el rail */
	transition: background-color .15s ease, color .15s ease;
}
/* Alinear el contenedor del rail al ancho real para centrar los items. */
#layout-menu .menu.toolbar {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}
/* Ancla de posicionamiento: el rail completo (altura total). Así el
   .special-buttons (absolute, bottom:0) se queda ABAJO y centrado en el rail,
   no anclado al body (que lo mandaba al borde izq de la pantalla). */
#layout-menu { position: relative !important; }
/* Botones especiales (modo oscuro / acerca de / cerrar sesión): estirar el
   contenedor absolute al ancho del rail y centrar cada botón. */
#layout-menu .special-buttons {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
}
#layout-menu .special-buttons a {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Etiquetas del rail completas (no cortar "Configuración", "Contactos"...) */
#taskmenu a, #taskmenu a .inner,
.special-buttons a, .special-buttons a .inner {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	font-size: 10.5px !important;
	line-height: 1.15 !important;
	text-align: center;
	word-break: break-word;
}
#taskmenu a, .special-buttons a {
	height: auto !important;
	min-height: 0 !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
#taskmenu a:hover { background-color: var(--amai-hover) !important; color: var(--amai-jade) !important; }
#taskmenu a:hover::before { color: var(--amai-jade) !important; }
#taskmenu a.selected, #taskmenu a.selected:hover {
	color: var(--amai-jade) !important;
	background-color: var(--amai-accent) !important;
}
#taskmenu a.selected::before { color: var(--amai-jade) !important; }
/* Botón Redactar destacado */
#taskmenu a.compose, #taskmenu a.button.compose {
	background-color: var(--amai-jade) !important; color: #fff !important;
}
#taskmenu a.compose::before { color: #fff !important; }
#taskmenu a.compose:hover { background-color: var(--amai-jade-600) !important; }

/* Botones especiales del rail (dark-mode toggle, acerca de, cerrar sesión) */
.special-buttons { background-color: transparent !important; }
#layout-menu .special-buttons a,
.special-buttons a {
	background-color: transparent !important;   /* sin el #21292c "negro feo" */
	color: var(--amai-rail-fg) !important;
	border-radius: var(--amai-radius) !important;
}
#layout-menu .special-buttons a:not(.logout):hover { background-color: var(--amai-hover) !important; color: var(--amai-jade) !important; }
#layout-menu .special-buttons a:not(.logout):hover::before { color: var(--amai-jade) !important; }
/* Cerrar sesión SIEMPRE rojo (id para ganar a #taskmenu a:hover) */
#layout-menu a.logout,
#layout-menu a.logout:hover,
#layout-menu a.logout:focus { color: #ef4444 !important; }
#layout-menu a.logout::before,
#layout-menu a.logout:hover::before { color: #ef4444 !important; }
#layout-menu a.logout:hover { background-color: rgba(239,68,68,.12) !important; }

/* Logo (redondo: sirve claro y oscuro) */
#logo, .logo, img.logo { max-height: 44px; width: auto; border-radius: var(--amai-radius); background: transparent !important; }
/* El contenedor del logo NO debe forzar fondo blanco: que respete el tema */
#layout-menu *:has(> #logo),
#taskmenu *:has(> #logo),
#taskmenu .special-buttons:has(#logo) { background: transparent !important; }

/* ------------------------------------------------------------- Botones --- */
.btn, .button, button.btn, a.btn, input.btn {
	border-radius: var(--amai-radius) !important;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.btn-primary, button.btn-primary, a.btn-primary, input.btn-primary,
.button.btn-primary, .formbuttons .btn-primary,
#login-form .btn-primary, #rcmailloginsubmit {
	background-color: var(--amai-jade) !important;
	border-color: var(--amai-jade) !important;
	color: #fff !important;
}
.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover,
#rcmailloginsubmit:hover, .btn-primary:focus {
	background-color: var(--amai-jade-600) !important;
	border-color: var(--amai-jade-600) !important;
	box-shadow: 0 0 0 .2rem var(--amai-jade-glow) !important;
}

/* ----------------------------------------------------------- Enlaces ----- */
a { color: var(--amai-jade); }
a:hover, a:focus { color: var(--amai-jade-600); }

/* ------------------------------------------------------- Inputs / forms -- */
.form-control, input.form-control, textarea.form-control, select.form-control,
.pretty-select, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
	border-radius: var(--amai-radius) !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus, .pretty-select:focus {
	border-color: var(--amai-jade) !important;
	box-shadow: 0 0 0 .15rem var(--amai-jade-glow) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--amai-jade); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
input.form-check-input:checked {
	background-color: var(--amai-jade) !important; border-color: var(--amai-jade) !important;
}

/* ------------------------------------------------- Listas (carpetas/msgs) */
.listing li > a, .listing tr > td { border-radius: var(--amai-radius) !important; }

/* Seleccionado — ACOTADO a listas de carpetas y mensajes (no toca toolbar).
   Usamos #id para empatar la especificidad de Elastic y ganar el azul. */
#folderlist li.selected > a,
#mailboxlist li.selected > a,
#messagelist tbody tr.selected td,
#messagelist tbody tr.focused td,
#messagelist tbody tr.selected.focused td,
.listing.iconized li.selected > a {
	background-color: var(--amai-accent) !important;
	color: var(--amai-accent-fg) !important;
}
#messagelist tbody tr.selected td a,
#messagelist tbody tr.focused td a { color: var(--amai-accent-fg) !important; }
#messagelist tbody tr.selected td:first-child,
#messagelist tbody tr.focused td:first-child {
	box-shadow: inset 3px 0 0 var(--amai-jade) !important;
}
.listing li > a:hover, #messagelist tbody tr:hover td { background-color: var(--amai-hover) !important; }

/* Contadores no leídos como pill jade */
.unreadcount, .countcolor, span.unreadcount {
	background-color: var(--amai-jade) !important; color: #fff !important;
	border-radius: var(--amai-radius-pill) !important; padding: 1px 8px; font-weight: 500;
}
.messagelist tr.unread td.subject span.subject a { font-weight: 600; }

/* ---------------------------------------------------------- Toolbars ----- */
/* La toolbar NO debe heredar el estilo de selección de la lista.           */
.toolbar a.button { background: transparent !important; border-radius: var(--amai-radius) !important; }
.toolbar a.button:hover:not(.disabled) { background: var(--amai-hover) !important; color: var(--amai-jade) !important; }
.toolbar a.button:hover:not(.disabled)::before { color: var(--amai-jade) !important; }
.toolbar a.button.disabled { opacity: .4 !important; }
.toolbar a.button.selected, .toolbar a.button[aria-expanded="true"] {
	background: var(--amai-accent) !important; color: var(--amai-jade) !important;
}

/* ----------------------------------------------- Diálogos / popups ------- */
.ui-dialog, .popupmenu, .menu, .popover, .ui-menu {
	border-radius: var(--amai-radius-lg) !important;
	box-shadow: var(--amai-shadow-lg) !important;
	overflow: hidden;
}
.popupmenu li > a:hover, .menu li > a:hover {
	background-color: var(--amai-accent) !important; color: var(--amai-jade) !important;
}

/* ------------------------------------- Editor de redacción (TinyMCE) ------ */
.tox.tox-tinymce {
	border-radius: var(--amai-radius-lg) !important;
	border: 1px solid var(--amai-border) !important;
	overflow: hidden;
}
.tox .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord {
	background-color: var(--amai-card) !important;
	border-color: var(--amai-border) !important;
}
.tox .tox-tbtn,
.tox .tox-split-button,
.tox .tox-tbtn--select {
	border-radius: 8px !important;
	transition: background-color .12s ease;
}
.tox .tox-tbtn:hover,
.tox .tox-split-button:hover,
.tox .tox-tbtn--select:hover {
	background-color: var(--amai-accent) !important;
}
.tox .tox-tbtn:hover svg,
.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn--active svg {
	fill: var(--amai-jade) !important;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-tbtn--active {
	background-color: var(--amai-accent) !important;
}
.tox .tox-tbtn { color: var(--amai-fg) !important; }
/* Selects de fuente/tamaño */
.tox .tox-tbtn--bespoke {
	background-color: var(--amai-muted) !important;
	border-radius: 8px !important;
}

/* ------------------------------------------------------- Scrollbars ------ */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,168,107,.35); border-radius: var(--amai-radius-pill); }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,168,107,.6); }

/* ===================================================== DARK — UNIFICAR === */
/* Elimina los "negros antiguos" de Elastic (#21292c) → todo negro AMAI. */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode .uibox,
html.dark-mode .boxlist,
html.dark-mode .scroller,
html.dark-mode .contentbox,
html.dark-mode #messageheader,
html.dark-mode .messageheaderbox,
html.dark-mode .toolbar,
html.dark-mode .menu,
html.dark-mode .boxtitle,
html.dark-mode .boxfooter,
html.dark-mode .formcontent,
html.dark-mode .propform,
html.dark-mode .watermark {
	background-color: #121212 !important;
}

/* Inputs / selects / botones secundarios: negro AMAI con borde para definirlos */
html.dark-mode .form-control,
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .pretty-select,
html.dark-mode .custom-file-label,
html.dark-mode .btn:not(.btn-primary):not(.create) {
	background-color: #1a1a1a !important;
	border-color: #2e2e2e !important;
	color: #e5e7eb !important;
}

/* =============================================================== LOGIN === */
body.task-login { background: var(--amai-app-bg) !important; }
body.task-login #layout { display: block !important; background: var(--amai-app-bg) !important; }
body.task-login #layout-content {
	position: fixed !important;
	inset: 0 !important;
	overflow: auto;
	background: var(--amai-app-bg) !important;
}
/* Centrado a prueba de balas: la tarjeta se ancla al centro del viewport.
   El logo separado se oculta y se recrea sobre la tarjeta (::before). */
body.task-login #logo { display: none !important; }
body.task-login #login-form {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, calc(-50% + 38px)) !important;
	margin: 0 !important;
}
body.task-login #login-form::before {
	content: "";
	position: absolute;
	top: -104px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	background: url(../images/amai-login.png) center / contain no-repeat;
	border-radius: 14px;
}
#login-form {
	background: var(--amai-card) !important;
	border-radius: var(--amai-radius-lg) !important;
	box-shadow: var(--amai-shadow-lg) !important;
	padding: 2.5rem 2rem !important;
	max-width: 400px; width: 90vw;
	border: 1px solid var(--amai-border) !important;
}
#login-form .form-control { border-radius: var(--amai-radius) !important; padding: .6rem .9rem !important; height: auto !important; }
#login-form .btn-primary, #rcmailloginsubmit {
	border-radius: var(--amai-radius) !important; padding: .7rem 1rem !important;
	font-weight: 600 !important; width: 100%; letter-spacing: normal; margin-top: .25rem;
	text-transform: capitalize !important;   /* "Iniciar Sesión" en vez de MAYÚSCULAS */
}
/* Footer del login: reemplaza "AMAI Mail" por copyright AMAI Solutions */
#login-footer { font-size: 0 !important; margin-top: 1rem; line-height: 1; }
#login-footer::after {
	content: "AMAI Solutions \00A9 2026";
	font-size: .8rem;
	color: var(--amai-jade-600);
	font-weight: 500;
}