/* =========================
   Variables & Base
   ========================= */
:root{
  --bg:#0b1020;
  --surface:#101832;
  --card:#141a2f;
  --text:#e7eaf6;
  --muted:#aab1c6;
  --accent:#335bff;           /* color principal de botones */
  --accent-weak:#6ea8fe;      /* acentos suaves (bordes hover) */
  --border:#263055;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   Layout principal
   ========================= */
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; border-bottom:1px solid var(--border);
}
header h1 a{ color:var(--text); text-decoration:none; }
nav a{ color:var(--muted); margin-left:16px; text-decoration:none; }
nav a:hover{ color:var(--text); }

main{ max-width:980px; margin:24px auto; padding:0 16px; }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
h2{ margin-top:0; }

/* =========================
   Formularios & tablas
   ========================= */
label{ display:block; margin:8px 0; }
label input[type=text]{
  width:320px; max-width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0e1630;
  color:var(--text);
}
label input[type=text]:focus-visible{
  outline:2px solid var(--accent-weak);
  outline-offset:2px;
}

table{ width:100%; border-collapse:collapse; margin-top:12px; }
th,td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; }

.kv{ display:grid; grid-template-columns:200px 1fr; gap:8px 16px; }
.flash{ list-style:none; padding:0; margin:0 0 12px 0; }
.flash li{ background:#20305d; border:1px solid #2d3b6b; padding:8px 12px; border-radius:8px; }

.fieldset{
  margin:10px 0; border:1px solid var(--border); padding:10px; border-radius:8px;
}
.block{ display:block; margin:6px 0; }

.hint{ color:var(--muted); font-size:14px; margin-top:12px; }

/* =========================
   Tabs
   ========================= */
.tabs .tabbar{ display:flex; gap:8px; margin-bottom:12px; }
.tablink{
  padding:8px 12px; border-radius:10px;
  background:#1a2342; color:var(--text);
  text-decoration:none; border:1px solid var(--border);
}
.tablink.active{ background:#2a3563; }

/* =========================
   Botones
   ========================= */
button, .btn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  transition:transform .05s ease, opacity .15s ease;
}
button:hover, .btn:hover{ opacity:.95; }
button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent-weak);
  outline-offset:2px;
}
button:active, .btn:active{ transform:translateY(1px); }

.btn-outline{
  background:transparent;
  border:1px solid #3a4a7a;
  color:#dbe4ff;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
}
.link{
  background:transparent; border:none; color:#93a1ff; cursor:pointer;
}
.w-full{ width:100%; }

/* =========================
   Inputs de archivo ocultos
   ========================= */
.hidden-input{
  display:none !important;
  position:absolute !important;
  left:-99999px !important;
  width:0 !important; height:0 !important;
  opacity:0 !important; pointer-events:none !important;
}

/* =========================
   Dropzones
   ========================= */
.dropzone{
  border:2px dashed #2a3563;
  background:var(--surface);
  padding:22px;
  border-radius:12px;
  text-align:center;
  cursor:default;          /* el click lo gestiona el botón interno */
  margin:10px 0 14px 0;
}
.dropzone .sub{
  display:block; color:var(--muted); font-size:13px; margin:6px 0 10px;
}
.dropzone.over{
  background:#0d1a3a; border-color:var(--accent-weak);
  box-shadow:inset 0 0 0 2px rgba(110,168,254,.25);
}

/* Botón dentro de dropzone (coherente con botones globales) */
.dropzone .btn{ margin-top:8px; }

/* =========================
   Overlay de progreso
   ========================= */
.overlay{
  position:fixed; inset:0;
  background:rgba(4,8,20,.75);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.overlay-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 28px; width:420px; max-width:92vw;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  text-align:center;
}
.overlay-title{ font-size:20px; font-weight:700; margin-bottom:6px; }
.overlay-sub{ font-size:16px; margin-bottom:14px; }
.overlay-hint{ color:var(--muted); font-size:12px; margin-top:8px; }
.bar{ height:8px; background:#1d2544; border-radius:6px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); width:0%; transition:width .3s ease; }

/* =========================
   Modal selector Archivo/Carpeta
   ========================= */
.modal{
  position:fixed; inset:0;
  background:rgba(4,8,20,.7);
  display:flex; align-items:center; justify-content:center;
  z-index:10000;
}
.modal[hidden]{ display:none !important; }   /* clave: que no aparezca al cargar */
.modal-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  width:360px; max-width:92vw;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  text-align:center;
}
.modal-title{ font-size:18px; font-weight:700; margin-bottom:10px; }
.modal-actions{ display:grid; gap:10px; margin-top:6px; }

/* =========================
   Utilidades varias
   ========================= */
iframe{ background:#0e1630; border:1px solid var(--border); border-radius:12px; }
.actions{ margin-top:16px; display:flex; gap:12px; }
.file{ display:block; margin:16px 0; }







/* Layout de la página de acceso en una sola columna */
.auth-single{
  max-width: 740px;
  margin: 24px auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0 12px;
}
.auth-primary{}
.auth-cta .cta-head{ margin-bottom: 10px; }
.auth-cta .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Tipografías utilitarias */
.h3{ font-size: 18px; }
.h4{ font-size: 16px; margin: 0 0 6px 0; }
.muted.sm{ font-size: 13px; }

/* Botones “fantasma” ya definidos; por compatibilidad */
.btn-outline{
  background: transparent;
  border: 1px solid #3a4a7a;
  color: #dbe4ff;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

/* Separador fino */
.sep{ border:none; border-top:1px solid #263055; margin:12px 0; }

/* Mensajes/links dev */
.msg{ min-height:18px; }
.devhint{ margin-top:6px; font-size:12px; color:#9db3ff; word-break: break-all; }



/* ====== Login Neo-Glass ====== */
.auth-neo{
  min-height: calc(100vh - 140px);
  display: grid;
  gap: 18px;
  place-items: start center;
  padding: 24px 16px 48px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(110,168,254,.08), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(206,64,140,.08), transparent 60%);
}

.neo-card{
  width: min(520px, 96vw);
  background: linear-gradient(165deg, rgba(205,40,110,.25), rgba(40,50,130,.25));
  border: 1px solid rgba(120,140,200,.35);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  padding: 24px 22px 20px;
  color: var(--text);
}

.neo-card--flat{
  margin-top: -4px;
  background: linear-gradient(165deg, rgba(20,26,47,.8), rgba(20,26,47,.6));
}

.neo-card__header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}

.neo-avatar{
  width: 86px; height:86px;
  border-radius: 50%;
  background: radial-gradient(60px 60px at 50% 42%, rgba(255,255,255,.08), rgba(255,255,255,.02));
  display:grid; place-items:center;
  border: 1px solid rgba(140,160,210,.35);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.02);
}
.neo-avatar svg{
  width: 54px; height:54px;
  fill: rgba(230,235,255,.9);
  stroke: rgba(230,235,255,.9);
}

.neo-title{ margin: 6px 2px 0; font-size: 22px; font-weight: 800; letter-spacing:.2px; }
.neo-title.sm{ font-size: 18px; }
.neo-sub{ margin: 2px 2px 14px; color: var(--muted); font-size: 14px; }

.neo-form{ display:grid; gap:12px; }
.neo-row{ display:flex; align-items:center; gap:10px; background: rgba(12,18,40,.55); border:1px solid #263055; padding: 10px 12px; border-radius: 12px; }
.neo-ico{ width:22px; height:22px; display:grid; place-items:center; }
.neo-ico svg{ width:22px; height:22px; stroke: #dbe4ff; fill: none; opacity:.9; }

.neo-input{
  appearance:none; outline:none; border:none; flex:1;
  background: transparent; color: var(--text);
  font-size: 15px; padding: 6px 2px;
}
.neo-input::placeholder{ color: #9aa3c2; }

.neo-actions{ display:flex; align-items:center; gap:12px; margin-top: 2px; }
.neo-btn{
  background:#fff; color:#1b2244; border:none;
  padding: 10px 22px; border-radius: 999px; font-weight: 800;
  letter-spacing:.5px; cursor:pointer;
  box-shadow: 0 6px 20px rgba(255,255,255,.15);
}
.neo-btn:hover{ transform: translateY(-1px); }
.neo-btn:active{ transform: translateY(0); }

.neo-pill{
  border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor:pointer;
  background: rgba(255,255,255,.08); color:#e7eaf6; border:1px solid rgba(180,200,255,.35);
}
.neo-pill.ghost:hover{ background: rgba(255,255,255,.12); }

.neo-link{ color:#cbd6ff; text-decoration:none; font-style: italic; opacity:.9; }
.neo-link:hover{ opacity:1; text-decoration: underline; }

.neo-msg{ min-height: 18px; margin-top: 6px; color: var(--muted); font-size: 14px; }
.neo-dev{ font-size: 12px; color: #9db3ff; word-break: break-all; }
.neo-dev__hint a{ color: #bcd2ff; }

.w-full{ width:100%; }

/* REGISTER BAND */
.neo-register-band{
  width: min(520px, 96vw);
  border-radius: 16px;
  border: 1px solid rgba(120,140,200,.35);
  background: linear-gradient(135deg, rgba(40,55,128,.8), rgba(140,32,96,.75));
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 10px;
  transition: transform .12s ease, box-shadow .2s ease;
  outline: none;
}
.neo-register-band:focus-visible{ box-shadow: 0 12px 44px rgba(0,0,0,.45), 0 0 0 2px rgba(150,180,255,.35) inset; }
.neo-register-band:hover{ transform: translateY(-1px); }
.neo-register-band__content{
  display:flex; align-items:center; justify-content:space-between;
}
.neo-register-text{
  font-weight:900; letter-spacing:4px; font-size: 18px; color:#eaf0ff;
  margin-left:10px;
}
.neo-bubbles{ display:flex; gap:14px; margin-right:10px; }
.neo-bubbles span{
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(255,255,255,.2);
}
.auth-wrap {
  display: grid;
  gap: 18px;
  max-width: 880px;
  margin: 32px auto;
  padding: 0 12px;
}
.glass {
  background: radial-gradient(1200px 500px at 50% -200px, rgba(80,120,255,.18), rgba(255,255,255,.05) 70%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}
.auth-card {
  display: grid;
  grid-template-columns: 1fr;
  padding: 28px;
  gap: 18px;
}
.auth-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .4px;
}
.subtle { color: var(--muted); font-size: 13px; }
.row { display: grid; gap: 10px; }
.field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f1734;
  border: 1px solid #263055;
  border-radius: 12px;
  padding: 12px 14px;
}
.field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}
.actions { display: flex; gap: 10px; align-items: center; }
.btn-ghost {
  background: transparent;
  border: 1px solid #3a4a7a;
  color: #dbe4ff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
}
.right-hint { font-size: 13px; color: var(--muted); }
.ok { color: #6fff9a; font-weight: 600; }
.err { color: #ff6e6e; font-weight: 600; }

.neo-card--flat { overflow: hidden; }






/* Email input para usuarios Free en el formulario de crear lock */
#emailInput {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 16px auto;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #2a2a3c;
  border-radius: 6px;
  background: #181828;
  color: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

#emailInput:focus {
  border-color: #4f8cff;
  outline: none;
}

label[for="emailInput"] {
  display: block;
  text-align: left;
  margin-bottom: 8px;
  font-weight: 500;
  color: #bfc7e0;
}



/* ====== Legales / Modales ====== */
.zl-modal-bk{
  position:fixed; inset:0; background:#0008;
  display:none; align-items:center; justify-content:center; z-index:60;
}
.zl-modal-card{
  background:#121420; border:1px solid #283046; border-radius:14px;
  max-width:780px; width:92%; max-height:80vh; overflow:auto;
  box-shadow:0 10px 30px #0009;
}
.zl-modal-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #222a38;
}
.zl-modal-bd{ padding:18px 22px; color:#cdd3e0; }
.zl-xbtn{ background:transparent; border:0; color:#9aa3b2; font-size:20px; cursor:pointer; }

/* ====== Footer ====== */
.zl-footer{
  margin-top:40px;
  padding:22px 12px;
  border-top:1px solid #20283a;
  color:#aab1c6;
  display:flex;
  flex-direction:column;           /* centrado vertical */
  align-items:center;              /* centrado horizontal */
  justify-content:center;
  text-align:center;               /* texto centrado */
  gap:10px;
}
.zl-footer-links a{ color:#aab1c6; margin:0 10px; }
.zl-footer-links a:hover{ color:#fff; }

/* ====== Badge de entorno ====== */
.zl-env-badge{
  margin-left:10px; padding:2px 8px; border-radius:999px; font-size:.75rem; opacity:.85;
}
.zl-env-badge.live{ background:#2b1438; color:#ffb4f2; border:1px solid #5f2b79; }
.zl-env-badge.sandbox{ background:#15283a; color:#9ed0ff; border:1px solid #2c5577; }

.zl-footer small{ font-size:0.95rem; }

.zl-footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;          /* enlaces centrados */
}

/* Marca “By TheCavnaStudio” más grande y con énfasis */
.zl-brand{
  font-weight:800;
  color:#ffffff;
  letter-spacing:.2px;
  font-size:1.15rem;               /* más grande que el resto */
}

@media (min-width: 700px){
  .zl-brand{ font-size:1.25rem; }  /* un pelín más grande en desktop */
}



/* ===== Donaciones ===== */
.donate-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px 12px;
}
.donate-card{
  width:100%;
  max-width:640px;
  background: rgba(255,255,255,0.02);
  border:1px solid #222a3b;
  border-radius:16px;
  padding:24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.donate-card h2{
  margin:0 0 6px;
  font-size:1.4rem;
  color:#fff;
}
.donate-sub{ color:#aab1c6; margin:0 0 18px; }

.donate-form{ display:flex; flex-direction:column; gap:14px; }

.donate-row span{ color:#aab1c6; display:block; margin-bottom:6px; }

.donate-amount{ display:flex; gap:10px; }
.donate-input{
  background:#0f1524;
  border:1px solid #20283a;
  color:#e7ecff;
  border-radius:10px;
  padding:10px 12px;
  flex:1;
  min-width:0;
}
.donate-input:focus{ outline:none; border-color:#4158d0; }

.donate-btn{
  background:#5b6cff;
  color:#fff;
  border:none;
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  text-align:center;
}
.donate-btn:hover{ filter:brightness(1.08); }
.donate-btn.ghost{
  background:transparent;
  border:1px solid #2a3350;
}

.donate-note{
  margin-top:6px;
  color:#8a93ab;
  font-size:.9rem;
}

.donate-log{
  background:#0f1524;
  color:#cbd5ff;
  border:1px solid #20283a;
  border-radius:10px;
  padding:10px;
  overflow:auto;
  max-height:220px;
}

/* Footer donate link resaltado un poco */
.zl-footer .donate-link{
  font-weight:700;
  border:1px solid #2a3350;
  padding:6px 10px;
  border-radius:999px;
}
.zl-footer .donate-link:hover{
  background:#1b2240;
  color:#fff;
}



/* Para ocultar de forma consistente cualquier elemento con [hidden] */
[hidden]{ display:none !important; }

/* === FAB transparente (ghost) === */
.help-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--fg, #e3e8ff);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 1000;
  transition: background .18s ease, border-color .18s ease, transform .08s ease;
}
.help-fab:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
}
.help-fab:active{ transform: scale(.96); }
.help-fab:focus-visible{
  outline: 2px solid #8be28b;
  outline-offset: 2px;
}

/* Backdrop */
.help-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 999;
}

/* Panel de ayuda */
.help-panel{
  position: fixed;
  right: 22px;
  bottom: 88px; /* deja aire sobre el FAB */
  width: min(92vw, 420px);
  max-height: 70vh;
  overflow: auto;
  background: rgba(17,20,30,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  z-index: 1001;
}
.help-panel.open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.help-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.help-head h3{
  font-size: 16px;
  margin: 0;
}
.help-close{
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
}
.help-close:hover{ opacity: .8; }

.help-content{ padding: 14px 16px; }
.help-content details{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.help-content details[open]{ background: rgba(255,255,255,.03); }
.help-content summary{
  cursor: pointer;
  list-style: none;
}
.help-content summary::-webkit-details-marker{ display: none; }
.help-content a{ color: #9abaff; text-decoration: underline; }
















/* =========================
   Responsive: Móvil ultra compacto
   ========================= */
@media (max-width: 600px) {
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2px;
    max-width: 100vw;
  }
  .card {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    margin: 8px auto;
    max-width: 340px;
    padding: 10px;
    border-radius: 10px;
  }
  .dropzone {
    padding: 2px;
    border-radius: 6px;
    margin: 4px 0 6px 0;
  }
  .dz-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .dropzone .btn,
  .dropzone button {
    font-size: 0.8rem;
    padding: 6px 0;
    border-radius: 5px;
    min-width: 110px;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #emailInput {
    font-size: 0.85rem;
    padding: 6px 4px;
    border-radius: 5px;
    margin-bottom: 4px;
    max-width: 220px;
  }
  .fieldset {
    padding: 4px;
    border-radius: 6px;
    margin: 4px 0;
  }
  .hint {
    font-size: 12px;
    margin-top: 4px;
  }
  .tablink {
    font-size: 0.95rem;
    padding: 6px 0;
    border-radius: 6px;
  }
  h2, .overlay-title {
    font-size: 1.1rem;
    margin-bottom: 2px;
  }
  label, .overlay-sub {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  .dropzone .dz-content > strong,
  .dropzone .dz-content > .sub {
    display: none;
  }
  .tabs .tabbar {
    justify-content: center;
  }
}

/* Botones globales tamaño normal en PC */
.dropzone .btn,
.dropzone button,
.btn,
button {
  font-size: 1rem;
  padding: 10px 16px;
  border-radius: 10px;
  min-width: 140px;
}

/* Ultra compacto para pantallas muy pequeñas */
@media (max-width: 400px) {
  .card, .overlay-card, .modal-card {
    padding: 2px;
    border-radius: 6px;
    max-width: 98vw;
  }
  .dropzone .btn,
  .dropzone button {
    font-size: 0.75rem;
    padding: 5px 0;
    min-width: 80px;
  }
  .btn, button, .btn-outline {
    font-size: 0.8rem;
    padding: 5px 0;
    border-radius: 5px;
    min-width: 100px;
  }
}



@media (max-width: 600px) {
  /* Título en su propia línea (se ve completo) */
  header { display:flex; flex-direction:column; align-items:stretch; }
  header h1 { margin: 0 0 6px; }

  /* Nav a la derecha */
  header nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
  }

  /* Botones compactos */
  header nav > a.btn,
  header nav #logoutForm .btn {
    font-size: .875rem;
    padding: 6px 10px;
    border-radius: 8px;
    min-width: auto;
    margin-left: 0 !important; /* anula inline */
  }

  /* Email ocupa toda la fila de abajo */
  header nav > span {
    order: 2;                 /* va después de los botones */
    width: 100%;
    text-align: right;
    margin-left: 0 !important;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Botones primero */
  header nav > a.btn,
  header nav #logoutForm { order: 1; }
}

@media (max-width: 400px) {
  header nav > a.btn,
  header nav #logoutForm .btn { font-size: .8rem; padding: 5px 8px; }
}