/* ====== TIENDA ELEGANTE (BLANCO/NEGRO) ====== */
:root{
    --bg:#0303ff;
    --panel:#007ffe;
    --card:#ffffff;
    --card2:#f7f7f8;
    --text:#0909ef;
    --muted:#6b7280;
    --border:rgba(252, 38, 38, 0.08);
    --shadow:0 12px 35px rgba(0,0,0,.10);
    --shadow2:0 8px 18px rgba(0,0,0,.08);
    --radius:18px;
  }
  
  *{box-sizing:border-box}
  body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    margin:0;
    padding:28px 14px;
    background: radial-gradient(1200px 700px at 20% 0%, #161618 0%, var(--bg) 55%, #070708 100%);
    color:#fff;
  }
  
  .grid{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:18px;
  }
  
  /* Topbar */
  .topbar{
    max-width:1100px;
    margin:0 auto 16px;
    padding:14px 16px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .logo{
    height:56px;
    width:auto;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    padding:8px;
    background: rgba(255,255,255,.06);
  }
  
  .title{
    margin:0;
    font-size:22px;
    letter-spacing:.2px;
    font-weight:800;
  }
  
  .links{
    margin:6px 0 0;
    font-size:14px;
  }
  .links a{
    color: rgba(255,255,255,.88);
    text-decoration:none;
    padding:8px 10px;
    border-radius:12px;
    display:inline-block;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    transition: .15s ease;
  }
  .links a:hover{
    background: rgba(255,255,255,.10);
    transform: translateY(-1px);
  }
  
  /* Cards */
  .card{
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
    color: var(--text);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:16px;
    box-shadow: var(--shadow2);
  }
  
  .card h3{
    margin:0 0 12px;
    font-size:16px;
    font-weight:800;
    letter-spacing:.2px;
  }
  
  .card p{
    margin:10px 0;
    color:#111827;
  }
  
  .card small{ color: var(--muted); }
  
  /* Inputs & buttons */
  input{
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    background:#fff;
    outline:none;
    transition:.15s ease;
  }
  input:focus{
    border-color: rgba(0,0,0,.35);
    box-shadow: 0 0 0 4px rgba(0,0,0,.08);
  }
  
  button{
    padding:10px 14px;
    border:0;
    border-radius:14px;
    cursor:pointer;
    font-weight:800;
    letter-spacing:.2px;
    background:#0c0c0d;
    color:#fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    transition:.15s ease;
  }
  button:hover{ transform: translateY(-1px); opacity:.95; }
  button:active{ transform: translateY(0px); }
  
  /* Table */
  table{
    width:100%;
    border-collapse: collapse;
    overflow:hidden;
    border-radius: 14px;
  }
  
  th,td{
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:12px 10px;
    text-align:left;
    font-size:14px;
  }
  
  th{
    background: #f3f4f6;
    color:#111827;
    font-weight:800;
  }
  
  tr:hover td{
    background: rgba(0,0,0,.015);
  }
  
  /* Forms layout */
  .rowform{
    display:flex;
    gap:8px;
    align-items:center;
  }
  
  .qty{
    width:80px;
  }
  
  /* Totals & checkout */
  .total{
    margin-top:12px;
    padding:12px;
    border-radius:14px;
    background: #f6f7f9;
    border:1px solid rgba(0,0,0,.06);
    font-weight:800;
  }
  
  .checkout{
    margin-top:12px;
  }
  .checkout a{
    display:block;
    text-align:center;
    padding:12px 14px;
    border-radius:14px;
    background:#0c0c0d;
    color:#fff;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.2px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    transition:.15s ease;
  }
  .checkout a:hover{ transform: translateY(-1px); opacity:.95; }
  
  /* Responsive */
  @media (max-width:900px){
    body{ padding:18px 12px; }
    .grid{ grid-template-columns:1fr; }
    .rowform{ flex-wrap:wrap; }
    .qty{ width:100%; }
  }