/* ============================================================================
   panel.css — Design system del panel smartNext
   Tokens (espaciado, tipografía, color, radios, sombras) + componentes.
   Base para listados, formularios, tablas y pantallas administrativas.
   Estética: neutra, minimalista, administrativa (referencia: Stripe / Linear / GitHub).
   ============================================================================ */

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* Neutros */
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#fafbfc;      /* zonas sutiles: header de tabla, hover */
  --border:#e7e9ec;         /* hairline */
  --border-strong:#d7dade;
  --text:#181b20;           /* texto principal */
  --text-muted:#5c636e;     /* secundario */
  --text-subtle:#8a919c;    /* etiquetas / terciario */

  /* Acento corporativo (ÚNICO acento — cambia este hex por el verde exacto de marca) */
  --accent:#1f8a4d;
  --accent-hover:#1a7742;
  --accent-weak:#eaf5ee;    /* fondo tenue del acento */
  --accent-text:#ffffff;

  /* Semánticos */
  --danger:#c4402f;
  --danger-weak:#fbecea;
  --focus:color-mix(in srgb, var(--accent) 32%, transparent);

  /* Radios */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* Sombras (muy ligeras) */
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);

  /* Escala de espaciado (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* Escala tipográfica */
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:27px;

  --font:'Inter','Inter var',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --surface:#16191e; --surface-2:#1b1f25; --border:#262b32; --border-strong:#333a43;
    --text:#e7e9ec; --text-muted:#9aa1ac; --text-subtle:#6b727c;
    --accent:#2ea24a; --accent-hover:#39b356; --accent-weak:#122419; --accent-text:#05130b;
    --danger:#e0574a; --danger-weak:#2a1715; --focus:color-mix(in srgb, var(--accent) 40%, transparent);
    --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  }
}

/* ---- Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-base);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
:where(a,button,input,select,.iconbtn,.tbtn):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);
}

/* ---- Header (NO modificar: logo, fondo, cerrar sesión) ------------------- */
.app-header{background:#000;display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;}
.app-header .app-logo{height:34px;width:auto;display:block;flex:0 0 auto;}
.app-header .app-logout{flex:0 0 auto;background:#d92c2c;color:#fff;text-decoration:none;
  font-size:var(--fs-sm);font-weight:600;line-height:1;padding:9px 15px;border:0;border-radius:var(--r-sm);
  cursor:pointer;white-space:nowrap;transition:background .15s ease;}
.app-header .app-logout:hover{background:#b52222}

/* ---- Layout ------------------------------------------------------------- */
main{max-width:640px;margin:var(--sp-10) auto var(--sp-12);padding:0 var(--sp-5)}
main.wide{max-width:1060px}

/* Encabezado de módulo: Título ↓ Dominio ↓ Acciones */
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-6)}
.toolbar .title{margin:0;font-size:var(--fs-2xl);font-weight:640;letter-spacing:-.014em;line-height:1.2}
.toolbar .title small{display:block;margin-top:var(--sp-2);font-size:var(--fs-md);font-weight:500;
  letter-spacing:0;color:var(--text-muted)}
.tools{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ---- Encabezado de tarjeta con acción a la derecha ---------------------- */
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  margin:0 0 var(--sp-5);flex-wrap:wrap}
.cardhead h1{margin:0}

/* ---- Barra de filtros (visor de bitácora) ------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end;margin:0 0 var(--sp-5);
  padding:var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
.filters .f{display:flex;flex-direction:column;gap:6px}
.filters .f>label{font-size:var(--fs-xs);color:var(--text-subtle);font-weight:560}
.filters select,.filters input[type=date]{padding:8px 10px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-family:inherit}
.filters .chk{flex-direction:row;align-items:center;gap:8px;padding-bottom:9px}
.filters .chk input{width:16px;height:16px}

/* ---- Pastilla de conteo (badges en botones: Pendientes 3, @ Alias 2) ---- */
.count{display:inline-flex;align-items:center;justify-content:center;min-width:1.3em;padding:0 .4em;
  height:1.3em;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-text);
  font-size:var(--fs-xs);font-weight:680;line-height:1;margin-left:.35em}

/* ---- Superficies -------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-8);box-shadow:var(--shadow-sm)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{padding:var(--sp-4) var(--sp-4);border-bottom:1px solid var(--border)}

h1{font-size:var(--fs-xl);font-weight:640;letter-spacing:-.012em;margin:0 0 var(--sp-6)}

/* ---- Formularios -------------------------------------------------------- */
label{display:block;font-weight:560;font-size:var(--fs-base);margin:0 0 var(--sp-2);color:var(--text)}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:10px 12px;font-size:var(--fs-md);font-family:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);
  transition:border-color .15s ease, box-shadow .15s ease}
input:hover,select:hover{border-color:var(--text-subtle)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
input:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed}
input:user-invalid{border-color:var(--danger)}
.field{margin-bottom:var(--sp-5)}
.suffix{display:flex;align-items:center;gap:var(--sp-2)}
.suffix .dom{color:var(--text-muted);font-weight:560;white-space:nowrap}
.hint{font-size:var(--fs-sm);color:var(--text-subtle);margin-top:var(--sp-2);min-height:1.1em}
.hint b{color:var(--text);font-weight:560}
.hint.ok{color:var(--accent)} .hint.err{color:var(--danger)}
fieldset{border:1px solid var(--border);border-radius:var(--r-md);margin:0 0 var(--sp-5);
  padding:var(--sp-3) var(--sp-4) var(--sp-4)}
legend{font-weight:560;font-size:var(--fs-sm);color:var(--text-muted);padding:0 var(--sp-2)}
.radios{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.radios label{font-weight:450;display:flex;align-items:center;gap:var(--sp-2);margin:0;cursor:pointer}
.radios input{width:auto}
/* Chips seleccionables (capacidad) */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chips label{display:inline-flex;align-items:center;margin:0;font-weight:500;font-size:var(--fs-sm);
  cursor:pointer;user-select:none;border:1px solid var(--border-strong);border-radius:var(--r-pill);
  padding:7px 15px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.chips label:hover{border-color:var(--accent)}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.chips label:has(input:focus-visible){box-shadow:0 0 0 3px var(--focus)}

/* ---- Botones ------------------------------------------------------------ */
.actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-8)}
.actions .btn,.actions button{flex:1;padding:11px var(--sp-4);border:1px solid transparent;
  border-radius:var(--r-md);font-size:var(--fs-md);font-family:inherit;font-weight:560;cursor:pointer;
  text-align:center;text-decoration:none;line-height:1.4;transition:background .15s ease,border-color .15s ease}
.actions .primary,.actions .success{background:var(--accent);color:var(--accent-text)}
.actions .primary:hover,.actions .success:hover{background:var(--accent-hover)}
.actions .ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text);font-weight:500}
.actions .ghost:hover{border-color:var(--text-subtle);background:var(--surface-2)}
.actions .danger{background:var(--danger);color:#fff}
.actions .danger:hover{filter:brightness(.94)}
.btn svg{width:16px;height:16px;flex:0 0 auto}   /* red de seguridad: íconos en .btn nunca se agrandan */

/* Botones de barra (toolbar) */
.tbtn{display:inline-flex;align-items:center;gap:var(--sp-2);text-decoration:none;font-size:var(--fs-base);
  font-weight:520;padding:8px 13px;border-radius:var(--r-md);border:1px solid var(--border-strong);
  color:var(--text);background:var(--surface);cursor:pointer;line-height:1.3;font-family:inherit;
  transition:border-color .15s ease,background .15s ease}
.tbtn:hover{border-color:var(--text-subtle);background:var(--surface-2)}
.tbtn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.tbtn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.tbtn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.tbtn.danger:hover{background:var(--danger);border-color:var(--danger);filter:brightness(.93)}
/* Título de banner con icono (el SVG suelto necesita tamaño explícito) */
.sec-alert{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--danger);margin-bottom:8px}
.sec-alert svg{width:18px;height:18px;flex:0 0 auto}
.tbtn svg{width:16px;height:16px;flex:0 0 auto}

/* ---- Buscador ----------------------------------------------------------- */
.search{position:relative}
.search input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--border-strong);
  border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:var(--fs-md);
  box-shadow:var(--shadow-xs);transition:border-color .15s ease,box-shadow .15s ease}
.search input::placeholder{color:var(--text-subtle)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--text-subtle)}

/* ---- Estadísticas ------------------------------------------------------- */
.stats{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.stat{flex:0 1 auto;min-width:104px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-xs)}
.stat .n{font-size:var(--fs-xl);font-weight:640;line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.stat .l{font-size:var(--fs-xs);font-weight:500;color:var(--text-subtle);margin-top:var(--sp-1);
  text-transform:uppercase;letter-spacing:.04em}

/* ---- Tabla -------------------------------------------------------------- */
.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
table.data th{text-align:left;font-weight:560;color:var(--text-subtle);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.05em;padding:12px var(--sp-5);
  background:var(--surface-2);border-bottom:1px solid var(--border)}
table.data td{padding:14px var(--sp-5);border-bottom:1px solid var(--border);white-space:nowrap;
  vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .12s ease}
table.data tbody tr:hover{background:var(--surface-2)}
table.data td strong{font-weight:560}
table.data .sub{color:var(--text-muted);font-size:.92em}
table.data td.right,table.data th.right{text-align:right}
/* Columna de acciones SIEMPRE visible (fija a la derecha en scroll horizontal) */
table.data th.acc,table.data td.acc{position:sticky;right:0;z-index:1;
  box-shadow:-8px 0 8px -8px rgba(16,24,40,.12)}
table.data td.acc{background:var(--surface)}
table.data th.acc{background:var(--surface-2)}
table.data tbody tr:hover td.acc{background:var(--surface-2)}

/* ---- Badges ------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:560;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-muted);
  border:1px solid var(--border)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.badge.fwd{background:var(--accent-weak);color:var(--accent);border-color:transparent}

/* ---- Acciones por fila -------------------------------------------------- */
.rowacts{display:inline-flex;gap:var(--sp-2)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border-radius:var(--r-md);border:1px solid var(--border-strong);color:var(--text-muted);cursor:pointer;
  font:inherit;text-decoration:none;background:var(--surface);transition:border-color .15s ease,color .15s ease,background .15s ease}
.iconbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}
.iconbtn.danger:hover{border-color:var(--danger);color:var(--danger)}
.iconbtn.warn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:16px;height:16px}

/* ---- Banners y resultado ------------------------------------------------ */
.banner{padding:12px var(--sp-4);border-radius:var(--r-md);margin-bottom:var(--sp-5);
  font-size:var(--fs-md);font-weight:500;border:1px solid transparent}
.banner.ok{background:var(--accent-weak);color:var(--accent-hover);border-color:transparent}
.banner.err{background:var(--danger-weak);color:var(--danger);border-color:transparent}
table.res{width:100%;border-collapse:collapse;margin:var(--sp-2) 0 var(--sp-5)}
table.res td{padding:11px var(--sp-1);border-bottom:1px solid var(--border);vertical-align:top}
table.res tr:last-child td{border-bottom:0}
table.res td.k{color:var(--text-subtle);width:38%;font-size:var(--fs-sm)}
.mono{font-family:var(--mono);font-size:.94em;background:var(--surface-2);border:1px solid var(--border);
  padding:2px 7px;border-radius:var(--r-sm)}

/* ---- Autenticación (login) ---------------------------------------------- */
.auth{min-height:calc(100vh - 58px);display:grid;place-items:center;padding:var(--sp-8) var(--sp-5)}
.auth .card{width:100%;max-width:400px}
.auth h1{text-align:center;margin-bottom:var(--sp-6)}
.auth .forgot{text-align:center;margin-top:var(--sp-5);font-size:var(--fs-sm)}
.auth .forgot a{color:var(--text-muted);text-decoration:none}
.auth .forgot a:hover{color:var(--accent)}

/* ---- Lista de selección (selector de dominios, menús) ------------------- */
.list-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:15px var(--sp-5);text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--border);transition:background .12s ease}
.list-item:last-child{border-bottom:0}
.list-item:hover{background:var(--surface-2)}
.list-item strong{font-weight:560}
.list-item .chev{color:var(--text-subtle);display:inline-flex}
.list-item .chev svg{width:18px;height:18px}

/* ---- Fila para agregar (input + botón), p.ej. miembro de lista ---------- */
.addrow{display:flex;gap:var(--sp-2)}
.addrow input{flex:1}
.addrow .tbtn{flex:0 0 auto}
/* Formulario compacto dentro de una celda (p.ej. botón remover por fila) */
table.data td form{margin:0;display:inline}

/* ---- Misc --------------------------------------------------------------- */
.muted{color:var(--text-muted)}
.empty{text-align:center;color:var(--text-subtle);padding:var(--sp-10) var(--sp-4)}
[hidden]{display:none !important}