/* Correo ON: capa de marca sobre Elastic (colores ya compilados en styles.css) */
:root { --ink:#0B0B0C; --ink2:#1F1F22; --surface:#F6F5F0; --volt:#C8FF2E; --volt-soft:#EDFFBF; --volt-text:#3D6B00; --muted:#55544F; --line:#DDDBD3; }
html, body, input, select, textarea, button, .form-control, .popover, .ui-dialog { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, .header-title, .ui-dialog-title, .formcontent legend { font-family: "Poppins", sans-serif; letter-spacing: -.01em; }
body { background: var(--surface); }

/* Botones */
.btn-primary, .btn.btn-primary, .ui-button.mainaction, .formbuttons .btn.submit, button.mainaction {
  background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; border-radius: 999px !important; font-weight: 600; }
.btn-primary:hover, .ui-button.mainaction:hover, button.mainaction:hover { background: var(--ink2) !important; }
.btn, .ui-button, .form-control, .input-group-text, .custom-select { border-radius: 12px; }
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-control:focus, .custom-select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(200,255,46,.55); }

/* Menú principal (columna oscura) */
#layout-menu { background: var(--ink); }
#layout-menu #logo { max-width: 46px; margin: 18px auto 10px; display: block; }
#layout-menu .compose, #taskmenu a.compose { color: var(--volt) !important; }
#taskmenu a.selected { box-shadow: inset 3px 0 0 var(--volt); }
#taskmenu a.selected .inner, #taskmenu a.selected:before { color: var(--volt) !important; }

/* Carpetas y lista */
#folderlist-content li.selected > a, #settings-menu li.selected > a { background: var(--volt-soft) !important; color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--volt-text); }
#folderlist-content li .unreadcount, .listing .unreadcount { background: var(--volt) !important; color: var(--ink) !important; font-weight: 700; }
.messagelist tr.unread td.subject span.subject a { color: var(--ink); }
.header .header-title { font-weight: 700; }
a { color: var(--volt-text); }

/* ---------- Pantalla de acceso ---------- */
body.task-login { background: var(--surface); }
.task-login #layout { display: block; }
.task-login #layout-content.on-login { display: grid !important; grid-template-columns: minmax(380px, 1fr) minmax(360px, 1fr); min-height: 100vh; width: 100%; text-align: left; padding: 0; }
.on-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; background: var(--ink); color: var(--surface); }
.on-brand:before { content: ""; position: absolute; width: 640px; height: 640px; right: -260px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,46,.32), transparent 65%); }
.on-brand-logo { position: relative; height: 34px; width: auto; align-self: flex-start; margin: 0; display: block; }
.on-brand-copy { position: relative; max-width: 460px; }
.on-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--volt); margin-bottom: 14px; }
.on-brand-title { font-family: "Poppins", sans-serif; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; margin: 0 0 22px; }
.on-brand-title .hl { background: var(--volt); color: var(--ink); padding: 0 .12em; border-radius: .14em; }
.on-brand ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: #D9D8D2; font-size: 15px; }
.on-brand li { position: relative; padding-left: 26px; }
.on-brand li:before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--volt); }
.on-brand-foot { position: relative; font-size: 13px; color: #A3A29C; }
.on-form { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 6vw, 96px); max-width: 560px; width: 100%; justify-self: center; }
.on-form-logo { height: 30px; width: auto; align-self: flex-start; margin-bottom: 40px; display: none; }
.on-form-title { font-size: 30px; margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.on-form-sub { color: var(--muted); margin: 0 0 26px; font-size: 15px; }
.task-login #login-form { width: 100% !important; max-width: none !important; margin: 0 !important; top: 0 !important; }
.task-login #login-form table { width: 100%; }
.task-login #login-form td.title { display: none; }
.task-login #login-form .input-group { margin-bottom: 12px; }
.task-login #login-form .form-control, .task-login #login-form .input-group-text { height: 50px; font-size: 15px; background: #fff; border-color: var(--line); }
.task-login #login-form .input-group-text { color: var(--muted); }
.task-login #login-form .formbuttons, .task-login #login-form #rcmloginsubmit { width: 100%; }
.task-login #rcmloginsubmit { height: 52px; margin-top: 8px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.on-form-help { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; text-align: left !important; position: static !important; }
.on-form-help a { color: var(--volt-text); font-weight: 600; text-decoration: none; }
.on-form-help a:hover { text-decoration: underline; }
.task-login #message, .task-login #messagestack { z-index: 10; }
@media (max-width: 860px) {
  .task-login #layout-content.on-login { grid-template-columns: 1fr; }
  .on-brand { display: none; }
  .on-form { padding: 40px 24px; justify-content: flex-start; }
  .on-form-logo { display: block; }
}

/* =====================================================================
   Interfaz estilo Gmail con la marca ON
   ===================================================================== */
body:not(.task-login) { background: var(--surface); }
#layout { background: var(--surface); }

/* Riel de aplicaciones (izquierda): claro, iconos con píldora al seleccionar */
#layout-menu { background: var(--surface) !important; border-right: 0 !important; }
#layout-menu #logo { max-width: 44px; margin: 16px auto 18px; }
#taskmenu a, #taskmenu a .inner { color: var(--ink2) !important; background: transparent !important; font-size: 11px; font-weight: 600; }
#taskmenu a:before { color: var(--ink2) !important; display: block; width: 56px; height: 32px; line-height: 32px !important; margin: 0 auto 2px; border-radius: 16px; transition: background .2s; }
#taskmenu a:hover:before { background: #E9E8E1; }
#taskmenu a.selected { box-shadow: none !important; background: transparent !important; }
#taskmenu a.selected:before { background: var(--volt) !important; color: var(--ink) !important; }
#taskmenu a.selected .inner { color: var(--ink) !important; }
#taskmenu .special-buttons a.logout, #taskmenu .special-buttons a.logout:before { color: #C2410C !important; }
#taskmenu a:focus { outline: none; }

/* Botón Redactar (como Gmail) */
.on-compose-wrap { padding: 8px 8px 14px 8px; }
a.on-compose { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px 0 20px; border-radius: 18px;
  background: var(--volt); color: var(--ink) !important; font-weight: 700; font-size: 15px; text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(11,11,12,.12), 0 4px 14px -6px rgba(11,11,12,.25); transition: box-shadow .2s, transform .2s; }
a.on-compose:hover { box-shadow: 0 2px 4px rgba(11,11,12,.15), 0 10px 24px -10px rgba(11,11,12,.4); transform: translateY(-1px); }
a.on-compose:before { font-family: "Icons"; font-weight: 900; content: "\f303"; font-size: 17px; }
a.on-compose .inner { display: inline; }

/* Barra lateral de carpetas */
#layout-sidebar { background: var(--surface) !important; border-right: 0 !important; }
#layout-sidebar .header { background: var(--surface) !important; border-bottom: 0 !important; }
#layout-sidebar .header .header-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13px; color: var(--muted); }
#layout-sidebar .footer { background: var(--surface) !important; border-top: 0 !important; }
#folderlist-content { background: transparent !important; }
#folderlist-content ul.treelist li { border: 0 !important; }
#folderlist-content ul.treelist li a { height: 34px; line-height: 34px; margin-right: 12px; padding-left: 26px; border-radius: 0 17px 17px 0; color: var(--ink2); font-size: 14px; }
#folderlist-content ul.treelist li a:hover { background: #E9E8E1; }
#folderlist-content ul.treelist li.selected > a, #folderlist-content ul.treelist li.selected > a:hover { background: var(--volt-soft) !important; color: var(--ink) !important; font-weight: 700; box-shadow: none !important; }
#folderlist-content ul.treelist li.unread > a { font-weight: 700; }
#folderlist-content ul.treelist li a .unreadcount, #folderlist-content li .unreadcount { background: transparent !important; color: var(--ink) !important; font-weight: 700; font-size: 12px; }
.quota-widget .bar { background: #E2E1DA; } .quota-widget .bar .value { background: var(--volt-text); }

/* Paneles blancos flotantes (lista y lectura) */
@media screen and (min-width: 1025px) {
  html:not(.iframe) #layout-list, html:not(.iframe) #layout-content { background: #fff !important; border: 0 !important; margin: 8px 0 8px 0; border-radius: 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(11,11,12,.05); }
  html:not(.iframe) #layout-content { margin-right: 10px; margin-left: 8px; }
  html:not(.iframe) #layout-sidebar { width: 256px !important; flex: 0 0 256px !important; }
  html:not(.iframe) #layout-list { flex: 0 0 34% !important; max-width: 34% !important; }
}
#layout-list .header, #layout-content .header, #layout-content .footer { background: #fff !important; border-bottom: 1px solid #EFEEE8 !important; }
#layout-list .header .header-title, #layout-content .header .header-title { font-family: "Poppins", sans-serif; font-size: 18px; color: var(--ink); }

/* Buscador redondeado */
#layout-list .searchbar { background: #fff !important; border-bottom: 0 !important; padding: 10px 12px 6px; height: auto !important; }
#layout-list .searchbar form, #mailsearchform { background: #F1F0EA; border-radius: 24px; border: 0 !important; }
#layout-list .searchbar input, #mailsearchform input { background: transparent !important; border: 0 !important; height: 44px; font-size: 15px; }
#layout-list .searchbar .button, #layout-list .searchbar a { color: var(--muted) !important; }

/* Lista de mensajes */
#messagelist tr td { border-bottom: 1px solid #F1F0EA !important; }
#messagelist tr:hover td { background: #FAFAF6; }
#messagelist tr.unread td { background: #fff; }
#messagelist tr.unread .subject a, #messagelist tr.unread .fromto { font-weight: 700; color: var(--ink) !important; }
#messagelist tr:not(.unread) .subject a { color: #4A4A45; }
#messagelist tr.selected td, #messagelist tr.selected:hover td { background: var(--volt-soft) !important; }
#messagelist tr.focused > td:first-child { box-shadow: inset 3px 0 0 var(--volt-text) !important; }
#messagelist span.date, #messagelist .date { color: var(--muted); font-size: 12px; }
#messagelist tr.unread span.date { color: var(--ink); font-weight: 700; }
#messagelist .msgicon.status.unread:before, #messagelist span.flag .flagged:before { color: var(--volt-text) !important; }
.listing li.selected, table.listing tr.selected td { background: var(--volt-soft); }

/* Barras de herramientas: iconos sobrios */
.toolbar a.button, .toolbar a, #toolbar-menu a { color: var(--ink2) !important; }
.toolbar a:hover, #toolbar-menu a:hover { background: #F1F0EA !important; border-radius: 10px; }
.toolbar a.disabled, #toolbar-menu a.disabled { color: #B9B8B1 !important; }

/* Lectura de mensaje */
#messagecontframe { background: #fff; }
.header-headers .subject, #message-header .subject { font-family: "Poppins", sans-serif; font-size: 22px; letter-spacing: -.01em; }

/* Ventanas y menús */
.popover, .ui-dialog { border-radius: 16px !important; border: 0 !important; box-shadow: 0 18px 48px -18px rgba(11,11,12,.35) !important; }
.popover .listing li a:hover, .popupmenu .listing a:hover { background: #F1F0EA !important; }
.ui-dialog .ui-dialog-titlebar { background: #fff !important; border-bottom: 1px solid #EFEEE8; }
.ui-dialog .ui-dialog-buttonpane { background: #fff !important; }
.ui-dialog .ui-dialog-buttonpane .btn:not(.mainaction), .ui-dialog .ui-dialog-buttonpane .ui-button:not(.mainaction) { border-radius: 999px; }

/* Avisos */
#messagestack div { border-radius: 14px !important; }

/* Móvil / tableta: el riel vuelve al estilo de menú lateral */
@media screen and (max-width: 1024px) {
  #layout-menu { background: #fff !important; }
  .on-compose-wrap { padding: 12px; }
  a.on-compose { height: 48px; width: 100%; justify-content: center; }
}

/* Riel: sin bloques oscuros y sin Redactar duplicado en escritorio */
#layout-menu .popover-header, #layout-menu .special-buttons, #taskmenu .special-buttons { background: var(--surface) !important; border: 0 !important; }
#taskmenu .special-buttons a, #taskmenu .special-buttons a .inner { color: var(--muted) !important; }
#taskmenu .special-buttons a.logout .inner { color: #C2410C !important; }
#taskmenu a:before { width: 44px; }
@media screen and (min-width: 1025px) {
  #taskmenu .action-buttons a.compose { display: none !important; }
  #taskmenu { padding-top: 6px; }
}

/* Redactar */
.editor-toolbar { background: #F6F5F0 !important; border-color: #E9E8E1 !important; border-radius: 14px 14px 0 0; }
#composebody, .tox.tox-tinymce { border-color: #E9E8E1 !important; border-radius: 0 0 14px 14px !important; }
#compose-content .form-group label, #compose-headers label, .propform label.col-form-label { color: var(--muted); font-weight: 500; }
#compose-content .form-control, #compose-content .custom-select, #compose-content .recipient-input { border-color: #E9E8E1; }
#compose-content .formbuttons .btn.primary, #compose-content .btn.send { padding: 0 26px; height: 42px; }
#compose-attachments .btn, #layout-sidebar .btn.attach { border-radius: 999px; }
#layout-sidebar .formcontent, #compose-options { background: transparent; }

/* Tipografía única de la interfaz: Poppins (los iconos conservan su fuente en ::before) */
html, body, body *:not(.icon):not(i):not([class^="fa-"]) { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
body { font-size: 14px; letter-spacing: -.005em; }
/* Etiquetas compactas con Poppins (más ancha que Roboto) */
#taskmenu a .inner { font-size: 9.5px !important; letter-spacing: -.02em; white-space: nowrap; }
.toolbar a .inner, #toolbar-menu a .inner, .header .toolbar a .inner { font-size: 10.5px !important; letter-spacing: -.01em; }
.header a.button .inner, .header a.toolbar-button .inner { font-size: 10.5px !important; letter-spacing: -.01em; }

/* Lectura estilo Gmail: asunto grande, avatar redondo, cuerpo cómodo */
html.iframe body, html.iframe #layout-content { background: #fff !important; }
#message-header { padding: 18px 24px 14px !important; border-bottom: 1px solid #EFEEE8 !important; }
#message-header .subject { font-size: 22px !important; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
#message-header .contactphoto, #message-header .header .contactphoto { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--volt-soft) !important; overflow: hidden; }
#message-header .contactphoto img { border-radius: 50%; }
#message-header .header-links a, #message-header .short-header a { color: var(--volt-text) !important; font-weight: 500; }
#message-content .message-part, #messagebody { padding: 8px 24px 24px !important; font-size: 15px; line-height: 1.6; color: var(--ink2); }
#message-header .header .date, #message-header .short-header .date { color: var(--muted); }

/* ===== Móvil y tableta (≤1024px) ===== */
@media screen and (max-width: 1024px) {
  /* Menú lateral: icono a la izquierda del texto, fila seleccionada en verde suave */
  #layout-menu .popover-header { background: #fff !important; border-bottom: 1px solid #EFEEE8 !important; }
  #taskmenu a { display: flex !important; align-items: center; gap: 14px; height: 52px; padding: 0 20px !important; border-bottom: 1px solid #F1F0EA; }
  #taskmenu a:before { display: inline-flex !important; align-items: center; justify-content: center; width: 24px !important; height: 24px !important;
    line-height: 24px !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 17px; }
  #taskmenu a .inner { font-size: 15px !important; font-weight: 500; letter-spacing: 0; }
  #taskmenu a.selected { background: var(--volt-soft) !important; }
  #taskmenu a.selected:before { background: transparent !important; color: var(--ink) !important; }
  #taskmenu a.selected .inner { font-weight: 700; }
  #taskmenu .action-buttons a.compose { display: flex !important; }

  /* Botón flotante Redactar: píldora volt como en Gmail */
  .floating-action-buttons a.button.compose { width: auto !important; height: 56px !important; padding: 0 22px 0 18px !important; border-radius: 18px !important;
    background: var(--volt) !important; color: var(--ink) !important; display: inline-flex !important; align-items: center; gap: 10px;
    box-shadow: 0 2px 4px rgba(11,11,12,.15), 0 10px 24px -10px rgba(11,11,12,.45) !important; text-decoration: none !important; }
  .floating-action-buttons a.button.compose:before { color: var(--ink) !important; font-size: 18px; margin: 0 !important; position: static !important; }
  .floating-action-buttons a.button.compose .inner { display: inline !important; position: static !important; width: auto !important; height: auto !important;
    clip: auto !important; overflow: visible !important; font-weight: 700; font-size: 15px !important; color: var(--ink) !important; }
  .floating-action-buttons a.button.compose .inner:after { content: ""; }

  /* Lista: aire a la derecha para la fecha */
  #messagelist td.subject { padding-right: 14px !important; }
  #layout-list .header .header-title { font-size: 17px; }
}
@media screen and (max-width: 768px) { #message-header { padding: 14px 16px 12px !important; } #message-content .message-part, #messagebody { padding: 6px 16px 20px !important; } #message-header .subject { font-size: 20px !important; } }

/* Selector de idioma en el login */
.on-form { position: relative; }
.on-login-lang { position: absolute; top: 20px; right: 20px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid #dddbd3; background: #fff; }
.on-login-lang button { appearance: none; border: 0; background: none; color: #0b0b0c; font: 700 12px/1 "Poppins", sans-serif; min-width: 36px; min-height: 30px; padding: 0 8px; border-radius: 999px; cursor: pointer; opacity: .6; }
.on-login-lang button:hover { opacity: 1; }
.on-login-lang button[aria-pressed="true"] { opacity: 1; background: #c8ff2e; }
@media (max-width: 768px) { .on-login-lang { position: static; align-self: flex-end; margin-bottom: 12px; } }

/* ---------- Celular: hora completa, etiquetas sin cortar, títulos y botones consistentes ---------- */
@media (max-width: 768px) {
  #layout-sidebar .header .header-title { font-size: 17px; font-weight: 700; color: var(--ink); }
  #messagelist td.subject span.date { width: auto !important; min-width: 4.8em; max-width: none !important; overflow: visible !important; white-space: nowrap; text-align: right; }
  #compose-headers .form-group > label, #compose-content .form-group > label.col-form-label {
    flex: 0 0 6.4rem !important; max-width: 6.4rem !important; hyphens: none; -webkit-hyphens: none; word-break: keep-all; overflow-wrap: normal; white-space: nowrap; }
  .floating-action-buttons a.button.create { background: var(--volt) !important; color: var(--ink) !important; border: 0 !important; }
  .floating-action-buttons a.button.create:before { color: var(--ink) !important; }
}
@media (max-width: 768px) {
  #compose-headers .form-group > label + div, #compose-headers .form-group > div.col-10, #compose-headers .form-group > div[class*="col-"] { flex: 1 1 100% !important; max-width: 100% !important; }
}