/* =============================================================================
   Utiliobox — estilos propios del codificador Base64.
   Solo tokens de utiliobox.css. Reutiliza tabs, notice, dropzone, segmented,
   check, textarea y btn del sistema compartido; aquí vive únicamente lo que es
   de esta herramienta: el panel dividido, el marcador del error y la ficha del
   archivo.
   ============================================================================= */

/* --- Cabecera de la tarjeta --- */
.b64-head {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4) 0;
  border-bottom: 1px solid var(--border);
}
.b64-head .tabs { border-bottom: 0; margin: 0; flex: 1 1 auto; }
.b64-priv {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-3);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--ok);
}
.b64-priv svg { width: 15px; height: 15px; flex: none; }

/* --- Opciones --- */
.b64-opts {
  display: flex; align-items: center; gap: var(--s-4) var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.b64-samples {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-left: auto; font-size: var(--fs-xs); color: var(--ink-mute);
}

/* --- Panel dividido --- */
.b64-split {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: var(--surface-alt);
}
.b64-pane { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.b64-pane__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}
.b64-pane__title { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft); }
.b64-pane__acts { margin-left: auto; display: flex; gap: var(--s-2); }

.b64-area {
  flex: 1 1 auto; width: 100%; min-height: 260px; resize: vertical;
  padding: var(--s-4);
  border: 0; border-radius: 0; background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); line-height: 1.65;
}
.b64-area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.b64-area--mono { font-family: var(--mono); font-size: var(--fs-xs); word-break: break-all; }
.b64-area--tall { min-height: 220px; }

.b64-meta {
  margin: 0; padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute);
  min-height: 30px;
}

/* --- Columna central: sentido, intercambiar, limpiar --- */
.b64-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-3);
  border-inline: 1px solid var(--border);
  background: var(--surface-alt);
}
.b64-dir {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  transition: transform var(--dur) var(--ease-out);
}
.b64-mid .btn { white-space: nowrap; }

/* --- El error, señalado donde se rompe --- */
.b64-excerpt {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  background: var(--surface-sunken);
  font-family: var(--mono); font-size: var(--fs-2xs); line-height: 1.7;
  white-space: pre-wrap; word-break: break-all;
  overflow-x: auto;
}
/* El color del texto sale del fondo de la página, no de un blanco fijo: en
   modo oscuro --danger es un rojo claro y el blanco encima no se lee. */
.b64-bad {
  background: var(--danger); color: var(--bg);
  padding: 1px 3px; border-radius: 3px; font-weight: var(--fw-bold);
}
.b64-extra { color: var(--ink-soft); }
#b64-note:not(:empty), #b64-rnote:not(:empty), #b64-sizewarn:not(:empty) { padding: var(--s-4); }

/* --- Pestaña de archivos --- */
.b64-panel[data-panel="file"] { padding: var(--s-4); }
.b64-fdir { margin-bottom: var(--s-4); }
.b64-panel[data-panel="file"] #b64-note { padding: 0; }
.b64-panel[data-panel="file"] #b64-rnote:not(:empty),
.b64-panel[data-panel="file"] #b64-sizewarn:not(:empty) { padding: 0; margin-bottom: var(--s-3); }

.b64-fileinfo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.b64-fi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b64-fi__k { font-size: var(--fs-2xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.b64-fi__v { font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
.b64-grow { color: var(--warn); font-weight: var(--fw-semi); font-size: var(--fs-xs); }

.b64-fmtrow {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.b64-fmtrow .btn-row { margin-left: auto; }
.b64-fmt { flex: 0 1 auto; min-width: 0; }

.b64-panel[data-panel="file"] .b64-area {
  border: 1px solid var(--border); border-radius: var(--r-sm);
}

.b64-preview {
  margin-top: var(--s-4); padding: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-sunken);
  display: grid; place-items: center;
}
.b64-preview img { max-width: 100%; max-height: 220px; border-radius: var(--r-xs); }

.b64-rdl {
  display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3);
}
.b64-rdl .input--sm { min-width: 220px; }

.b64-panel[data-panel="file"] .field { margin-bottom: var(--s-2); }

/* --- Móvil: el panel dividido se apila y la flecha gira --- */
@media (max-width: 860px) {
  .b64-split { grid-template-columns: 1fr; }
  .b64-mid {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    border-inline: 0; border-block: 1px solid var(--border);
  }
  .b64-dir { transform: rotate(90deg); }
  .b64-samples { margin-left: 0; width: 100%; }
  .b64-fmtrow .btn-row { margin-left: 0; }
}