/* ==========================================================================
   admin.css — panel privado de bio.nexofem.com
   Sobrio, marca NexoFem (morado #772B95), legible y usable desde el teléfono.
   El naranja del logo NO se usa aquí: en un panel denso el acento debe ser uno
   solo y con contraste AA garantizado.
   ========================================================================== */

:root{
  --morado:#772B95;       /* rector — morado del logo (8.2:1 sobre blanco) */
  --morado-deep:#5A1F72;
  --ink:#2E1F3A;
  --ink-soft:#614A6E;
  --line:#EBE0F0;
  --bg:#F8F4FA;
  --card:#FFFFFF;
  --ok-bg:#E7F6EC;   --ok-fg:#1E7A46;
  --err-bg:#FCE8E8;  --err-fg:#B02A2A;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-size:15px;
}
.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.wrap{max-width:920px;margin:0 auto;padding:0 16px 60px}

/* --- Barra superior --- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:14px 4px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.brand{font-weight:750;color:var(--morado-deep);font-size:17px}
.brand small{font-weight:500;color:var(--ink-soft)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{
  text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:10px;font-size:14px;
}
.nav a:hover{background:#F2E7F7;color:var(--morado-deep)}
.nav-logout{display:inline;margin:0}
.nav button.logout{
  background:none;border:none;cursor:pointer;font:inherit;
  padding:8px 12px;border-radius:10px;color:var(--err-fg);
}
.nav button.logout:hover{background:#F2E7F7}

.main{background:transparent}

/* --- Encabezados --- */
h1{font-size:22px;color:var(--morado-deep);letter-spacing:-.3px;margin:6px 0 14px}
h2{font-size:17px;color:var(--morado-deep);margin:26px 0 10px}
h2 small,h1 small{font-weight:500;color:var(--ink-soft);font-size:13px}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.head-row h1{margin:0}

/* --- Botones --- */
.btn-primary,.btn-sec{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  font-size:14px;font-weight:650;padding:10px 16px;border-radius:11px;font-family:inherit;
}
.btn-primary{background:var(--morado);color:#fff}
.btn-primary:hover{background:#5A1F72}
.btn-sec{background:#F2E7F7;color:var(--morado-deep)}
.btn-sec:hover{background:#E9D8F0}

/* --- Mensajes flash --- */
.flash{border-radius:11px;padding:11px 14px;margin-bottom:16px;font-size:14px}
.flash.ok{background:var(--ok-bg);color:var(--ok-fg)}
.flash.err{background:var(--err-bg);color:var(--err-fg)}
.flash ul{margin:0;padding-left:18px}

/* --- Tablas --- */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(74,24,96,.06)}
.tabla th,.tabla td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);background:#FCF8FD}
.tabla th small{text-transform:none;letter-spacing:0}
.tabla tr:last-child td,.tabla tbody tr:last-child td{border-bottom:none}
.tabla .num{text-align:right;white-space:nowrap}
.tabla tr.inactivo{opacity:.55}
.titulo-link{color:var(--morado-deep);font-weight:650;text-decoration:none}
.titulo-link:hover{text-decoration:underline}
.subt{display:block;font-size:12px;color:var(--ink-soft)}
.url a{color:var(--ink-soft);font-size:13px;text-decoration:none}
.url a:hover{text-decoration:underline;color:var(--morado)}

.pill{display:inline-block;font-size:12px;font-weight:650;padding:3px 9px;border-radius:20px}
.pill.on{background:var(--ok-bg);color:var(--ok-fg)}
.pill.off{background:#EFE8F2;color:var(--ink-soft)}

/* --- Acciones por fila --- */
.acciones{white-space:nowrap}
.acciones .inline{display:inline}
.ico{
  display:inline-block;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:13px;line-height:1;padding:6px 8px;border-radius:8px;color:var(--ink);
  text-decoration:none;font-family:inherit;margin:1px;
}
.ico:hover{background:#F6ECF9;border-color:#DFC6EC}
.ico:disabled{opacity:.3;cursor:default}
.ico.del{color:var(--err-fg)}
.ico.edit{color:var(--morado)}

/* --- Formularios --- */
.form{background:var(--card);border-radius:14px;padding:20px;box-shadow:0 1px 3px rgba(74,24,96,.06);max-width:560px}
.form label{display:block;margin-bottom:15px;font-weight:600;font-size:14px;color:var(--ink)}
.form input[type=text],.form input[type=url],.form input[type=email],
.form input[type=password],.form input[type=datetime-local],.form textarea{
  display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;font-weight:400;
}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 3px rgba(119,43,149,.18)}
.form small{display:block;margin-top:4px;font-weight:400;font-size:12px;color:var(--ink-soft)}
.form .req{color:var(--err-fg)}
.form .check{font-weight:500;display:flex;align-items:center;gap:8px}
.form .check input{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-acciones{display:flex;gap:10px;align-items:center;margin-top:6px}
.sep{border:none;border-top:1px solid var(--line);margin:30px 0}

/* --- Login --- */
.login-card{max-width:360px;margin:8vh auto 0;background:var(--card);border-radius:16px;
  padding:28px 26px;box-shadow:0 10px 40px -18px rgba(74,24,96,.4)}
.login-title{font-size:20px;color:var(--morado-deep);margin-bottom:18px}
.login-title small{display:block;font-size:12px;font-weight:500;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase}
.login-card label{display:block;margin-bottom:14px;font-size:14px;font-weight:600}
.login-card input{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:15px;font-weight:400}
.login-card input:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 3px rgba(119,43,149,.18)}
.login-card .btn-primary{width:100%;margin-top:4px}

/* --- Tarjetas de métricas --- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 8px}
.card-metric{background:var(--card);border-radius:14px;padding:18px;box-shadow:0 1px 3px rgba(74,24,96,.06)}
.cm-label{font-size:13px;color:var(--ink-soft);font-weight:600}
.cm-label small{font-weight:400}
.cm-dual{display:flex;gap:22px;margin-top:8px}
.cm-num{font-size:30px;font-weight:750;color:var(--morado-deep);line-height:1;display:block}
.cm-sub{font-size:12px;color:var(--ink-soft);display:block;margin-top:3px}
.cm-foot{margin-top:12px;font-size:11.5px;color:var(--ink-soft)}
.cm-vacio{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
code{background:#F4EAF7;padding:1px 5px;border-radius:5px;font-size:12px}

/* --- Barras de share --- */
.share{min-width:150px}
.barra{display:inline-block;width:100px;height:9px;background:#F0E5F5;border-radius:6px;overflow:hidden;vertical-align:middle}
.barra-fill{display:block;height:100%;background:var(--morado);border-radius:6px}
.barra-pct{margin-left:8px;font-size:13px;color:var(--ink-soft)}

/* --- Tendencia --- */
.tend{white-space:nowrap;font-size:13px}
.tend .flecha{font-weight:700}
.tend.up{color:var(--ok-fg)}
.tend.down{color:var(--err-fg)}
.tend.flat{color:var(--ink-soft)}
.tend-txt{font-size:12px}

.dormidos{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.dormidos li{background:var(--card);padding:9px 13px;border-radius:9px;font-size:14px;border-left:3px solid var(--ink-soft)}
.ok-txt{color:var(--ok-fg);font-size:14px}

.ayuda{font-size:12.5px;color:var(--ink-soft);margin:10px 0 4px}
.vacio{color:var(--ink-soft);padding:20px 0}
.pie{text-align:center;color:var(--ink-soft);font-size:11.5px;margin-top:34px;padding-top:16px;border-top:1px solid var(--line)}

/* --- Responsive (teléfono) --- */
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  body{font-size:14px}
  .cm-num{font-size:26px}
  .topbar{padding:12px 2px}
}