/* ==========================================================================
   Walter Araica — capa de marca sobre el skin Elastic de Roundcube.
   Paleta y tipografía del brandbook (marca/BRANDBOOK.md).

   Regla de las dos superficies: Ceniza = impacto, Papel = lectura.
   Cada acento tiene DOS valores; sobre papel va el apagado (Brasa #A83716),
   sobre ceniza el vivo (Brasa #E2542A). Confundirlos rompe el contraste.

   Se fuerza la superficie clara con !important a propósito: Elastic trae su
   propio modo oscuro por prefers-color-scheme y no coincide con la paleta.
   ========================================================================== */

@font-face{
  font-family:'Plex WA';
  src:url('../fonts/plex-sans-var.woff2') format('woff2');
  font-weight:400 600;font-stretch:75% 100%;font-display:swap;font-style:normal;
}
@font-face{
  font-family:'Plex WA Mono';
  src:url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight:500;font-display:swap;font-style:normal;
}

:root{
  --wa-ceniza:#14120F;
  --wa-papel:#F0EADC;
  --wa-hueso:#F7F3EA;
  --wa-tinta:#17150F;
  --wa-gris:#4C463B;
  --wa-brasa:#A83716;      /* acento sobre superficie CLARA */
  --wa-brasa-viva:#E2542A; /* acento sobre superficie OSCURA */
  --wa-lago:#155C5E;
}

html,body,input,textarea,select,button,.propform,
#layout,#layout > div,.listing,.header{
  font-family:'Plex WA',ui-sans-serif,system-ui,sans-serif;
}
.messagelist td.size,.messagelist td.date,time,.size,.date{
  font-family:'Plex WA Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}

/* ============ LOGIN ============
   Superficie de IMPACTO (ceniza) a pantalla completa con el logo en negativo;
   el formulario, que es lectura y escritura, va sobre PAPEL. Es la regla de
   las dos superficies del brandbook aplicada literalmente.
   ============================================================== */
body.task-login,
html.dark-mode body.task-login,
body.task-login #layout,
html.dark-mode body.task-login #layout{
  background:var(--wa-ceniza)!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
body.task-login #layout-content,
html.dark-mode body.task-login #layout-content{
  background:var(--wa-ceniza)!important;
  color:var(--wa-hueso)!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:auto!important;
  max-width:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:24px!important;
}
body.task-login #layout-content #logo{
  display:block;
  width:min(300px,72vw);height:auto;
  margin:0 0 30px!important;
}
body.task-login #login-form{
  width:min(400px,100%);
  background:var(--wa-papel)!important;
  border:1px solid rgba(23,21,15,.22)!important;
  border-top:3px solid var(--wa-brasa)!important;   /* filo de brasa: el sello */
  border-radius:2px;
  box-shadow:0 20px 56px rgba(0,0,0,.55);
  padding:28px 26px 24px;
  margin:0!important;
  color:var(--wa-tinta)!important;
}
body.task-login #login-form input,
body.task-login #login-form input.form-control,
html.dark-mode body.task-login #login-form input,
html.dark-mode body.task-login #login-form input.form-control{
  background:var(--wa-hueso)!important;
  border:1px solid rgba(23,21,15,.30)!important;
  border-radius:2px!important;
  color:var(--wa-tinta)!important;
}
body.task-login #login-form input::placeholder{color:#8A8175!important}
body.task-login #login-form .input-group-text,
html.dark-mode body.task-login #login-form .input-group-text{
  background:rgba(23,21,15,.07)!important;
  border:1px solid rgba(23,21,15,.30)!important;
  border-right:0!important;
  color:var(--wa-gris)!important;
  border-radius:2px 0 0 2px!important;
}
body.task-login #login-form input:focus{
  border-color:var(--wa-brasa)!important;
  box-shadow:0 0 0 2px rgba(168,55,22,.22)!important;
}
body.task-login label,
html.dark-mode body.task-login label{color:var(--wa-gris)!important}
body.task-login #login-footer,
html.dark-mode body.task-login #login-footer{
  color:var(--wa-gris)!important;background:transparent!important;
  margin-top:14px;font-size:.85em;
}

/* ============ Botones de acción: brasa apagada sobre papel ============ */
button.btn.btn-primary,
.btn.btn-primary,
#login-form button.btn-primary,
#rcmloginsubmit,
button.mainaction,
input.button.mainaction{
  background:var(--wa-brasa)!important;
  border-color:var(--wa-brasa)!important;
  color:var(--wa-hueso)!important;
  border-radius:2px!important;
  font-weight:600;letter-spacing:.02em;
  text-shadow:none!important;
}
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
#rcmloginsubmit:hover,
button.mainaction:hover{
  background:#8d2d12!important;border-color:#8d2d12!important;
}

/* ============ Aplicación: barra de tareas en ceniza ============ */
#layout-menu,#taskmenu{background:var(--wa-ceniza)!important}
#taskmenu a{color:#9C948A!important}
#taskmenu a:hover{color:var(--wa-hueso)!important}
#taskmenu a.selected,#taskmenu a.selected:hover{
  color:var(--wa-brasa-viva)!important;              /* acento VIVO sobre ceniza */
  box-shadow:inset 3px 0 0 var(--wa-brasa-viva)!important;
}
#taskmenu a.logout:hover{color:var(--wa-brasa-viva)!important}
#layout-menu .popover-header,#layout-menu .menu-header{color:var(--wa-hueso)!important}

/* ============ Superficies de lectura ============ */
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content{background:var(--wa-hueso)!important}
#layout-sidebar .header,#layout-list .header,#layout-content .header,.header{
  background:var(--wa-papel)!important;
  border-bottom:1px solid rgba(23,21,15,.14)!important;
  color:var(--wa-tinta)!important;
}
.header .header-title{color:var(--wa-tinta)!important;font-weight:600}

a{color:var(--wa-lago)}
a:hover{color:var(--wa-brasa)}
.listing li.selected,.listing tr.selected,.messagelist tr.selected td{
  background:rgba(168,55,22,.10)!important;color:var(--wa-tinta)!important;
}
.listing li.selected>a,.messagelist tr.selected td a{color:var(--wa-tinta)!important}
.messagelist tr.unread td.subject{font-weight:600;color:var(--wa-tinta)}

input:focus,textarea:focus,select:focus{
  border-color:var(--wa-brasa)!important;
  box-shadow:0 0 0 2px rgba(168,55,22,.18)!important;
}

@media (max-width:480px){
  body.task-login #layout-content{margin:0 12px;padding:26px 20px 24px!important}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   Elastic activa su modo oscuro añadiendo .dark-mode a <html> (por cookie o
   por preferencia del sistema). Su paleta oscura no es la de la marca, así
   que se neutraliza: en un correo con identidad, la marca manda sobre la
   preferencia del navegador. Se repiten los selectores prefijados porque
   los de Elastic ganan especificidad con el .dark-mode delante.
   ========================================================================== */
html.dark-mode body:not(.task-login){
  background:var(--wa-hueso)!important;color:var(--wa-tinta)!important;
}
html.dark-mode body.task-login #login-form input,
html.dark-mode body.task-login #login-form input.form-control{
  background:var(--wa-hueso)!important;color:var(--wa-tinta)!important;
  border:1px solid rgba(23,21,15,.30)!important;
}
html.dark-mode body.task-login #login-form .input-group-text{
  background:rgba(23,21,15,.07)!important;color:var(--wa-gris)!important;
  border:1px solid rgba(23,21,15,.30)!important;border-right:0!important;
}
html.dark-mode body.task-login label{color:var(--wa-gris)!important}
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content{background:var(--wa-hueso)!important}
html.dark-mode .header{background:var(--wa-papel)!important;color:var(--wa-tinta)!important}
html.dark-mode #layout-menu,
html.dark-mode #taskmenu{background:var(--wa-ceniza)!important}
html.dark-mode button.btn.btn-primary,
html.dark-mode .btn.btn-primary,
html.dark-mode #rcmloginsubmit,
html.dark-mode button.mainaction{
  background:var(--wa-brasa)!important;border-color:var(--wa-brasa)!important;
  color:var(--wa-hueso)!important;
}
html.dark-mode .messagelist tr td,
html.dark-mode .listing li,
html.dark-mode .listing tr td{color:var(--wa-tinta)!important}