/* ============================================================
   PuraFarma · Admin — estilos simples y reemplazables.
   Pensado para PC (navegador normal), no para TV.
   ============================================================ */
:root{
  --fondo:#F6F2E9; --tinta:#0F1713; --verde:#34647A; --salvia:#8FA99A;
  --oscuro:#1E2A26; --ok:#2e7d52; --peligro:#b23b3b; --radio:12px;
}
[hidden]{display:none !important}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--fondo);color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}

/* Login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center}
.loginbox{width:min(420px,92vw);background:#fff;border-radius:20px;padding:36px 32px;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgba(30,42,38,.15)}
.loginbox h2{margin:0 0 6px;font-size:26px}
.loginbox label{display:flex;flex-direction:column;gap:5px;font-size:15px;color:var(--verde)}
.loginbox input{padding:12px 14px;font-size:18px;border:2px solid var(--salvia);border-radius:10px}
.loginbox input:focus{outline:none;border-color:var(--verde)}
.loginbox button{margin-top:8px;padding:14px;font-size:18px;background:var(--tinta);color:var(--fondo);
  border:none;border-radius:10px;cursor:pointer}
.loginerr{color:var(--peligro);font-size:14px}

/* App */
.topbar{display:flex;align-items:center;gap:20px;padding:14px 24px;background:var(--tinta);color:var(--fondo);
  position:sticky;top:0;z-index:10;flex-wrap:wrap}
.topbar strong{font-size:17px}
.tabs{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.tab{background:transparent;color:var(--salvia);border:none;padding:8px 14px;font-size:16px;
  border-radius:999px;cursor:pointer;font-family:inherit}
.tab.is-on{background:var(--fondo);color:var(--tinta);font-weight:700}
.btn-link{background:none;border:none;color:var(--salvia);cursor:pointer;font-size:15px;text-decoration:underline}

.panel{max-width:1000px;margin:24px auto;padding:0 24px}
.panel h3{margin:0 0 4px;font-size:22px}
.panel h4{margin:22px 0 8px;font-size:17px;color:var(--verde)}
.hint{color:var(--verde);font-size:14px;margin:0 0 14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Tablas */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radio);overflow:hidden}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid #eee;font-size:15px}
.tbl th{background:#efe9dc;color:var(--verde);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.tbl tr:last-child td{border-bottom:none}
.tbl input[type=text]{padding:8px 10px;font-size:15px;border:1px solid var(--salvia);border-radius:8px;width:180px}

/* Botones chicos / de fila */
.btn-sm{background:var(--tinta);color:var(--fondo);border:none;border-radius:8px;padding:8px 14px;
  font-size:14px;cursor:pointer;font-family:inherit}
.btn-sm.sec{background:#fff;color:var(--tinta);border:2px solid var(--tinta)}
.btn-sm.warn{background:var(--peligro);color:#fff}
.btn-sm:disabled{opacity:.4;cursor:default}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Switch simple */
.sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.sw input{width:40px;height:22px}

/* Estado badges */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600}
.b-esperando{background:#e7eef0;color:var(--verde)}
.b-llamado{background:#dcebe1;color:var(--ok)}
.b-finalizado{background:#eee;color:#666}
.b-ausente{background:#f6dede;color:var(--peligro)}
.b-cancelado{background:#e2ddd3;color:#8a7f6a}
.b-libre{background:#e7eef0;color:var(--verde)}
.b-ocupado{background:#dcebe1;color:var(--ok)}

/* Cards de estadísticas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:8px 0}
.card{background:#fff;border-radius:var(--radio);padding:16px;text-align:center}
.card .n{font-size:38px;font-weight:800;line-height:1}
.card .l{font-size:14px;color:var(--verde);margin-top:4px}

/* Barras por hora */
.bars{display:flex;align-items:flex-end;gap:8px;height:160px;background:#fff;border-radius:var(--radio);padding:16px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.bar .fill{width:70%;background:var(--salvia);border-radius:6px 6px 0 0;min-height:2px}
.bar .h{font-size:12px;color:var(--verde)}
.bar .v{font-size:12px;font-weight:700}

/* Toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--tinta);
  color:var(--fondo);padding:12px 20px;border-radius:999px;font-size:15px;z-index:60}