/* =========================================================
   Inventario · estilos propios (marca Pluss Color)
   Pensado mobile-first: pulido visual + arreglos de tablas
   en pantallas chicas, sin romper el layout de escritorio.
   ========================================================= */

:root{
  --yn-ivory:      #f4f5f7;
  --yn-cream:      #e9ecf0;
  --yn-charcoal:   #1d2127;
  --yn-charcoal-soft: #535b66;
  --yn-gold:       #e0262f;
  --yn-gold-light: #ff9a8f;
  --yn-blush:      #c9cfd7;
  --yn-white:      #ffffff;
  --yn-radius:     14px;
  --yn-shadow:     0 2px 10px rgba(0,0,0,0.08);
}

body{
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, .box-title, .login-box-body h4{
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
}

/* ---------- Tarjetas / boxes con mas aire ---------- */
.box, .small-box, .login-box-body, .box-body, .content-header{
  border-radius: var(--yn-radius);
}
.box{
  box-shadow: var(--yn-shadow);
  border-top: none;
}
.small-box{ box-shadow: var(--yn-shadow); }
.login-box-body{
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  border-radius: var(--yn-radius);
}
.login-box-body h4{ margin-bottom: 20px; }

/* ---------- Botones e inputs: comodos para el dedo ---------- */
.btn, .form-control, .btn-group > .btn{
  border-radius: 10px;
}

/* Botones pequenos de accion en tablas (QR, editar, eliminar, historial, etc.) */
.btn-xs{
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  margin: 2px;
}

/* Boton "X" de cerrar en los modales: mas grande, mas visible y mas facil de tocar */
.modal .close{
  font-size: 30px;
  opacity: 0.6;
  padding: 4px 10px;
  line-height: 1;
}
.modal .close:hover, .modal .close:focus{
  opacity: 1;
}

/* Barra de acciones (Agregar Producto / Carga Rapida / Descargar, etc.) */
.product-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.product-actions .btn-action{
  padding: 10px 20px;
  font-size: 15px;
}

/* ---------- Boton hamburguesa (abre el menu lateral) ---------- */
.sidebar-toggle{
  font-size: 19px;
  padding: 14px 16px;
}

/* ---------- Menu lateral: un poco mas grande que el original, sin exagerar ---------- */
.sidebar-menu > li > a{
  font-size: 14.5px;
  padding: 13px 15px;
}
.sidebar-menu > li > a > .fa:first-child{
  font-size: 16px;
  width: 24px;
}
.sidebar-menu .treeview-menu > li > a{
  font-size: 13.5px;
  padding: 8px 15px 8px 32px;
  white-space: normal;
  line-height: 1.3;
}
.sidebar-menu .treeview-menu > li > a > .fa{
  font-size: 14px;
  width: 22px;
}

/* Menu lateral con su propio scroll: siempre se puede llegar a todas las opciones,
   sin importar cuantos submenus esten desplegados */
.main-sidebar{
  position: fixed;
  top: 50px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- Tablas: que hagan scroll en vez de romper el layout ---------- */
.box-body, .table-responsive{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.table{
  border-radius: var(--yn-radius);
  overflow: hidden;
}

/* =========================================================
   Mobile (celulares, <= 767px)
   ========================================================= */
@media (max-width: 767px){

  /* Evita el zoom automatico de iOS al enfocar inputs */
  .form-control, .btn, select, textarea{
    font-size: 16px !important;
  }
  .btn, .form-control{
    min-height: 44px;
  }

  /* Boton hamburguesa mas grande y facil de tocar */
  .sidebar-toggle{
    font-size: 24px;
    padding: 14px 18px;
  }

  /* En celular el menu si conviene mas grande, para tocar bien con el dedo */
  .sidebar-menu > li > a{
    font-size: 16px;
    padding: 14px 15px;
  }
  .sidebar-menu > li > a > .fa:first-child{
    font-size: 18px;
    width: 26px;
  }
  .sidebar-menu .treeview-menu > li > a{
    font-size: 15px;
    padding: 10px 15px 10px 32px;
  }
  .sidebar-menu .treeview-menu > li > a > .fa{
    font-size: 16px;
    width: 22px;
  }

  .content-wrapper, .right-side{
    padding-top: 0;
  }
  section.content, .content-header{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Grupos de botones se acomodan en filas en vez de desbordar */
  .btn-group{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .btn-group > .btn, .btn-group > .btn-group{
    flex: 1 1 auto;
  }
  .btn-group.pull-right{
    float: none;
    margin-top: 8px;
  }

  .product-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .product-actions .btn-action,
  .product-actions .btn-group{
    width: 100%;
  }
  .product-actions .btn-group .btn-action{
    width: 100%;
  }

  /* Formularios horizontales: label arriba, campo abajo, mas espacio */
  .form-horizontal .control-label{
    text-align: left;
    margin-bottom: 4px;
  }
  .form-horizontal .form-group{
    margin-bottom: 16px;
  }

  /* Botones de accion a todo el ancho para que sean faciles de tocar */
  .form-horizontal .col-lg-offset-2 .btn,
  .form-horizontal .col-lg-offset-2 a.btn{
    width: 100%;
    margin-bottom: 8px;
  }

  /* Dashboard: tarjetas de estadisticas con mas espacio entre ellas */
  .small-box{ margin-bottom: 12px; }
  .small-box h3{ font-size: 28px; }

  /* Login: tarjeta centrada, ocupa casi toda la pantalla comodamente */
  .login-box{
    width: 100%;
    max-width: 360px;
    margin: 40px auto;
    padding: 0 16px;
  }
  .login-logo{
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 30px;
  }

  /* Encabezado de pagina mas compacto */
  .content-header > h1{
    font-size: 22px;
  }

  /* Evita que el contenido empuje scroll horizontal de toda la pagina */
  body{ overflow-x: hidden; }

  /* Menu lateral como "drawer" real, con fondo oscuro detras */
  .main-sidebar{
    z-index: 1040;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
    top: 50px;
  }
  body.sidebar-open{ overflow: hidden; }
  .sidebar-overlay{ display: none; }
  body.sidebar-open .sidebar-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1030;
  }
}

/* ---------- Carga Rapida de Producto: pulido especifico ---------- */
#addproductquick #btn_upload,
#addproductquick #btn_camera{
  min-width: 150px;
}
#photo_preview{
  border-radius: 10px;
  box-shadow: var(--yn-shadow);
}
@media (max-width: 767px){
  #addproductquick #btn_upload,
  #addproductquick #btn_camera{
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }
  #camera_video{
    max-width: 100% !important;
    border-radius: 10px;
  }
  #addproductquick button[type="submit"],
  #addproductquick a.btn{
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }
}

/* ---------- Menu lateral: opcion de la pantalla actual (la marca res/js/menu-activo.js) ---------- */
.skin-blue .sidebar-menu > li.menu-actual > a{
  color: #fff;
  background: #1e282c;
  border-left-color: #3c8dbc;
}
.skin-blue .sidebar-menu .treeview-menu > li.menu-actual > a{
  color: #fff;
  font-weight: 600;
  background: rgba(60,141,188,0.30);
  box-shadow: inset 3px 0 0 #3c8dbc;
}

/* ---------- Avisos y confirmaciones centrados (res/js/avisos.js) ---------- */
.aviso-fondo{
  position: fixed;
  inset: 0;
  z-index: 10050; /* por encima de modales y del menu lateral */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 28, 33, 0);
  transition: background .16s ease;
}
.aviso-fondo.aviso-visible{ background: rgba(20, 28, 33, 0.55); }
.aviso-fondo.aviso-saliendo{ background: rgba(20, 28, 33, 0); }
.aviso-caja{
  width: 100%;
  max-width: 400px;
  padding: 28px 24px 22px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
  text-align: center;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .16s ease, transform .16s ease;
}
.aviso-visible .aviso-caja{ opacity: 1; transform: scale(1); }
.aviso-saliendo .aviso-caja{ opacity: 0; transform: scale(.96); }
.aviso-icono{
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  background: #3c8dbc;
}
.aviso-exito .aviso-icono{ background: #00a65a; }
.aviso-error .aviso-icono{ background: #dd4b39; }
.aviso-advertencia .aviso-icono{ background: #f39c12; }
.aviso-titulo{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #222d32;
}
.aviso-mensaje{
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.45;
  color: #555;
  overflow-wrap: anywhere;
}
.aviso-botones{
  display: flex;
  gap: 10px;
  justify-content: center;
}
.aviso-botones .btn{
  min-width: 120px;
  padding: 9px 18px;
  font-size: 15px;
  border-radius: 6px;
}
@media (max-width: 480px){
  .aviso-botones{ flex-direction: column-reverse; }
  .aviso-botones .btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .aviso-fondo, .aviso-caja{ transition: none; }
}
.aviso-peligro .aviso-icono{ background: #dd4b39; }

/* ---------- Selector de sucursal en la barra superior ---------- */
.selector-tienda-nombre{
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.selector-tienda .dropdown-menu > li.active > a{ font-weight: 600; }
@media (max-width: 480px){
  .selector-tienda-nombre{ max-width: 90px; }
}
/* en pantallas chicas el tema pinta blancos los enlaces de los desplegables de la barra */
.selector-tienda .dropdown-menu{ background: #fff; }
.selector-tienda .dropdown-menu > li > a{ color: #333 !important; }
.selector-tienda .dropdown-menu > li.active > a{ color: #fff !important; background: #3c8dbc !important; }
.selector-tienda .dropdown-menu > .dropdown-header{ color: #777; }
@media (max-width: 767px){
  .navbar-custom-menu .navbar-nav > li.selector-tienda > a{ padding-left: 8px; padding-right: 8px; }
  .selector-tienda .dropdown-menu{
    position: absolute !important;
    right: auto; left: 0;
    min-width: 220px;
    border: 1px solid #ddd;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }
  .selector-tienda-nombre{ max-width: 70px; }
}