/* IrenPos · tema violeta/champagne (look DinamitaShop) */
:root{
  --dn-violet:#7c3aed; --dn-violet-deep:#5b21b6; --dn-violet-soft:#a78bfa;
  --dn-gold:#c9a227; --dn-gold-soft:#e6c75a; --dn-ink:#2b2440;
  --dn-cream:#faf7ff; --dn-line:#ece6f7; --sb-w:260px;
}
body,.bg-gray-100{
  background:linear-gradient(160deg,#f7f2ff 0%,#fbf8ff 40%,#fffdf6 100%)!important;
  color:var(--dn-ink);
}

/* ---- layout ---- */
.app-side{
  position:fixed; top:14px; left:14px; bottom:14px; width:var(--sb-w);
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--dn-line); border-radius:1rem;
  box-shadow:0 10px 34px rgba(91,33,182,.10); padding:1rem .9rem; overflow-y:auto; z-index:1030;
}
.app-main{ margin-left:calc(var(--sb-w) + 28px); min-height:100vh; }
.app-top{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.6rem .25rem; gap:1rem;
}
.app-brand-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:800; font-size:1.6rem; color:var(--dn-violet); letter-spacing:.2px; }
.app-top h4{ margin:0; font-weight:700; color:var(--dn-ink); }
.app-content{ padding:.75rem 1.6rem 2rem; }
@media (max-width:1199px){
  .app-side{ transform:translateX(-115%); transition:transform .22s ease; }
  .app-side.show{ transform:none; box-shadow:0 12px 50px rgba(40,20,80,.35); }
  .app-main{ margin-left:0; }
  .app-backdrop{ position:fixed; inset:0; background:rgba(43,36,64,.4); z-index:1029; display:none; }
  .app-backdrop.show{ display:block; }
  .btn-burger{ display:inline-flex!important; }
}
.btn-burger{ display:none; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--dn-line); border-radius:.7rem; background:#fff; color:var(--dn-violet); }

/* ---- brand / nav ---- */
.brand{ display:flex; align-items:center; gap:.6rem; padding:.2rem .4rem .8rem; }
.brand img{ height:52px; width:52px; object-fit:contain; }
.brand b{ color:var(--dn-violet-deep); font-size:1.05rem; }
.brand small{ color:var(--dn-gold); font-weight:600; }
.side-sec{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dn-gold); font-weight:700; padding:.9rem .6rem .25rem; }
.side-link{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; margin:.15rem 0;
  border-radius:.7rem; color:var(--dn-ink); font-weight:500; text-decoration:none; font-size:.92rem;
}
.side-link i{ width:34px; height:34px; display:grid; place-items:center; border-radius:.55rem;
  background:#fff; box-shadow:0 2px 8px rgba(124,58,237,.12); color:var(--dn-violet); font-size:.85rem; }
.side-link:hover{ background:#f3eeff; color:var(--dn-violet-deep); }
.side-link.active{ background:linear-gradient(310deg,var(--dn-violet-deep),var(--dn-violet));
  color:#fff; box-shadow:0 8px 18px rgba(124,58,237,.32); }
.side-link.active i{ color:var(--dn-violet); }

/* ---- colores ---- */
.bg-gradient-primary,.bg-gradient-info,.bg-gradient-dark{
  background-image:linear-gradient(310deg,var(--dn-violet-deep),var(--dn-violet))!important; }
.bg-primary{ background-color:var(--dn-violet)!important; }
.text-primary,.text-info{ color:var(--dn-violet)!important; }
.text-gradient.text-info,.text-gradient.text-primary{
  background-image:linear-gradient(310deg,var(--dn-violet-deep),var(--dn-violet-soft));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.text-gold{ color:var(--dn-gold)!important; }
.bg-gold{ background:linear-gradient(310deg,#b8901f,var(--dn-gold-soft))!important; color:#3a2e05!important; }
.border-gold{ border:1px solid var(--dn-gold-soft)!important; }

.btn.bg-gradient-info,.btn.bg-gradient-primary{
  background-image:linear-gradient(310deg,var(--dn-violet-deep),var(--dn-violet))!important; border:0; }
.btn.bg-gradient-gold{ background-image:linear-gradient(310deg,#b8901f,var(--dn-gold-soft))!important; color:#3a2e05!important; border:0; }
.btn-outline-primary{ border-color:var(--dn-violet); color:var(--dn-violet); }
.btn-outline-primary:hover{ background:var(--dn-violet); color:#fff; }

.card{ border:1px solid var(--dn-line); box-shadow:0 6px 22px rgba(124,58,237,.06); border-radius:1rem; }
.card-header{ background:transparent; }
.table thead th{ color:var(--dn-violet-deep); border-bottom:2px solid var(--dn-line); }

.badge.bg-gradient-success{ background-image:linear-gradient(310deg,#1d8b4a,#48d18a)!important; }
.badge.bg-gradient-warning{ background-image:linear-gradient(310deg,#b8901f,var(--dn-gold-soft))!important; color:#3a2e05; }
.badge.bg-gradient-danger{ background-image:linear-gradient(310deg,#b21d4f,#f5638f)!important; }
.badge.bg-gradient-secondary{ background-image:linear-gradient(310deg,#7d7995,#b3aecb)!important; }

/* ---- POS ---- */
.pos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.9rem; }
.pos-prod{ cursor:pointer; border:1px solid var(--dn-line); border-radius:1rem; background:#fff;
  overflow:hidden; transition:.15s; }
.pos-prod:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(124,58,237,.18); border-color:var(--dn-violet-soft); }
.pos-prod img{ width:100%; height:120px; object-fit:cover; }
.pos-prod .body{ padding:.6rem .7rem .8rem; }
.pos-prod .price{ color:var(--dn-violet-deep); font-weight:700; font-size:1.05rem; }
.pos-cart-total{ background:linear-gradient(310deg,var(--dn-violet-deep),var(--dn-violet)); color:#fff; border-radius:1rem; }
.cart-sticky{ position:sticky; top:1rem; }

/* Iconos de las tarjetas del dashboard: centrados vertical y horizontalmente */
.icon-shape{ line-height:1; }
.icon-shape i{ line-height:1; font-size:1.1rem; }

/* ---- login ---- */
.login-wrap{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.login-art{ position:relative; background:linear-gradient(150deg,var(--dn-violet-deep),var(--dn-violet) 55%,var(--dn-gold) 140%);
  display:flex; flex-direction:column; justify-content:center; padding:4rem; color:#fff; }
.login-art h1{ font-weight:800; font-size:2.6rem; line-height:1.05; }
.login-art .tag{ color:#f3e8c9; font-weight:600; letter-spacing:.04em; }
.login-form{ display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-card{ width:100%; max-width:380px; }
@media (max-width:860px){ .login-wrap{ grid-template-columns:1fr; } .login-art{ display:none; } }

/* POS panel lateral de productos (mas compacto) */
.pos-grid-side{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.pos-grid-side .pos-prod img{ height:84px; }
.pos-grid-side .pos-prod .body{ padding:.45rem .55rem .6rem; }
.pos-grid-side .pos-prod .price{ font-size:.95rem; }

/* Login mas presente */
.login-art{ padding:3rem; justify-content:center; align-items:center; text-align:center; }
.login-logo{ width:340px; max-width:80%; height:auto; object-fit:contain; margin-bottom:1rem; filter:drop-shadow(0 10px 24px rgba(0,0,0,.22)); }
.login-art h1{ font-size:4rem; margin:0; }
.login-art .tag{ font-size:1.25rem; margin-top:.4rem; }
.login-sub{ max-width:440px; opacity:.85; font-size:1.05rem; margin-top:1.2rem; }

/* Producto sin stock en el POS */
.pos-prod.sin-stock{ opacity:.5; filter:grayscale(1); cursor:not-allowed; }
.pos-prod.sin-stock:hover{ transform:none; box-shadow:none; }

/* ===== Responsive móvil ===== */
@media (max-width:991px){
  .login-art{ display:none; }
  .login-wrap{ grid-template-columns:1fr; }
  .login-form{ padding:2rem 1.2rem; }
}
@media (max-width:768px){
  .app-content{ padding:1rem .8rem !important; }
  .app-top{ padding:.6rem .8rem; }
  .app-top h4{ font-size:1.1rem; }
  .app-brand-center{ display:none; }
  .card-body{ padding:1rem .9rem; }
  .pos-cart-total{ margin-top:.8rem; }
  .pos-grid-side{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
  .table-responsive{ overflow-x:auto; }
  .modal-dialog{ margin:.5rem; }
  h6{ font-size:.95rem; }
  .btn-lg{ font-size:.95rem; }
  /* filas de formularios POS no se aprietan */
  #cliBox .col-6,#cliBox .col-4,#cliBox .col-2{ margin-bottom:.25rem; }
}
@media (max-width:576px){
  .app-top .text-sm{ display:none; }
  .pos-grid-side{ grid-template-columns:repeat(2,1fr); }
  .card-header .d-flex.gap-2{ flex-wrap:wrap; }
}

/* Uniformidad de formularios en modales */
.modal-body label{ margin-bottom:.3rem; font-weight:600; color:#5b6472; }
.modal-body .form-control, .modal-body .form-select{ min-height:40px; }
.modal-body .input-group .btn{ display:flex; align-items:center; justify-content:center; min-height:40px; }
.modal-body .form-check-label{ margin-bottom:0; }
@media (max-width:575.98px){
  .modal-body .row > [class*="col-"]{ margin-bottom:.35rem; }
  .modal-dialog.modal-lg{ margin:.5rem; }
}

/* Dropdown Tamaño/Talla acorde al tema (mismo tamaño que los botones +) */
.medida-op, .np-medida-op{ font-size:.9rem; padding:.5rem .9rem; }
.medida-op.active, .medida-op:active, .np-medida-op.active, .np-medida-op:active{ background:var(--dn-violet); color:#fff; }
.medida-op:hover, .np-medida-op:hover{ background:var(--dn-violet-soft); color:#fff; }
.dropdown-menu{ border:1px solid #eadcff; box-shadow:0 12px 30px rgba(91,33,182,.16); border-radius:.7rem; padding:.35rem; }

/* ============ Apertura de caja (overlay) ============ */

.app-content { position: relative; }

.pos-blur {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

.caja-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  background: rgba(124, 58, 237, .06);
}

.caja-overlay .caja-card {
  width: 100%;
  max-width: 380px;
  margin-top: 8vh;
  text-align: center;
  background: #fff;
  border-radius: 1rem;
  padding: 1.8rem 1.5rem;
  box-shadow: 0 20px 55px rgba(91, 33, 182, .30);
  border: 1px solid #eadcff;
}

.caja-overlay .caja-ico {
  width: 66px;
  height: 66px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dn-violet), var(--dn-violet-deep));
}

/* Iconos de los modales de caja */
.caja-modal-ico {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dn-violet), var(--dn-violet-deep));
}
.caja-modal-ico.ico-ok   { background: linear-gradient(135deg, #2dce89, #24a46d); }
.caja-modal-ico.ico-err  { background: linear-gradient(135deg, #f5365c, #c81e45); }
.caja-modal-ico.ico-dark { background: linear-gradient(135deg, #3a416f, #141727); }

/* Toast con estilo de la app (reemplaza alerts del navegador) */
.app-toast{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: #2b2b3a; color: #fff; padding: .8rem 1.2rem; border-radius: .7rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: .9rem; z-index: 99999;
  opacity: 0; pointer-events: none; transition: all .25s ease; max-width: 90vw; text-align: center;
}
.app-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast.danger{ background: linear-gradient(135deg,#f5365c,#c81e45); }
.app-toast.success{ background: linear-gradient(135deg,#2dce89,#24a46d); }
.app-toast.info{ background: linear-gradient(135deg,var(--dn-violet),var(--dn-violet-deep)); }

/* Clave de autorizacion enmascarada (el navegador no la trata como credencial) */
.clave-oculta{ -webkit-text-security: disc; text-security: disc; }

/* Accion delicada armada (esperando el segundo toque) */
.accion-armada{ color: #fb6340 !important; transform: scale(1.15); transition: all .15s; }



/* =====================================================================
   CERTIFICACION RESPONSIVE — correcciones consolidadas
   Tres bloques: (1) contencion y scroll de modales, (2) escala en movil,
   (3) prevencion de desbordamiento de contenido.
   ===================================================================== */

/* ---------- (1) MODALES: contencion y scroll vertical dinamico ---------- */
/* El modal nunca excede el alto de la pantalla y su cuerpo hace scroll. Vale
   para todos los modales, tengan o no la clase modal-dialog-scrollable.
   Detalle clave: en un contenedor flex en columna, un hijo NO puede encogerse
   por debajo de su contenido salvo que lleve min-height:0. Sin eso el cuerpo
   crece y el scroll interno nunca se activa (era el fallo en telefonos). */
.modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1rem);    /* respaldo para navegadores sin dvh */
  max-height: calc(100dvh - 1rem);   /* dvh: alto real con las barras del movil */
  overflow: hidden;                  /* el contenido no se sale del contenedor */
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;                     /* habilita el encogido y con el, el scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* desplazamiento por inercia en iOS */
}
/* El encabezado y el pie quedan fijos; solo el cuerpo se desplaza. */
.modal-header, .modal-footer { flex-shrink: 0; }
/* El contenedor del dialogo tampoco debe pasarse del alto disponible. */
.modal-dialog {
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
}

@media (max-width: 767.98px) {
  /* En telefono el modal arranca desde arriba (no centrado) para aprovechar la
     pantalla, con margen minimo y ancho casi completo. */
  .modal-dialog {
    margin: .5rem auto;
    max-width: calc(100% - 1rem);
  }
  .modal-dialog-centered { align-items: flex-start; }
  .modal-content { max-height: calc(100dvh - 1rem); }
  /* Botones del pie del modal a lo ancho cuando no caben en una fila. */
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }
}

/* ---------- (2) ESCALA EN MOVIL: tipografia y espaciados fluidos ---------- */
/* La interfaz se veia grande en telefono. Se reduce la base tipografica y los
   paddings de forma escalonada, sin tocar el diseno de escritorio. */
@media (max-width: 767.98px) {
  html { font-size: 15px; }          /* baja el rem base: todo escala parejo */
  .app-content { padding: .8rem .6rem !important; }
  .card { border-radius: .8rem; }
  .card-body { padding: .85rem .75rem; }
  .btn { padding: .5rem .8rem; }
  .form-control, .form-select { font-size: .95rem; }
  h4 { font-size: 1.15rem; }
  h6 { font-size: .95rem; }
}
@media (max-width: 575.98px) {
  html { font-size: 14px; }
  .app-content { padding: .6rem .5rem !important; }
  .table > :not(caption) > * > * { padding: .5rem .4rem; }  /* celdas mas compactas */
}

/* ---------- (3) PREVENCION DE DESBORDAMIENTO ---------- */
/* Nada de scroll horizontal a nivel de pagina. */
html, body { max-width: 100%; overflow-x: hidden; }
/* Textos largos (nombres, correos, RTN, referencias) cortan en vez de empujar. */
.text-truncate-safe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-body, .card-body { overflow-wrap: break-word; word-break: break-word; }
/* Imagenes y medios nunca superan su contenedor. */
img, svg, canvas, video { max-width: 100%; height: auto; }
/* Tablas anchas siempre con scroll propio, no desbordan la tarjeta. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Inputs con ancho fijo (precio, cantidad) no rompen filas estrechas. */
@media (max-width: 575.98px) {
  input[style*="width:90px"], input[style*="width:64px"] { max-width: 100%; }
}

/* ---------- (1b) Scroll del fondo bloqueado con modal abierto ---------- */
/* Cuando Bootstrap abre un modal agrega .modal-open al body. Se fuerza que el
   fondo quede fijo y sin scroll; asi el unico que se desplaza es el modal. */
body.modal-open {
  overflow: hidden !important;
  /* touch-action evita el scroll-chaining al fondo en iOS/Android */
  touch-action: none;
}
/* El modal si permite gesto tactil sobre su cuerpo */
.modal.show { touch-action: auto; }
.modal-body { touch-action: pan-y; overscroll-behavior: contain; }

/* =====================================================================
   TABLAS DE DETALLE: comodas en cualquier pantalla
   ===================================================================== */

/* El encabezado queda fijo al desplazar la lista, para no perder de vista
   a que columna corresponde cada dato. */
.tabla-detalle thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 0 -1px 0 #e6e6f0;
}

/* Anchos minimos por columna: el texto nunca se corta ni se amontona */
.tabla-apilable th:first-child,
.tabla-apilable td:first-child { min-width: 150px; }

/* En telefono la tabla deja de ser tabla: cada linea se muestra como una
   ficha con sus datos uno debajo del otro. Asi se termina el desplazamiento
   horizontal, que es incomodo de usar con el pulgar. */
@media (max-width: 767.98px) {
  .tabla-detalle { overflow-x: hidden; max-height: none !important; }
  .tabla-apilable thead { display: none; }

  .tabla-apilable tbody tr {
    display: block;
    border: 1px solid #e6e6f0;
    border-radius: .6rem;
    padding: .5rem .7rem;
    margin-bottom: .55rem;
    background: #fff;
  }

  .tabla-apilable tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 0;
    padding: .3rem 0;
    text-align: right !important;
    white-space: normal;
  }

  /* El nombre de la columna se dibuja a la izquierda de cada dato */
  .tabla-apilable tbody td::before {
    content: attr(data-col);
    font-weight: 600;
    font-size: .72rem;
    color: #67748e;
    text-align: left;
    flex: 0 0 auto;
  }

  /* La primera celda hace de titulo de la ficha */
  .tabla-apilable tbody td:first-child {
    font-weight: 600;
    text-align: left !important;
    border-bottom: 1px solid #f0eefb;
    padding-bottom: .45rem;
    margin-bottom: .2rem;
  }
  .tabla-apilable tbody td:first-child::before { content: none; }

  /* La fila de "sin productos" no es una ficha: se muestra como aviso simple */
  .tabla-apilable tbody tr#vacio { border: 0; background: transparent; }
  .tabla-apilable tbody tr#vacio td {
    display: block;
    text-align: center !important;
    border: 0;
  }
  .tabla-apilable tbody tr#vacio td::before { content: none; }
}

/* ---- Colapsar el menu lateral en escritorio para ganar espacio ---- */
.btn-colapsar{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:none; border-radius:12px;
  background:#fff; color:var(--dn-violet,#6d28d9); cursor:pointer;
  box-shadow:0 2px 10px rgba(40,20,80,.08);
}
.btn-colapsar:hover{ background:var(--dn-cream,#faf7ff); }
@media (max-width:900px){ .btn-colapsar{ display:none; } }  /* en movil manda el burger */

body.sb-colapsado .app-side{ transform:translateX(-120%); transition:transform .2s ease; }
body.sb-colapsado .app-main{ margin-left:0; transition:margin-left .2s ease; }

/* ---- Impresion: al imprimir (PDF del navegador) se muestra solo el contenido
   de las tablas/tarjetas, no el menu, la barra superior ni los filtros. ---- */
@media print {
  .app-side, .app-top, #backdrop, .modal, .btn, form, .no-print,
  #gridPag, #reEmitPag, .dataTables_filter, .card-header input,
  input, select, textarea { display:none !important; }
  .app-main { margin-left:0 !important; }
  .app-content { padding:0 !important; }
  .card { box-shadow:none !important; border:none !important; margin:0 !important; }
  .card-header { border:none !important; }
  body { background:#fff !important; }
  /* Muestra todas las filas de tablas paginadas al imprimir */
  .re-fila, .prov-fila, .pag-fila { display:table-row !important; }
  table { width:100% !important; font-size:11px; }
  th, td { padding:4px 6px !important; }
}