/* Sistema visual tomado del panel de Admin-Cupperlab (public/assets/admin.css)
   a petición del usuario (2026-09-10) — mismos tokens de color/tipografía/
   espaciado, adaptados a un CSS propio de este repo (sin compartir el
   fichero entre productos). Fuente vía Google Fonts en vez de autoalojada:
   este panel interno no tiene el presupuesto de rendimiento "cero requests
   externos" que sí aplica al sitio público de Admin-Cupperlab. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  color-scheme: dark;
  --crm-deep-black: #031825;
  --crm-dark-gray: #002F40;
  --crm-border: #0F3C4E;
  --crm-text: #F5F5F5;
  --crm-side-text: #9FB4BD;
  --crm-caption: #6E8A94;
  --crm-blue: #42BDDE;
  --crm-blue-soft: rgb(66 189 222 / .14);
  --crm-green: #1F9D6B;
  --crm-danger: #D0402A;
  --crm-danger-bg: #3A1A14;
  --crm-ink-solid: #FF5F3F;
  --crm-ink-solid-text: #FFFFFF;
  --glow-accent: radial-gradient(circle, rgb(255 95 63 / .22) 0%, rgb(255 95 63 / .08) 40%, rgb(255 95 63 / 0) 66%);
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-control: 14px;
  --radius-inner: 16px;
  --radius-panel: 20px;
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 22px;
  --space-9: 28px;
  --sidebar-width: 240px;
  --topbar-height: 68px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body { margin: 0; min-height: 100%; background: var(--crm-deep-black); }
body { min-height: 100vh; font: 400 13.5px/1.5 var(--font-ui); color: var(--crm-text); }
a { color: var(--crm-blue); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--crm-blue) !important;
  box-shadow: 0 0 0 3px rgb(66 189 222 / .35) !important;
}
label { display: grid; gap: var(--space-2); color: var(--crm-side-text); font-size: 12.5px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--crm-border); border-radius: var(--radius-control);
  background: var(--crm-deep-black); color: var(--crm-text);
}
textarea { resize: vertical; }

/* --- Botones --- */
.button {
  min-height: 42px; padding: 10px var(--space-5); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  border: 1px solid var(--crm-ink-solid); border-radius: var(--radius-control);
  background: var(--crm-ink-solid); color: var(--crm-ink-solid-text); text-decoration: none; font-weight: 600; cursor: pointer;
  transition: box-shadow .2s ease, filter .2s ease;
}
.button:hover { filter: brightness(1.1); box-shadow: 0 8px 20px rgb(255 95 63 / .3); }
.button--secondary { border-color: var(--crm-border); background: var(--crm-dark-gray); color: var(--crm-text); }
.button--secondary:hover { border-color: var(--crm-caption); filter: none; box-shadow: none; }
.button--compact { min-height: 34px; padding: 6px var(--space-3); font-size: 12px; }
.button--full { width: 100%; }
.icon { display: block; flex: 0 0 auto; }

/* --- Layout: sidebar + topbar (misma estructura que Admin-Cupperlab) --- */
.app-layout { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-width);
  display: flex; flex-direction: column; border-right: 1px solid var(--crm-border);
  background: var(--crm-deep-black);
}
.brand-row { min-height: 82px; padding: 0 var(--space-7); display: flex; align-items: center; }
.brand { color: var(--crm-text); text-decoration: none; font: 800 18px var(--font-heading); letter-spacing: .01em; }
.brand small { display: block; margin-top: 2px; color: var(--crm-caption); font: 500 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sidebar-nav { flex: 1; padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
/* El `<template x-if>` de Alpine exige un único nodo raíz — el <div> que
   envuelve los enlaces solo visibles para agencia usa `display: contents`
   para no crear un nivel de flex propio y dejar que sus botones se
   espacien igual que los del resto de `.sidebar-nav`. */
.sidebar-nav > div { display: contents; }
.sidebar-link {
  min-height: 46px; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-4);
  border-radius: var(--radius-control); color: var(--crm-side-text); text-decoration: none; font-weight: 500;
  background: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.sidebar-link:hover { color: var(--crm-blue); }
.sidebar-link--active { color: var(--crm-ink-solid-text); background: var(--crm-ink-solid); font-weight: 700; }
.sidebar-bottom { margin-top: auto; padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--crm-border); }
.profile { display: flex; align-items: center; gap: var(--space-3); }
.avatar {
  position: relative; width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--radius-control); background: var(--crm-ink-solid); color: var(--crm-ink-solid-text); font: 700 12px var(--font-ui);
}
.profile-copy { min-width: 0; display: grid; }
.profile-copy strong { overflow: hidden; color: var(--crm-text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: var(--crm-caption); font-size: 11px; }
.utility-link { min-height: 40px; margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-3); color: var(--crm-side-text); text-decoration: none; font-size: 12.5px; }
.utility-link:hover { color: var(--crm-blue); }

.app-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-height); padding: 0 var(--space-9);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--crm-border); background: var(--crm-deep-black);
}
.topbar-title { display: flex; align-items: center; gap: var(--space-4); }
.topbar-title p { margin: 0; color: var(--crm-caption); font-size: 12px; }
.topbar-title h1 { margin: 0; font: 700 18px var(--font-heading); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-4); }
.topbar-tenant-switch { min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--crm-border); border-radius: var(--radius-control); background: var(--crm-dark-gray); color: var(--crm-text); }

/* Ancho completo a propósito (2026-09-10, feedback del usuario) — a
   diferencia del admin.css original (que centra en 1180px), el Pipeline
   necesita todo el ancho disponible para mostrar varias columnas del
   kanban sin scroll horizontal. */
.admin-shell { width: 100%; padding: var(--space-9); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-7); }
.page-heading h1 { margin: 0; font: 700 24px var(--font-heading); }
.page-actions { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow { margin: 0; color: var(--crm-caption); font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }

/* --- Filtros --- */
.content-filters { margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.filter-select select { min-width: 150px; height: 40px; background: var(--crm-dark-gray); }
.filter-select label { display: flex; align-items: center; gap: var(--space-2); color: var(--crm-side-text); font-size: 12px; }

/* --- Tabla (Bandeja) --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--crm-border); border-radius: var(--radius-panel); background: var(--crm-dark-gray); }
table { width: 100%; border-collapse: collapse; }
th, td { height: 56px; padding: 0 var(--space-5); text-align: left; border-bottom: 1px solid var(--crm-border); }
th { color: var(--crm-caption); font: 500 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--crm-deep-black); cursor: pointer; }
.empty-row { padding: var(--space-9); text-align: center; color: var(--crm-side-text); }
.row-actions { display: flex; gap: var(--space-2); }
code { background: var(--crm-deep-black); padding: 2px 7px; border-radius: 5px; color: var(--crm-blue); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
.status, .badge {
  padding: 3px 10px; display: inline-flex; align-items: center; border-radius: 999px;
  font: 600 11.5px var(--font-ui); color: #fff;
}

/* --- Kanban (sin equivalente en Admin-Cupperlab, mismos tokens) --- */
.kanban__board { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); }
.kanban__column { background: var(--crm-dark-gray); border: 1px solid var(--crm-border); border-radius: var(--radius-panel); padding: var(--space-4); min-width: 17rem; flex: 1 0 17rem; }
.kanban__column h3 { margin: 0 0 var(--space-4); font: 700 13px var(--font-heading); border-left: 3px solid; padding-left: var(--space-3); display: flex; justify-content: space-between; color: var(--crm-text); }
.kanban__count { color: var(--crm-caption); font-weight: 500; }
.kanban__card {
  background: var(--crm-deep-black); border: 1px solid var(--crm-border); border-radius: var(--radius-control);
  padding: var(--space-4); margin-bottom: var(--space-3); cursor: grab; font-size: 0.85rem;
  transition: border-color .2s ease;
}
.kanban__card:hover { border-color: var(--crm-blue); }
.kanban__card strong { display: block; margin-bottom: 2px; color: var(--crm-text); }
.kanban__card-tenant { margin: 0 0 4px; font-size: 0.7rem; color: var(--crm-blue); text-transform: uppercase; letter-spacing: .04em; }
.kanban__card-message { color: var(--crm-side-text); margin: var(--space-2) 0 0; }
.kanban__card p { margin: 2px 0 0; color: var(--crm-side-text); }

/* --- Login --- */
.auth-shell { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--crm-deep-black); }
.auth-shell__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(146deg, var(--crm-deep-black) 54%, var(--crm-ink-solid) 100%); opacity: .82; }
.auth-shell__overlay::after { content: ""; position: absolute; width: 500px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: var(--glow-accent); }
.auth-brand-panel { position: relative; z-index: 2; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-logo { color: #FFFFFF; text-decoration: none; font: 900 22px var(--font-heading); }
.auth-message { max-width: 560px; }
.auth-message .eyebrow { color: rgb(255 255 255 / .65); }
.auth-message h1 { margin: var(--space-4) 0; color: #FFFFFF; font: 700 clamp(34px, 4.5vw, 48px)/1.08 var(--font-heading); letter-spacing: -.02em; }
.auth-message p:last-child { color: rgb(255 255 255 / .78); font-size: 15px; }
.restricted-seal { width: fit-content; margin: 0; padding: var(--space-2) var(--space-4); border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; color: rgb(255 255 255 / .78); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.restricted-seal span { color: var(--crm-blue); }
.auth-form-panel { position: relative; z-index: 2; margin: 28px; display: grid; place-items: center; padding: 40px; }
.auth-card { width: min(400px, 100%); }
.auth-card h2 { margin: var(--space-2) 0; color: #FFFFFF; font: 700 28px var(--font-heading); }
.auth-card .eyebrow { color: rgb(255 255 255 / .65); }
.auth-card > p:not(.eyebrow) { margin: 0 0 var(--space-7); color: rgb(255 255 255 / .78); }
.auth-card label { color: rgb(255 255 255 / .85); }
.auth-card input { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .25); color: #FFFFFF; }
.auth-card input::placeholder { color: rgb(255 255 255 / .45); }
.form-stack { display: grid; gap: var(--space-5); }
.form-error { padding: var(--space-4) var(--space-5); border: 1px solid rgb(214 82 75 / .38); border-radius: var(--radius-control); background: rgb(214 82 75 / .10); color: #ff9b8c; font-size: 13px; }

/* --- Panel de detalle / formularios modales --- */
.lead-modal__overlay {
  position: fixed; inset: 0; background: rgb(3 24 37 / .72); display: flex; justify-content: flex-end; z-index: 50;
}
.lead-modal {
  background: var(--crm-dark-gray); border-left: 1px solid var(--crm-border); width: 27rem; max-width: 100%;
  height: 100%; overflow-y: auto; padding: var(--space-7); box-shadow: -8px 0 30px rgb(0 0 0 / .4);
}
.lead-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.lead-modal__header h2 { font: 700 18px var(--font-heading); margin: 0; color: var(--crm-text); }
.lead-modal__close { border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--crm-caption); }
.lead-modal__close:hover { color: var(--crm-text); }
.lead-modal__facts { margin: 0 0 var(--space-7); font-size: 0.85rem; }
.lead-modal__facts dt { color: var(--crm-caption); text-transform: uppercase; font-size: 0.7rem; letter-spacing: .05em; margin-top: var(--space-4); }
.lead-modal__facts dd { margin: 3px 0 0; color: var(--crm-text); }
.lead-modal__muted { color: var(--crm-caption); font-size: 0.8rem; }
.lead-modal__error { color: #ff9b8c; font-size: 0.82rem; }
.lead-modal__activity h3, .lead-modal__other-leads h3 { font: 700 13px var(--font-heading); margin: 0 0 var(--space-4); color: var(--crm-text); }
.lead-modal__note-form { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.lead-modal__note-form textarea { flex: 1; }
.lead-modal__note-form button { border: none; background: var(--crm-ink-solid); color: #fff; border-radius: var(--radius-control); padding: 0 var(--space-5); cursor: pointer; }
.activity-feed { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.activity-feed li { padding: var(--space-3) 0; border-bottom: 1px solid var(--crm-border); }
.activity-feed li:last-child { border-bottom: none; }
.activity-feed__date { display: block; color: var(--crm-caption); font-size: 0.7rem; }
.activity-feed p { margin: 3px 0 0; color: var(--crm-text); }
.lead-modal__other-leads { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--crm-border); }
.lead-modal__other-leads ul { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.lead-modal__other-leads li { margin-bottom: var(--space-3); }
.lead-modal__other-leads a { display: flex; align-items: center; gap: var(--space-3); color: var(--crm-side-text); text-decoration: none; }
.lead-modal__other-leads a:hover { color: var(--crm-blue); }
.simple-form { display: flex; flex-direction: column; gap: var(--space-5); font-size: 0.85rem; }
.simple-form button[type="submit"] { border: none; background: var(--crm-ink-solid); color: #fff; border-radius: var(--radius-control); padding: 11px; cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.import-result { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--crm-border); font-size: 0.85rem; color: var(--crm-text); }
.import-result ul { padding-left: var(--space-6); color: #ff9b8c; }