/* ==========================================================================
   Codrex CRM · sistema de diseño
   Portado 1:1 desde el app de Codrex Invoices (root.css + app.css) y la web.
   Fuente de verdad de marca: PP Neue Montreal + paleta Codrex v1.
   Light por defecto (nunca dark por prefers-color-scheme; el tema lo fija JS).
   ========================================================================== */

/* ── Saneado de los estilos que trae el navegador ─────────────────────
   La versión Next lo hacía Tailwind. Aquí se escribe a mano: sin esto, el
   navegador pone márgenes propios a los titulares y párrafos, y la cabecera de
   cada página salía 47 píxeles más alta que en el original.
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
/* Lo marcado como oculto NO se dibuja.
   Hace falta decirlo aquí por dos motivos: la regla de arriba obliga a mostrar
   todas las imágenes, y además los dibujos vectoriales (SVG) no siempre
   obedecen el atributo "oculto" por sí solos. Sin esto, el botón de cambiar
   tema enseñaba la luna y el sol a la vez. */
[hidden] { display: none !important; }

/* Los dos iconos del boton de tema (luna y sol) se muestran segun el modo
   activo, no con el atributo "oculto": en los dibujos vectoriales ese atributo
   lo pisan otras reglas y se acababan viendo los dos a la vez. Aqui manda el
   tema, que es lo que de verdad decide cual toca. */
#icon-sun { display: none; }
#icon-moon { display: block; }
[data-theme="dark"] #icon-sun { display: block; }
[data-theme="dark"] #icon-moon { display: none; }
table { border-collapse: collapse; }
summary { cursor: pointer; }

/* ── Fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face { font-family:'PP Neue Montreal'; src:url('/fonts/PPNeueMontreal-Book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('/fonts/PPNeueMontreal-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('/fonts/PPNeueMontreal-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('/fonts/PPNeueMontreal-SemiBoldItalic.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('/fonts/PPNeueMontreal-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Tokens · light (default) ────────────────────────────────────────── */
:root {
  --cdx-pearl:#F7F8FA; --cdx-silver:#E6E8ED; --cdx-graphite:#1A1D22;
  --cdx-violet:#7B61FF; --cdx-violet-dim:#6347F5; --cdx-violet-pale:#EDE9FF;
  --cdx-mint:#B7F3E0; --cdx-glow:#FFD7B8;

  --bg:var(--cdx-pearl); --bg-surface:#FFFFFF; --bg-muted:var(--cdx-pearl);
  --bg-input:#FFFFFF; --bg-hover:var(--cdx-pearl);
  --text:var(--cdx-graphite); --text-2:#4A4E57; --text-3:#6B7280; --text-inv:#FFFFFF;
  --border:var(--cdx-silver); --border-2:#D1D5DB; --border-light:#EEF0F4;

  --primary:var(--cdx-violet); --primary-h:var(--cdx-violet-dim);
  --primary-bg:var(--cdx-violet-pale); --primary-txt:#FFFFFF;
  --primary-link:#6E52EC; --primary-muted:#5B43D6;

  --status-draft:#4B5563;    --status-draft-bg:#F3F4F6;
  --status-sent:#1D4ED8;     --status-sent-bg:#DBEAFE;
  --status-paid:#15803D;     --status-paid-bg:#DCFCE7;
  --status-void:#B91C1C;     --status-void-bg:#FEE2E2;
  --status-overdue:#B45309;  --status-overdue-bg:#FEF3C7;

  --success:#15803D; --success-bg:#DCFCE7;
  --danger:#DC2626;  --danger-bg:#FEE2E2;
  --warning:#B45309; --warning-bg:#FEF3C7;

  --font-sans:'PP Neue Montreal', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(123,97,255,0.07), 0 1px 3px rgba(26,29,34,0.05);
  --shadow-md:0 8px 24px rgba(123,97,255,0.09), 0 2px 8px rgba(26,29,34,0.05);
  --shadow-lg:0 18px 50px rgba(123,97,255,0.13), 0 6px 16px rgba(26,29,34,0.06);
  --shadow-violet:0 6px 22px rgba(123,97,255,0.30);
  --sidebar-w:240px; --transition:150ms ease;

  --grad-violet:linear-gradient(135deg,#7B61FF 0%,#9B82FF 100%);
  --grad-iridescent:linear-gradient(135deg,#C4B8FF 0%,#A8C0FF 28%,#A8E6E0 58%,#FFD0E8 100%);
}

/* ── Tokens · dark (only when JS sets data-theme="dark") ─────────────── */
[data-theme="dark"] {
  --bg:#111318; --bg-surface:#1A1D22; --bg-muted:#13161B; --bg-input:#23272E; --bg-hover:#23272E;
  --text:#F0F1F5; --text-2:#A0A5B1; --text-3:#868E9C; --text-inv:var(--cdx-graphite);
  --border:#2A2E38; --border-2:#363B47; --border-light:#23272E;
  --primary-muted:#A594FF; --primary-link:#927BFF; --primary-bg:rgba(123,97,255,0.14);
  --status-draft:#9CA3AF; --status-draft-bg:#23272E;
  --success-bg:rgba(34,197,94,0.13); --danger-bg:rgba(220,38,38,0.15); --warning-bg:rgba(180,83,9,0.16);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.35); --shadow-md:0 8px 24px rgba(0,0,0,0.40); --shadow-lg:0 18px 50px rgba(0,0,0,0.50);
}

/* ── Base ────────────────────────────────────────────────────────────── */
body {
  font-family:var(--font-sans); background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
a { color:var(--primary-link); text-decoration:none; }
a:hover { color:var(--primary-muted); }

/* ── App shell ───────────────────────────────────────────────────────── */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--bg-surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:width .2s ease, flex-basis .2s ease, background-color .25s ease, border-color .25s ease;
}
.sidebar-head { display:flex; align-items:center; gap:.6rem; padding:1.1rem 1rem 1.2rem; }
.sidebar-logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; min-width:0; }
.logo-favicon { width:30px; height:30px; flex-shrink:0; object-fit:contain; }
.logo-wordmark { display:flex; flex-direction:column; gap:1px; min-width:0; }
.logo-name { font-size:.95rem; font-weight:600; color:var(--text); letter-spacing:-.2px; line-height:1.15; white-space:nowrap; }
.logo-sub { font-size:.58rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); }

/* Plegar el sidebar a solo iconos */
.sidebar-collapse { width:28px; height:28px; margin-left:auto; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--text-3); border-radius:var(--r-sm); cursor:pointer; transition:background .15s, color .15s; }
.sidebar-collapse:hover { background:var(--primary-bg); color:var(--primary-muted); }
.sidebar-collapse svg { width:16px; height:16px; }
.sidebar.is-collapsed { width:72px; flex:0 0 72px; }
.sidebar.is-collapsed .logo-wordmark,
.sidebar.is-collapsed .nav-section,
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .user-details { display:none; }
.sidebar.is-collapsed .sidebar-head { flex-direction:column; gap:.6rem; padding:1rem .5rem; }
.sidebar.is-collapsed .sidebar-collapse { margin-left:0; }
.sidebar.is-collapsed .nav-item a { justify-content:center; gap:0; margin:2px .5rem; padding:.55rem 0; }
.sidebar.is-collapsed .sidebar-footer { flex-direction:column; gap:.6rem; padding:.85rem .5rem; }
.sidebar.is-collapsed .user-info { justify-content:center; flex:0 0 auto; }

.nav-menu { list-style:none; padding:.5rem 0; flex:1; }
.nav-section { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); padding:1rem 1.15rem .4rem; }
.nav-item { list-style:none; }
.nav-item a {
  display:flex; align-items:center; gap:.7rem; margin:2px .55rem; padding:.55rem .7rem;
  color:var(--text-2); font-size:.9rem; font-weight:500; border-radius:var(--r-md);
  transition:color var(--transition), background var(--transition);
}
.nav-item a svg { width:18px; height:18px; flex-shrink:0; color:var(--text-3); transition:color var(--transition); }
.nav-item a:hover { background:var(--primary-bg); color:var(--primary-muted); }
.nav-item a:hover svg { color:var(--primary-muted); }
.nav-item.active a { background:var(--grad-violet); color:#fff; box-shadow:0 2px 12px rgba(123,97,255,0.28); }
.nav-item.active a svg { color:#fff; }

.sidebar-footer { display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem; border-top:1px solid var(--border); flex-shrink:0; }
.user-info { display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.user-avatar { width:30px; height:30px; background:var(--grad-violet); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#fff; flex-shrink:0; }
.user-details { min-width:0; }
.user-name { display:block; font-size:.82rem; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { display:block; font-size:.58rem; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; }

.theme-toggle {
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-2); border-radius:var(--r-sm);
  cursor:pointer; color:var(--text-3); flex-shrink:0;
  transition:background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background:var(--bg-muted); color:var(--text); }
.theme-toggle svg { width:16px; height:16px; }

/* ── Main column ─────────────────────────────────────────────────────── */
.shell { flex:1; min-width:0; display:flex; flex-direction:column; }
.main-content { flex:1; padding:2rem 2.25rem 3rem; min-width:0; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.page-header h1 { font-size:1.7rem; font-weight:700; color:var(--text); letter-spacing:-.02em; line-height:1.1; }
.page-header p { color:var(--text-3); font-size:.9rem; margin-top:.25rem; }
.header-actions { display:flex; align-items:center; gap:.5rem; }

/* ── Card ────────────────────────────────────────────────────────────── */
.card { background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); overflow:hidden; transition:background-color .25s, border-color .25s, box-shadow .2s ease; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.9rem 1.25rem; border-bottom:1px solid var(--border); }
.card-header h2, .card-header h3 { font-size:1rem; font-weight:600; color:var(--text); letter-spacing:-.2px; }
.card-body { padding:1.25rem; }
.card-body.p-0 { padding:0; }

/* ── KPI grid ────────────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s-4); margin-bottom:1.75rem; }
.kpi-card { display:block; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:1.4rem; box-shadow:var(--shadow-sm); transition:background-color .25s, box-shadow .18s ease, transform .18s ease; }
.kpi-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.kpi-label { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:.5rem; }
.kpi-value { font-size:1.9rem; font-weight:700; color:var(--text); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:.72rem; color:var(--text-3); margin-top:.35rem; }

/* ── Table ───────────────────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:.85rem; }
.table thead tr { background:var(--bg-muted); border-bottom:1px solid var(--border); }
.table thead th { padding:.7rem 1rem; text-align:left; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); white-space:nowrap; }
.table tbody tr { border-bottom:1px solid var(--border-light); transition:background .1s; }
.table tbody tr:last-child { border-bottom:none; }
.table tbody tr:hover { background:var(--bg-muted); }
.table tbody td { padding:.7rem 1rem; vertical-align:middle; color:var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .9rem; font-family:var(--font-sans); font-size:.84rem; font-weight:500; border-radius:var(--r-md); border:1px solid var(--border-2); cursor:pointer; line-height:1.3; white-space:nowrap; background:var(--bg-surface); color:var(--text); transition:all var(--transition); }
.btn:hover { background:var(--bg-muted); }
.btn svg { width:15px; height:15px; flex-shrink:0; }
.btn-sm { padding:.4rem .7rem; font-size:.78rem; }
.btn-block { width:100%; justify-content:center; }
.btn-primary { background:var(--grad-violet); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(123,97,255,0.28); }
.btn-primary:hover { background:var(--primary-h); border-color:var(--primary-h); color:#fff; box-shadow:var(--shadow-violet); transform:translateY(-1px); }

/* ── Badge ───────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:.22rem .6rem; font-size:.66rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; border-radius:var(--r-pill); white-space:nowrap; }
.badge-lead { background:var(--primary-bg); color:var(--primary-muted); }
.badge-cualificado { background:var(--status-sent-bg); color:var(--status-sent); }
/* "contactado" es un estado válido del contacto y no tenía pastilla propia: se
   veía como texto suelto en gris entre etiquetas de color. */
.badge-contactado { background:var(--status-overdue-bg); color:var(--status-overdue); }
.badge-cliente { background:var(--status-paid-bg); color:var(--status-paid); }
.badge-perdido { background:var(--status-void-bg); color:var(--status-void); }
.badge-draft { background:var(--status-draft-bg); color:var(--status-draft); }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group.wide { grid-column:1 / -1; }
.form-group label { font-size:.78rem; font-weight:500; color:var(--text-2); }
.input, .textarea, select.input {
  width:100%; padding:10px 12px; background:var(--bg-input); border:1px solid var(--border-2);
  border-radius:var(--r-md); color:var(--text); font-size:.9rem; font-family:inherit; transition:border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
.input:focus, .textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.textarea { resize:vertical; min-height:64px; }
.form-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:.25rem; flex-wrap:wrap; }

/* ── Helpers ─────────────────────────────────────────────────────────── */
.muted { color:var(--text-3); }
.t2 { color:var(--text-2); }
.stack { display:flex; flex-direction:column; gap:1.25rem; }
.grid-2 { display:grid; grid-template-columns:1.6fr 1fr; gap:1.25rem; align-items:start; }
.empty { border:1px dashed var(--border-2); border-radius:var(--r-xl); padding:2.5rem 1.5rem; text-align:center; color:var(--text-3); font-size:.9rem; }
.chip-inline { background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 6px; font-family:'JetBrains Mono',monospace; font-size:.78rem; }
@media (max-width:900px) { .grid-2 { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } }

/* ── Kanban ──────────────────────────────────────────────────────────── */
.kanban { display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; }
.kanban.is-busy { opacity:.7; }
.kanban-col { display:flex; flex-direction:column; width:280px; flex-shrink:0; background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--r-lg); padding:.75rem; transition:border-color .15s, box-shadow .15s; }
.kanban-col.is-over { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.kanban-col__head { display:flex; align-items:center; justify-content:space-between; padding:.15rem .35rem .6rem; }
.kanban-col__name { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--text); }
.kanban-col__dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.kanban-col__count { font-size:.72rem; color:var(--text-3); }
.kanban-col__body { display:flex; flex-direction:column; gap:.5rem; flex:1; min-height:24px; }
.kanban-card { background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:.7rem .8rem; font-size:.85rem; cursor:grab; }
.kanban-card:active { cursor:grabbing; }
.kanban-card.is-dragging { opacity:.4; }
.kanban-card__title { font-weight:500; color:var(--text); }
.kanban-card__contact { font-size:.75rem; color:var(--text-3); }
.kanban-card__value { margin-top:.35rem; font-size:.78rem; font-weight:600; color:var(--primary-muted); }
.kanban-empty { border:1px dashed var(--border-2); border-radius:var(--r-md); padding:1rem; text-align:center; font-size:.72rem; color:var(--text-3); }

/* ── Public form page (/f/[slug]) ────────────────────────────────────── */
.public-wrap { min-height:100vh; display:grid; place-items:center; padding:2.5rem 1rem; background:var(--bg); }
.public-card { width:100%; max-width:460px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:2.25rem; }
.public-card__logo { width:40px; height:40px; object-fit:contain; margin-bottom:1.1rem; }
.public-card h1 { font-size:1.4rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.35rem; }
.public-card__intro { color:var(--text-3); font-size:.9rem; margin-bottom:1.5rem; }
.public-card .form-group { margin-bottom:.9rem; }
.public-ok { text-align:center; padding:1rem 0; }
.public-ok__ic { width:52px; height:52px; margin:0 auto 1rem; border-radius:50%; background:var(--status-paid-bg); color:var(--status-paid); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.public-err { margin-top:.75rem; padding:.6rem .8rem; border-radius:var(--r-md); background:var(--danger-bg); color:var(--danger); font-size:.82rem; }
.public-foot { margin-top:1.5rem; text-align:center; font-size:.72rem; color:var(--text-3); }
.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem; }
.slot { padding:.5rem; border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-surface); color:var(--text); font-size:.85rem; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.slot:hover { border-color:var(--primary); color:var(--primary-muted); }
.slot.sel { background:var(--grad-violet); color:#fff; border-color:transparent; }

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.tl-item { display:flex; gap:.7rem; }
.tl-ic { margin-top:2px; width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--primary-bg); color:var(--primary-muted); display:flex; align-items:center; justify-content:center; font-size:.75rem; }
.tl-body { flex:1; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-md); padding:.55rem .8rem; box-shadow:var(--shadow-sm); }
.tl-body p { color:var(--text); font-size:.85rem; }
.tl-time { margin-top:.25rem; font-size:.7rem; color:var(--text-3); }

/* ── Mini list (tasks / opportunities) ───────────────────────────────── */
.mini { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.mini-row { display:flex; align-items:center; gap:.5rem; font-size:.85rem; }
.mini-box { background:var(--bg-muted); border-radius:var(--r-md); padding:.5rem .7rem; }
.check { width:17px; height:17px; flex-shrink:0; border:1px solid var(--border-2); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.65rem; cursor:pointer; background:transparent; color:transparent; }
.check.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.done { color:var(--text-3); text-decoration:line-through; }

/* ==========================================================================
   Añadidos de la versión PHP
   El diseño de arriba se copia tal cual de la versión Next. Aquí abajo solo
   lo que esta versión necesita de más: el respaldo del tablero para cuando el
   navegador no ejecuta JavaScript, y utilidades que en Next iban en línea.
   ========================================================================== */

/* Texto solo para lectores de pantalla. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.text-right { text-align:right; }

/* Respaldo del tablero: mover de etapa sin arrastrar. Oculto cuando el
   arrastre funciona (lo revela .no-js, que pone el propio HTML si no hay JS). */
.kanban-card__move { display:none; gap:.35rem; margin-top:.5rem; }
.kanban-card__move .input { padding:.25rem .4rem; font-size:.75rem; height:auto; }
.kanban-card__move .btn { padding:.25rem .5rem; font-size:.72rem; }
.no-js .kanban-card__move { display:flex; }
.no-js .kanban-card { cursor:default; }
.no-js .kanban-empty { display:none; }

/* Aviso de operación correcta o fallida (gestión de usuarios). */
.notice { margin-bottom:1rem; padding:.7rem 1rem; border-radius:10px; font-size:.85rem; }
.notice-ok { background:var(--success-bg); color:var(--success); }
.notice-err { background:var(--danger-bg); color:var(--danger); }

/* Bloque de código para el fragmento que se pega en la web.
   Las líneas NO se parten (white-space:pre, como en la versión Next): el bloque
   se desplaza en horizontal por dentro. Partirlas cambiaba el reparto de la
   rejilla, porque el ancho de este bloque es lo que dimensiona su columna. */
.code-block {
  margin:0; padding:.8rem; background:var(--bg-muted); border:1px solid var(--border);
  border-radius:var(--r-md); font-size:.72rem; overflow-x:auto;
  font-family:'JetBrains Mono', monospace; color:var(--text-2); white-space:pre;
}

/* Constructor de campos del formulario. */
.field-row { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.field-row .input { height:auto; padding:.35rem .5rem; font-size:.82rem; }
/* El desplegable de tipo lleva ancho propio (.input vale 100% por defecto) y
   los botones de orden no se encogen, para que la fila no se parta en dos. */
.field-row select.input { flex:0 0 130px; width:auto; }
.field-row > .btn-sm { flex:0 0 auto; }


/* ==========================================================================
   Buscador, segmentos, paginación e importación
   ========================================================================== */

/* Barra de segmentos guardados: una pastilla por cada búsqueda con nombre. */
.segment-bar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.chip {
  display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:.82rem; font-weight:500; color:var(--text-2); text-decoration:none;
  transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.chip:hover { border-color:var(--primary); color:var(--primary-muted); }
.chip.is-active { background:var(--grad-violet); border-color:transparent; color:#fff; box-shadow:0 2px 10px rgba(123,97,255,.26); }
.chip-count {
  font-size:.7rem; font-variant-numeric:tabular-nums; padding:.05rem .4rem;
  border-radius:var(--r-pill); background:var(--bg-muted); color:var(--text-3);
}
.chip.is-active .chip-count { background:rgba(255,255,255,.24); color:#fff; }

/* La rejilla de filtros cabe en tres columnas, no en dos como el resto. */
.filter-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1100px) { .filter-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px)  { .filter-grid { grid-template-columns:1fr; } }

/* Guardar la búsqueda actual como segmento, separado de los filtros. */
.save-segment { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-light); }

/* Cabeceras de tabla que ordenan al pincharlas. */
.th-sort { color:inherit; text-decoration:none; white-space:nowrap; }
.th-sort:hover { color:var(--primary-muted); }
.th-sort.is-active { color:var(--primary-muted); font-weight:700; }

/* Paginación. */
.pager { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.pager-links { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }

/* El campo de subir archivo no es un input normal: hay que darle aire. */
input[type="file"].input { padding:.5rem; line-height:1.4; }