/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ============================================================
   VARIABLES: tema normal
   gris claro, blanco, azul-violeta.
   inspirado en windows 7 / finder clásico.
   ============================================================ */
:root {
  /* fondo de puntos (valores exactos del prompt) */
  --bg:             #e5e5f7;
  --bg-dot:         #444cf7;
  --bg-dot-size:    1.05px;
  --bg-dot-gap:     21px;
  --bg-opacity:     0.8;

  /* ventana */
  --win-bg:         #ece9d8;
  --win-border-hi:  #ffffff;
  --win-border-lo:  #808080;
  --win-border-dk:  #404040;
  --win-shadow:     2px 2px 0px #404040;

  /* titlebar */
  --tb-bg:          linear-gradient(180deg, #0a246a 0%, #3a6ea5 100%);
  --tb-text:        #ffffff;

  /* toolbar */
  --tool-bg:        #ece9d8;
  --tool-border:    #aca899;

  /* statusbar */
  --status-bg:      #ece9d8;
  --status-border:  #aca899;
  --status-text:    #555555;

  /* contenido */
  --content-bg:     #ffffff;

  /* iconos */
  --icon-doc-body:    #ffffff;
  --icon-doc-fold:    #c0c0c0;
  --icon-doc-border:  #808080;
  --icon-doc-text:    #444cf7;
  --icon-label:       #000000;
  --icon-label-sub:   #555555;

  /* tags */
  --tag-bg:           #ece9d8;
  --tag-border:       #aca899;
  --tag-text:         #0a246a;
  --tag-bg-active:    #0a246a;
  --tag-text-active:  #ffffff;

  /* botones */
  --btn-bg:           #ece9d8;
  --btn-fg:           #000000;
  --btn-border-hi:    #ffffff;
  --btn-border-lo:    #808080;
  --btn-border-dk:    #404040;
  --btn-active-bg:    #0a246a;
  --btn-active-fg:    #ffffff;

  /* modal */
  --modal-bg:         #ece9d8;
  --modal-overlay:    rgba(0, 0, 0, 0.35);

  /* inputs */
  --input-bg:         #ffffff;
  --input-border:     #7f9db9;
  --input-focus:      #0a246a;

  /* progress */
  --progress-bg:      #ece9d8;
  --progress-fill:    #0a246a;

  /* texto */
  --text-primary:     #000000;
  --text-secondary:   #333333;
  --text-muted:       #808080;

  /* velo */
  --veil-bg:          rgba(0, 0, 0, 0.55);
  --veil-box-bg:      #ece9d8;

  /* fuentes */
  --font:             "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono:        "Lucida Console", "Courier New", monospace;

  /* dots */
  --dot-close:    #ff5f57;
  --dot-minimize: #ffbd2e;
  --dot-maximize: #28c840;
}


/* ============================================================
   VARIABLES: tema +18
   oscuro, amarillo, más agresivo.
   ============================================================ */
body.mode-18 {
  --bg:             #0a0a00;
  --bg-dot:         #f5c400;
  --bg-opacity:     0.5;

  --win-bg:         #1a1800;
  --win-border-hi:  #4a4200;
  --win-border-lo:  #0a0800;
  --win-border-dk:  #000000;
  --win-shadow:     2px 2px 0px #000000;

  --tb-bg:          linear-gradient(180deg, #3a3000 0%, #6a5800 100%);
  --tb-text:        #f5c400;

  --tool-bg:        #1a1800;
  --tool-border:    #3a3200;

  --status-bg:      #1a1800;
  --status-border:  #3a3200;
  --status-text:    #8a7e20;

  --content-bg:     #121000;

  --icon-doc-body:    #1e1c00;
  --icon-doc-fold:    #3a3200;
  --icon-doc-border:  #6a5800;
  --icon-doc-text:    #f5c400;
  --icon-label:       #f5e87a;
  --icon-label-sub:   #8a7e20;

  --tag-bg:           #1e1c00;
  --tag-border:       #4a4200;
  --tag-text:         #f5c400;
  --tag-bg-active:    #f5c400;
  --tag-text-active:  #0a0a00;

  --btn-bg:           #1e1c00;
  --btn-fg:           #f5e87a;
  --btn-border-hi:    #4a4200;
  --btn-border-lo:    #0a0800;
  --btn-border-dk:    #000000;
  --btn-active-bg:    #f5c400;
  --btn-active-fg:    #0a0a00;

  --modal-bg:         #1a1800;
  --modal-overlay:    rgba(0, 0, 0, 0.72);

  --input-bg:         #1e1c00;
  --input-border:     #4a4200;
  --input-focus:      #f5c400;

  --progress-bg:      #2a2500;
  --progress-fill:    #f5c400;

  --text-primary:     #f5e87a;
  --text-secondary:   #c9b830;
  --text-muted:       #6a5e10;

  --veil-bg:          rgba(0, 0, 0, 0.82);
  --veil-box-bg:      #1a1800;

  --dot-close:    #ff5f57;
  --dot-minimize: #ffbd2e;
  --dot-maximize: #28c840;
}


/* ============================================================
   BODY: fondo de puntos
   ============================================================ */
body {
  font-family:      var(--font);
  font-size:        13px;
  line-height:      1.4;
  color:            var(--text-primary);
  min-height:       100dvh;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              12px;
  padding:          2rem 1rem;
  background-color: var(--bg);
  transition:       background-color 0.3s, color 0.3s;
}

/* capa de puntos con opacity independiente */
body::before {
  content:    "";
  position:   fixed;
  inset:      0;
  z-index:    -1;
  background-image: radial-gradient(
    var(--bg-dot) var(--bg-dot-size),
    transparent    var(--bg-dot-size)
  );
  background-color: var(--bg);
  background-size:  var(--bg-dot-gap) var(--bg-dot-gap);
  opacity:    var(--bg-opacity);
  transition: background-color 0.3s, opacity 0.3s;
}

/* capa de degradado radial más suave */
body::after {
  content:    "";
  position:   fixed;
  inset:      0;
  z-index:    -1;
  background: radial-gradient(
    ellipse at 50% 50%,
    var(--bg) 0%,
    var(--bg) 38%,
    transparent 100%
  );
  opacity: 0.9;
  pointer-events: none;
  transition: background 0.3s, opacity 0.3s;
}


/* ============================================================
   BORDE RETRO (estilo windows clásico)
   reutilizable con la clase .retro-border
   borde 3d: highlight arriba-izq, shadow abajo-der
   ============================================================ */
.retro-outset {
  border: 2px solid;
  border-color: var(--win-border-hi) var(--win-border-dk) var(--win-border-dk) var(--win-border-hi);
}

.retro-inset {
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
}


/* ============================================================
   VENTANA PRINCIPAL
   ============================================================ */
#window {
  width:          70dvw;
  max-width:      800px;
  min-width:      300px;
  background:     var(--win-bg);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  max-height:     78dvh;
  transition:     background 0.3s;

  /* borde 3d retro */
  border: 2px solid;
  border-color: var(--win-border-hi) var(--win-border-dk) var(--win-border-dk) var(--win-border-hi);
  box-shadow: var(--win-shadow);
}


/* ============================================================
   TITLEBAR
   gradiente azul clásico, texto blanco, dots a la izquierda.
   ============================================================ */
#titlebar {
  background:     var(--tb-bg);
  padding:        4px 8px;
  display:        flex;
  align-items:    center;
  gap:            8px;
  flex-shrink:    0;
  user-select:    none;
}

#titlebar-dots {
  display:  flex;
  gap:      4px;
  flex-shrink: 0;
}

.dot {
  width:    12px;
  height:   12px;
  border-radius: 50%;
  display:  inline-block;
  border:   1px solid rgba(0,0,0,0.2);
}

.dot-close    { background: var(--dot-close); }
.dot-minimize { background: var(--dot-minimize); }
.dot-maximize { background: var(--dot-maximize); }

#titlebar-name {
  font-size:      12px;
  font-weight:    700;
  color:          var(--tb-text);
  font-family:    var(--font-mono);
  letter-spacing: 0.06em;
}


/* ============================================================
   TOOLBAR (barra de hashtags)
   ============================================================ */
#toolbar {
  background:     var(--tool-bg);
  border-bottom:  1px solid var(--tool-border);
  padding:        4px 6px;
  flex-shrink:    0;
  transition:     background 0.3s;
}

#hashtag-nav {
  display:    flex;
  flex-wrap:  wrap;
  gap:        3px;
}

/* botón de hashtag: estilo botón retro */
.tag-btn {
  font:           inherit;
  font-size:      11px;
  font-family:    var(--font-mono);
  cursor:         pointer;
  background:     var(--tag-bg);
  color:          var(--tag-text);
  padding:        2px 6px;
  white-space:    nowrap;
  transition:     background 0.1s, color 0.1s;

  /* borde retro 3d */
  border: 2px solid;
  border-color: var(--btn-border-hi) var(--btn-border-lo) var(--btn-border-lo) var(--btn-border-hi);
}

.tag-btn:hover {
  background:   var(--tag-bg-active);
  color:        var(--tag-text-active);
}

.tag-btn.active {
  background:   var(--tag-bg-active);
  color:        var(--tag-text-active);
  /* invertir borde para efecto "presionado" */
  border-color: var(--btn-border-lo) var(--btn-border-hi) var(--btn-border-hi) var(--btn-border-lo);
}


/* ============================================================
   ÁREA DE CONTENIDO (grid de iconos con scroll)
   ============================================================ */
#content {
  flex:           1;
  overflow-y:     auto;
  background:     var(--content-bg);
  padding:        10px;
  transition:     background 0.3s;

  /* borde inset retro para el área de contenido */
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
  margin: 2px;
}

/* scrollbar discreta */
#content::-webkit-scrollbar { width: 16px; }
#content::-webkit-scrollbar-track {
  background: var(--win-bg);
  border: 1px solid var(--tool-border);
}
#content::-webkit-scrollbar-thumb {
  background: var(--win-bg);
  border: 2px solid;
  border-color: var(--win-border-hi) var(--win-border-lo) var(--win-border-lo) var(--win-border-hi);
}

/* grid de iconos tipo finder */
#file-grid {
  display:                grid;
  grid-template-columns:  repeat(auto-fill, minmax(90px, 1fr));
  gap:                    4px;
  align-items:            start;
}

/* mensaje vacío */
#empty-msg {
  grid-column:  1 / -1;
  text-align:   center;
  font-size:    11px;
  font-family:  var(--font-mono);
  color:        var(--text-muted);
  padding:      3rem 0;
}


/* ============================================================
   STATUSBAR
   ============================================================ */
#statusbar {
  background:     var(--status-bg);
  border-top:     1px solid var(--status-border);
  padding:        3px 8px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  flex-shrink:    0;
  transition:     background 0.3s;
}

#status-count {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--status-text);
}

#status-info {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--text-muted);
}


/* ============================================================
   TARJETA DE ARCHIVO (icono estilo finder)
   ============================================================ */
.file-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        6px 4px;
  cursor:         pointer;
  text-decoration: none;
  color:          inherit;
  border:         1px solid transparent;
  transition:     background 0.1s, border-color 0.1s;
}

.file-card:hover {
  background:   rgba(10, 36, 106, 0.12);
  border-color: var(--tag-bg-active);
}

body.mode-18 .file-card:hover {
  background:   rgba(245, 196, 0, 0.12);
  border-color: var(--tag-bg-active);
}

/* icono SVG del documento: pixel-art */
.file-icon-wrap {
  width:            48px;
  height:           56px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
}

.file-icon-wrap svg {
  width:  100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* nombre del archivo */
.file-label {
  width:          100%;
  text-align:     center;
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--icon-label);
  line-height:    1.2;
  word-break:     break-word;
  overflow-wrap:  break-word;
  /* máximo 2 líneas */
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}

/* autor debajo del nombre */
.file-author {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--icon-label-sub);
  text-align:     center;
  width:          100%;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* hashtags del archivo */
.file-tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        2px;
  justify-content: center;
  margin-top: 1px;
}

.file-tag {
  font-size:      9px;
  font-family:    var(--font-mono);
  color:          var(--tag-text);
  background:     var(--tag-bg);
  padding:        0px 3px;
  border: 1px solid;
  border-color: var(--btn-border-hi) var(--btn-border-lo) var(--btn-border-lo) var(--btn-border-hi);
}

/* etiqueta +18 en rojo */
.file-badge-18 {
  font-size:      9px;
  font-family:    var(--font-mono);
  color:          #ffffff;
  background:     #cc0000;
  padding:        0px 3px;
  font-weight:    700;
}


/* ============================================================
   BOTONES FUERA DE LA VENTANA
   ============================================================ */
#actions {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  justify-content: center;
}

/* botón retro genérico */
.btn {
  font:           inherit;
  font-size:      12px;
  font-family:    var(--font-mono);
  cursor:         pointer;
  padding:        4px 14px;
  background:     var(--btn-bg);
  color:          var(--btn-fg);
  transition:     background 0.1s, color 0.1s;

  /* borde 3d retro */
  border: 2px solid;
  border-color: var(--btn-border-hi) var(--btn-border-lo) var(--btn-border-lo) var(--btn-border-hi);
}

.btn:hover {
  background: var(--tag-bg-active);
  color:      var(--tag-text-active);
}

.btn:active {
  /* efecto presionado */
  border-color: var(--btn-border-lo) var(--btn-border-hi) var(--btn-border-hi) var(--btn-border-lo);
}

/* cuando el modo +18 está activo, el botón se ve presionado */
body.mode-18 .btn-action-alt {
  background:   var(--btn-active-bg);
  color:        var(--btn-active-fg);
  border-color: var(--btn-border-lo) var(--btn-border-hi) var(--btn-border-hi) var(--btn-border-lo);
}


/* ============================================================
   VELO (usado para confirmación de edad y token)
   capa semitransparente con blur que cubre toda la pantalla.
   ============================================================ */
.veil {
  position:   fixed;
  inset:      0;
  z-index:    300;
  background: var(--veil-bg);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.veil[hidden] {
  display: none;
}

.veil-box {
  background:     var(--veil-box-bg);
  padding:        20px 24px;
  max-width:      340px;
  width:          88dvw;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  transition:     background 0.3s;

  /* borde retro */
  border: 2px solid;
  border-color: var(--win-border-hi) var(--win-border-dk) var(--win-border-dk) var(--win-border-hi);
  box-shadow: var(--win-shadow);
}

.veil-title {
  font-size:      13px;
  font-weight:    700;
  font-family:    var(--font-mono);
  color:          var(--text-primary);
}

.veil-desc {
  font-size:      11px;
  color:          var(--text-secondary);
  line-height:    1.5;
}

.veil-desc a {
  color:          var(--tag-text);
  text-decoration: underline;
}

.veil-question {
  font-size:      12px;
  font-weight:    600;
  color:          var(--text-primary);
}

.veil-buttons {
  display:    flex;
  gap:        8px;
  justify-content: center;
}

.veil-hint {
  font-size:      10px;
  color:          var(--text-muted);
  font-family:    var(--font-mono);
}

.btn-yes {
  background: var(--btn-active-bg);
  color:      var(--btn-active-fg);
}

.btn-no {
  background: var(--btn-bg);
  color:      var(--btn-fg);
}

/* input del token */
.token-input-row {
  display: flex;
}

.token-input-row input {
  width:          100%;
  background:     var(--input-bg);
  color:          var(--text-primary);
  font:           inherit;
  font-size:      12px;
  font-family:    var(--font-mono);
  padding:        4px 8px;
  outline:        none;
  transition:     border-color 0.1s;

  /* borde inset retro */
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
}

.token-input-row input:focus {
  border-color: var(--input-focus);
}


/* ============================================================
   MODAL DE SUBIDA
   ventana tipo "transferencia de archivo" de windows.
   ============================================================ */
#modal-overlay {
  position:   fixed;
  inset:      0;
  z-index:    200;
  background: var(--modal-overlay);
  backdrop-filter:         blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.3s;
}

#modal-upload {
  position:   fixed;
  inset:      0;
  z-index:    210;
  display:    flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#modal-upload[hidden] {
  display: none;
}

#modal-upload:not([hidden]) {
  pointer-events: auto;
}

.modal-window {
  background:     var(--modal-bg);
  width:          min(420px, 90dvw);
  overflow:       hidden;
  transition:     background 0.3s;

  /* borde retro */
  border: 2px solid;
  border-color: var(--win-border-hi) var(--win-border-dk) var(--win-border-dk) var(--win-border-hi);
  box-shadow: var(--win-shadow);
}

/* titlebar del modal */
.modal-titlebar {
  background:     var(--tb-bg);
  padding:        4px 8px;
  display:        flex;
  align-items:    center;
  gap:            8px;
  user-select:    none;
}

.modal-dots {
  display:  flex;
  gap:      4px;
  flex-shrink: 0;
}

.modal-name {
  font-size:      12px;
  font-weight:    700;
  font-family:    var(--font-mono);
  color:          var(--tb-text);
}

/* cuerpo del modal */
.modal-body {
  padding: 12px;
}

/* formulario */
#upload-form {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.field {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.field label {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text-secondary);
}

.hint {
  color:      var(--text-muted);
  font-size:  10px;
}

/* inputs de texto */
.field input[type="text"],
.field input[type="password"] {
  background:     var(--input-bg);
  color:          var(--text-primary);
  font:           inherit;
  font-size:      12px;
  padding:        4px 6px;
  outline:        none;
  transition:     border-color 0.1s;

  /* borde inset retro */
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
}

.field input[type="text"]:focus,
.field input[type="password"]:focus {
  border-color: var(--input-focus);
}

.field input[readonly] {
  color: var(--text-muted);
  cursor: default;
}

/* zona de arrastre */
#drop-zone {
  padding:        14px;
  text-align:     center;
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  transition:     background 0.1s;
  background:     var(--content-bg);

  /* borde inset retro con dashed */
  border: 2px dashed var(--tool-border);
}

#drop-zone:hover,
#drop-zone.drag-over {
  border-color: var(--input-focus);
  background:   var(--tag-bg);
}

#drop-icon {
  font-size:  24px;
  line-height: 1;
  opacity: 0.5;
}

#drop-label {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text-muted);
}

.meta {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--text-secondary);
  min-height:     1em;
}

/* botón de submit */
.btn-submit {
  width: 100%;
  background: var(--btn-active-bg);
  color:      var(--btn-active-fg);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   VISTA DE PROGRESO (tipo transferencia de archivo)
   ============================================================ */
#transfer-info {
  display:    flex;
  align-items: center;
  gap:        10px;
  margin-bottom: 10px;
}

#transfer-icon {
  font-size:  32px;
  line-height: 1;
  flex-shrink: 0;
}

#transfer-details {
  flex: 1;
  min-width: 0;
}

#transfer-filename {
  font-size:      12px;
  font-family:    var(--font-mono);
  color:          var(--text-primary);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

#transfer-status {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text-muted);
}

#progress-track {
  height:         16px;
  background:     var(--progress-bg);
  overflow:       hidden;

  /* borde inset retro */
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
}

#progress-fill {
  height:         100%;
  width:          0%;
  background:     var(--progress-fill);
  transition:     width 0.3s ease;
  /* patrón de barras animadas tipo windows */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.15) 4px,
    rgba(255,255,255,0.15) 8px
  );
  background-size: 200% 100%;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0%   { background-position: 0 0; }
  100% { background-position: 16px 0; }
}

#progress-percent {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text-secondary);
  text-align:     right;
  margin-top:     4px;
}


/* ============================================================
   MODAL: editor de texto (crear texto → PDF)
   ============================================================ */
#modal-editor {
  position:   fixed;
  inset:      0;
  z-index:    210;
  display:    flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#modal-editor[hidden] {
  display: none;
}
#modal-editor:not([hidden]) {
  pointer-events: auto;
}

.modal-window-wide {
  width: min(520px, 92dvw);
}

/* barra de herramientas del editor */
#editor-toolbar {
  display:    flex;
  align-items: center;
  gap:        2px;
  padding:    3px 4px;
  background: var(--tool-bg);
  border: 2px solid;
  border-color: var(--win-border-hi) var(--win-border-lo) var(--win-border-lo) var(--win-border-hi);
  border-bottom: none;
  flex-wrap:  wrap;
}

.editor-tool {
  font:           inherit;
  font-size:      13px;
  font-family:    var(--font-mono);
  cursor:         pointer;
  padding:        4px 10px;
  background:     var(--btn-bg);
  color:          var(--btn-fg);
  min-width:      32px;
  text-align:     center;
  border: 1px solid;
  border-color: var(--btn-border-hi) var(--btn-border-lo) var(--btn-border-lo) var(--btn-border-hi);
}

.editor-tool:hover {
  background: var(--tag-bg-active);
  color:      var(--tag-text-active);
}

.editor-tool:active {
  border-color: var(--btn-border-lo) var(--btn-border-hi) var(--btn-border-hi) var(--btn-border-lo);
}

.editor-tool-sep {
  width:      1px;
  height:     22px;
  background: var(--tool-border);
  margin:     0 3px;
}

/* área de texto markdown (textarea) */
#editor-content {
  background:     var(--input-bg);
  color:          var(--text-primary);
  font-size:      13px;
  font-family:    var(--font-mono);
  line-height:    1.6;
  padding:        8px 10px;
  min-height:     200px;
  max-height:     40dvh;
  overflow-y:     auto;
  outline:        none;
  resize:         vertical;
  transition:     border-color 0.1s;
  width:          100%;
  box-sizing:     border-box;
  white-space:    pre-wrap;
  tab-size:       2;

  /* borde inset retro */
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
}

#editor-content:focus {
  border-color: var(--input-focus);
}

#editor-content::placeholder {
  color:      var(--text-muted);
  font-style: italic;
}

/* formulario del editor */
#editor-form {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* progreso del editor (reutiliza estilos del upload) */
.transfer-info {
  display:    flex;
  align-items: center;
  gap:        10px;
  margin-bottom: 10px;
}

.transfer-icon-el {
  font-size:  32px;
  line-height: 1;
  flex-shrink: 0;
}

.transfer-details-el {
  flex: 1;
  min-width: 0;
}

.transfer-details-el p:first-child {
  font-size:      12px;
  font-family:    var(--font-mono);
  color:          var(--text-primary);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.transfer-details-el p:last-child {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text-muted);
}

.progress-track-el {
  height:         16px;
  background:     var(--progress-bg);
  overflow:       hidden;
  border: 2px solid;
  border-color: var(--win-border-dk) var(--win-border-hi) var(--win-border-hi) var(--win-border-dk);
}

.progress-fill-el {
  height:         100%;
  width:          0%;
  background:     var(--progress-fill);
  transition:     width 0.3s ease;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.15) 4px,
    rgba(255,255,255,0.15) 8px
  );
  background-size: 200% 100%;
  animation: progress-stripes 1s linear infinite;
}

.progress-percent-el {
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text-secondary);
  text-align:     right;
  margin-top:     4px;
}


/* ============================================================
   RESPONSIVE: móvil
   ============================================================ */
@media (max-width: 600px) {
  body {
    padding:    0.5rem;
    gap:        8px;
  }

  #window {
    width:      100%;
    max-width:  100%;
    max-height: 80dvh;
  }

  #file-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  #status-info {
    display: none;
  }

  #editor-content {
    min-height: 150px;
  }
}