@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#0d0e10; --surface:#16171a; --surface-2:#1f2024; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --text:#f4f4f5; --muted:#8d9098; --yellow:#ffd60a; --on-yellow:#111111; --tiger:#f28c28; --red:#ff5a4f; --green:#3ddc84;
  --radius:16px; --radius-sm:10px;
  --font-title:"Inter",system-ui,sans-serif; --font-display:"Anton",var(--font-title);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-title); line-height:1.5;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px;}
h1,h2,h3{font-family:var(--font-display); font-weight:400; letter-spacing:.01em; text-transform:uppercase; margin:0;}

/* auth screens */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(60% 60% at 50% 0%, rgba(242,140,40,.14), transparent 60%);}
.auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px;}
.auth-logo{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.auth-logo svg{width:34px; height:34px; flex:none;}
.auth-logo b{font-family:var(--font-display); font-size:22px;}
.auth-logo span{color:var(--yellow);}
.auth-card h1{font-size:20px; margin-bottom:6px;}
.auth-card p.sub{color:var(--muted); font-size:13.5px; margin:0 0 22px;}
label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.04em;}
input, select, textarea{width:100%; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 13px; color:var(--text); font-family:var(--font-title); font-size:14.5px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--yellow); outline-offset:1px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--yellow); color:var(--on-yellow);
  font-weight:800; font-size:14px; padding:12px 20px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; width:100%; margin-top:20px;}
.btn.ghost{background:transparent; color:var(--text); border:1.5px solid var(--line-strong);}
.btn.sm{width:auto; padding:9px 16px; font-size:12.5px; margin-top:0;}
.foot-link{margin-top:18px; text-align:center; font-size:13px; color:var(--muted);}
.foot-link a{color:var(--yellow); font-weight:700; text-decoration:none;}
.error-box{background:rgba(255,90,79,.12); border:1px solid rgba(255,90,79,.4); color:#ff9a92; border-radius:var(--radius-sm);
  padding:11px 14px; font-size:13px; margin-bottom:16px;}
.ok-box{background:rgba(61,220,132,.12); border:1px solid rgba(61,220,132,.4); color:#8ff0b8; border-radius:var(--radius-sm);
  padding:11px 14px; font-size:13px; margin-bottom:16px;}

/* app shell */
.app-header{position:sticky; top:0; z-index:5; background:rgba(13,14,16,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.app-header .wrap{display:flex; align-items:center; justify-content:space-between; height:60px;}
.app-logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text);}
.app-logo svg{width:26px; height:26px;}
.app-logo b{font-family:var(--font-display); font-size:15px;}
.app-logo span{color:var(--yellow);}
.app-nav{display:flex; align-items:center; gap:18px; font-size:13.5px; color:var(--muted);}
.app-nav a{text-decoration:none; font-weight:600;}
.app-nav a.active{color:var(--text);}
.app-user{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);}
.app-user .av{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--yellow),var(--tiger)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; color:#111;}
main.wrap{padding-block:28px 60px;}

.page-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.page-head h1{font-size:22px;}
.page-head p{color:var(--muted); font-size:13.5px; margin-top:4px;}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
@media (max-width:760px){ .kpi-row{grid-template-columns:1fr 1fr;} }
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px;}
.kpi .lbl{font-size:11.5px; color:var(--muted); font-weight:600;}
.kpi .val{font-family:var(--font-display); font-size:26px; margin-top:4px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.card + .card{margin-top:16px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h2{font-size:15px;}

table.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
table.tbl th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:0 10px 8px;}
table.tbl td{padding:11px 10px; border-top:1px solid var(--line); vertical-align:middle;}
table.tbl tr:hover td{background:var(--surface-2);}
table.tbl a.row-link{text-decoration:none; color:var(--text); font-weight:700;}
.badge{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line);}
.badge.online{color:var(--tiger); border-color:rgba(242,140,40,.4); background:rgba(242,140,40,.1);}
.badge.presencial{color:var(--text);}
.empty{text-align:center; padding:44px 20px; color:var(--muted);}
.empty svg{width:40px; height:40px; margin-bottom:10px; opacity:.5;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} }
.form-actions{display:flex; gap:10px; margin-top:22px;}
.form-actions .btn{width:auto;}

/* pestañas de la ficha del cliente */
.tabs{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; width:max-content; margin-bottom:18px; overflow-x:auto; max-width:100%;}
.tabs a{font-size:12.5px; font-weight:700; color:var(--muted); padding:8px 15px; border-radius:999px; text-decoration:none; white-space:nowrap;}
.tabs a.active{background:var(--yellow); color:#111;}

.metric-row{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted);}
.metric-row:first-of-type{border-top:none;}
.metric-row b{color:var(--text); font-family:var(--font-display); font-size:16px; font-weight:400;}

.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted);}

.set-row{display:grid; grid-template-columns:2fr repeat(3,1fr) auto; gap:8px; align-items:center; margin-bottom:8px;}
@media (max-width:600px){ .set-row{grid-template-columns:1fr 1fr; grid-template-areas:"ex ex" "w r" "rpe del";} }
.set-row .icon-btn{background:transparent; border:1px solid var(--line-strong); color:var(--red); border-radius:8px; width:36px; height:36px; cursor:pointer; font-weight:800;}

.grid-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
.photo-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.photo-card img{width:100%; height:160px; object-fit:cover; display:block;}
.photo-card .meta{padding:8px 10px; font-size:11px; color:var(--muted);}
.compare-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
@media (max-width:560px){ .compare-row{grid-template-columns:1fr;} }
.compare-row .photo-card img{height:260px;}

.sparkline{width:100%; height:auto; display:block;}

/* móvil del cliente */
body.client-app{background:var(--bg);}
.client-shell{max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;}
.client-top{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px;}
.client-top .greet{font-family:var(--font-display); font-size:19px; text-transform:uppercase;}
.client-top .sub{color:var(--muted); font-size:12px;}
.client-main{padding:0 18px 90px; flex:1;}
.hero-card{border-radius:16px; padding:16px; background:linear-gradient(150deg,#ffd60a,#ffe45c 60%,#fff0a3); color:#111; margin-bottom:16px;}
.hero-card .l{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.65;}
.hero-card h4{font-family:var(--font-display); font-size:18px; margin:4px 0 0; text-transform:uppercase;}
.hero-card p{font-size:12px; margin:4px 0 0; opacity:.75;}
.client-nav{position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; display:flex; justify-content:space-around;
  background:rgba(13,14,16,.95); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:10px 6px calc(10px + env(safe-area-inset-bottom));}
.client-nav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--muted); text-decoration:none; font-weight:700;}
.client-nav a.active{color:var(--yellow);}
.scale-row{display:flex; gap:6px; margin-top:6px;}
.scale-row label{flex:1; text-align:center; margin:0; text-transform:none; font-size:12px; color:var(--muted); font-weight:700;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 0; cursor:pointer;}
.scale-row input{position:absolute; opacity:0; pointer-events:none;}
.scale-row input:checked + label{background:var(--yellow); color:#111; border-color:var(--yellow);}