/* ============================================================
   DOCTOR MÓVIL SOLUCIÓN — Tienda de streaming
   Tokens de diseño
   Paleta: consultorio digital — receta de suscripciones
   ============================================================ */

:root{
  --bg:            #0E1F1B;   /* verde botella muy oscuro, tipo consultorio de noche */
  --bg-soft:       #142B25;   /* paneles / tarjetas */
  --bg-softer:     #1B362E;   /* hover / inputs */
  --line:          #24443A;   /* bordes sutiles */
  --ink:           #F3EFE3;   /* texto principal, blanco hueso */
  --ink-muted:     #9FB3AB;   /* texto secundario */
  --accent:        #E8A33D;   /* ámbar — "sello" de receta */
  --accent-ink:    #241505;
  --teal:          #35C9A5;   /* verde menta — disponible / confirmado */
  --red:           #E2695B;   /* agotado / rechazado */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;
  --radius:        14px;
  --radius-sm:     8px;
}

.hidden{ display: none !important; }
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a{ color: inherit; }
button, input, select, textarea{ font-family: inherit; }

/* --- capa de textura sutil: líneas como un recetario --- */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 39px, var(--line) 40px
  );
  opacity:.12;
  z-index:0;
}

.wrap{ position:relative; z-index:1; max-width: 640px; margin:0 auto; padding: 20px 18px 90px; }

/* --- header --- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 4px 22px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand .cross{
  width:30px; height:30px; border-radius:8px;
  background: var(--accent); color: var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:16px;
}
.brand-name{ font-family: var(--font-display); font-size:16px; line-height:1.1; }
.brand-name b{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--teal); font-weight:600; }
.wa-link{
  display:flex; align-items:center; gap:6px;
  background: var(--bg-soft); border:1px solid var(--line);
  padding:8px 12px; border-radius: 999px; font-size:13px; text-decoration:none; color: var(--ink);
}

/* --- hero --- */
.hero{ padding: 6px 0 26px; }
.eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); font-weight:600; margin-bottom:8px;
}
.hero h1{
  font-family: var(--font-display); font-weight:600;
  font-size: 32px; line-height:1.08; margin:0 0 10px;
}
.hero p{ color: var(--ink-muted); margin:0; font-size:14.5px; line-height:1.5; max-width: 46ch; }

/* --- buscador / filtros --- */
.search{
  margin-top:18px; position:relative;
}
.search input{
  width:100%; background: var(--bg-soft); border:1px solid var(--line);
  color: var(--ink); border-radius: var(--radius); padding:13px 16px 13px 40px;
  font-size:14px; outline:none;
}
.search input:focus{ border-color: var(--accent); }
.search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.5; }

.chips{ display:flex; gap:8px; overflow-x:auto; margin-top:14px; padding-bottom:4px; -ms-overflow-style:none; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; background: var(--bg-soft); border:1px solid var(--line);
  color: var(--ink-muted); padding:8px 14px; border-radius:999px; font-size:13px;
  cursor:pointer; white-space:nowrap; transition: all .15s;
}
.chip.active{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight:600; }

/* --- lista de productos --- */
.section-label{
  font-family: var(--font-display); font-size: 13px; text-transform:uppercase; letter-spacing:.12em;
  color: var(--ink-muted); margin: 26px 0 12px; display:flex; align-items:center; gap:10px;
}
.section-label::after{ content:""; flex:1; height:1px; background: var(--line); }

.grid-cards{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); gap:12px;
}
.card{
  position:relative;
  background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition: transform .15s, border-color .15s;
}
.card:active{ transform: scale(.98); }
.card:hover{ border-color: var(--accent); }

.card .ribbon{
  position:absolute; top:12px; left:-30px; width:120px; transform:rotate(-45deg);
  text-align:center; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 0; color: var(--accent-ink); z-index:2; background: var(--teal);
}
.card .ribbon.out{ background: var(--red); }
.card .ribbon.low{ background: var(--accent); }

.card .icon{
  height:88px; width:100%; background: var(--bg-softer);
  display:flex; align-items:center; justify-content:center; font-size:30px; flex:0 0 auto;
  border-bottom:1px solid var(--line);
}
.card .body{ flex:1; min-width:0; padding:12px 12px 14px; display:flex; flex-direction:column; gap:4px; }
.card-top{ display:block; }
.card .provider{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-muted); font-weight:600; }
.card h3{ font-family: var(--font-display); font-size:15px; margin:2px 0 2px; font-weight:600; line-height:1.2; }
.price{ font-family: var(--font-mono); font-weight:700; color: var(--teal); font-size:18px; white-space:nowrap; }
.card .meta{ font-size:11.5px; color: var(--ink-muted); margin-bottom:4px; display:flex; justify-content:space-between; }
.card .stock-line{ font-size:11px; color: var(--ink-muted); margin-bottom:6px; }
.card .stock-line b{ color: var(--ink); }
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tag{ font-size:10.5px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color: var(--ink-muted); }
.tag.ok{ color: var(--teal); border-color: rgba(53,201,165,.4); background: rgba(53,201,165,.08); }
.tag.out{ color: var(--red); border-color: rgba(226,105,91,.4); background: rgba(226,105,91,.08); }

.actions{ display:flex; gap:8px; margin-top:auto; }
.btn{
  border:none; border-radius: var(--radius-sm); padding:10px 14px; font-size:13.5px; font-weight:600;
  cursor:pointer; text-align:center; flex:1; transition: transform .1s;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--accent); color: var(--accent-ink); }
.btn-primary:disabled{ background: var(--bg-softer); color: var(--ink-muted); cursor:not-allowed; }
.btn-ghost{ background: transparent; border:1px solid var(--line); color: var(--ink); flex:0 0 auto; }

.empty{ text-align:center; color: var(--ink-muted); padding: 40px 10px; font-size:14px; }

/* --- modal --- */
.overlay{
  position:fixed; inset:0; background: rgba(6,14,12,.7); backdrop-filter: blur(3px);
  display:flex; align-items:flex-end; justify-content:center; z-index:50;
}
.overlay.hidden{ display:none; }
.sheet{
  background: var(--bg-soft); width:100%; max-width:640px; border-radius: 20px 20px 0 0;
  padding: 22px 20px 28px; max-height:88vh; overflow-y:auto;
  border-top:1px solid var(--line);
}
.sheet-handle{ width:40px; height:4px; background: var(--line); border-radius:99px; margin:0 auto 16px; }
.sheet h2{ font-family: var(--font-display); font-size:20px; margin:0 0 4px; }
.sheet .sub{ color: var(--ink-muted); font-size:13px; margin-bottom:18px; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; color: var(--ink-muted); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg-softer); border:1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-sm); padding:11px 12px; font-size:14px; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); }
.field textarea{ resize:vertical; min-height:60px; }

.pay-methods{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:16px; }
.pay-methods .opt{
  border:1px solid var(--line); background: var(--bg-softer); border-radius: var(--radius-sm);
  padding:10px; text-align:center; font-size:13px; cursor:pointer; font-weight:600;
}
.pay-methods .opt.active{ border-color: var(--accent); color: var(--accent); background: rgba(232,163,61,.08); }

.pay-info{
  background: var(--bg-softer); border:1px dashed var(--line); border-radius: var(--radius-sm);
  padding:12px 14px; font-size:13px; margin-bottom:16px; line-height:1.6;
}
.pay-info b{ color: var(--accent); }
.pay-info .copy{ font-family: var(--font-mono); background: var(--bg); padding:2px 8px; border-radius:6px; }

/* --- receta / recibo (elemento firma) --- */
.receta{
  border:2px solid var(--accent); border-radius: var(--radius); padding:18px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--line) 28px);
  background-color: var(--bg-softer);
  position:relative; margin-top:10px;
}
.receta::before{
  content:"Rx"; position:absolute; top:-14px; left:16px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight:700; font-size:14px; padding:3px 10px; border-radius:6px;
}
.receta-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; }
.receta-row span:first-child{ color: var(--ink-muted); }
.receta-code{ font-family: var(--font-mono); letter-spacing:.05em; }

/* --- toast --- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background: var(--accent); color: var(--accent-ink); padding:12px 20px; border-radius:999px;
  font-size:13.5px; font-weight:600; z-index:99; box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* ============ ADMIN ============ */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:100%; max-width:360px; background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding:28px 24px; }
.login-card h1{ font-family: var(--font-display); font-size:22px; margin:0 0 4px; }
.login-card p.sub{ color: var(--ink-muted); font-size:13px; margin:0 0 20px; }
.err{ color: var(--red); font-size:13px; margin-top:10px; min-height:16px; }

.admin-tabs{ display:flex; gap:6px; margin-bottom:18px; background: var(--bg-soft); padding:5px; border-radius: 12px; border:1px solid var(--line);}
.admin-tabs button{
  flex:1; background:transparent; border:none; color: var(--ink-muted); padding:9px 6px; border-radius:9px;
  font-size:13px; font-weight:600; cursor:pointer;
}
.admin-tabs button.active{ background: var(--accent); color: var(--accent-ink); }

.panel{ display:none; }
.panel.active{ display:block; }

.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-bottom:18px; }
.stat{ background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius-sm); padding:12px; text-align:center; }
.stat b{ display:block; font-family: var(--font-display); font-size:20px; color: var(--accent); }
.stat span{ font-size:11px; color: var(--ink-muted); }

.order-card{ background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding:14px; margin-bottom:10px; }
.order-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:8px; }
.order-top h4{ margin:0 0 2px; font-size:14.5px; font-family: var(--font-display); }
.order-top .meta{ font-size:12px; color: var(--ink-muted); }
.status{ font-size:11px; padding:4px 10px; border-radius:999px; font-weight:600; white-space:nowrap; }
.status.pendiente{ background: rgba(232,163,61,.12); color: var(--accent); }
.status.confirmado{ background: rgba(53,201,165,.12); color: var(--teal); }
.status.entregado{ background: rgba(53,201,165,.2); color: var(--teal); }
.status.rechazado{ background: rgba(226,105,91,.12); color: var(--red); }
.order-detail{ font-size:13px; line-height:1.7; color: var(--ink-muted); margin-bottom:10px; }
.order-detail b{ color: var(--ink); }
.order-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.order-actions .btn{ flex:0 0 auto; padding:7px 12px; font-size:12.5px; }

.topbar-admin{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.logout{ font-size:12.5px; color: var(--ink-muted); background:none; border:none; cursor:pointer; text-decoration:underline; }

.fab{
  position:fixed; bottom:24px; right:20px; width:54px; height:54px; border-radius:50%;
  background: var(--accent); color: var(--accent-ink); border:none; font-size:26px; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35); z-index:40;
}

.prod-row{ display:flex; gap:10px; align-items:center; background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding:12px; margin-bottom:10px; }
.prod-row .info{ flex:1; min-width:0; }
.prod-row h4{ margin:0 0 2px; font-size:14px; font-family: var(--font-display); }
.prod-row .meta{ font-size:12px; color: var(--ink-muted); }
.prod-row .stock-badge{ font-family: var(--font-mono); font-size:12px; }
.icon-btn{ background: var(--bg-softer); border:1px solid var(--line); color: var(--ink); border-radius:8px; width:34px; height:34px; cursor:pointer; }

@media (min-width: 720px){
  .hero h1{ font-size:38px; }
}