/* ======================================================
                        TIPOGRAFÍA
====================================================== */

@font-face {
    font-family: 'InterYere';
    src: url('../tipografia/InterYere-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'InterYere';
    src: url('../tipografia/InterYere-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Aplicar a todo el sistema */
body{
    font-family: 'InterYere', sans-serif;
    margin: 0;
}

/* ======================================================
                        HEADER BASE
====================================================== */

.header-base{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 43px; 
    background: #d80808;
    border-bottom: 1px solid #000000;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo */
.logo img{
    height: 45px;
    cursor: pointer;
    filter: brightness(0) invert(1);
}

/* Cuenta */
.cuenta-header{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.cuenta-trigger{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
}

.cuenta-saludo{
    color: #fff;
    font-weight: 600;
    line-height: 1;
}

.cuenta-titulo{
    display: flex;
    align-items: center;
    color: #fff;
    line-height: 1;
}

/* Dropdown */
.cuenta-dropdown{
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% - 2px);
    background: #121212;
    width: 220px;
    max-width: calc(100vw - 20px);
    border: 1px solid #e00000;
    border-radius: 6px;
    display: none;
    z-index: 1000;
}


.cuenta-dropdown a{
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}

.cuenta-dropdown a:hover{
    background: #1f1f1f;
}

/* Acciones header */
.acciones-header-publico{
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-header-publico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.20);
}

.btn-header-publico:hover{
    background: #111111;
    color: #ffffff;
}

/* ======================================================
        BARRA ANALISIS / MENÚ
====================================================== */

.barra-analisis{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    height: 78px;
    padding: 0 30px;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid #d9dde4;
    border-bottom: 1px solid #eceff3;
}



/* línea gris por debajo */
.barra-analisis::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;
    height: 1px;
    background: #ffffff;
    pointer-events: none;
}

/* Botones */
.boton-analisis{
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000000;
    font-size: 15px;
    font-weight: 700;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transition: 0.2s;
}

.boton-analisis i{
    font-size: 16px;
    color: #000000;
}

.boton-analisis span{
    color: #000000;
}

.boton-analisis:hover{
    background: transparent;
    color: #000000;
}

/* seleccionado */
.boton-analisis.activo{
    color: #000000;
}

.boton-analisis.activo i,
.boton-analisis.activo span{
    color: #000000;
}

.boton-analisis.activo span{
    position: relative;
}

.boton-analisis.activo span::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 60px;
    height: 3px;
    background: #e00000;
    transform: translateX(-50%);
}

.boton-analisis:first-child::before{
    content: "";
    position: absolute;
    right: calc(100% + 25px);
    top: 50%;
    width: 100vw;
    height: 28px;
    background: #e00000;
    clip-path: polygon(
        0 2px,
        calc(100% - 145px) 2px,
        calc(100% - 105px) 24px,
        100% 24px,
        100% 26px,
        calc(100% - 106px) 26px,
        calc(100% - 146px) 4px,
        0 4px
    );
    transform: translateY(-50%);
    pointer-events: none;
}

.boton-analisis:last-child::after{
    content: "";
    position: absolute;
    left: calc(100% + 25px);
    top: 50%;
    width: 100vw;
    height: 28px;
    background: #e00000;
    clip-path: polygon(
        0 24px,
        105px 24px,
        145px 2px,
        100% 2px,
        100% 4px,
        146px 4px,
        106px 26px,
        0 26px
    );
    transform: translateY(-50%);
    pointer-events: none;
}

#btnConfiguracionGerenteGeneral{
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  margin:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#btnConfiguracionGerenteGeneral:hover{
  background:transparent;
  box-shadow:none;
}

#btnConfiguracionGerenteGeneral i{
  font-size:18px;
  color:#fff;
}

#btnConfiguracionGerenteGeneral{
  position:relative;
}

#btnConfiguracionGerenteGeneral::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  left:auto;
  transform:translateY(-4px);
  padding:7px 11px;
  border-radius:7px;
  background:#222;
  color:#fff;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
  z-index:9999;
}

#btnConfiguracionGerenteGeneral::before{
  content:"";
  position:absolute;
  top:calc(100% + 5px);
  right:5px;
  left:auto;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:5px solid #222;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease;
}

#btnConfiguracionGerenteGeneral:hover::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

#btnConfiguracionGerenteGeneral:hover::before{
  opacity:1;
  visibility:visible;
}




.admin-header-config-menu{position:relative;display:flex;align-items:center;}
.admin-header-config-dropdown{position:absolute;top:100%;right:0;width:220px;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:.15s;z-index:10000;background:#fff;border:1px solid #ddd;border-radius:7px;box-shadow:0 8px 22px rgba(0,0,0,.18);}
.admin-header-config-menu:hover .admin-header-config-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.admin-header-config-opcion{
  width:100%;
  min-height:42px;
  padding:0 14px;
  border:0;
  border-bottom:1px solid #eee;
  background:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  color:#000;
  text-decoration:none;
}
.admin-header-config-opcion:last-child{border-bottom:0;}
.admin-header-config-opcion:hover{background:#f7f7f7;color:#d80808;}
.admin-header-config-opcion i{width:18px;text-align:center;}
 













/* ======================================================
                        FOOTER BASE
====================================================== */

.footer-base{
    width: 100%;
    min-height: 64px;
    background: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 42px;
    box-sizing: border-box;
    font-size: 13px;
    border-top: 2px solid #d80808;
}

.footer-derecha{
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-derecha a{
    color: #ffffff;
    text-decoration: none;
}

.footer-derecha span{
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.35);
}





/* ======================================================
              MENU CONFIGURACION HEADER
====================================================== */

.retail-header-config-menu{
  position:relative;
  display:flex;
  align-items:center;
}

.retail-header-config-trigger{
  position:relative;
}

.retail-header-config-dropdown{
  position:absolute;
  top:100%;
  right:0;
  width:220px;
  padding-top:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  z-index:10000;
  background:#ffffff;
  border:1px solid #dddddd;
  border-radius:7px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.retail-header-config-dropdown::before{
  content:"";
  position:absolute;
  top:0;
  right:14px;
  width:14px;
  height:14px;
  background:#ffffff;
  border-left:1px solid #dddddd;
  border-top:1px solid #dddddd;
  transform:rotate(45deg);
}

.retail-header-config-menu:hover .retail-header-config-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.retail-header-config-opcion{
  position:relative;
  width:100%;
  min-height:42px;
  padding:0 14px;
  border:0;
  background:#ffffff;
  color:#111111;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
}

.retail-header-config-opcion:hover{
  background:#f7f7f7;
  color:#d80808;
}

.retail-header-config-opcion i{
  width:18px;
  text-align:center;
}

/* ======================================================
                CONFIGURACIÓN DE IMPRESIÓN
====================================================== */

.retail-print-modal{position:fixed;inset:0;z-index:10001;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);}
.retail-print-modal-contenido{position:relative;width:100%;max-width:1080px;max-height:90vh;overflow:auto;}
.retail-print-modal .retail-print-configuracion{margin:0;}
.retail-print-modal-cerrar{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border:0;border-radius:8px;cursor:pointer;}

.page-caja-retail .retail-print-configuracion{
  width:100%;
  max-width:1080px;
  margin:0 auto 28px;
  padding:22px;
  border:1px solid #dddddd;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  box-sizing:border-box;
}

.page-caja-retail .retail-print-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #eeeeee;
}

.page-caja-retail .retail-print-header h3{
  margin:0;
  color:#111111;
  font-size:18px;
  font-weight:700;
}

.page-caja-retail .retail-print-header span{
  display:block;
  margin-top:5px;
  color:#666666;
  font-size:13px;
}

.page-caja-retail .retail-print-estado{
  flex:none;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px!important;
  font-weight:700;
}

.page-caja-retail .retail-print-estado.sin-vincular{
  background:#f3f4f6;
  color:#555555;
}

.page-caja-retail .retail-print-estado.conectado{
  background:#dcfce7;
  color:#166534;
}

.page-caja-retail .retail-print-estado.desconectado{
  background:#fef3c7;
  color:#92400e;
}

.page-caja-retail .retail-print-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:18px;
  align-items:end;
}

.page-caja-retail .retail-print-dato{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.page-caja-retail .retail-print-dato > span{
  color:#666666;
  font-size:12px;
  font-weight:700;
}

.page-caja-retail .retail-print-dato > strong{
  color:#111111;
  font-size:14px;
  font-weight:700;
  overflow-wrap:anywhere;
}

.page-caja-retail .retail-print-dato > small{
  color:#777777;
  font-size:11px;
  line-height:1.4;
}

.page-caja-retail .retail-print-codigo-box > strong{
  color:#d80808;
  font-size:26px;
  letter-spacing:5px;
}

.page-caja-retail .retail-print-acciones-superiores{
  display:flex;
  align-items:flex-end;
}

.page-caja-retail .retail-print-btn-principal{
  min-height:40px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  background:#d80808;
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.page-caja-retail .retail-print-btn-principal:hover{
  background:#b30606;
}

.page-caja-retail .retail-print-btn-principal:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.page-caja-retail .retail-print-separador{
  height:1px;
  margin:22px 0;
  background:#eeeeee;
}

.page-caja-retail .retail-print-form-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(150px,1fr) minmax(150px,1fr);
  gap:18px;
}

.page-caja-retail .retail-print-campo{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.page-caja-retail .retail-print-campo label{
  color:#555555;
  font-size:12px;
  font-weight:700;
}

.page-caja-retail .retail-print-campo select,
.page-caja-retail .retail-print-campo input{
  width:100%;
  min-height:40px;
  padding:0 12px;
  border:1px solid #dddddd;
  border-radius:8px;
  background:#ffffff;
  color:#333333;
  font-size:13px;
  box-sizing:border-box;
}

.page-caja-retail .retail-print-campo select:focus,
.page-caja-retail .retail-print-campo input:focus{
  outline:none;
  border-color:#d80808;
  box-shadow:0 0 0 2px rgba(216,8,8,.08);
}

.page-caja-retail .retail-print-campo small{
  color:#777777;
  font-size:11px;
}

.page-caja-retail .retail-print-prueba-etiqueta{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid #eeeeee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}


.page-caja-retail .retail-print-prueba-etiqueta > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}


.page-caja-retail .retail-print-prueba-etiqueta strong{
  color:#222222;
  font-size:13px;
  font-weight:700;
}


.page-caja-retail .retail-print-prueba-etiqueta small{
  color:#777777;
  font-size:11px;
}

.page-caja-retail .retail-print-footer{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.page-caja-retail .retail-print-footer > span{
  color:#666666;
  font-size:12px;
}

@media (max-width:900px){

  .page-caja-retail .retail-print-grid{
    grid-template-columns:1fr 1fr;
  }

  .page-caja-retail .retail-print-form-grid{
    grid-template-columns:1fr;
  }

}

@media (max-width:600px){

  .page-caja-retail .retail-print-header,
  .page-caja-retail .retail-print-footer{
    flex-direction:column;
    align-items:stretch;
  }

  .page-caja-retail .retail-print-grid{
    grid-template-columns:1fr;
  }

  .page-caja-retail .retail-print-btn-principal{
    width:100%;
  }

}
 
.page-caja-retail .retail-barcode-checks{
  min-height:40px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

.page-caja-retail .retail-barcode-checks label{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.page-caja-retail .retail-barcode-checks input{
  width:auto;
  min-height:auto;
  padding:0;
}