/* ==========================================================
   Deco Bazar: tema del punto de venta
   Menta, rosa y coral sobre crema; costuras punteadas; letra a mano
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Nunito:wght@400;600;700;800&family=Caveat:wght@600;700&display=swap");

:root{
  --rosa:#EC5FA0;--rosa-2:#D04586;--rosa-suave:#FDE7F1;
  --menta:#6CCBB3;--menta-osc:#2F9A84;--menta-osc-2:#237A68;--menta-suave:#E3F6F1;
  --coral:#F37E6C;--coral-suave:#FEE9E4;--crema:#FFFBF8;--linea:#F0DDE5;
  --nav1:#3FAF97;--nav2:#237A68;--bd:#E7C9D6;--bd2:#F0DDE5;--tx:#36353B;--mut:#6A6870;
  --ok:#2F9A84;--bad:#D9445A;--fondo1:#FFFBF8;--fondo2:#FDEFF5;--p:#EC5FA0;
  --display:"Fraunces",Georgia,serif;--mano:"Caveat","Segoe Script",cursive;
}
body{font-family:"Nunito",system-ui,sans-serif;font-size:14px;
  background:
    radial-gradient(circle at 12px 12px,rgba(236,95,160,.07) 2px,transparent 2.5px) 0 0/28px 28px,
    linear-gradient(var(--fondo1),var(--fondo2)) fixed}

/* Cabecera con costura */
.top{background:var(--crema);border-bottom:0;position:relative;padding:8px 16px 12px}
.top::after{content:"";position:absolute;left:0;right:0;bottom:3px;border-bottom:2px dashed var(--rosa);opacity:.75}
.marca img{height:58px;width:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--menta-suave);transition:transform .6s ease}
.marca:hover img{transform:rotate(-8deg)}
.marca .nom{font-family:var(--display);font-style:normal;font-weight:600;font-size:30px;color:var(--menta-osc);letter-spacing:-.5px}
.marca small{font-family:var(--mano);font-size:20px;letter-spacing:0;color:var(--rosa);margin-top:0;line-height:1}
.top .usr b{color:var(--menta-osc)}

/* Pestañas tipo etiqueta cosida */
.tabs{background:linear-gradient(var(--menta-suave),#d4efe7);border-bottom:2px solid var(--menta);padding:8px 10px 0;gap:6px}
.tab{border:2px solid transparent;border-bottom:0;border-radius:14px 14px 0 0;background:rgba(255,255,255,.65);font-weight:700;color:var(--menta-osc-2);padding:8px 14px}
.tab:hover{background:#fff;transform:translateY(-1px)}
.tab.on{background:#fff;color:var(--rosa-2);border-color:var(--menta);border-style:dashed;top:2px}
.tab kbd{color:var(--rosa)}

.titlebar{background:linear-gradient(90deg,var(--menta-osc),var(--menta));font-family:var(--display);font-weight:600;letter-spacing:.5px;text-transform:none;font-size:18px;position:relative}
.titlebar::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;border-bottom:1.5px dashed rgba(255,255,255,.6)}
.status{background:var(--crema);border-top:1px dashed var(--bd)}

/* Paneles redondeados */
.panel,.totalbox,.kpi,.venta .lista{border:1px solid var(--linea);border-radius:18px;box-shadow:0 8px 22px -18px rgba(47,154,132,.55)}
.panel h3{font-family:var(--display);font-weight:600;color:var(--menta-osc);font-size:16px}
.scanbar{background:#fff;border:2px dashed var(--menta);border-radius:18px}
.scanbar label{color:var(--menta-osc)}
input,select,textarea{border:1.5px solid var(--bd);border-radius:10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rosa);outline-offset:-1px}
th{background:var(--menta-suave);color:var(--menta-osc-2);border-bottom:1px solid var(--menta)}
tbody tr:nth-child(even) td{background:#FFF7FA}
.vacio{font-family:var(--mano);font-size:22px;color:var(--rosa)}

/* Botones como en la web */
.btn{border-radius:999px;border:1.5px solid var(--bd);background:#fff;font-weight:700;transition:transform .2s ease,background-color .2s ease}
.btn:hover{background:var(--coral-suave);transform:translateY(-1px) rotate(-1deg)}
.btn b{color:var(--rosa-2)}
.btn.p{background:var(--rosa);border-color:var(--rosa);color:#fff;box-shadow:0 4px 0 -1px var(--rosa-2)}
.btn.p:hover{background:var(--rosa-2)}
.btn.p b{color:#fff}
.btn.ok{background:var(--menta-osc);border-color:var(--menta-osc);box-shadow:0 5px 0 -1px var(--menta-osc-2)}
.btn.ok:hover{background:var(--menta-osc-2)}
.btn.bad{background:var(--bad);border-color:var(--bad)}
.btn.xl{border-radius:18px;font-family:var(--display);font-weight:600;font-size:20px}

/* Total en grande */
.totalbox{background:linear-gradient(135deg,#fff,var(--rosa-suave))}
.totalbox .lbl{font-family:var(--mano);font-size:20px;letter-spacing:0;text-transform:none;color:var(--menta-osc)}
.totalbox .big{font-family:var(--display);color:var(--rosa-2);font-weight:800}
.kpi b{font-family:var(--display);color:var(--rosa-2)}

/* Configuración: íconos con costura al pasar */
.cfg-grupo{background:none;border-bottom:1.5px dashed var(--linea)}
.cfg-grupo h4{font-family:var(--display);font-weight:600;color:var(--menta-osc);font-size:15px}
.cfg-item{border-radius:16px;border:2px solid transparent}
.cfg-item:hover{background:var(--rosa-suave);border:2px dashed var(--rosa)}

/* Ventanas */
.modal{border:0;border-radius:20px;background:var(--crema)}
.modal>.mt{background:linear-gradient(90deg,var(--menta-osc),var(--menta));font-family:var(--display);font-weight:600;font-size:16px}
.nota{background:var(--menta-suave);border:1.5px dashed var(--menta);border-radius:14px}
.tag{background:var(--rosa-suave);border-color:var(--linea);border-radius:999px}
.bar{background:repeating-linear-gradient(90deg,var(--rosa) 0 10px,var(--coral) 10px 20px)}

/* Inicio de sesión */
.login{border:0;border-radius:24px;background:#fff;box-shadow:0 26px 60px -30px rgba(208,69,134,.55)}
.login .top::after{bottom:4px}
.login .titlebar{font-size:17px}
.saludo{margin:0;text-align:center;font-family:var(--mano);font-size:24px;color:var(--rosa)}
#toast{background:var(--menta-osc-2);border-radius:999px}