/* ============================================================
   EUP · CSS compartido (página pública + panel de admin)
   Fuente única de verdad: editar aquí y subir; los HTML solo lo enlazan.
   Extraído de los bloques <style> de index.html y admin/index.html.
   El estilo exclusivo del panel (<style id="admin-style">) y el CSS de
   impresión del comprobante siguen inline en admin/index.html.
   ============================================================ */
:root{
    --bg:#ffffff;
    --card:#ffffff;
    --card-2:#f6f6f3;
    --line:#e7e7e2;
    --line-strong:#c8c8c1;
    --txt:#16161a;
    --muted:#777772;
    --gold:#b98a3c;
    --gold-2:#8f6a26;
    --teal:#2f7d6f;
    --sold:#b0413f;
    --img-bg:#f3f3ef;
    --filter-bg:#f2f2ef;
    --filter-line:#dcdcd6;
    --gap:13px;
  }
  body.dark{
    --bg:#101012;
    --card:#141416;
    --card-2:#1b1b1e;
    --line:#2a2a2e;
    --line-strong:#4a4a50;
    --txt:#e8e8e6;
    --muted:#8a8a86;
    --gold:#d8b46a;
    --gold-2:#a07c3c;
    --teal:#4f9c8d;
    --sold:#c96f6b;
    --img-bg:#1d1d20;
    --filter-bg:#161619;
    --filter-line:rgba(216,180,106,.18);
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--bg);
    color:var(--txt);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Header ---------- */
  .site-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:14px 24px;border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:20;
    background:var(--bg);
    backdrop-filter:blur(10px);
  }
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em;font-size:13px;text-transform:uppercase}
  .logo-mark{
    width:30px;height:30px;
    background:var(--txt);color:var(--bg);
    display:grid;place-items:center;
    font-family:'Playfair Display',Georgia,serif;font-size:14px;
  }
  .logo small{display:block;font-size:9px;color:var(--muted);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
  /* Logo SVG inline: currentColor hereda el dorado del tema (--gold cambia
  solo en body.dark), así un solo archivo sirve para claro y oscuro. */
  .logo a{color:var(--gold);text-decoration:none;display:inline-flex;align-items:center}
  .logo a:hover{color:var(--gold-2)}
  .logo svg{height:34px;width:auto;display:block}
  @media (max-width:520px){.logo svg{height:28px}}
  .nav-pills{display:flex;gap:16px;flex-wrap:wrap}
  .nav-filters{display:flex;gap:10px;flex-wrap:wrap}
  .view-toggle{display:flex;gap:8px}
  .pill{
    border:0;background:transparent;color:var(--muted);
    padding:6px 2px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    cursor:pointer;transition:.2s;
  }
  .pill:hover{color:var(--txt)}
  .pill.active{color:var(--txt);border-bottom:2px solid var(--txt)}
  .theme-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 11px;background:transparent}
  .theme-btn:hover{border-color:var(--line-strong)}
  .theme-btn svg{width:14px;height:14px;flex:none}

  /* ---------- Hero ---------- */
  .hero{padding:36px 24px 0;max-width:1100px;margin:0 auto}
  .hero p{margin:0 0 18px;color:var(--muted);font-size:13px}
  .stats{display:flex;flex-wrap:wrap;border:1px solid var(--line)}
  .stat{padding:10px 18px;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  .stat b{display:block;font-size:15px;font-weight:600}
  .stat i{display:block;font-style:normal;font-size:9px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
  .stat.teal b{color:var(--teal)}
  .stat.sold b{color:var(--sold)}

  /* ---------- Toolbar ---------- */
  .toolbar{max-width:1100px;margin:var(--gap) auto;padding:0 24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .filter-toggle{display:none}
  .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .search{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;border-bottom:1px solid var(--line);padding:8px 2px}
  .search input{width:100%;border:0;background:transparent;color:var(--txt);font:inherit;font-size:13px;outline:none}
  .search svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
  .select-wrap{position:relative;display:flex;align-items:center}
  .select-wrap svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2;position:absolute;left:8px;pointer-events:none}
  select{
    appearance:none;-webkit-appearance:none;
    background:transparent;border:1px solid var(--line);
    color:var(--txt);font:inherit;font-size:12px;font-weight:600;
    padding:8px 22px;cursor:pointer;min-width:150px;
  }
  select:hover{border-color:var(--txt)}
  select:focus{outline:none;border-color:var(--txt)}
  .caret{position:absolute;right:8px;color:var(--muted);font-size:10px;pointer-events:none}
  .count{font-size:11px;color:var(--muted);letter-spacing:.06em}
  .count b{color:var(--txt)}
  .cat-filter{position:relative}
  .cat-btn{background:var(--card-2);border:1px solid var(--line);border-radius:8px;color:var(--txt);font:inherit;font-size:12px;padding:8px 12px;display:flex;align-items:center;gap:8px}
  .cat-btn svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2}
  .cat-btn .caret{position:static}
  .cat-pop{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;z-index:40;box-shadow:0 14px 34px rgba(0,0,0,.16)}
  .cat-pop[hidden]{display:none}
  .cat-group b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .cat-group label{display:flex;align-items:center;gap:6px;font-size:12px;margin:3px 0;color:var(--txt)}
  .cat-group input[type=checkbox]{accent-color:var(--gold);width:14px;height:14px}
  .cat-clear{grid-column:1/-1;background:transparent;border:1px solid var(--line);color:var(--muted)}

  /* ---------- Grid ---------- */
  .grid{
    max-width:1100px;margin:0 auto;padding:0 24px var(--gap);
    display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--gap);
  }
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:18px;position:relative;min-width:0;
    box-shadow:0 6px 18px rgba(22,22,26,.05);
    transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
  }
  .card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
  .media{
    width:100%;background:var(--img-bg);
    overflow:hidden;position:relative;margin-bottom:14px;
    border-radius:10px;
  }
  .media::before{content:"";display:block;padding-bottom:100%}
  .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease}
  .card:hover .media img{transform:scale(1.04)}
  .media .fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:'Playfair Display',serif;font-size:22px;color:var(--muted)}
  .brand{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;font-weight:600}
  .info{text-align:center}
  .model{font-family:'Playfair Display',Georgia,serif;font-size:var(--model-size,16px);margin:0 0 10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meta{display:flex;gap:5px;flex-wrap:nowrap;justify-content:center;margin-bottom:10px}
  .chip{font-size:var(--chip-size,9px);font-weight:600;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);padding:3px 7px;white-space:nowrap}
  .chip.ml{color:var(--txt)}
  .price{display:flex;align-items:baseline;gap:8px;justify-content:center}
  .price .amount{font-size:18px;font-weight:600}
  .price .old{font-size:12px;color:var(--sold);font-weight:600}
  .quincenal{margin-top:8px;font-size:11px;color:var(--muted)}
  .quincenal b{color:var(--txt);font-weight:600}
  .quincenal.nosale{color:var(--sold);font-weight:600}

  /* ---------- Sold ---------- */
  .card.sold{opacity:.78}
  .card.sold .media img{filter:grayscale(.9);opacity:.6}
  .card.sold .model{color:var(--muted)}
  .card.sold .price .amount{color:var(--muted);text-decoration:line-through}
  .ribbon{
    position:absolute;top:12px;left:12px;
    background:var(--sold);color:#fff;font-size:9px;font-weight:700;letter-spacing:.14em;
    padding:4px 9px;
  }
  .slash{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(135deg,transparent 48.7%,var(--line) 49.2%,var(--line) 50.8%,transparent 51.3%);
  }

  .empty{max-width:1100px;margin:0 auto;padding:var(--gap) 24px;color:var(--muted);text-align:center;font-size:13px}

  footer{
    border-top:1px solid var(--line);padding:var(--gap) 24px;
  }
  .foot-tag{font-family:'Playfair Display',Georgia,serif;font-size:14px;letter-spacing:.04em;color:var(--muted)}
  .foot-tag span{font-style:italic;color:var(--txt)}

  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .card.reveal{animation:rise .5s ease both}
  @media (prefers-reduced-motion:reduce){.card.reveal{animation:none}}
  :focus-visible{outline:2px solid var(--txt);outline-offset:2px}

/* ---------- Mobile-first ---------- */
  .card{cursor:pointer}
  .card-focus{position:fixed;inset:0;background:rgba(0,0,0,.86);display:grid;place-items:center;z-index:75;padding:18px}
  .card-focus[hidden]{display:none}
  .cf-card{background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(560px,92vw);padding:22px 22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.55);text-align:center}
  .cf-media{position:relative;width:100%;height:clamp(260px,42vh,420px);background:var(--img-bg);border-radius:12px;overflow:hidden;margin-bottom:14px}
  .cf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
  .cf-media .fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:'Playfair Display',serif;font-size:26px;color:var(--muted)}
  .cf-card.sold .cf-media img{filter:grayscale(.9);opacity:.6}
  .cf-card.sold .cf-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 48.7%,var(--line) 49.2%,var(--line) 50.8%,transparent 51.3%)}
  .cf-card .brand{font-size:11px;flex:1;margin:0;text-align:center}
  .cf-model{font-family:'Playfair Display',Georgia,serif;font-size:22px;margin:0 0 12px;min-height:28px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cf-card .meta{gap:8px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;min-height:26px}
  .cf-card .chip{font-size:11px;padding:4px 10px}
  .cf-price .amount{font-size:26px}
  .cf-quinc{margin-top:6px;font-size:13px;color:var(--muted);min-height:20px}
  .cf-quinc b{color:var(--txt)}
  .cf-note{margin-top:6px;font-size:13px;color:var(--sold);font-weight:600;min-height:20px}
  .cf-card.sold .cf-price .amount{color:var(--muted);text-decoration:line-through}
  .cf-navrow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .cf-nav{width:42px;height:42px;border-radius:50%;background:rgba(12,12,14,.55);border:1px solid rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
  .cf-nav svg{width:18px;height:18px}
  .cf-nav:hover{background:rgba(12,12,14,.82)}
  .cf-nav:active{transform:scale(.94)}
  .cf-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:rgba(12,12,14,.55);border:1px solid rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;transition:background .2s,transform .2s}
  .cf-close svg{width:16px;height:16px}
  .cf-close:hover{background:rgba(12,12,14,.82)}
  .cf-close:active{transform:scale(.94)}
  .cf-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;opacity:.85;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
  .grid.list-mode{grid-template-columns:minmax(0,1fr)}
  .grid.list-mode .card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:16px}
  .grid.list-mode .info{text-align:left}
  .grid.list-mode .meta{justify-content:flex-start}
  .grid.list-mode .price{justify-content:flex-start}
  .grid.list-mode .media{width:120px;margin:0}
  .grid.list-mode .media::before{padding-bottom:100%}
  @media (max-width:760px){
    :root{--gap:5px}
    .site-header{padding:12px 16px}
    .nav-pills{gap:12px}
    .pill{padding:8px 8px}
    .hero{padding:24px var(--gap) 0}
    .toolbar,.grid{padding-left:var(--gap);padding-right:var(--gap)}
    .toolbar{background:var(--filter-bg);border:1px solid var(--filter-line);border-radius:12px;padding:12px 14px;margin:var(--gap) var(--gap)}
    .filter-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;color:var(--txt);font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;padding:4px 2px;cursor:pointer}
    .filter-toggle .ft-arrow{color:var(--gold);font-size:12px}
    .filter-toggle .ft-n{color:var(--muted);font-size:12px}
    .filters{display:none}
    .filters.open{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
    .filters.open .nav-filters,.filters.open .view-toggle{display:flex}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
    footer{padding:var(--gap)}
    .card{padding:14px}
    .media{margin-bottom:10px}
    .price .amount{font-size:16px}
    .search{min-width:100%}
    select{min-width:100%}
    .grid.list-mode .card{grid-template-columns:96px 1fr;gap:12px;padding:12px}
    .grid.list-mode .media{width:96px}
  }
  @media (max-width:420px){
    .logo{font-size:12px}
    .nav-pills{gap:10px}
    .pill{font-size:10px;padding:7px 6px}
    .theme-btn{padding:6px 9px}
    .card{padding:12px;border-radius:10px}
    .brand{font-size:8px}
    .chip{padding:2px 5px}
    .price .amount{font-size:15px}
    .quincenal{font-size:10px}
    .grid.list-mode .card{grid-template-columns:80px 1fr;gap:10px;padding:11px}
    .grid.list-mode .media{width:80px}
  }

  /* Accesibilidad: foco visible para navegación por teclado (conserva el
  contraste de la marca y no se oculta en modo oscuro). */
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  }