/* PlayZona Store — base común (tokens, tipografía Google Sans, botones, formularios, chips) */
/* Fuentes alojadas en la tienda: los íconos y la letra cargan aunque Google Fonts no responda */
@font-face{font-family:"Material Symbols Outlined";font-style:normal;font-weight:100 700;font-display:block;src:url(../fonts/material-symbols-outlined.woff2) format("woff2")}
@font-face{font-family:"Google Sans Flex";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/google-sans-flex.woff2) format("woff2")}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),url(../fonts/roboto-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Roboto;font-style:normal;font-weight:500 700;font-display:swap;src:local("Roboto Medium"),url(../fonts/roboto-latin-500-normal.woff2) format("woff2")}
:root{
  --brand:#01875f; --brand-ink:#fff; --brand-soft:#e6f3ef;
  --bg:#fff; --bg2:#f8f9fa; --card:#fff; --ink:#202124; --ink2:#5f6368; --ink3:#80868b;
  --line:#dadce0; --line2:#e8eaed; --hover:rgba(32,33,36,.06);
  --red:#d93025; --red-soft:#fce8e6; --amber:#b06000; --amber-soft:#fef7e0; --green:#188038; --green-soft:#e6f4ea; --blue:#1a73e8; --blue-soft:#e8f0fe;
  --shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --shadow2:0 2px 6px 2px rgba(60,64,67,.15),0 1px 2px rgba(60,64,67,.3);
  --r:8px; --r2:16px; --r3:24px;
  --font:"Google Sans","Google Sans Flex",Roboto,Arial,sans-serif; --font2:Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand-soft:#0f2e25; --bg:#131314; --bg2:#1b1b1d; --card:#1e1f20; --ink:#e3e3e3; --ink2:#c4c7c5; --ink3:#9aa0a6;
  --line:#3c4043; --line2:#2d2f31; --hover:rgba(255,255,255,.07);
  --red:#f28b82; --red-soft:#3a1d1b; --amber:#fdd663; --amber-soft:#3a2f0b; --green:#81c995; --green-soft:#16301f; --blue:#8ab4f8; --blue-soft:#1c2b41;
  --shadow:0 1px 3px rgba(0,0,0,.6); --shadow2:0 4px 12px rgba(0,0,0,.6); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --brand-soft:#0f2e25; --bg:#131314; --bg2:#1b1b1d; --card:#1e1f20; --ink:#e3e3e3; --ink2:#c4c7c5; --ink3:#9aa0a6;
  --line:#3c4043; --line2:#2d2f31; --hover:rgba(255,255,255,.07);
  --red:#f28b82; --red-soft:#3a1d1b; --amber:#fdd663; --amber-soft:#3a2f0b; --green:#81c995; --green-soft:#16301f; --blue:#8ab4f8; --blue-soft:#1c2b41;
  --shadow:0 1px 3px rgba(0,0,0,.6); --shadow2:0 4px 12px rgba(0,0,0,.6); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font2);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,b,strong,.btn,button{font-family:var(--font)}
h1,h2,h3,h4{font-weight:500;margin:0;line-height:1.25;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
p{margin:0 0 .6em}
small{color:var(--ink2)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--bg2);border:1px solid var(--line2);padding:1px 5px;border-radius:4px;word-break:break-all}
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle;user-select:none;overflow:hidden;width:1em}
.ms.fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.ms.sm{font-size:16px}
.stars{display:inline-flex;color:var(--brand)}
.stars .ms{font-size:18px}
.stars .ms.fill{font-variation-settings:"FILL" 1}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:20px;border:1px solid transparent;font-size:14px;font-weight:500;cursor:pointer;background:var(--brand);color:var(--brand-ink);transition:box-shadow .15s,background .15s;white-space:nowrap;text-decoration:none;line-height:1}
.btn:hover{box-shadow:var(--shadow)}
.btn .ms{font-size:20px}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--line)}
.btn-outline:hover{background:var(--brand-soft);box-shadow:none}
.btn-text{background:transparent;color:var(--brand);padding:0 12px}
.btn-text:hover{background:var(--brand-soft);box-shadow:none}
.btn-danger{background:var(--red);color:#fff}
.btn-danger.btn-outline{background:transparent;color:var(--red);border-color:var(--line)}
.btn-sm{height:32px;padding:0 14px;font-size:13px}
.btn-sm .ms{font-size:18px}
.btn-block{width:100%}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.icon-btn:hover{background:var(--hover)}

/* Formularios */
.field{display:block;margin:0 0 16px}
.field>span,.lbl{display:block;font:500 13px/1.3 var(--font);color:var(--ink2);margin:0 0 6px}
.field small{display:block;margin-top:4px;font-size:12px}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=search],input[type=tel],input[type=date],select,textarea{width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 15px var(--font2);outline:none;transition:border .15s,box-shadow .15s}
textarea{height:auto;min-height:110px;padding:12px 14px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
input[type=file]{font:400 13px var(--font2);color:var(--ink2);max-width:100%}
input[type=color]{width:52px;height:40px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:3px;cursor:pointer}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0 0 12px;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--brand);margin:2px 0 0;flex:none}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
@media (max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.counter{float:right;font-size:12px;color:var(--ink3);font-weight:400}

/* Chips y avisos */
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:12px;font:500 12px var(--font);white-space:nowrap}
.chip-green{background:var(--green-soft);color:var(--green)}
.chip-amber{background:var(--amber-soft);color:var(--amber)}
.chip-red{background:var(--red-soft);color:var(--red)}
.chip-grey{background:var(--bg2);color:var(--ink2);border:1px solid var(--line2)}
.chip-blue{background:var(--blue-soft);color:var(--blue)}
.flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);margin:0 0 16px;font-size:14px;background:var(--green-soft);color:var(--green)}
.flash-err{background:var(--red-soft);color:var(--red)}
.flash-warn{background:var(--amber-soft);color:var(--amber)}
.note{padding:12px 16px;border-radius:var(--r);background:var(--blue-soft);color:var(--ink);font-size:13px;margin:0 0 16px;display:flex;gap:10px;align-items:flex-start}
.note .ms{color:var(--blue);font-size:20px}
.note.warn{background:var(--amber-soft)}.note.warn .ms{color:var(--amber)}
.note.err{background:var(--red-soft)}.note.err .ms{color:var(--red)}

/* Avatares e íconos de app */
.av{border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle}
.av-txt{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font);font-weight:500}
.app-ic{border-radius:22%;object-fit:cover;flex:none;display:inline-block;box-shadow:0 1px 2px rgba(60,64,67,.25);background:var(--bg2)}
.app-ic-txt{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font);font-weight:600}
.logo-img{border-radius:10px;flex:none;display:block}

/* Menú de cuenta */
.menu-wrap{position:relative}
.avatar{border:0;background:none;padding:4px;border-radius:50%;cursor:pointer;display:flex}
.avatar:hover{background:var(--hover)}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:270px;background:var(--card);border-radius:var(--r2);box-shadow:var(--shadow2);padding:8px 0;z-index:60}
.menu-head{display:flex;gap:12px;align-items:center;padding:10px 18px 14px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.menu-head b{display:block;font-weight:500}
.menu-head small{display:block;font-size:12px;word-break:break-all}
.menu a,.menu button{display:flex;align-items:center;gap:14px;width:100%;padding:10px 18px;border:0;background:none;color:var(--ink);font:400 14px var(--font2);cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--hover)}
.menu .ms{color:var(--ink2);font-size:20px}

.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:#323232;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;z-index:100;box-shadow:var(--shadow2);max-width:90vw}
.empty{text-align:center;padding:48px 20px;color:var(--ink2)}
.empty>.ms{font-size:56px;color:var(--ink3);width:auto}
.empty h3{margin:10px 0 6px;color:var(--ink);font-size:18px}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0;color:var(--ink2)}
.pager a{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--line)}
.pager a:hover{background:var(--hover)}
.only-m{display:none}
.muted{color:var(--ink2)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mt{margin-top:16px}.mb{margin-bottom:16px}
@media (max-width:840px){.only-m{display:inline-flex}.hide-m{display:none!important}}
@media (max-width:520px){.hide-s{display:none!important}}