/* ============================================================
   TIENDA DIGITAL — estilos del cliente
   Sidebar navy oscuro + contenido azul-gris claro + acento azul
   ============================================================ */

:root{
  --navy:      #0e1c30;   /* sidebar */
  --navy-on:   #1a2f4f;   /* item activo del sidebar */
  --bg:        #e9eef6;   /* fondo del contenido */
  --card:      #ffffff;
  --blue:      #2478f0;   /* acento principal */
  --blue-d:    #1b62cc;
  --text:      #14294a;   /* texto principal (navy) */
  --muted:     #7f8ca3;
  --border:    #dfe6f0;
  --green:     #16a34a;
  --green-bg:  #d7f5e3;
  --amber:     #b45309;
  --amber-bg:  #fef0cd;
  --red:       #dc2626;
  --red-bg:    #fee2e2;
  --proc:      #1d4ed8;
  --proc-bg:   #dbeafe;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ══════════ SIDEBAR ══════════ */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:250px;
  background:var(--navy);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:22px 16px;
  z-index:50;
}
.side-brand{
  color:#fff; font-weight:900; font-size:17px; letter-spacing:-.3px;
  padding:0 12px 22px;
}
.side-brand span{ color:#5b9bff; }
.side-nav a, .side-bottom a{
  display:flex; align-items:center; gap:12px;
  color:#c4cede; text-decoration:none;
  font-size:14px; font-weight:600;
  padding:12px 14px; border-radius:10px;
  margin-bottom:4px;
  transition:background .15s, color .15s;
}
.side-nav a:hover, .side-bottom a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side-nav a.on{ background:var(--navy-on); color:#fff; }
.side-nav svg, .side-bottom svg{ width:19px; height:19px; fill:currentColor; flex:none; }

/* ══════════ CONTENIDO ══════════ */
/* Grid de una sola columna centrada: el bloque se mantiene centrado
   en el área a la derecha del sidebar por ancha que sea la pantalla,
   y las alineaciones internas de cada elemento se conservan. */
.content{
  margin-left:250px;                        /* espacio para la sidebar fija */
  padding:48px clamp(20px, 5vw, 72px);
  display:grid;
  grid-template-columns:minmax(0, 1160px);
  justify-content:center;
}

.page-title{ font-size:34px; font-weight:900; letter-spacing:-.8px; }
.page-title.center{ text-align:center; }
.page-sub{ color:var(--muted); font-size:15px; margin-top:10px; line-height:1.55; max-width:560px; }
.page-sub.center{ margin-left:auto; margin-right:auto; text-align:center; }

.card{
  background:var(--card); border-radius:14px;
  box-shadow:0 1px 10px rgba(20,41,74,.06);
  padding:8px 24px;
  margin-top:28px;
}

/* ══════════ LISTA DE PRODUCTOS ══════════ */
.prod-row{
  display:flex; align-items:center; gap:18px;
  padding:18px 4px;
  border-bottom:1px solid var(--border);
}
.prod-row:last-child{ border-bottom:none; }
.prod-icon{
  width:46px; height:46px; flex:none;
  border-radius:9px; object-fit:contain;
}
.prod-icon.ph{
  background:#eef4fd; display:flex; align-items:center; justify-content:center;
}
.prod-icon.ph svg{ width:24px; height:24px; fill:var(--blue); }
.prod-info{ flex:1; min-width:0; }
.prod-nombre{ font-weight:800; font-size:16px; }
.prod-desc{ color:var(--muted); font-size:13px; margin-top:3px; }
.prod-precio{ text-align:right; min-width:96px; }
.prod-precio .p{ font-weight:900; font-size:18px; letter-spacing:-.4px; }
.prod-precio .m{ color:var(--muted); font-size:12px; font-weight:700; }

.qty{
  display:flex; align-items:center; border:1.5px solid var(--border);
  border-radius:9px; overflow:hidden; background:#f4f7fc;
}
.qty button{
  width:34px; height:38px; border:none; background:transparent;
  font-size:17px; color:var(--muted); cursor:pointer; font-weight:700;
}
.qty button:hover{ color:var(--blue); }
.qty input{
  width:38px; height:38px; border:none; text-align:center;
  font-family:'Inter',sans-serif; font-weight:800; font-size:14px;
  background:#fff; color:var(--text); outline:none;
}

.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  background:var(--blue); color:#fff;
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  padding:11px 26px; border-radius:9px;
  transition:background .15s;
}
.btn:hover{ background:var(--blue-d); }
.btn-block{ display:block; width:100%; }
.btn-ghost{
  background:#fff; color:var(--blue);
  border:1.5px solid var(--blue);
}
.btn-ghost:hover{ background:#eaf2fe; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ══════════ TABLA (Mis pedidos) ══════════ */
table.lista{ width:100%; border-collapse:collapse; font-size:14px; }
table.lista th{
  text-align:left; padding:16px 10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); border-bottom:1px solid var(--border);
}
table.lista td{
  padding:16px 10px; border-bottom:1px solid var(--border); vertical-align:middle;
}
table.lista tr:last-child td{ border-bottom:none; }
.token{ font-weight:800; letter-spacing:.3px; }
.sub{ color:var(--muted); font-size:12px; margin-top:3px; }

.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:20px;
  font-size:12px; font-weight:700;
}
.badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.ok{   background:var(--green-bg); color:var(--green); }
.badge.proc{ background:var(--proc-bg);  color:var(--proc); }
.badge.wait{ background:var(--amber-bg); color:var(--amber); }
.badge.bad{  background:var(--red-bg);   color:var(--red); }

.btn-descargar{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--border); background:#fff;
  color:var(--blue); font-weight:700; font-size:13px;
  padding:9px 18px; border-radius:9px; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.btn-descargar:hover{ border-color:var(--blue); background:#f2f7ff; }
.btn-descargar svg{ width:15px; height:15px; fill:currentColor; }
.btn-descargar.off{
  color:var(--muted); pointer-events:none; background:#f6f8fb;
}

/* ══════════ MENSAJES ══════════ */
.msg{
  padding:13px 18px; border-radius:10px;
  font-size:14px; font-weight:600; margin-bottom:22px;
}
.msg.ok{  background:var(--green-bg); color:#14532d; }
.msg.err{ background:var(--red-bg);   color:#7f1d1d; }

/* ══════════ MODALES ══════════ */
.modal-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(14,28,48,.55);
  z-index:100; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:#fff; border-radius:16px;
  width:100%; max-width:380px;
  padding:34px 32px 26px; position:relative;
  box-shadow:0 20px 60px rgba(14,28,48,.35);
}
.modal h2{ font-size:24px; font-weight:900; letter-spacing:-.5px; }
.modal-sub{ color:var(--muted); font-size:14px; margin:8px 0 22px; }
.modal-x{
  position:absolute; top:16px; right:18px;
  border:none; background:none; font-size:24px;
  color:var(--muted); cursor:pointer; line-height:1;
}
.modal-x:hover{ color:var(--text); }
.field{ margin-bottom:13px; }
.field input{
  width:100%; padding:13px 15px;
  border:1.5px solid var(--border); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14px; outline:none;
  transition:border-color .15s;
}
.field input:focus{ border-color:var(--blue); }
.modal-divider{
  display:flex; align-items:center; justify-content:center; margin:20px 0 14px;
  position:relative;
}
.modal-divider::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--border);
}
.modal-divider span{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--border); background:#fff;
  position:relative;
}
.modal-alt{ text-align:center; font-size:13px; color:var(--muted); }
.modal-alt a{ color:var(--blue); font-weight:700; text-decoration:none; }
.modal-alt a:hover{ text-decoration:underline; }

/* ══════════ DETALLE ENTREGA (soporte / respuesta pago) ══════════ */
.panel-simple{
  background:var(--card); border-radius:14px;
  box-shadow:0 1px 10px rgba(20,41,74,.06);
  padding:34px; margin-top:28px; max-width:560px;
}
.panel-simple h2{ font-size:19px; font-weight:800; margin-bottom:8px; }
.panel-simple p{ color:var(--muted); font-size:14px; line-height:1.6; }
.panel-simple .dato{ margin-top:16px; font-size:15px; color:var(--text); }
.panel-simple .dato strong{ font-weight:800; }
.panel-simple a.link{ color:var(--blue); font-weight:700; text-decoration:none; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 860px){
  .sidebar{
    position:static; width:100%; height:auto;
    flex-direction:row; align-items:center; padding:12px 16px;
  }
  .side-top{ display:flex; align-items:center; gap:6px; flex:1; }
  .side-brand{ padding:0 10px 0 0; font-size:15px; white-space:nowrap; }
  .side-nav{ display:flex; gap:2px; }
  .side-nav a, .side-bottom a{ padding:9px 11px; margin:0; font-size:13px; }
  .side-nav a span{ display:none; }
  .content{ margin-left:0; padding:26px 16px; }
  .page-title{ font-size:26px; }
  .prod-row{ flex-wrap:wrap; }
  .prod-precio{ text-align:left; }
  table.lista{ font-size:13px; }
  table.lista th:nth-child(2), table.lista td:nth-child(2){ display:none; }
}