:root {
  --ink: #111111;
  --ink-soft: #3a3a3a;
  --bg: #ffffff;
  --bg-soft: #f7f6f4;
  --surface: #ffffff;
  --line: #e4e2dd;
  --line-strong: #111111;
  --text: #171717;
  --text-muted: #716f6f;
  --accent: #a4133c;
  --accent-hover: #7f0f30;
  --error: #b3261e;
  --error-bg: #fdf1f0;
  --error-border: #f3cfcc;
  --success: #2f6d3e;
  --success-bg: #f0f6f1;
  --success-border: #cfe3d2;
  --radius: 3px;
  --shadow: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Nunito Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- Header del sitio (marketing / login) ---- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}

.site-header-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}

.brand-icon {
  display: none;
}

.site-header-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- Contenido principal ---- */
.app {
  flex: 1;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  padding: 56px 24px 72px;
}

/* La pestaña de corrección necesita más ancho: dos documentos lado a lado. */
.app:has(#correctTab:not(.hidden)) {
  max-width: 880px;
}

/* La pestaña de historial necesita mucho más ancho: es una tabla con varias
   columnas (fecha, nombre, tipo, idiomas, contexto, cliente, acciones) que
   si no le sobra espacio fuerza scroll horizontal. */
.app:has(#historialTab:not(.hidden)) {
  max-width: 1400px;
}

/* Dentro del historial, las celdas envuelven el texto en vez de forzar una
   sola línea (a diferencia del resto de .data-table): columnas como
   contexto u origen->destino pueden ser largas, y con el ancho ya generoso
   de arriba es mejor que ocupen varias líneas a que empujen la tabla fuera
   del contenedor. */
#historialTab .data-table th,
#historialTab .data-table td {
  white-space: normal;
}

/* Celda de acciones (Original/Traducido/...): con varios botones de ancho
   distinto, el flujo inline normal los deja envueltos con el borde
   izquierdo descuadrado. En columna y alineados a la izquierda quedan uno
   debajo de otro, prolijos. */
#historialTab .data-table td.h-actions-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#historialTab .data-table td.h-actions-cell .table-action-btn + .table-action-btn {
  margin-left: 0;
}

/* Paso 1 + Paso 2 de "Corregir traducción" en dos columnas */
.upload-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
}

@media (max-width: 720px) {
  .upload-columns {
    grid-template-columns: 1fr;
  }
}

/* Pestañas de la página principal */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.tab-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 4px;
  margin-right: 24px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover {
  color: var(--ink);
}

.tab-btn.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tab-panel.hidden {
  display: none;
}

.hero {
  text-align: center;
  margin-bottom: 40px;
}

.hero h1 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: 15px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
}

.section {
  margin-bottom: 30px;
  min-width: 0;
}

.section:last-of-type {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  color: var(--ink);
}

.optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}

.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  outline: none;
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--bg-soft);
}

.dropzone.dragover {
  border-color: var(--accent);
  background: var(--bg-soft);
}

.dropzone.has-file {
  display: none;
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dropzone-icon {
  width: 30px;
  height: 30px;
  color: var(--ink);
  margin-bottom: 4px;
}

.dropzone-text {
  margin: 0;
  font-size: 15px;
}

.dropzone-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-btn:hover {
  color: var(--accent-hover);
}

/* File info */
.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-soft);
}

.file-info-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.file-info-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--error-bg);
  color: var(--error);
}

/* Select */
.select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(164, 19, 60, 0.12);
}

/* Textarea */
.textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  min-height: 90px;
}

.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(164, 19, 60, 0.12);
}

.char-count {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

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

/* Alerts */
.alert {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-left: 3px solid transparent;
}

.alert-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-left: 3px solid var(--error);
  color: var(--error);
}

.alert-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-left: 3px solid var(--success);
  color: var(--success);
  margin-top: 20px;
}

/* Primary button: mismo estilo blanco/negro con inversión al hover que el
   resto de botones de la app (ver .secondary-btn, .table-action-btn,
   .panel-btn, .btn-logout) — un único lenguaje visual de botón en toda la
   app, sin distinción de "relleno" para la acción principal. */
.primary-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 100%;
  margin-top: 28px;
  padding: 15px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.65s ease, transform 0.05s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.primary-btn:hover:not(:disabled) {
  color: #fff;
}

.primary-btn:active:not(:disabled) {
  transform: scale(0.99);
}

.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

/* ---- Vista de progreso ---- */
.progress-header {
  text-align: center;
  margin-bottom: 26px;
}

.progress-header h2 {
  margin: 0 0 6px;
  font-size: 21px;
}

.progress-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.notify-btn {
  width: auto;
  display: inline-flex;
  margin: 14px auto 0;
  padding: 9px 16px;
  font-size: 12.5px;
}

.notify-btn.notify-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.notify-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.progress-bar-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  border: none;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.progress-percentage {
  text-align: center;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.phase-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phase-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.phase-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--surface);
}

.phase-item.active {
  color: var(--text);
  font-weight: 700;
}

.phase-item.active .phase-status-icon {
  border-color: var(--accent);
}

.phase-item.done .phase-status-icon {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.phase-item.done {
  color: var(--success);
}

.phase-item.error .phase-status-icon {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

.phase-item.error {
  color: var(--error);
  font-weight: 700;
}

.phase-spinner {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(164, 19, 60, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Resultado y error de la vista de progreso */
.result-panel,
.error-panel {
  text-align: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.result-icon,
.error-icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.result-panel h3,
.error-panel h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.error-panel p {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 14px;
}

.file-preview {
  margin: 16px auto;
  max-width: 420px;
}

/* Resumen de cambios (pestaña "Corregir traducción") */
.changes-summary {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.changes-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-direction: column;

}

.changes-summary h4,
.changes-summary-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.secondary-btn-small {
  width: auto;
  padding: 8px 14px;
  font-size: 11.5px;
  flex-shrink: 0;
}


.changes-summary-text {
  margin: 0;
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
}

.changes-summary-groups {
  max-height: 520px;
  overflow-y: auto;
}

.changes-summary-empty {
  margin: 0;
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text);
}

.changes-group {
  margin-bottom: 22px;
}

.changes-group h5 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

.changes-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

.changes-table th {
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.changes-table .changes-cell {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  word-break: break-word;
  width: 33.33%;
}

.changes-table .diff-removed-cell {
  color: var(--error);
  background: var(--error-bg);
}

.changes-table .diff-added-cell {
  color: var(--success);
  background: var(--success-bg);
}

.changes-cell-diff .diff-removed,
.changes-cell-diff .diff-added {
  border-radius: 2px;
  padding: 0 2px;
}

.diff-removed {
  color: var(--error);
  background: var(--error-bg);
  text-decoration: line-through;
}

.diff-added {
  color: var(--success);
  background: var(--success-bg);
}

.changes-reason-row .changes-reason-cell {
  padding: 4px 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  background: var(--bg-soft);
}

.changes-table tbody tr:last-child .changes-reason-cell {
  border-bottom: none;
}

.file-preview .file-preview-simple {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-soft);
  text-align: left;
}

.file-preview .file-preview-simple .icon {
  font-size: 24px;
}

.file-preview .file-preview-simple .name {
  font-weight: 700;
  font-size: 14px;
  word-break: break-word;
}

.file-preview embed,
.file-preview iframe {
  width: 100%;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.secondary-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.65s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.secondary-btn:hover {
  color: #fff;
}

/* Separación entre "Filtrar" y "Exportar a Excel" del historial: son dos
   .secondary-btn de ancho completo, uno debajo del otro, sin contenedor
   propio con gap. */
#hFiltrarBtn + #hExportarBtn {
  margin-top: 10px;
}

/* Barrido de izquierda a derecha compartido por todos los botones de la
   app al pasar el ratón (en vez de un cambio de color instantáneo o un
   crossfade): un pseudo-elemento ::before, con ancho 0 al inicio, crece
   hasta el 100% del botón en 0.65s "pintando" el fondo, mientras el color
   del texto (declarado en la regla base de cada clase, ver más arriba)
   hace crossfade a la vez con la misma duración. Cada clase de botón ya
   pone `position: relative; overflow: hidden; z-index: 0;` en su propia
   regla base para que este ::before (absolute, z-index: -1) quede detrás
   del texto y contenido dentro del propio botón. */
.primary-btn::before,
.panel-btn::before,
.secondary-btn::before,
.table-action-btn::before,
.btn-logout::before,
.agent-order-row .agent-order-buttons button::before,
.cookie-banner-actions button::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--ink);
  transition: width 0.65s ease;
  z-index: -1;
}

.primary-btn:hover:not(:disabled)::before,
.panel-btn:hover:not(:disabled)::before,
.secondary-btn:hover::before,
.table-action-btn:hover::before,
.btn-logout:hover::before,
.agent-order-row .agent-order-buttons button:hover:not(:disabled)::before,
.cookie-banner-actions button:hover::before {
  width: 100%;
}

.primary-btn[href] {
  text-decoration: none;
  box-sizing: border-box;
}

/* ---- Footer del sitio ---- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  margin-top: auto;
}

.site-footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 26px;
  text-align: center;
}

.footer-tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 22px;
}

.footer-tagline .sep {
  color: var(--line-strong);
  font-weight: 400;
}

.footer-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0 0 18px;
}

.brand-footer {
  justify-content: center;
  margin-bottom: 6px;
}

.site-footer-copy {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.footer-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-legal-links .sep {
  color: var(--line);
}

@media (max-width: 480px) {
  .card {
    padding: 26px 20px;
  }

  .hero h1 {
    font-size: 26px;
  }
}

/* ---- Topbar de sesión (login/panel/index) ---- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}

.topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.topbar-user strong {
  color: var(--ink);
  font-weight: 700;
}

.role-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar-actions .link-btn {
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-logout {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.65s ease;
}

.btn-logout:hover {
  color: #fff;
}

/* ---- Selector de idioma ES/EN ---- */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-toggle-btn {
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
}

.lang-toggle-btn + .lang-toggle-btn {
  border-left: 1px solid var(--ink);
}

.lang-toggle-btn:hover {
  background: var(--ink);
  color: #fff;
}

.lang-toggle-btn.active {
  background: var(--ink);
  color: #fff;
}

/* ---- Layout ancho para paneles con tablas ---- */
.app-wide {
  flex: 1;
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
  padding: 48px 24px 72px;
}

.panel-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  margin-bottom: 26px;
}

.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.panel-section-header h2 {
  margin: 0;
  font-size: 18px;
}

.panel-section-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Formulario en grid de dos columnas */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.form-grid .field.full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  color: var(--ink);
}

.field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(164, 19, 60, 0.12);
}

.field-group-title {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin: 6px 0 -2px;
}

.form-grid .field-group-title:first-child {
  border-top: none;
  padding-top: 0;
}

/* Tabla */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table th {
  background: var(--bg-soft);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.data-table tbody tr.clickable-row {
  cursor: pointer;
}

.data-table tbody tr.clickable-row:hover {
  background: var(--bg-soft);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .cell-muted {
  color: var(--text-muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
}

.status-badge.active {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.inactive {
  background: var(--error-bg);
  color: var(--error);
}

.table-action-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: var(--ink);
  transition: color 0.65s ease;
}

.table-action-btn + .table-action-btn {
  margin-left: 6px;
}

.table-action-btn:hover {
  color: #fff;
}

.table-action-btn.danger:hover {
  color: #fff;
}

.table-action-btn.danger::before {
  background: var(--error);
}

/* Pestañas del panel de gestión */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--ink);
}

.tab-btn.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tab-panel.hidden {
  display: none;
}

/* Idiomas/contextos permitidos por empresa (panel superadmin) */
.permissions-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.permissions-block:first-of-type {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
}

.permissions-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.permissions-toggle input {
  width: auto;
}

.permissions-grid {
  columns: 220px;
  column-gap: 18px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 12px 0;
  background: var(--bg-soft);
}

.permissions-grid.hidden {
  display: none;
}

.permissions-grid label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  padding: 3px 0;
  break-inside: avoid;
}

.permissions-grid label input {
  width: auto;
}

.permissions-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.permissions-actions.hidden {
  display: none;
}

.custom-context-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-context-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 13.5px;
}

.custom-context-empty {
  color: var(--text-muted);
  font-size: 13px;
  margin: 14px 0 0;
}

/* Modal genérico (editar usuario) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 3px solid var(--ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  padding: 28px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
}

.modal-close-btn:hover {
  color: var(--ink);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Detalle del historial (pop-up al hacer clic en una fila): más ancho que
   el modal genérico porque incluye una tabla de tokens por fase. */
#hDetalleModalBackdrop .modal-card {
  max-width: 640px;
}

.detalle-field {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.detalle-field .detalle-label {
  color: var(--text-muted);
}

.detalle-field .detalle-value {
  font-weight: 600;
  text-align: right;
}

.detalle-subtitle {
  margin: 20px 0 10px;
  font-size: 15px;
}

.h-tokens-total-row td {
  font-weight: 800;
  background: var(--bg-soft);
  border-top: 2px solid var(--ink);
}

/* Tarjetas de prompts por empresa (panel superadmin) */
.prompt-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}

.prompt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.prompt-card-header h3 {
  margin: 0;
  font-size: 15px;
}

.prompt-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.prompt-overrides-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.prompt-override-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
}

.agent-order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.agent-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
}

.agent-order-row .agent-order-position {
  font-weight: 800;
  color: var(--text-muted);
  margin-right: 8px;
}

.agent-order-row .agent-order-buttons {
  display: flex;
  gap: 6px;
}

.agent-order-row .agent-order-buttons button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 0.65s ease;
}

.agent-order-row .agent-order-buttons button:hover:not(:disabled) {
  color: #fff;
}

.agent-order-row .agent-order-buttons button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.table-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.panel-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.65s ease;
}

.panel-btn:hover:not(:disabled) {
  color: #fff;
}

.panel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-card {
  width: 100%;
  max-width: 380px;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Páginas legales ---- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  flex: 1;
  width: 100%;
}

.legal-page h1 {
  font-size: 30px;
  margin: 0 0 6px;
}

.legal-updated {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 40px;
}

.legal-page h2 {
  font-size: 18px;
  margin: 40px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.legal-page h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.legal-page p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-soft);
}

.legal-page ul {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 15px;
}

.legal-page li {
  margin-bottom: 6px;
}

.legal-page a {
  color: var(--accent);
}

.legal-page strong {
  color: var(--ink);
}

.legal-placeholder {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-style: italic;
  color: var(--text-muted);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.legal-table th {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 700;
}

.legal-table code {
  font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* Aviso de cookies                                                       */
/* ---------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.16);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.cookie-banner.hidden {
  display: none;
}

.cookie-banner-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.cookie-banner-text a {
  color: var(--accent);
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.cookie-banner-actions button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.65s ease;
}

.cookie-banner-actions button:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* Cabeceras: si no caben brand + acciones en una fila, pasan a dos filas
     en vez de desbordar o encogerse hasta ser ilegibles. */
  .site-header-inner,
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 10px 16px;
  }

  .topbar-user {
    flex-wrap: wrap;
  }

  .app,
  .app-wide,
  .legal-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .panel-section {
    padding: 22px 18px;
  }

  .modal-card {
    padding: 22px;
  }

  /* Barras de pestañas (traducir/corregir/historial, y las del panel de
     superadmin/admin): con varias pestañas de texto largo no caben en el
     ancho de un móvil, así que se convierten en una franja con scroll
     horizontal en vez de partirse en varias líneas o desbordar la página. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tab-btn {
    flex-shrink: 0;
  }

  .panel-section-header {
    flex-wrap: wrap;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .app,
  .app-wide {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .legal-page {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .topbar-inner,
  .site-header-inner {
    padding: 16px;
  }

  .brand {
    font-size: 17px;
  }

  .topbar-actions .link-btn {
    font-size: 12px;
  }

  .btn-logout {
    padding: 7px 11px;
    font-size: 11px;
  }

  .lang-toggle-btn {
    padding: 6px 9px;
    font-size: 11px;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .legal-page h1 {
    font-size: 24px;
  }

  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 16px;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-banner-actions button {
    flex: 1;
  }
}