/* A-PumpAnalyzer -- hoja de estilos de la Fase 6.

   T6.0: los tokens de AMAQ_Design_System/tokens/*.css se copian tal cual (son CSS puro,
   framework-agnostico) en ./tokens/ y ./amaq-tokens.css (el entry point original). Este
   archivo reemplaza la idea original de Tailwind vía CDN -- el design system A-MAQ ya
   define paleta/tipografia/espaciado, un segundo sistema de diseño en paralelo seria
   sobre-ingenieria (ver backlog.md, seccion "Framework web").

   Los componentes de AMAQ_Design_System/components/**/*.jsx no se importan (son React,
   incompatible con la decision de Jinja2+HTMX sin build step) -- se reimplementan aqui como
   clases CSS que reproducen el mismo HTML/CSS resultante (mismos radios, colores, estados,
   tipografia), consumidas por macros Jinja2 en templates/partials/_components.html. */

/* Fase 11 (T11.6): decision explicita del usuario, en contravia del token original de
   AMAQ_Design_System (Montserrat UI + Space Mono para datos/numeros) -- todo el sistema debe
   verse con una sola familia tipografica. En vez de tocar cada plantilla que usa
   `var(--font-mono)` (TAG, DataValue, tablas de registro, cuaderno de razonamiento), se
   redefine el token mismo: cualquier regla que pida `--font-mono` recibe Montserrat. Queda
   registrado tambien en memoria de usuario (no solo aqui) porque es una preferencia estable
   entre sesiones, no una decision de esta tarea puntual. */
:root { --font-mono: var(--font-sans); }

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

html, body { height: 100%; }

body {
  background: var(--surface-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

a { color: var(--text-link); }

h1, h2, h3, h4 { font-family: var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--text-primary); }

.mono { font-family: var(--font-mono); }

/* ── Layout ─────────────────────────────────────────────────────────── */

/* Fase 18: `.app-shell` (el contenedor vertical de las Fases 6-17) tambien quedo muerto --
   ahora TODAS las pantallas, con sesion o sin ella, usan `.app-layout` + `.app-main` de
   sidebar.css. Se retira por la misma razon que `.topnav`. */

/* ── Header (Fase 11, T11.7): fijo (sticky) arriba; el menu que antes vivia en un sidebar
   lateral (Fase 9, T9.4) ahora es navegacion horizontal dentro del propio topbar, para
   recuperar el ancho de trabajo que ocupaba el sidebar y mantener el acceso a las 3 secciones
   visible incluso haciendo scroll en informes/lotes largos. ────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  flex-shrink: 0;
  background: var(--surface-nav);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--space-3) var(--space-8);
  gap: var(--space-4);
  border-bottom: 1px solid rgba(78, 98, 176, 0.18);
}

.topbar-brand { display: flex; align-items: center; gap: var(--space-5); }

.topbar img.logo { height: 32px; width: auto; display: block; }

.topbar .app-title { color: var(--text-inverse); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }

.topbar .app-subtitle { color: var(--color-sky-500); font-size: var(--text-xs); margin-left: var(--space-3); }

/* Fase 18 (T18.9): aqui vivian `.topnav`, `.topnav-link` y `.topnav-icon` -- la navegacion
   horizontal de la Fase 11 (T11.7). El menu volvio a ser lateral y colapsable
   (static/sidebar.css); esas reglas quedaron muertas y se retiran en vez de dejarse "por si
   acaso". `.topbar` SI sigue viva: es la barra de marca de login y primera instalacion, las
   dos pantallas que no llevan menu (T18.8). */

.content { flex: 1; padding: var(--pad-page); max-width: 1300px; width: 100%; margin: 0 auto; }

.footer { text-align: center; padding: var(--space-6); font-size: var(--text-xs); color: var(--text-tertiary); }
.footer-version { display: block; margin-top: 4px; font-family: var(--font-mono, monospace); opacity: 0.75; }

/* ── Card (components/core/Card.jsx) ───────────────────────────────── */

.amaq-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: var(--pad-card-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
  margin-bottom: var(--space-7);
}

.amaq-card-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.amaq-card-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.amaq-card-subtitle { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }

/* ── Button (components/core/Button.jsx) ───────────────────────────── */

.amaq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-button);
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  font-size: 13px;
  padding: 0 20px;
  height: 40px;
}

.amaq-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.amaq-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.amaq-btn-primary { background: var(--color-navy-500); color: var(--color-white); box-shadow: var(--shadow-brand); }
.amaq-btn-primary:hover { box-shadow: var(--shadow-brand-lg); }
.amaq-btn-secondary { background: transparent; color: var(--color-navy-500); border: 1.5px solid var(--color-navy-500); }
.amaq-btn-secondary:hover { background: var(--color-navy-50); opacity: 1; }
.amaq-btn-ghost { background: transparent; color: var(--text-secondary); }
.amaq-btn-ghost:hover { background: var(--surface-overlay); opacity: 1; }

/* ── Badge (components/core/Badge.jsx) ─────────────────────────────── */

.amaq-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius-badge);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  font-size: 11px;
  padding: 4px 10px;
}

.amaq-badge-default { background: var(--color-navy-100); color: var(--color-navy-700); }
.amaq-badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.amaq-badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.amaq-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.amaq-badge-sky      { background: var(--color-sky-200);    color: var(--color-navy-700); }
.amaq-badge-outline  { background: transparent; color: var(--color-navy-500); border: 1px solid var(--color-navy-300); }
.amaq-badge-instrumentation { background: var(--color-instrumentation-bg); color: var(--color-instrumentation-text); }

/* ── StatusIndicator (components/feedback/StatusIndicator.jsx) ────────── */

.amaq-status { display: inline-flex; align-items: center; gap: 6px; }
.amaq-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.amaq-status-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }

.amaq-status-dot.red    { background: var(--color-danger);  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.amaq-status-dot.yellow { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.amaq-status-dot.green  { background: var(--color-success); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.amaq-status-dot.instrumentation { background: var(--color-instrumentation); box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2); }

/* ── DataValue (components/data/DataValue.jsx) ─────────────────────── */

.amaq-data-value { display: flex; flex-direction: column; gap: 3px; }
.amaq-data-value .dv-label {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.amaq-data-value .dv-row { display: flex; align-items: baseline; gap: 5px; }
.amaq-data-value .dv-value {
  font-size: 28px; font-family: var(--font-mono); font-weight: 700;
  color: var(--text-primary); line-height: 1; letter-spacing: -0.04em;
}
.amaq-data-value .dv-unit { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }

/* ── Formulario de carga (upload.html) ─────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.form-grid.full { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.form-field .hint { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 400; text-transform: none; letter-spacing: normal; }
.form-field input, .form-field select, .form-field textarea {
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.15);
}
.form-field.span-2 { grid-column: span 2; }

/* ── Selector de archivo (Fase 11, T11.5): el <input type="file"> nativo se ve con la fuente
   y el estilo del navegador, incoherente con el resto del sistema de diseño -- se oculta
   (accesible, sigue siendo tabulable) y se controla con un <label for> estilado como
   amaq-btn-secondary, más el nombre del archivo elegido a la derecha. ────────────────────── */
.file-input-wrap { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.file-input-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.file-input-name { font-size: var(--text-sm); color: var(--text-tertiary); }
.form-section-title { font-size: var(--text-sm); font-weight: 700; color: var(--text-brand); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-6) 0 var(--space-3); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-7); }

.error-banner {
  background: var(--color-danger-bg); color: var(--color-danger-text);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6);
  font-size: var(--text-sm); white-space: pre-wrap;
}

/* ── Informe (report.html) ─────────────────────────────────────────── */

.classification-banner {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6); border-radius: var(--radius-card); margin-bottom: var(--space-7);
}
.classification-banner.red    { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); }
.classification-banner.yellow { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.classification-banner.green  { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); }
.classification-banner.instrumentation { background: rgba(147, 51, 234, 0.12); border: 1px solid rgba(147, 51, 234, 0.35); }
.classification-banner .cb-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.classification-banner .cb-title { font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.classification-banner .cb-justification { font-size: var(--text-sm); color: var(--text-secondary); }

.ficha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); }

.resumen-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

.hallazgo-block {
  border-left: 3px solid var(--color-navy-500);
  padding: var(--space-5); margin-bottom: var(--space-6);
  background: var(--surface-overlay); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.hallazgo-block.tipo2 { border-left-color: var(--color-sky-500); }
.hallazgo-block .hb-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.hallazgo-block p { line-height: var(--leading-relaxed); }
.hallazgo-figure { margin-top: var(--space-5); background: var(--surface-card); border-radius: var(--radius-md); padding: var(--space-3); }

.recomendacion-block {
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-default);
}
.recomendacion-block pre { white-space: pre-wrap; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); }

table.registry-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.registry-table th, table.registry-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); }
table.registry-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
table.registry-table td.values { font-family: var(--font-mono); }

/* ── Tabla de confirmación de lote (Fase 11, T11.2) ────────────────────
   table-layout:fixed + anchos porcentuales fijos en <colgroup> (ver
   batch_preview.html) para que las 5 columnas quepan siempre en el ancho
   de la card, sin depender de un scroll horizontal. */
table.registry-table.preview-table { table-layout: fixed; }
table.registry-table.preview-table .preview-cell-wrap { word-break: break-word; overflow-wrap: anywhere; }
table.registry-table.preview-table input[type="text"],
table.registry-table.preview-table select {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.apply-all-link {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: var(--text-2xs);
  text-decoration: underline;
  margin-left: var(--space-2);
  color: var(--text-link);
  cursor: pointer;
}

.limitations-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.limitations-list li { padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-md); font-size: var(--text-sm); }

/* ── Auditoria ──────────────────────────────────────────────────────── */

.audit-score { display: flex; align-items: baseline; gap: var(--space-3); }
.audit-score .score-value { font-family: var(--font-mono); font-size: 48px; font-weight: 700; color: var(--text-brand); }
.audit-score .score-scale { font-size: var(--text-lg); color: var(--text-tertiary); }

.coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.coverage-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }

.audit-finding { padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.audit-finding.high   { background: var(--color-danger-bg); color: var(--color-danger-text); }
.audit-finding.medium { background: var(--color-warning-bg); color: var(--color-warning-text); }
.audit-finding.low    { background: var(--color-info-bg); color: var(--color-info-text); }

.instrumentation-alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-instrumentation-bg);
  color: var(--color-instrumentation-text);
  border: 1px solid var(--color-instrumentation);
}

/* ── Lote (Fase 10) ─────────────────────────────────────────────────── */

.batch-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }

/* ── Feedback del analista (Fase 7, T7.3) ──────────────────────────────
   Un formulario chico por Finding (dentro de .hallazgo-block) + uno separado para "faltó
   detectar algo" -- ambos sin JS, mismo patron que el resto de formularios planos del
   proyecto (batch_preview.html, T10.5). */
.feedback-form, .feedback-form-missing {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border-default);
}
.feedback-form-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.feedback-form select, .feedback-form input[type="text"],
.feedback-form-missing select, .feedback-form-missing input[type="text"], .feedback-form-missing input[type="number"] {
  background: var(--surface-input); border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  padding: 6px 10px; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
}
.feedback-form input[type="text"] { flex: 1; min-width: 160px; }
.feedback-form-missing label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

/* ── Notebook ───────────────────────────────────────────────────────── */

.notebook-section { margin-bottom: var(--space-8); }
.notebook-section h3 { margin-bottom: var(--space-4); }
.raw-data-item { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }
.discarded-item { font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: span 1; }
  .content { padding: var(--space-5); }
  /* `.topbar` solo se pinta en login y primera instalacion (T18.8); el menu de las demas
     pantallas es el lateral, que trae su propio comportamiento movil en sidebar.css. */
  .topbar { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
}

/* --- Selector de maquina de aCloud ----------------------------------------------------
   Fase 14 (T14.22): este bloque era el UNICO del archivo que se pintaba con tokens que no
   existen. `--surface-sunken`, `--border-subtle`, `--text-muted` y `--brand-sky` no estan
   definidos en ningun archivo de `static/tokens/` -- solo existen `--surface-bg/card/
   elevated/nav/overlay/input`, `--border-default/strong/brand/focus`, `--text-primary/
   secondary/tertiary/inverse/brand/link` y la escala `--color-*`. Siempre caian al fallback,
   que eran colores de tema oscuro incrustados a mano (#2a2d5a, #8f93c4, #a4e5ff) sobre una
   tarjeta blanca: de ahi el fondo gris que reportaba el analista y la sensacion de que el
   componente era ajeno al resto de la app. Ahora usa los tokens reales, que ya cambian solos
   en `data-theme="dark"`.

   Fase 14 (T14.23): la nube de pildoras `inline-flex` pasa a ser una tabla agrupada por
   bombeo -- [checkbox | Maquina | Bombeo | Ultimo diagnostico] -- conservando la caja de
   busqueda y el scroll propio. */

.acloud-machine-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  background: var(--surface-card);
}

.acloud-machine-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.acloud-machine-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-card);
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.acloud-machine-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); }
.acloud-machine-table .col-check { width: 32px; text-align: center; }

.acloud-group-row td {
  background: var(--surface-overlay);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-brand);
}

.acloud-group-count { font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--text-tertiary); }

.acloud-machine-row:hover td { background: var(--surface-overlay); }
.acloud-machine-row.selected td { background: var(--surface-overlay); }
.acloud-machine-name { font-weight: 600; }
.acloud-machine-plant { color: var(--text-tertiary); }
.acloud-last-diagnosis { white-space: nowrap; }

/* T14.27: barra de accion fija al pie del selector -- para no bajar hasta el final de una
   lista de 35 maquinas solo para saber cuantas se marcaron. */
.acloud-action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-top: var(--space-3);
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
}

/* T14.26: el costo de "todas" se dice ANTES de disparar, no despues. */
.acloud-cost-estimate { font-size: var(--text-xs); color: var(--text-tertiary); }
.acloud-cost-estimate.warn { color: var(--color-warning-text); font-weight: 600; }

/* Fase 17: la barra de progreso estimado del selector de aCloud (T14.26) se retiro junto
   con el codigo que la movia -- el diagnostico corre ahora en segundo plano y publica
   progreso real por maquina en /tareas (static/jobs.css). */

/* Badge de origen de datos en el historial */
.source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.source-badge-dds { background: var(--surface-overlay); color: var(--text-brand); }
.source-badge-acloud { background: var(--color-success-bg); color: var(--color-success-text); }

/* --- Fase 14 (T14.11): estado vacio y notas al pie de Inicio -------------------------- */

.home-empty-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.home-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-action:hover { border-color: var(--border-focus); box-shadow: var(--shadow-sm); }
.home-action-icon { font-size: 22px; color: var(--text-brand); }
.home-action-title { font-weight: 700; }
.home-action-hint { font-size: var(--text-xs); color: var(--text-tertiary); }

/* La nota que cada grafico necesita para no afirmar mas de lo que mide. */
.chart-footnote { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); }

/* --- Fase 14 (Bloque B): tablas de historial ordenables, filtrables y paginadas -------- */

.table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.table-filters input[type="search"],
.table-filters input[type="date"],
.table-filters select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  background: var(--surface-input);
  color: var(--text-primary);
}

.table-filters input[type="search"] { min-width: 220px; flex: 1 1 220px; }

.table-filter-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Encabezados ordenables: el enlace ocupa la celda entera para que el area de clic sea la
   columna, no solo el texto. */
.sortable-table th a.sort-link {
  display: block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.sortable-table th a.sort-link:hover { color: var(--text-link); }
.sort-indicator { font-size: 10px; opacity: 0.85; }
.sortable-table th[aria-sort="none"] .sort-indicator { opacity: 0; }
.col-check { width: 28px; text-align: center; }

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.bulk-count { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 600; }

.table-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.table-pagesize { display: flex; align-items: center; gap: var(--space-2); }
.pagesize-option {
  padding: 2px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
}
.pagesize-option.active {
  border-color: var(--border-focus);
  color: var(--text-inverse);
  background: var(--color-navy-500);
}

.table-pager { display: flex; align-items: center; gap: var(--space-2); }
.pager-link { text-decoration: none; color: var(--text-link); }
.pager-link.disabled { color: var(--text-tertiary); opacity: 0.5; }
.pager-status { margin-left: var(--space-2); }

/* ── Fase 16: sesion, login y administracion de usuarios ─────────────── */

/* Fase 16 + Fase 18: la identidad de la sesion se mudo del topbar al pie del menu lateral;
   su presentacion vive con el resto del lateral (static/sidebar.css), junto a las reglas del
   estado colapsado que la afectan. Aqui solo quedan las piezas que no dependen del lateral. */

.session-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-sky-500);
  color: var(--color-navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.session-names { display: flex; flex-direction: column; line-height: 1.15; }
.session-name { font-size: var(--text-sm); font-weight: 600; }
.session-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-sky-500); }

/* Login y primera instalacion: una sola tarjeta angosta, centrada. */
.auth-screen { display: flex; justify-content: center; padding-top: var(--space-8); }
.auth-card { width: 100%; max-width: 460px; }
.auth-hint { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--text-tertiary); }

/* Bloque opcional de conexion a aCloud en el primer arranque: separado del formulario de
   cuenta por una linea, sin el borde por defecto de <fieldset>. */
.acloud-fieldset {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
}
.acloud-fieldset legend {
  padding: 0;
  font-weight: 700;
  font-size: var(--text-sm);
}
.acloud-fieldset legend .hint { display: block; font-weight: 400; margin-top: var(--space-1); }

/* Aviso de operacion exitosa -- el gemelo verde de .error-banner. */
.ok-banner {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

/* Varios formularios de una fila conviven en la misma celda de la tabla de usuarios. */
.inline-form { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.inline-form input[type="password"],
.inline-form select {
  padding: 6px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--surface-card);
  color: var(--text-primary);
}
.inline-label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }

.users-table td.col-actions { white-space: nowrap; }
.users-table .amaq-btn { padding: 4px var(--space-3); font-size: var(--text-xs); }
.users-table .amaq-btn-ghost.danger { color: var(--color-danger-text); }
.users-reset-row td { padding-top: 0; background: var(--surface-overlay); }