/* Panel de administración: pensado primero para el celular, botones grandes y pocos pasos */
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.lbl{display:block;font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--earth-soft);margin-bottom:.5rem}
.req{letter-spacing:.04em;text-transform:none;color:var(--stone);font-size:.75rem}
.ayuda{font-size:var(--s-sm);color:var(--ink-soft);line-height:1.5}
.demo{background:var(--earth);color:var(--paper);font-size:var(--s-xs);text-align:center;padding:.45rem var(--gutter-r) .45rem var(--gutter)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-size:var(--s-md);font-weight:500;background:var(--earth);color:var(--paper);border:1px solid var(--earth);border-radius:999px;padding:.85rem 1.5rem;cursor:pointer;text-decoration:none;transition:opacity .2s,background .2s;-webkit-tap-highlight-color:transparent}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.5;cursor:default}
.btn-claro{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn-chico{font-size:var(--s-sm);padding:.55rem 1.1rem}
.btn-ancho{width:100%}
.btn-peligro{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-peligro-borde{background:none;color:var(--danger);border-color:var(--danger)}
.link{font:inherit;font-size:var(--s-sm);background:none;border:0;padding:.5rem .25rem;color:var(--ink-soft);cursor:pointer;text-decoration:none}
.link:hover{color:var(--earth)}

/* Entrar */
.entrar{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:2.5rem var(--gutter-r) 2.5rem var(--gutter)}
.entrar-caja{width:100%;max-width:380px;display:flex;flex-direction:column;gap:1rem;text-align:center}
.logo-grande{width:64px;height:57px;margin:0 auto .5rem}
.entrar h1{font-size:2.5rem}
.sub{color:var(--ink-soft);margin-bottom:.75rem}
.sep{display:flex;align-items:center;gap:.75rem;color:var(--stone);font-size:var(--s-sm);margin-block:.5rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.f-email{display:flex;flex-direction:column;gap:.75rem;text-align:left}
.f-email .lbl{margin:0}
.msg{font-size:var(--s-sm);color:var(--earth);min-height:1.4em}
.msg:empty{min-height:0}
.clave{position:relative}
.clave input{padding-right:4.5rem}
.clave .link{position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}
#b-olvide{align-self:center}
.volver{font-size:var(--s-sm);color:var(--ink-soft);margin-top:1rem}

/* Campos */
input,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--earth);box-shadow:0 0 0 3px color-mix(in srgb,var(--earth) 15%,transparent)}
textarea{resize:vertical;line-height:1.5}
fieldset{border:0;padding:0;margin:0;min-width:0}
.input-error{border-color:var(--danger)!important}

/* Cabecera */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--earth)}
.top-in{max-width:1240px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--gutter-r) .75rem var(--gutter)}
.marca{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--earth);font-family:var(--f-display);font-stretch:80%;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.top-acc{display:flex;align-items:center;gap:.75rem}
.ed-top h2{font-size:1.375rem;text-align:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pestañas del panel */
.pestanas{border-top:1px solid var(--line)}
.pestanas-in{max-width:1240px;margin-inline:auto;display:flex;gap:1.75rem;padding:0 var(--gutter-r) 0 var(--gutter)}
.pestana{position:relative;font:inherit;font-size:var(--s-sm);background:none;border:0;padding:.8rem 0;color:var(--ink-soft);cursor:pointer;transition:color .25s}
.pestana:hover{color:var(--earth)}
.pestana::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--earth);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.pestana[aria-current="page"]{color:var(--earth);font-weight:500}
.pestana[aria-current="page"]::after{transform:scaleX(1)}

/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem;align-items:start}
@media (max-width:760px){.portada{grid-template-columns:1fr}}
.portada-actual{display:flex;flex-direction:column;gap:.85rem}
.portada-foto{position:relative;aspect-ratio:4/5;background:var(--ph-b);border-radius:14px;overflow:hidden}
.portada-foto img{width:100%;height:100%;object-fit:cover}
.portada-acc{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.po-grilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@media (max-width:480px){.po-grilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
.po-op{position:relative;aspect-ratio:1/1;padding:0;border:0;background:var(--ph-b);cursor:pointer;border-radius:8px;overflow:hidden}
.po-op img{width:100%;height:100%;object-fit:cover}
.po-op[aria-pressed="true"]{outline:3px solid var(--earth);outline-offset:2px}
.po-op[aria-pressed="true"]::after{content:"✓";position:absolute;top:.3rem;right:.3rem;width:22px;height:22px;border-radius:50%;background:var(--earth);color:var(--paper);font-size:.75rem;display:grid;place-items:center}

/* Estadísticas */
.resumen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:1.5rem}
@media (max-width:900px){.resumen{grid-template-columns:repeat(3,minmax(0,1fr))}.dato.texto{grid-column:1/-1}}
.dato{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.dato strong{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:2.25rem;line-height:1;color:var(--earth);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dato.texto strong{font-size:1.5rem;line-height:1.15;white-space:normal}
.dato span{font-size:var(--s-sm);color:var(--ink-soft)}
@media (max-width:560px){.dato{padding:.85rem .8rem}.dato strong{font-size:1.85rem}.dato span{font-size:var(--s-xs)}}
.ranking{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-width:860px}
.ranking li{display:grid;grid-template-columns:2rem 56px minmax(0,1fr) auto;align-items:center;gap:.9rem;padding-block:.75rem;border-bottom:1px solid var(--line)}
.ranking li:first-child{border-top:1px solid var(--line)}
.ranking li.cero{opacity:.55}
.rk-pos{font-family:var(--f-display);font-stretch:75%;font-size:1.5rem;color:var(--earth-soft);text-align:center;font-variant-numeric:tabular-nums}
.rk-foto{width:56px;height:56px;background:var(--ph-b);overflow:hidden;border-radius:8px;display:grid;place-items:center;color:var(--stone)}
.rk-foto img{width:100%;height:100%;object-fit:cover}
.rk-foto .i{width:22px;height:22px}
.rk-info{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.rk-info strong{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-info small{font-size:var(--s-xs);color:var(--ink-soft)}
.rk-barra{display:flex;gap:2px;height:7px;border-radius:999px;background:var(--raw);overflow:hidden}
.rk-barra span{display:block;height:100%}
.rk-barra .cuenta{background:var(--earth)}
.rk-barra .anonimo{background:var(--piece-2)}
.rk-detalle{font-size:.6875rem!important;color:var(--stone)!important;font-variant-numeric:tabular-nums}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.4rem;vertical-align:baseline}
.punto.cuenta{background:var(--earth)}
.punto.anonimo{background:var(--piece-2)}
.rk-n{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:1.5rem;color:var(--earth);font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-n small{font-family:var(--f-body);font-stretch:100%;font-weight:400;font-size:var(--s-xs);color:var(--ink-soft);margin-left:.2rem}
.rk-sep{padding:1.25rem 0 .5rem;font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);border:0!important;display:block!important}
.est-nota{margin-top:1.5rem}

/* Lista de piezas */
.lista{padding-block:1.75rem 7rem}
.lista-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.lista-head h1{font-size:2.25rem}
.cuenta{font-size:var(--s-sm);color:var(--ink-soft);margin-top:.25rem}
.filtros-fila{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:var(--s-sm);background:var(--white);border:1px solid var(--line);color:var(--ink-soft);padding:.5rem .95rem;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--earth);border-color:var(--earth);color:var(--paper)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:focus-visible){outline:2px solid var(--earth);outline-offset:2px}
.chip .n{font-size:.75rem;opacity:.7;font-variant-numeric:tabular-nums}
.chip-borde{background:none;border-style:dashed;color:var(--earth)}
.ayuda-orden{font-size:var(--s-sm);color:var(--earth);background:var(--raw);padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem}

.grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
@media (min-width:700px){.grilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media (min-width:1000px){.grilla{grid-template-columns:repeat(5,minmax(0,1fr))}}
.celda{position:relative;min-width:0}
.miniatura{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;background:var(--ph-b);cursor:pointer;overflow:hidden;font:inherit;color:inherit}
.miniatura img{width:100%;height:100%;object-fit:cover}
.miniatura.oculta img,.miniatura.oculta .sin-foto{opacity:.45}
.sin-foto{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.25rem;color:var(--stone);font-size:var(--s-xs)}
.sin-foto .i{width:26px;height:26px}
.mini-titulo{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .5rem .45rem;font-size:.75rem;line-height:1.25;text-align:left;color:#fff;background:linear-gradient(transparent,rgba(40,28,18,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insignias{position:absolute;top:.4rem;left:.4rem;display:flex;flex-wrap:wrap;gap:.25rem}
.insignia{font-size:.6875rem;line-height:1;padding:.3rem .45rem;border-radius:999px;background:var(--paper);color:var(--earth)}
.insignia.vendida{background:var(--earth);color:var(--paper)}
.mini-favs{position:absolute;top:.4rem;right:.4rem;font-size:.6875rem;line-height:1;padding:.3rem .45rem;border-radius:999px;background:var(--earth);color:var(--paper);font-variant-numeric:tabular-nums}
.ed-favs{font-size:var(--s-sm);color:var(--earth);background:var(--raw);padding:.75rem 1rem;border-radius:10px}
.mover{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:.35rem}
.mover button{width:40px;height:40px;border-radius:50%;border:0;background:var(--paper);color:var(--earth);font-size:1.1rem;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.mover button:disabled{opacity:.35}
.grilla.ordenando .mini-titulo{display:none}
/* Arrastrar para ordenar */
.ayuda-arrastrar{margin:-.5rem 0 .9rem;font-size:var(--s-xs)}
.solo-mouse{display:none}
@media (hover:hover) and (pointer:fine){.solo-tactil{display:none}.solo-mouse{display:inline}}
.celda{touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.miniatura img{-webkit-user-drag:none;pointer-events:none}
.arrastre-hueco{opacity:.35}
.arrastre-hueco .miniatura{outline:2px dashed var(--earth);outline-offset:-2px}
.arrastre-elegido .miniatura{transform:scale(.97);transition:transform .15s}
.arrastre-mano{opacity:.95!important;box-shadow:0 12px 30px rgba(40,28,18,.3);transform:rotate(1.5deg)}
@media (hover:hover){.grilla:not(.ordenando) .celda{cursor:grab}}
.asa{flex:none;width:28px;text-align:center;color:var(--stone);font-size:1.1rem;cursor:grab;touch-action:none;user-select:none}
.vacio{text-align:center;color:var(--ink-soft);padding:3rem 1rem;display:flex;flex-direction:column;gap:.35rem}

.fab{position:fixed;right:calc(var(--gutter-r) + 4px);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:8;display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:500;font-size:var(--s-md);background:var(--earth);color:var(--paper);border:0;border-radius:999px;padding:1rem 1.4rem;cursor:pointer;box-shadow:0 6px 20px rgba(60,40,25,.28)}
.fab span{font-size:1.5rem;line-height:1;margin-top:-2px}

/* Editor */
.ed{max-width:640px;margin-inline:auto;padding-block:1.25rem 4rem;display:flex;flex-direction:column;gap:1.25rem}
.bloque{display:flex;flex-direction:column;gap:.85rem}
.campos{gap:1.5rem}
.fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fotos:empty{display:none}
.foto{position:relative;aspect-ratio:1/1;background:var(--ph-b);border-radius:10px;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.cargando{display:grid;place-items:center;font-size:var(--s-xs);color:var(--stone)}
.principal{position:absolute;top:.35rem;left:.35rem;font-size:.6875rem;padding:.25rem .5rem;border-radius:999px;background:var(--earth);color:var(--paper)}
.foto-acc{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:.3rem;background:linear-gradient(transparent,rgba(40,28,18,.45))}
.foto-acc button{width:34px;height:34px;border-radius:50%;border:0;background:var(--paper);color:var(--earth);font-size:.95rem;cursor:pointer}
.foto-acc button:disabled{visibility:hidden}
.foto-acc button[data-a="quitar"]{color:var(--danger)}
.agregar{display:flex;align-items:center;gap:1rem;border:1.5px dashed var(--earth-soft);border-radius:14px;padding:1.25rem;cursor:pointer;background:var(--white);color:var(--earth)}
.agregar:hover{background:var(--raw)}
.agregar .i{width:34px;height:34px;flex:none}
.agregar span{display:flex;flex-direction:column}
.agregar strong{font-weight:500;font-size:var(--s-md)}
.agregar small{font-size:var(--s-sm);color:var(--ink-soft)}
.oculto:focus-visible + p,.agregar:has(+ .oculto:focus-visible){outline:2px solid var(--earth);outline-offset:3px}
.campo{display:flex;flex-direction:column;min-width:0}
.campo .chips{margin-top:.1rem}
.medidas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-bottom:.5rem}
.medidas label{display:block;font-size:var(--s-sm);color:var(--ink-soft);margin-bottom:.3rem}
.medidas input{text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:420px){.medidas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:480px){.dos{grid-template-columns:1fr;gap:1.5rem}}
.campo-anio input{max-width:8rem;font-variant-numeric:tabular-nums}
.nueva-col{display:flex;gap:.5rem;margin-top:.6rem}
.nueva-col input{flex:1;min-width:0}
.switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;cursor:pointer;position:relative}
.switch > span:first-child{display:flex;flex-direction:column}
.switch strong{font-weight:500}
.switch small{font-size:var(--s-sm);color:var(--ink-soft)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch-pista{flex:none;width:50px;height:30px;border-radius:999px;background:var(--sand);position:relative;transition:background .2s}
.switch-pista::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + .switch-pista{background:var(--earth)}
.switch input:checked + .switch-pista::after{transform:translateX(20px)}
.switch:has(input:focus-visible){outline:2px solid var(--earth);outline-offset:3px}
.ingles{background:var(--white);border:1px solid var(--line);border-radius:14px}
.ingles summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;cursor:pointer;list-style:none}
.ingles summary::-webkit-details-marker{display:none}
.ingles summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--earth);border-bottom:1.5px solid var(--earth);transform:rotate(45deg);transition:transform .25s}
.ingles[open] summary::after{transform:rotate(-135deg)}
.ingles summary > span{display:flex;flex-direction:column}
.ingles summary strong{font-weight:500}
.ingles summary small{font-size:var(--s-sm);color:var(--ink-soft)}
.ingles-in{display:flex;flex-direction:column;gap:1.25rem;padding:0 1.1rem 1.1rem}
.sin-traducir{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--s-sm);color:var(--earth);background:var(--raw);padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem}
.borrar-zona{padding-top:1rem;border-top:1px solid var(--line)}
.ed-publicar-abajo{margin-top:.5rem}

/* Progreso */
.progreso{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(241,235,225,.8);backdrop-filter:blur(2px)}
.progreso-caja{display:flex;align-items:center;gap:.85rem;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.4rem;box-shadow:0 10px 30px rgba(60,40,25,.15)}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--sand);border-top-color:var(--earth);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* Diálogos */
dialog{border:0;padding:0;background:var(--paper);color:var(--ink);border-radius:18px;box-shadow:0 20px 50px rgba(40,28,18,.3)}
dialog::backdrop{background:rgba(30,22,15,.45)}
.hoja{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 40px)}
.hoja-in{padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.hoja-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.hoja-head h2{font-size:1.75rem}
.col-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.col-lista li{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.4rem}
.col-lista .col-desc{flex-basis:100%;font-size:var(--s-sm);border:0;border-top:1px solid var(--line);border-radius:0 0 8px 8px;background:none;padding:.6rem .5rem .3rem;resize:vertical}
.col-lista .col-desc:focus{box-shadow:none;background:var(--raw)}
.col-lista input{border:0;background:none;padding:.5rem;flex:1;min-width:0}
.col-lista input:focus{box-shadow:none;background:var(--raw)}
.col-lista .n{font-size:var(--s-xs);color:var(--stone);white-space:nowrap}
.icono{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--earth);font-size:1rem;cursor:pointer}
.icono:hover{background:var(--raw)}
.icono:disabled{opacity:.3;cursor:default;background:none}
.icono.peligro{color:var(--danger)}
.confirmar{width:min(380px,calc(100vw - 32px));padding:1.5rem}
.confirmar p{font-size:var(--s-md);margin-bottom:1.25rem}
.confirmar-acc{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--paper);font-size:var(--s-sm);padding:.75rem 1.2rem;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:calc(100vw - 32px);text-align:center}