/* ============================================================================
   BLACKNODE MAIL — piel de Roundcube
   Porta el lenguaje visual de GitNode (theme-blacknode.css) al DOM de Elastic.
   Elastic usa clases distintas a Forgejo, asi que esto NO es una copia de
   reglas: es la misma gramatica visual traducida.

   Gramatica: esquinas a 0, sombras duras desplazadas, mayusculas en mono,
   gama steel de fondo, naranja como acento estructural y cian como enlace.
   ========================================================================= */

@import url("../../elastic/styles/styles.min.css");

/* === 1 · FUENTES — auto-hospedadas, igual que GitNode ====================== */
/* Ni una peticion a fonts.googleapis.com: privacidad y funciona sin salida. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-400.woff2') format('woff2')}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-400.woff2') format('woff2')}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/vt323-400.woff2') format('woff2')}

/* === 2 · TOKENS — identicos a los de GitNode ============================== */
:root{
  --steel-900:#10161d; --steel-850:#131a21; --steel-800:#171e26;
  --steel-750:#1d262f; --steel-700:#242d38; --steel-650:#2b3642;
  --steel-600:#374351; --steel-550:#445161; --steel-500:#515f70;
  --steel-450:#5f6e80; --steel-400:#6d7d8f; --steel-350:#7c8c9f;
  --steel-300:#8c9caf; --steel-250:#9dadc0; --steel-200:#aebed0;
  --steel-150:#c0cfe0; --steel-100:#d2e0f0;

  --bn-primary:#fb923c;
  --bn-primary-strong:#f97316;
  --bn-primary-deep:#9a3412;
  --bn-accent:#37B6FF;

  --bn-body:var(--steel-800);
  --bn-nav:var(--steel-900);
  --bn-box:var(--steel-750);
  --bn-box-header:var(--steel-700);
  --bn-input:var(--steel-650);
  --bn-border:var(--steel-550);
  --bn-hover:var(--steel-600);
  --bn-active:var(--steel-650);
  --bn-text:var(--steel-100);
  --bn-text-dim:var(--steel-200);

  --bn-mono:'Share Tech Mono',ui-monospace,monospace;
  --bn-head:'Space Grotesk',sans-serif;
  --bn-body-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bn-logo-font:'Press Start 2P',monospace;
}

/* === 3 · SUPERFICIE Y FONDO AMBIENTAL ===================================== */
html,body{background:var(--bn-body)!important;color:var(--bn-text)!important;
  font-family:var(--bn-body-font)!important;-webkit-font-smoothing:antialiased}

/* Dos capas fijas detras de todo: halo y rejilla de puntos. Suaves a
   proposito — en un gestor de correo el contenido manda sobre el adorno. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(20,123,235,.06) 0%,rgba(0,0,0,0) 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;
  background-image:radial-gradient(rgba(55,182,255,.2) 1px,transparent 1px);
  background-size:22px 22px}

/* === 4 · TIPOGRAFIA ======================================================= */
h1,h2,h3,h4,h5,.header-title{font-family:var(--bn-head)!important;letter-spacing:-.5px}
a{color:var(--bn-accent)}
a:hover{color:var(--bn-accent);text-decoration:underline}

/* === 5 · PANELES ========================================================== */
#layout > div,
#layout-sidebar,#layout-list,#layout-content{background:var(--bn-body)!important;
  border-color:var(--bn-border)!important}
#layout-sidebar{background:var(--steel-850)!important}
#layout-list{background:var(--bn-box)!important}

#layout > div > .header,
.header{background:var(--bn-box-header)!important;color:var(--bn-text)!important;
  border-bottom:1px solid var(--bn-border)!important;border-radius:0!important;
  font-family:var(--bn-mono)!important;text-transform:uppercase;letter-spacing:1px}
#layout > div > .header a.button,.header a.button{color:var(--bn-text-dim)!important}

/* === 6 · BARRA DE TAREAS ================================================== */
/* El equivalente al navbar de GitNode: fondo mas oscuro y filo naranja. */
#taskmenu{background:var(--bn-nav)!important;border-right:2px solid var(--bn-primary)!important;
  box-shadow:0 0 25px rgba(20,123,235,.35)}
#taskmenu a{color:var(--steel-350)!important;border-radius:0!important;
  font-family:var(--bn-mono)!important;text-transform:uppercase;letter-spacing:.5px}
#taskmenu a:hover{background:var(--bn-hover)!important;color:var(--bn-accent)!important}
#taskmenu a.selected{background:var(--bn-active)!important;color:var(--bn-accent)!important;
  box-shadow:inset 3px 0 0 var(--bn-primary)}
#taskmenu a.logout:hover{color:var(--bn-primary)!important}

/* === 7 · LISTAS: carpetas y mensajes ====================================== */
.listing,.listing li,.listing tr,table.listing{background:transparent!important;
  border-radius:0!important;color:var(--bn-text)!important}
.listing li a,.listing tr td{color:var(--bn-text)!important;font-family:var(--bn-body-font)}
.listing li:hover,.listing tr:hover{background:var(--bn-hover)!important}
.listing li.selected,.listing tr.selected,
.listing li.selected > a,.listing tr.selected td{background:var(--bn-active)!important;
  color:var(--bn-accent)!important;box-shadow:inset 3px 0 0 var(--bn-primary)}

/* Sin leer: lo unico que lleva naranja en la lista, para que destaque solo. */
.messagelist tr.unread td.subject,.messagelist li.unread .subject{
  font-weight:600;color:#fff!important}
.messagelist tr.unread td.threads::before,
.messagelist tr.flagged td.flag span.flagged{color:var(--bn-primary)!important}
.messagelist td.subject .date,.messagelist .date{font-family:var(--bn-mono)!important;
  color:var(--steel-350)!important}
.messagelist td.fromto,.messagelist .fromto{font-family:var(--bn-body-font)}

/* === 8 · BOTONES ========================================================== */
/* Forma y tipografia, NO color semantico: los verdes/rojos de aviso siguen
   siendo verdes y rojos. Solo se cuadran y se pasan a mono en mayusculas. */
.btn,a.button,button.btn,input.button{border-radius:0!important;
  font-family:var(--bn-mono)!important;text-transform:uppercase;letter-spacing:1px;
  border:1px solid var(--bn-border)!important}
.btn-primary,.primary,button.btn.btn-primary{background:var(--bn-primary)!important;
  color:#000!important;border-color:var(--bn-primary)!important;
  box-shadow:2px 2px 0 var(--bn-primary-deep)}
.btn-primary:hover,button.btn.btn-primary:hover{background:var(--bn-primary-strong)!important;
  box-shadow:0 0 15px rgba(55,182,255,.5);transform:translate(-1px,-1px)}
.btn-secondary,.btn.secondary{background:var(--steel-700)!important;
  color:var(--bn-text)!important}
.btn-secondary:hover{background:var(--bn-hover)!important}

.toolbar,#toolbar-menu{background:var(--bn-box-header)!important;
  border-bottom:1px solid var(--bn-border)!important}
.toolbar a.button{color:var(--bn-text-dim)!important;border:0!important}
.toolbar a.button:hover{color:var(--bn-accent)!important;background:var(--bn-hover)!important}

/* === 9 · FORMULARIOS ====================================================== */
input,textarea,select,.form-control,
input.form-control,select.form-control,textarea.form-control{
  border-radius:0!important;background:var(--bn-input)!important;
  color:var(--bn-text)!important;border:1px solid var(--bn-border)!important;
  color-scheme:dark}
input:hover,.form-control:hover{border-color:var(--steel-450)!important}
input:focus,textarea:focus,select:focus,.form-control:focus{
  border-color:var(--bn-accent)!important;box-shadow:0 0 0 1px var(--bn-accent)!important}
::placeholder{color:var(--steel-400)!important}
label,.propform label{font-family:var(--bn-mono)!important;color:var(--bn-text-dim)!important;
  letter-spacing:1px}
/* Chrome pinta el autocompletado de amarillo: se neutraliza. */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--bn-input) inset!important;
  -webkit-text-fill-color:var(--bn-text)!important;
  transition:background-color 5000s ease-in-out 0s}

/* === 10 · LOGIN — la pantalla que mas se ve ============================== */
/* Traduccion de .page-content.user.signin de GitNode: tarjeta cuadrada, filo
   naranja de 2px y sombra dura desplazada 12px.

   Los campos los inyecta JavaScript y #login-footer vive DENTRO del form, asi
   que no se puede colgar nada del formulario por abajo. El logo se pinta como
   fondo del ::before del contenedor junto al rotulo (un solo bloque, sin
   depender de "order"), y el subtitulo va DENTRO de la tarjeta con el mismo
   tratamiento que el h2 de GitNode: cian, mayusculas y filo naranja debajo. */
#layout-content.no-navbar{
  background:transparent!important;display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem}

/* El <img> del logo estorba: lo pintamos nosotros como fondo del rotulo. */
#layout-content.no-navbar #logo{display:none!important}

#layout-content.no-navbar::before{
  content:"BLACKNODE";
  display:block;text-align:center;
  padding-top:118px;margin:0 0 1.5rem;flex:0 0 auto;
  background:url("../images/logo.svg") center top/104px 104px no-repeat;
  filter:drop-shadow(0 0 22px rgba(55,182,255,.35));
  font-family:var(--bn-logo-font);font-size:1.35rem;color:#fff;
  text-transform:uppercase;letter-spacing:1px;line-height:1.4}

#layout-content.no-navbar #login-form{
  margin:0!important;flex:0 0 auto;
  background:var(--bn-box)!important;border:2px solid var(--bn-primary)!important;
  border-radius:0!important;padding:1.6rem 1.9rem 1.3rem!important;
  box-shadow:12px 12px 0 rgba(0,0,0,.8),0 0 30px rgba(20,123,235,.25)!important;
  max-width:400px;width:100%}

/* El "h2" de GitNode, pero generado: cian, mayusculas, filo naranja. */
#login-form::before{content:"// ACCESO SEGURO";display:block;
  font-family:var(--bn-mono);font-size:.9rem;color:var(--bn-accent);
  text-transform:uppercase;letter-spacing:3px;
  border-bottom:2px solid var(--bn-primary);
  padding-bottom:.7rem;margin-bottom:1.5rem}

#login-form .propform,#login-form table,#login-form td{background:transparent!important;
  border:0!important}
#login-form input.form-control{background:var(--bn-input)!important}

/* Los iconos de usuario y candado vienen con fondo claro de elastic. */
#login-form .input-group-text,#login-form .input-group-prepend .input-group-text,
#login-form .input-group-append .input-group-text{
  background:var(--steel-700)!important;color:var(--bn-accent)!important;
  border:1px solid var(--bn-border)!important;border-radius:0!important}
#login-form .input-group{margin-bottom:.85rem}

#login-form .btn-primary,#login-form button[type=submit],#login-form input[type=submit]{
  width:100%;margin-top:.9rem;padding:.75rem!important;font-size:.95rem}

#login-footer{font-family:var(--bn-mono)!important;color:var(--steel-500)!important;
  text-align:center;font-size:.7rem;letter-spacing:1px;margin-top:1.1rem}

/* === 11 · MENSAJE ABIERTO ================================================= */
#messageheader,.messageheader{background:var(--bn-box-header)!important;
  border:1px solid var(--bn-border)!important;border-radius:0!important}
#messageheader .subject,.messageheader .subject{font-family:var(--bn-head)!important;
  color:#fff!important}
#messagebody,.messagebody{background:var(--bn-box)!important;color:var(--bn-text)!important}
pre,code,.messagebody pre{font-family:var(--bn-mono)!important;
  background:var(--steel-850)!important;border-radius:0!important}

.popupmenu,.popover,.ui-dialog,.dialog{background:var(--steel-700)!important;
  border:1px solid var(--bn-border)!important;border-radius:0!important;
  box-shadow:8px 8px 0 rgba(0,0,0,.6)!important}
.popupmenu li a:hover,.popover li a:hover{background:var(--bn-hover)!important;
  color:var(--bn-accent)!important}

/* === 12 · ACCESIBILIDAD =================================================== */
/* Foco visible por teclado, en cian y sin redondear. Mismo criterio que
   GitNode: :focus-visible para no molestar al que usa raton. */
:focus-visible{outline:2px solid var(--bn-accent)!important;outline-offset:2px;
  border-radius:0!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important}
  body::before,body::after{display:none}
}

/* === 13 · CORRECCIONES DE DENSIDAD ======================================= */
/* Las mayusculas con letter-spacing de la seccion 6 y 8 ensanchaban las
   etiquetas de la barra de tareas y de la barra de herramientas, y elastic
   las truncaba ("SELECCI...", "CONFIGURA..."). Se conserva la mono, que es
   lo que da el aire de GitNode, pero sin espaciado y un punto mas pequena.
   La legibilidad manda sobre el adorno en la parte que se usa a diario. */
#taskmenu a,#taskmenu a span,
.toolbar a.button,.toolbar a.button span,
.toolbar .btn,.toolbar .btn span{
  letter-spacing:0!important;font-size:.7rem!important;
  text-transform:uppercase}

#taskmenu a{padding-left:0;padding-right:0}
#taskmenu a span.inner{overflow:visible;text-overflow:clip;white-space:nowrap}

/* Cabeceras de panel: ahi si hay sitio de sobra para el espaciado. */
#layout > div > .header,.header{font-size:.82rem;letter-spacing:1px}

/* La columna de contenido usaba el mismo negro que el fondo y se perdia
   el limite entre paneles. */
#layout-content{background:var(--steel-850)!important}
#layout-list{border-right:1px solid var(--bn-border)!important}

/* Marca de agua del panel vacio: que no compita con el contenido. */
#layout-content .watermark,.watermark img{opacity:.06}

/* Elastic empuja el formulario con "position:relative; top:180px" para dejarlo
   a media pagina. Con el contenedor ya centrado por flex, ese desplazamiento
   abria un hueco de 180px entre el rotulo y la tarjeta. Medido con Playwright,
   no adivinado: los margenes no lo tocaban porque no era un margen. */
#layout-content.no-navbar #login-form{position:relative;top:0!important}
#layout-content.no-navbar::after{display:none!important;content:none!important}