/* MR VERDULI Pedidos – App Style
   Estética: aplicación de escritorio formal (tipo panel ERP),
   sobria, densa, tipografía sistema, líneas finas.
   Override intencionado sobre estilos legacy inline. */

:root{
  --app-font: "Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --app-bg: #eef1f5;
  --app-panel: #ffffff;
  --app-panel-alt: #f7f8fa;
  --app-border: #d0d5dc;
  --app-border-strong: #b3bac4;
  --app-text: #1f2937;
  --app-text-2: #4b5563;
  --app-text-muted: #6b7280;
  --app-primary: #0f766e;      /* teal formal */
  --app-primary-hover: #115e59;
  --app-accent: #1e3a8a;
  --app-danger: #b91c1c;
  --app-warn: #92400e;
  --app-ok: #166534;
  --app-radius: 4px;
  --app-radius-lg: 6px;
  --app-shadow: 0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.06);
}

html,body{
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

body a{color: var(--app-accent);}
body a:hover{color:#111827;text-decoration:underline;}

/* Tipografía formal */
h1,h2,h3,h4,h5,h6{
  font-family: var(--app-font) !important;
  color: var(--app-text) !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
}
h1{font-size: 1.35rem !important;}
h2{font-size: 1.15rem !important;}
h3{font-size: 1.02rem !important;}
h4,h5,h6{font-size: .95rem !important;}
p{color: var(--app-text-2);}

/* Contenedor coherente */
.container{max-width: 1180px !important;}

/* Barra superior estilo app */
.nav{
  background: var(--app-panel) !important;
  border-bottom: 1px solid var(--app-border) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.nav .nav-inner{padding: .35rem 0 !important;}
.nav .nav-brand{font-weight: 600 !important;}
.nav .nav-brand .sq{
  width: 30px !important; height: 30px !important;
  border-radius: 4px !important;
  background: var(--app-primary) !important;
  color: #fff !important;
  font-size: .72rem !important;
  border: 1px solid var(--app-primary-hover) !important;
}
.nav .nav-brand .txt .big{font-size: .92rem !important; color: var(--app-text) !important;}
.nav .nav-brand .txt .small{
  font-size: .62rem !important;
  color: var(--app-text-muted) !important;
  letter-spacing: 1px !important;
}
.nav .nav-links a{
  color: var(--app-text-2) !important;
  font-weight: 500 !important;
  font-size: .82rem !important;
  padding: .35rem .65rem !important;
  border-radius: var(--app-radius) !important;
  background: transparent !important;
}
.nav .nav-links a:hover{
  background: var(--app-panel-alt) !important;
  color: var(--app-text) !important;
  text-decoration: none !important;
}
.nav .btn-cart .badge{
  background: var(--app-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.nav-avatar{
  width: 28px !important; height: 28px !important;
  border-radius: 4px !important;
  border: 1px solid var(--app-border) !important;
}
.nav .btn-google{
  background: var(--app-panel) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong) !important;
  font-weight: 500 !important;
  border-radius: var(--app-radius) !important;
  padding: .35rem .7rem !important;
  font-size: .8rem !important;
}
.nav .btn-google:hover{background: var(--app-panel-alt) !important;}

/* HERO tipo cabecera de aplicación */
.hero{
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
  padding: 42px 0 !important;
  border-bottom: 1px solid #000 !important;
  color: #e5e7eb !important;
}
.hero::before{display:none !important;}
.hero .hero-video{opacity: .18 !important;}
.hero h1{
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.hero h1 span{color: #5eead4 !important;}
.hero .sub{color: #cbd5e1 !important; font-size: .95rem !important; max-width: 640px;}
.hero .badge{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #cbd5e1 !important;
  font-size: .68rem !important;
  letter-spacing: 1px !important;
  border-radius: var(--app-radius) !important;
  padding: .3rem .7rem !important;
  font-weight: 600 !important;
}
.hero .list li{color: #d1d5db !important; font-size: .88rem !important;}
.hero .list li::before{color: #5eead4 !important;}
.hero .actions .btn-google,
.hero .btn-a, .hero .btn-b{
  border-radius: var(--app-radius) !important;
  font-weight: 500 !important;
  font-size: .88rem !important;
  padding: .55rem 1.1rem !important;
  box-shadow: none !important;
}
.hero .btn-a{background: var(--app-primary) !important;border:1px solid var(--app-primary-hover) !important;}
.hero .btn-b{background: #fff !important;color:#111827 !important;border:1px solid #e5e7eb !important;}

/* Cards / paneles */
.card, .card-role, .card-stat, .pcard, .login-card{
  background: var(--app-panel) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius-lg) !important;
  box-shadow: var(--app-shadow) !important;
}
.card-header{
  background: var(--app-panel-alt) !important;
  border-bottom: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  padding: .55rem .9rem !important;
  border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.card-body{padding: .9rem !important;}

/* Tablas estilo denso */
.table{font-size: .82rem !important;}
.table th{
  background: var(--app-panel-alt) !important;
  color: var(--app-text) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem !important;
  border-bottom: 1px solid var(--app-border) !important;
}
.table td{border-bottom: 1px solid var(--app-border) !important;}
.table-light,.table-light>th{background: var(--app-panel-alt) !important;}

/* Botones */
.btn, .btn-pri, .btn-primary, .btn-sm, .btn-outline, .btn-out{
  border-radius: var(--app-radius) !important;
  font-weight: 500 !important;
  font-size: .82rem !important;
  padding: .4rem .85rem !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s !important;
}
.btn-pri, .btn-primary{
  background: var(--app-primary) !important;
  color: #fff !important;
  border: 1px solid var(--app-primary-hover) !important;
}
.btn-pri:hover, .btn-primary:hover{background: var(--app-primary-hover) !important;}
.btn-outline,.btn-out{
  background: var(--app-panel) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong) !important;
}
.btn-outline:hover,.btn-out:hover{background: var(--app-panel-alt) !important;color: var(--app-text) !important;}
.btn-outline-success{color: var(--app-primary) !important;border-color: var(--app-primary) !important;}
.btn-outline-success:hover{background: var(--app-primary) !important;color: #fff !important;}
.btn-success, .badge.bg-success{background: var(--app-primary) !important;border-color: var(--app-primary-hover) !important;}
.btn-danger, .badge.bg-danger{background: var(--app-danger) !important;border-color: #7f1d1d !important;}
.btn-warning, .badge.bg-warning{background: #ca8a04 !important;color:#fff !important;border-color:#a16207 !important;}
.btn-secondary, .badge.bg-secondary{background: #64748b !important;border-color:#475569 !important;}
.btn-light{
  background: var(--app-panel) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
}
.btn-lg{padding: .55rem 1.1rem !important;font-size: .9rem !important;}

/* Inputs */
.form-control, .form-select, .form-input, input[type=text], input[type=number],
input[type=email], input[type=tel], input[type=password], input[type=date],
input[type=url], textarea, select{
  border: 1px solid var(--app-border-strong) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-panel) !important;
  font-size: .85rem !important;
  color: var(--app-text) !important;
  padding: .4rem .55rem !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, .form-input:focus,
input:focus, textarea:focus, select:focus{
  border-color: var(--app-primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(15,118,110,.15) !important;
}
.form-label{font-size:.78rem !important;font-weight:600 !important;color: var(--app-text-2) !important;}

/* Producto (catálogo) */
.pcard{overflow:hidden !important;}
.pcard-img{aspect-ratio: 4/3 !important;background: var(--app-panel-alt) !important;}
.pcard .tag{
  border-radius: var(--app-radius) !important;
  font-weight: 600 !important;
  font-size: .62rem !important;
  padding: .18rem .45rem !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pcard .tag.ok{background: var(--app-primary) !important;color:#fff !important;}
.pcard .tag.ko{background: var(--app-danger) !important;color:#fff !important;}
.pcard-body h5{font-size: .9rem !important;font-weight: 600 !important;}
.pcard-body .cat{color: var(--app-primary) !important;font-size:.62rem !important;letter-spacing: .06em;}
.pcard-body .price{color: var(--app-text) !important;font-weight: 700 !important;font-size: 1.05rem !important;}
.pcard-body .price em{color: var(--app-text-muted) !important;}
.pcard-body .foot{border-top: 1px solid var(--app-border) !important;}

/* Alerts */
.alert{
  border-radius: var(--app-radius) !important;
  font-size: .82rem !important;
  border: 1px solid var(--app-border) !important;
  padding: .55rem .8rem !important;
}
.alert-success{background:#ecfdf5 !important;border-color:#a7f3d0 !important;color: var(--app-ok) !important;}
.alert-warning{background:#fef3c7 !important;border-color:#fde68a !important;color: var(--app-warn) !important;}
.alert-danger{background:#fef2f2 !important;border-color:#fecaca !important;color: var(--app-danger) !important;}
.alert-secondary{background:#f3f4f6 !important;border-color:#e5e7eb !important;color: var(--app-text-2) !important;}

/* Badges soft del proveedor */
.badge-soft{
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  padding: .2rem .55rem !important;
  font-size: .7rem !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600 !important;
}
.badge-soft.success{background:#ecfdf5 !important;color: var(--app-ok) !important;}
.badge-soft.warning{background:#fefce8 !important;color: var(--app-warn) !important;}
.badge-soft.danger{background:#fef2f2 !important;color: var(--app-danger) !important;}

/* Footer sobrio */
footer{
  background: #0f172a !important;
  color: #94a3b8 !important;
  padding: 26px 0 20px !important;
  margin-top: 32px !important;
  border-top: 1px solid #000 !important;
}
footer h6{color:#e5e7eb !important;font-size:.7rem !important;letter-spacing:1px !important;}
footer ul a{color:#94a3b8 !important;font-size:.82rem !important;}
footer ul a:hover{color:#fff !important;}
footer .foot-bot{
  border-top: 1px solid #1f2937 !important;
  font-size: .72rem !important;
  margin-top: 20px !important;
  padding-top: 12px !important;
}

/* Login card centrada */
.login-card{
  border-radius: var(--app-radius-lg) !important;
  padding: 1.6rem 1.4rem !important;
}
.login-card .brand{font-size: .95rem !important;font-weight: 700 !important;}
.login-card h1{font-size: 1.15rem !important;}
.login-card p{font-size: .82rem !important;}
.login-card .btn-google{
  border-radius: var(--app-radius) !important;
  padding: .5rem 1rem !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.login-card .btn-provider{
  background: var(--app-primary) !important;
  border-color: var(--app-primary-hover) !important;
  color:#fff !important;
}
.login-card .mode a{
  background: var(--app-panel-alt) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text-2) !important;
  font-weight: 500 !important;
  padding: .3rem .6rem !important;
  font-size: .72rem !important;
}
.login-card .mode a.active{
  background: var(--app-panel) !important;
  border-color: var(--app-primary) !important;
  color: var(--app-primary) !important;
  font-weight: 600 !important;
}
.login-card .sq{
  width: 38px !important; height: 38px !important;
  border-radius: var(--app-radius) !important;
  border: 1px solid var(--app-primary-hover) !important;
  background: var(--app-primary) !important;
  font-size: .82rem !important;
}
.login-card .back{color: var(--app-text-muted) !important;font-size: .74rem !important;margin-top: .8rem !important;}

/* Botón WhatsApp flotante más sobrio */
.wa-btn{
  background:#075e54 !important;
  width: 44px !important; height:44px !important;
  border-radius: 4px !important;
  font-size: 1.1rem !important;
  box-shadow: var(--app-shadow) !important;
}

/* Admin (side + main) */
.sidebar{background: #111827 !important;color:#cbd5e1 !important;width: 220px !important;border-right: 1px solid #000;}
.sidebar-brand{border-bottom: 1px solid #1f2937 !important;padding: 14px 16px !important;}
.sidebar-brand .sq{background: var(--app-primary) !important;border: 1px solid var(--app-primary-hover) !important;border-radius: 4px !important;font-size:.72rem !important;}
.sidebar-brand .txt{font-weight: 600 !important;font-size: .88rem !important;color:#f3f4f6 !important;}
.sidebar-brand .txt small{color:#6b7280 !important;font-size:.6rem !important;letter-spacing:1px !important;}
.sidebar-nav a{
  color:#9ca3af !important;font-size:.82rem !important;
  padding: .5rem .8rem !important;border-radius: 4px !important;font-weight: 500 !important;
}
.sidebar-nav a:hover{background:#1f2937 !important;color:#f3f4f6 !important;}
.sidebar-nav a.active{background: var(--app-primary) !important;color:#fff !important;}
.main-content{margin-left: 220px !important;}
.topbar{
  background: var(--app-panel) !important;
  border-bottom: 1px solid var(--app-border) !important;
  padding: 8px 16px !important;
}
.topbar h1{font-size: 1rem !important;}
.content-wrap{padding: 16px !important;}
.card-stat .fs-3{font-size: 1.4rem !important;font-weight: 700 !important;}
.card-stat small{font-size:.72rem !important;color: var(--app-text-muted) !important;letter-spacing: .04em;text-transform: uppercase;}

/* Toast login */
.toast-login .alert{border-radius: var(--app-radius) !important;font-size:.82rem !important;}

/* Utilidades */
.small, small{font-size: .78rem !important;}
.text-muted{color: var(--app-text-muted) !important;}

/* Responsive */
@media(max-width: 991px){
  .sidebar{width: 220px !important;}
  .main-content{margin-left: 0 !important;}

  /* Navegación pública: usa hamburger existente */
  .nav .hamburger{
    display: inline-flex !important; align-items:center;justify-content:center;
    background: transparent !important;border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    width: 34px !important;height: 34px !important;
    border-radius: var(--app-radius) !important;
  }
  .nav .nav-links{
    display: none !important;
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important; align-items: stretch !important;
    background: var(--app-panel) !important;
    border-bottom: 1px solid var(--app-border) !important;
    padding: .5rem !important; gap: .1rem !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  }
  .nav .nav-links.open{display: flex !important;}
  .nav .nav-links a{width: 100%;}
  .hero{padding: 28px 0 !important;}
  .hero h1{font-size: clamp(1.2rem, 5vw, 1.6rem) !important;}
  .hero .actions{flex-direction: column; align-items: stretch;}
  .hero .actions a{width: 100%; justify-content: center;}
}

@media(max-width: 767px){
  html,body{font-size: 15px !important;}
  .container{padding-left: 12px !important; padding-right: 12px !important;}
  .card-body{padding: .75rem !important;}
  .card-header{padding: .5rem .75rem !important;}
  .table{font-size: .78rem !important;}
  .table th, .table td{padding: .45rem .55rem !important;}
  h1{font-size: 1.15rem !important;}
  h2{font-size: 1.02rem !important;}

  /* Cards de producto: 1 columna en móvil */
  .pcard{margin-bottom: .8rem;}

  /* Formularios más cómodos al tocar */
  .form-control, .form-select, input, select, textarea{
    font-size: 16px !important;   /* evita zoom en iOS */
    padding: .55rem .7rem !important;
  }
  .btn, .btn-pri, .btn-primary, .btn-outline, .btn-out, .btn-sm{
    padding: .55rem .9rem !important;
    font-size: .88rem !important;
  }

  /* Footer sobrio en móvil: apila */
  footer .d-flex{flex-direction: column !important; align-items: flex-start !important; gap: .35rem !important;}
  footer .foot-bot{flex-direction: column !important; gap: .2rem !important;}

  /* Filas de checkout: apilar */
  .prod-row{flex-direction: column !important; align-items: stretch !important;}
  .prod-row .qty-col, .prod-row .row-total{width: 100% !important;}
  .prod-row .row-total{text-align: right !important;}
}

@media(max-width: 480px){
  .nav .nav-brand .txt .big{font-size: .85rem !important;}
  .nav .nav-brand .txt .small{font-size: .55rem !important;}
  .hero .badge{font-size: .6rem !important;}
}

/* Evitar scroll horizontal por elementos gigantes */
html, body{overflow-x: hidden;}
.container, .container-fluid, .row{max-width: 100%;}
img, video, .hero .hero-video{max-width: 100%; height: auto;}

/* Botón WhatsApp fuera del área de contenido en móvil */
@media(max-width: 480px){
  .wa-btn{bottom: 12px !important; right: 12px !important; width: 40px !important; height: 40px !important;}
}