/* =============================================================================
   OLO Correo — sistema de diseño global (skin "olo", hijo de Elastic)
   -----------------------------------------------------------------------------
   Este archivo es ÚNICO para todos los clientes. La marca de cada cliente entra
   solo por variables CSS, definidas en skins/olo/tenants/<slug>/tenant.css,
   que se carga después de este archivo y sobrescribe los valores de :root.
   Nunca agregar reglas por cliente aquí ni en tenant.css: solo variables.
   ============================================================================= */

/* ---------- 1. Tokens (valores por defecto = marca OLO) ---------- */
:root {
  --olo-marca:          #0b5fd1;   /* color principal del cliente             */
  --olo-marca-oscuro:   #0a2f6e;   /* variante oscura (barra lateral, fondo)  */
  --olo-acento:         #f7941d;   /* acento (botón Redactar, badges)         */
  --olo-marca-texto:    #ffffff;   /* texto sobre el color principal          */
  --olo-panel-fondo:    #f3f6fb;   /* fondo del panel de acceso               */
  --olo-tarjeta:        #ffffff;
  --olo-texto:          #1a2430;
  --olo-texto-suave:    #5c6b7a;
  --olo-borde:          #e2e8f0;
  --olo-radio:          16px;
  --olo-radio-sm:       10px;
  --olo-sombra:         0 24px 60px -24px rgba(10, 47, 110, .35), 0 2px 6px rgba(10, 47, 110, .06);
  --olo-fuente:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --olo-brand-ancho:    54%;       /* ancho del panel de marca en escritorio  */
}

/* ---------- 2. Pantalla de acceso (login) ---------- */
.task-login #layout-content.olo-login {
  display: flex;
  flex-direction: row;
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  font-family: var(--olo-fuente);
  background: var(--olo-panel-fondo);
}

/* Panel de marca */
.olo-brand {
  position: relative;
  flex: 0 0 var(--olo-brand-ancho);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  color: #fff;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--olo-marca) 70%, #fff) 0%, transparent 55%),
    linear-gradient(160deg, var(--olo-marca-oscuro) 0%, var(--olo-marca) 100%);
  isolation: isolate;
}
.olo-brand::before {              /* trama sutil de puntos */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
  pointer-events: none;
  z-index: 0;
}
.olo-brand-bg {                   /* foto del cliente (opcional) */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .28;
  filter: saturate(.8);
  z-index: 0;
}
.olo-brand-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,40,.10) 0%, rgba(10,20,40,.55) 100%);
  z-index: 0;
}
.olo-brand-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
}
.olo-brand-glow-a { width: 40vw; height: 40vw; right: -16vw; bottom: -20vw; background: var(--olo-acento); opacity: .28; }
.olo-brand-glow-b { width: 28vw; height: 28vw; left: -10vw; top: 30%; background: #fff; opacity: .12; }

.olo-brand-inner { position: relative; z-index: 1; max-width: 560px; margin: auto 0; padding: 24px 0; }
.olo-brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  margin-bottom: 28px;
  background: rgba(255,255,255,.94);
  border-radius: var(--olo-radio);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
}
.task-login .olo-brand-logo,
.task-login #logo.olo-brand-logo {        /* anula el posicionamiento de Elastic */
  position: static;
  top: auto;
  display: block;
  max-height: 96px;
  max-width: 260px;
  width: auto;
}
.olo-brand-kicker {
  margin: 0 0 6px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.olo-brand-name {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.01em;
}
.olo-brand-lema {
  margin: 0 0 28px;
  font-size: 1.06rem;
  line-height: 1.5;
  opacity: .9;
  max-width: 44ch;
}
.olo-brand-feats {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
  font-size: .95rem;
}
.olo-brand-feats li { display: flex; align-items: center; gap: 10px; opacity: .92; }
.olo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--olo-acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--olo-acento) 30%, transparent);
  flex: 0 0 10px;
}
.olo-brand-foot {
  position: relative; z-index: 1;
  font-size: .8rem;
  opacity: .72;
}

/* Panel de acceso */
.olo-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px);
  gap: 22px;
}
.olo-card {
  width: 100%;
  max-width: 440px;
  background: var(--olo-tarjeta);
  border: 1px solid var(--olo-borde);
  border-radius: var(--olo-radio);
  box-shadow: var(--olo-sombra);
  padding: clamp(24px, 3vw, 40px);
  color: var(--olo-texto);
}
.olo-card-head { margin-bottom: 22px; }
.olo-kicker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olo-acento);
  margin-bottom: 8px;
}
.olo-card-title {
  margin: 0 0 6px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--olo-texto);
}
.olo-card-sub { margin: 0; color: var(--olo-texto-suave); font-size: .95rem; }
.olo-card-sub strong { color: var(--olo-marca); font-weight: 600; }

/* Formulario: reutiliza los componentes de Elastic (input-group, btn) */
.olo-login #login-form {
  position: static;
  top: auto;
  width: 100%;
  max-width: none;
  margin: 0;
}
.olo-login #login-form .input-group-text {
  background: var(--olo-panel-fondo);
  border-color: var(--olo-borde);
  color: var(--olo-texto-suave);
  border-radius: var(--olo-radio-sm) 0 0 var(--olo-radio-sm);
}
.olo-login #login-form .form-control {
  border-color: var(--olo-borde);
  border-radius: 0 var(--olo-radio-sm) var(--olo-radio-sm) 0;
  min-height: 3rem;
}
.olo-login #login-form .form-control:focus {
  border-color: var(--olo-marca);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--olo-marca) 22%, transparent);
}
.olo-login #rcmloginsubmit,
.olo-login #rcmloginsubmit.btn-primary {
  margin-top: 6px;
  min-height: 3rem;
  border-radius: var(--olo-radio-sm);
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--olo-marca);
  border-color: var(--olo-marca);
  color: var(--olo-marca-texto);
  box-shadow: 0 10px 24px -12px var(--olo-marca);
  transition: transform .12s ease, filter .12s ease;
}
.olo-login #rcmloginsubmit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.olo-login #rcmloginsubmit:active { transform: translateY(0); }

.olo-login #login-footer {
  margin-top: 18px;
  text-align: center;
  font-size: .9rem;
  color: var(--olo-texto-suave);
}
.olo-login #login-footer > div { background: var(--olo-panel-fondo); }
.olo-help { color: var(--olo-marca); text-decoration: none; }
.olo-help:hover { text-decoration: underline; }

.olo-provider {
  font-size: .8rem;
  color: var(--olo-texto-suave);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.olo-provider strong { color: var(--olo-texto); font-weight: 600; }

/* Mensajes de error/aviso de Roundcube sobre el login */
.task-login #messagestack { z-index: 10; }

/* Responsive: el panel de marca pasa a ser cabecera */
@media screen and (max-width: 900px) {
  .task-login #layout-content.olo-login { flex-direction: column; }
  .olo-brand {
    flex: 0 0 auto;
    padding: 26px 22px 28px;
    justify-content: flex-start;
  }
  .olo-brand-feats, .olo-brand-foot, .olo-brand-glow-b { display: none; }
  .olo-brand-logo-wrap { padding: 12px 16px; margin-bottom: 16px; }
  .task-login #logo.olo-brand-logo { max-height: 64px; }
  .olo-brand-name { font-size: 1.4rem; }
  .olo-brand-lema { font-size: .95rem; margin-bottom: 0; }
  .olo-panel { justify-content: flex-start; padding: 0 16px 28px; margin-top: -26px; gap: 16px; }
  .olo-brand-inner { margin: 0; padding: 0 0 18px; }
  .olo-card { border-radius: var(--olo-radio); }
}

/* Modo oscuro (Elastic lo activa con html.dark-mode) */
html.dark-mode .task-login #layout-content.olo-login { background: #161b1d; }
html.dark-mode .olo-card { background: #21292c; border-color: #2c373b; color: #e2e7e9; }
html.dark-mode .olo-card-title { color: #e2e7e9; }
html.dark-mode .olo-card-sub, html.dark-mode .olo-provider { color: #9fb0bb; }
html.dark-mode .olo-provider strong { color: #e2e7e9; }
html.dark-mode .olo-login #login-form .input-group-text { background: #1b2225; border-color: #2c373b; }
html.dark-mode .olo-login #login-form .form-control { border-color: #2c373b; }

/* ---------- 3. Aplicación: acentos de marca sobre Elastic ---------- */

/* Barra de tareas lateral */
#layout-menu,
#layout-menu .popover-header,
#taskmenu .special-buttons { background-color: var(--olo-marca-oscuro) !important; }
#taskmenu a.selected,
#taskmenu a.selected:hover { background-color: color-mix(in srgb, var(--olo-marca) 85%, #000) !important; }
#taskmenu a:hover { background-color: color-mix(in srgb, var(--olo-marca-oscuro) 80%, #fff) !important; }
#taskmenu .action-buttons a { color: var(--olo-acento); }
#taskmenu .action-buttons a:hover { color: var(--olo-acento); background: color-mix(in srgb, var(--olo-marca-oscuro) 80%, #fff); }
#layout-menu .popover-header #logo { max-height: 32px; }
#rcmdraglayer { background-color: var(--olo-marca-oscuro); }

/* Cabeceras de columnas: filete de marca */
#layout-content > .header,
#layout-list > .header { box-shadow: inset 0 3px 0 var(--olo-marca); }
#layout-content > .header > .header-title,
#layout-list > .header > .header-title { color: var(--olo-marca-oscuro); }

/* Botones y enlaces */
.btn-primary,
.btn-primary:focus,
div.tox .tox-dialog__footer .tox-button {
  background: var(--olo-marca);
  border-color: var(--olo-marca);
  color: var(--olo-marca-texto);
}
.btn-primary:hover { background: color-mix(in srgb, var(--olo-marca) 90%, #000); border-color: color-mix(in srgb, var(--olo-marca) 85%, #000); }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--olo-marca) 35%, transparent); }
.btn-primary.disabled, .btn-primary:disabled { background: var(--olo-marca); border-color: var(--olo-marca); }
a, .btn-link { color: var(--olo-marca); }
a:hover, .btn-link:hover { color: var(--olo-marca-oscuro); }
.floating-action-buttons a.button { background: var(--olo-acento); }

/* Campos con foco */
.form-control:focus,
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label,
div.tox.focused {
  border-color: var(--olo-marca) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--olo-marca) 22%, transparent) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--olo-marca); background-color: var(--olo-marca); }

/* Listas, carpetas, menús */
.folderlist li.mailbox.recent > a > .unreadcount { background: var(--olo-acento); color: #fff; }
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a { background-color: color-mix(in srgb, var(--olo-marca) 10%, #fff); }
.messagelist tr.selected td { background-color: color-mix(in srgb, var(--olo-marca) 10%, #fff); }
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active { background-color: var(--olo-marca) !important; color: #fff; }
#messagestack .alert-info.information { background-color: var(--olo-marca); }
.quota-widget .value { background-color: var(--olo-marca); }
.ui-datepicker a.ui-state-active { background: var(--olo-marca) !important; }

/* Modo oscuro de la aplicación: mantiene la barra con la marca */
html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #taskmenu .special-buttons { background-color: color-mix(in srgb, var(--olo-marca-oscuro) 70%, #000) !important; }
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a { background-color: color-mix(in srgb, var(--olo-marca) 30%, #1f2a2f); color: #fff; }