:root {
  --positivo: rgb(21 128 61 / var(--tw-text-opacity, 1));
  --negativo: red;
  --bg-positivo: rgba(27, 117, 235, 0.1);
  --border-positivo: rgb(27, 117, 235);
  --bonificacion: rgb(187 247 208);
  --fondo-gris: #f2f2f2;
  --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
        --tw-text-opacity: 1;
}
.landing-devoluciones{
  display: flex;
}
button:hover{
    cursor: pointer;

}
.next{
  width: 300px;
  margin: 0 auto;
  margin-top: 1em;
}
html, body {
      font-family: 'Raleway', sans-serif;
      margin: 0;
      padding: 0;
      background: #fff;
      color: #333;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      font-weight: 500;
    }
    p {
      line-height: 1.5;
    }
   
/* Tus estilos globales */
.upper-logo{
display: flex;
width: 200px;
margin: 0 auto;
margin-top: 1em;
}
.btn-primary {
      display: inline-block;
      padding: 0.8em 1.6em;
      background: #181818;
      color: #fff;
      text-decoration: none;
      border-radius: 0px;
      border: none;
}
.TopBar{
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding-bottom: .2em;
}

.wrapper-principal{
  background-color: var(--fondo-gris);
  min-height: 80vh; /* al menos el 100% de la altura de la ventana */
  box-sizing: border-box;
  padding: 2em;
}
/*PASO 0*/
/* Banner de sesión caducada */
    #expired-banner {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border: 1px solid #eee;
      padding: 20px 30px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      z-index: 1000;
      width: 90%;
      max-width: 400px;
      text-align: center;
      border-radius: 8px;
    }
    #expired-banner p {
      margin: 0 0 15px;
      color: #333;
      font-size: 1rem;
    }
    #expired-banner button {
      position: absolute;
      top: 8px; right: 8px;
      background: transparent;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
      color: #333;
    }
.burbuja{
  display: inline-block;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
  border-radius: 150px;
  padding: .25em .75em;
font-size: .9em;
margin-bottom: 1.5em;
}
.formulario-devolucion{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto;
}
.landing-devoluciones{
  height: 100vh;
}
.formulario-devolucion img{
      width: 300px;
      padding-bottom: 2em;
      margin: 0 auto;
}
.formulario-devolucion input{
      width: 100%;
      height: 25px;
      margin-top: .5em;
}
.formulario-devolucion h2, .formulario-devolucion p{
  text-align: center;
}
.formulario-devolucion p{
  font-size: .9em;
}
.formulario-devolucion h2{
  font-weight: 900;
  text-transform: uppercase;
}
.formulario-devolucion .btn-primary.main{
  background-color: rgb(218, 85, 194);
    color: rgb(255, 255, 255);
    width: 100%;
}
.formulario-devolucion .cabecera-wrapper{
max-width: 330px;
margin-bottom: 2em;
}
.cabecera-wrapper.links{
  margin-top: 3em;
  font-size: .8rem;
  text-align: center;
}
.cabecera-wrapper.links a{
  color: #666;
}
.formulario-devolucion input{
  height: 40px;
  padding: .5em 0em .5em .5em;
  max-width: 320px;
}
.formulario-devolucion button{
  height: 50px;
  padding: 1em;
}
/*PASO 1*/
#form-verificar {
  position: relative;           /* Para que el input absolute se refiera a este contenedor */
  cursor: pointer;              /* Cambia el cursor al pasar por encima */
}
#form-verificar .file-upload{
  position: relative;
  z-index: 9999;
}
#form-verificar .line-item:has(input:checked){
    border-color: rgb(179 179 179 / var(--tw-border-opacity, 1));
}
#form-verificar .unidades{
      z-index: 9999;
    position: relative;
    display: inline-block;
}
#form-verificar label {
  display: block;               /* Para que el label ocupe todo el ancho */
  height: 100%;
  
}

#form-verificar input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;                    /* Elimina márgenes por defecto */
  opacity: 0;                   /* Invisible pero clicable */
  cursor: pointer;
  z-index: 2;                   /* Encima de todos los demás elementos */
}
#form-verificar label:has(input[type="checkbox"]:checked)::after{
  display: inline-block;
  width: 30px;
  height: 30px;
  //border: 2px solid #666;
  //background-color: #666;
  border-radius: 50%;
  margin-left: 1em;
  box-sizing: border-box;
  pointer-events: none;   
  content: "x";
  color: #666;
text-align: center;
line-height: 1.4;
position: absolute;
right: 20px;
top: calc(50% - 15px);
font-size: 1.25rem;
z-index: 9999;
}
#form-verificar .line-item:hover{
  
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
#form-verificar label:has(input[type="checkbox"]:checked):hover::after{
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
#form-verificar label:has(input[type="checkbox"]:checked)::before{
box-sizing: border-box;
display: inline-block;
  pointer-events: none;   
  content: "Devolución";
  color: #666;
text-align: center;
line-height: 1.4;
position: absolute;
right: 70px;
top: calc(50% - 11px);
}
#form-verificar{
  width: 60%;
  display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 2em;
    margin-bottom: 3em;
}
#form-verificar .line-item{
  background-color: #fff;
  position: relative;
  border: 1px solid transparent;
    border-radius: 0.75rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
    background-color: white;
    cursor: pointer;
}
.wrapper-principal h2{
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
  //padding-top: 1.5em;
  font-weight: 400;
  font-size: 1.25rem
}
.oculto{
  display: none !important;
}
#devo-existente.oculto{
  display: flex !important
;
    flex-direction: column;
}
#devo-existente.ocultosi{
  display: none;
}
#devo-existente{
  min-height: 100vh;
}
#devo-existente #toggleDevoBtn{
width: 200px;
margin: 0 auto;
margin-top: 1em;
}
/*PASO 2*/
.gris{
  color: #666;
  font-weight: 400;
}
#form-metodo .coste.gratis, #form-metodo .coste.no-gratis{
  margin-left: 0px;
  font-weight: 900;
  font-size: .9em;
}
.metodo{
  padding: 1em;
   position: relative;           /* Para que el input absolute se refiera a este contenedor */
  cursor: pointer;              /* Cambia el cursor al pasar por encima */
  color: #181818;
}

.metodo.cambio{
  border: 2px solid #eee;
  border-radius: 0.25rem;
}
.metodo.reembolso{
  border: 2px solid #eee;
  border-radius: 0.25rem;
}
.metodo:not(:has(input:checked)){
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
border: 2px solid #fff;
}

.metodo label {
  display: block;               /* Para que el label ocupe todo el ancho */
  height: 100%;
}

#form-metodo .metodo input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;                    /* Elimina márgenes por defecto */
  opacity: 0;                   /* Invisible pero clicable */
  cursor: pointer;
  z-index: 2;                   /* Encima de todos los demás elementos */
}

.metodo.cambio:has(input[type="radio"]:checked){
background-color: rgba(27, 117, 235, 0.1);
border: 2px solid rgb(27, 117, 235);
    border-radius: 0.25rem;
}
.metodo.reembolso:has(input[type="radio"]:checked){
    border: 2px solid rgb(218, 85, 194);
    border-radius: 0.25rem;
    background-color: rgba(218, 85, 194, 0.1);
    color: #181818;
}
.wrapper-centrado{
  width: 40%;
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
          padding: 1.5rem 2rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
        border-radius: 10px;
}
.wrapper-centrado h2{
text-align: center;
color: #181818;
margin-bottom: 1.5em;
}
.gratis{
color: var(--positivo) !important;
}
.no-gratis{
color: var(--negativo) !important;
}
.no-gratis.black{
  color: #181818;
}
#form-metodo button{
  margin-top: 2em;
  min-width: 125px;
}
/*PASO 3*/
.burbuja.nobonificacion{
  margin-bottom: 0px;
  color: rgb(102 102 102);
  font-weight: 500;
}
.subtitle.gris{
  font-size: .75rem;
  color: rgb(153 153 153);
  margin-top: 6px;
  margin-bottom: 6px;
}
.subtitle.gris + .gris{
  margin-top: 0px;
}
.metodos-reembolso-title{
  display: flex;
  gap: .5rem;
  color: #181818;
  font-weight: 900;
  align-items: center;
}
.bonificacion-wrapper{
  background-color: rgb(240 253 244);
display: flex;
border: 1px solid rgb(134 239 172);
border-radius: 5px;
}
.bonificacion{
background-color: var(--bonificacion);
padding: .2em .5em;
display: flex;
    color: rgb(21 128 61);
    font-weight: 500;
}
.opcion-card:has(input:checked) p.gris{
color: #181818;
}

.bonificacion + .valor{
 padding: .1em .5em; 
}
#replace-list .replace-row{
  display: flex;
  flex-direction: column;
}
.replace-row img{
  width: 50%;
}
#replace-list select{
  height: 28px;
  width: 150px;
}
.btn-add-var{
  display: inline-block;
      padding: 0.5em 1.6em;
      background: #181818;
      color: #fff;
      text-decoration: none;
      border-radius: 2px;
      border: none;
}
#btn-replace-close{
  width: 100%;
}
#modal-replace .contenido{
  max-height: 90vh;
  overflow: auto;
}
.wrapper-buscador{
  display: flex;
  justify-content: center;
  gap: 1em;
}
.wrapper-buscador input[name="search"]{
  width: 500px;
  height: 30px;
  border-radius: 140px;
  border: 1px solid #181818;
  text-align: center;
}
form[action="catalogo.php"] + nav{
display: flex;
justify-content: center;
margin-top: 1em;
margin-bottom: 1em;
}
#cambio-summary{
  position: fixed;
  bottom: 0px;
  margin-bottom: 0px !important;
  background-color: var(--fondo-gris);
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 1em;
  gap: 3em;
}
#cambio-summary *{
font-size: .85rem;
line-height: .5;
}
#btn-continuar-cambio{
  position: fixed;
  z-index: 9999;
  right: 0px;
  bottom: 35px;
  background-color: #181818;
  color: #fff;
  border: 1px solid #181818;
  padding-right: 2em !important;
}
body:has(#cambio-summary){
  margin-bottom: 20em;
}
#modal-variable .contenido{
  max-height: 90vh;
  overflow: auto;
}
#modal-variable .contenido img{
max-height: 70vh;
}
#modal-variable button[onclick="confirmarVariacion()"]{
  display: inline-block;
      padding: 0.225em 1.6em;
      background: #181818;
      color: #fff;
      text-decoration: none;
      border-radius: 2px;
      border: none;
}
#modal-variable #variaciones-container label:has(input:checked){
  border: 1px solid #181818;
  width:100px;
  margin: 0 auto !important;
}
#modal-variable #variaciones-container label{
  cursor: pointer;
}
#modal-variable #variaciones-container label input{
display: none;
}
.paginacion{
display: flex;
justify-content: center;
gap: 1em;
align-items: center;

}
.paginacion a{
background-color: #181818;
color: #fff;
padding: .5em 1em;
border-radius: 4px;
}
.cambios-summary__col-2 ul{
  list-style: none;
}
.grid .producto{
  border: 0px;
  background-color: #f6f6f6;
}
.producto .btn-anadir{
  background-color: #181818;
  border: none;
  padding: .5em 2em;
  color: #fff;
}
.contenido #variaciones-container{
  margin-bottom: 1em;
}
/*loading modal*/
/* Spinner como pseudo-elemento */
.btn-anadir.loading, .btn-primary.loading {
  position: relative;
}
/*.btn-anadir.loading::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: .5em;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  background-color: #fff;
}*/
.btn-anadir.loading::after, .btn-primary.loading::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: .5em;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  background-color: #ffffff00;
}


@keyframes spin {
  to { transform: rotate(360deg); }
}
/*PASO 3.5 REEMBOLSO*/
.opcion-card:has(input[value="giftcard"]:checked){
  background-color: var(--bg-positivo);
  border-color: var(--border-positivo);
  border: 2px solid var(--border-positivo);
}
.opcion-card:has(input[value="refund"]:checked){
 border: 2px solid rgb(218, 85, 194);
    border-radius: 0.25rem;
    background-color: rgba(218, 85, 194, 0.1);
}


.opcion-card:not(:has(input:checked)){
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 2px;
border: 2px solid #fff;
}
.opcion-card {
  position: relative;           /* Para que el input absolute se refiera a este contenedor */
  cursor: pointer;              /* Cambia el cursor al pasar por encima */
  border-radius: 2px;
}

.opcion-card label {
  display: block;               /* Para que el label ocupe todo el ancho */
  height: 100%;
}

.opcion-card input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;                    /* Elimina márgenes por defecto */
  opacity: 0;                   /* Invisible pero clicable */
  cursor: pointer;
  z-index: 2;                   /* Encima de todos los demás elementos */
}
/*PASO 4*/
.wrapper-centrado.resumen{
  margin-bottom: 3em;
  font-weight: 600;
  text-align: left;
}
.wrapper-centrado.resumen table{
background-color: #fff;
margin-bottom: 1em;
border: none;
width: 100%;
}
.wrapper-centrado.resumen tbody, .wrapper-centrado.resumen th, .wrapper-centrado.resumen td{
  border: unset;
}
.wrapper-centrado.resumen tr:first-of-type{
  border-top: 1px solid #999;
}
.wrapper-centrado.resumen tr:nth-of-type(2){
  border-bottom: 1px solid #666;
}
/*Confirmacion*/
.wrapper-principal.confirmacion{
  height: 100vh;
  display: flex;
    align-items: center;
}
/***admin***/
/**dashboard**/
.admin.dashboard main{
  border-radius: 20px;
  background-color: #fff;
  margin-top: .25em;
  margin-bottom: .25em;
}
.admin.dashboard{
  background-color: #222;
}
.admin.dashboard .cabecera{
  display: flex;
  justify-content: space-between;
}
.admin.dashboard .boton{
  color: #fff;
  display: flex;
    align-items: center;
    background-color: rgb(23 144 255 / var(--tw-bg-opacity, 1));
    text-decoration: none;
    border-radius: 10px;
    padding: 0px .5em;
}
.admin.dashboard .filtros input, .admin.dashboard .filtros select, .admin.dashboard .filtros button{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
    border-width: 1px;
        border-radius: .5rem;
            --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    padding: .5rem;
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.admin.dashboard .filtros button{
  background-color: #333;
  color: #fff;
  border: 1px solid #333;
}
.admin.dashboard .filtros button + a{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    text-decoration: none;
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
    border-style: solid;
    border-width: 1px;
        border-radius: .5rem;
        padding: .5rem;
        color: #333;
}
.admin.dashboard .filtros-rapidos{
border: 1px solid rgb(229 229 229);
margin-bottom: 0px;
padding: 1rem;
border-radius: .5rem .5rem 0px 0px;
}
.admin.dashboard .filtros-rapidos a{
  text-decoration: none;
  color: #333;
  font-weight: 600;
  padding: .5rem;
}
.admin.dashboard table tr th{
  border: none;
}
.admin.dashboard table tr:first-of-type{
  background-color: rgb(245 245 245);
  border: 1px solid rgb(229 229 229);
  border-top: 0px;
  color: rgb(82 82 82);
}
.admin.dashboard table tr:first-of-type th{
  font-weight: 500;
}
.admin.dashboard table tr.clickable td{
border: none;
}
.admin.dashboard table tr.clickable{
  border: 1px solid #e5e7eb;
}
.admin.dashboard .burbu{
  display: inline-block !important;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1)) !important;
    border-radius: 10px !important;
    padding: .25em .75em !important;
    font-size: .9em !important;
    margin-bottom: .5em !important;
    margin-top: .5em;
}
.admin.dashboard .burbu.Cambio{
  background-color: #64a2f480 !important;
}
.admin.dashboard .burbu.Reembolso{
    background-color: #64a2f480!important;
}
.admin.dashboard .burbu.Tarjeta.regalo{
      background-color: #f464ef80!important;
}
.admin.dashboard .burbu.Recibido{
    background-color: #64a2f480!important;
}
.admin.dashboard .burbu.Iniciado{
background-color: #63a2f433!important;
}
.admin.dashboard .burbu.Aprobado{
  background-color: #64f46e80!important;

}
.admin.dashboard .burbu.Etiqueta.Enviada{
  background-color: rgb(145 157 255)!important;
}
.admin.dashboard .burbu.Revision.Requerida{
  background-color: rgb(255 233 145)!important;
}
.admin.dashboard .filtros-rapidos a {
  margin-right: 1rem;
  text-decoration: none;
  color: inherit;
  padding: 0.2em 0.4em;
  //border-radius: 4px;
  transition: background-color .2s ease;
}
.admin.dashboard .filtros-rapidos a:hover {
  background-color: #f0f0f0;
}
.admin.dashboard .filtros-rapidos a.active {
  font-weight: bold;
  //border-color: #0073aa;
  border-bottom: 2px solid #00a3ff;
  //color: #fff;
}
/**detalle**/
.admin.detalle .burbu{
  display: inline-block !important;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1)) !important;
    border-radius: 10px !important;
    padding: .25em .75em !important;
    font-size: .9em !important;
    margin-bottom: .5em !important;
    margin-top: .5em;
}
.admin.detalle .burbu.cambio{
  background-color: #64a2f480!important;
}
.admin.detalle .burbu.reembolso{
    background-color: #64a2f480!important;
}
.admin.detalle .burbu.tarjeta.regalo{
      background-color: #f464ef80!important;
}
.admin.detalle .burbu.recibido{
    background-color: #64a2f480!important;
}
.admin.detalle .burbu.iniciado{
background-color: #63a2f433!important;
}
.admin.detalle .burbu.aprobado{
  background-color: #64f46e80!important;
}
.admin.detalle .cabecera{
  display: flex;
  gap: 1rem;
      align-items: center;
}
.admin.detalle .cabecera .volver{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-border-opacity: 1;
    border-color: rgb(225 228 234 / var(--tw-border-opacity, 1));
        border-style: solid;
        border-width: 1px;
        width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    justify-content: center;
    align-items: center;
    display: flex;
    text-decoration: none;
    color: #999;
}
.admin.detalle .contenedor-2{
width: 60%;
}
.admin.detalle .contenedor-1{
  width: 33%;
}
.admin.detalle .contenedores-wrapper{
  display: flex;
  justify-content: space-between;
}
.admin.detalle .flex{
  flex-direction: column;
}
.admin.detalle main{
  --tw-bg-opacity: 1;
    background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
}
.admin.detalle .contenedores-wrapper .contenedor-2 .section, .admin.detalle .contenedores-wrapper .contenedor-1 .section{
      border: 1px solid rgb(225, 228, 234);
    overflow: hidden;
    box-shadow: rgba(10, 13, 20, 0.03) 0px 1px 2px 0px;
    border-radius: 16px;
    background-color: rgb(255, 255, 255);
    padding: 1em;
}
.admin.detalle .cabecera-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin.detalle .titulo{
  font-weight: 700;
}
.admin.detalle .contenedor-1 ul{
  list-style: none;
  padding-left: 0px;
}
.admin.detalle .cabecera-wrapper .box{
  margin-bottom: 0px;
}
.admin.detalle .cabecera-wrapper select{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
    border-width: 1px;
        border-radius: .5rem;
            --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    padding: .5rem;
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.admin.detalle .cabecera-wrapper button{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    text-decoration: none;
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
    border-style: solid;
    border-width: 1px;
        border-radius: .5rem;
        padding: .5rem;
        background-color: #333;
        color: #fff;
}
.admin.detalle .btn-etiqueta{
    color: #fff !important;
    display: flex !important
;
    align-items: center !important;
    background-color: rgb(218, 85, 194);;
    text-decoration: none !important;
    border-radius: 10px !important;
    padding: .5em .75em !important;
    
}
/*modal*/
.admin.detalle .modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

.admin.detalle .modal.hidden {
  display: none !important;
}

.admin.detalle .modal-content {
  background: white;
  padding: 2rem;
  border-radius: 6px;
  max-width: 400px;
  text-align: center;
}

.admin.detalle .modal-actions button {
  margin: 0 1rem;
  padding: .5rem 1rem;
}
.admin.detalle .burbu.etiqueta.enviada{
  background-color: rgb(145 157 255);
}
.admin.detalle .burbu{
  text-transform: capitalize;
}
.admin.detalle .burbu.revision.requerida{
  background-color: rgb(255 233 145);
}
.admin.detalle .section.reembolso input{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    border-color: rgb(229 229 229 / var(--tw-border-opacity, 1)) !important;
    border-width: 1px !important;
    border-radius: .5rem !important;
    --tw-text-opacity: 1 !important;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
    padding: .5rem !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.admin.detalle .section.reembolso{
      display: flex
;
    justify-content: space-between;
}
.admin.detalle .section.reembolso .btn-primary{
border-radius: .5em;
}
.admin.detalle .contenedores-wrapper .contenedor-1 .section.verde{
  background-color: rgb(180 246 180) !important;
}
.wrapper-principal.recepcion{
  height: 100vh;
  display: flex;
  align-items: center;
}
.wrapper-principal.recepcion .wrapper-centrado{
height: 25vh;
min-height: 200px;
text-align: center;
}
tr td:has(.b-success) {
    background-color: green;
    color: #fff;
}
tr td:has(.b-danger) {
    background-color: red;
    color: #fff;
}
@media (max-width: 1000px){
  :root{
    font-size: 16px !important;
  }

  .formulario-devolucion{
    width: 100%;
  }
  .formulario-devolucion h2, .formulario-devolucion p{
    font-size: 1rem !important;
  }
  .formulario-devolucion .cabecera-wrapper{
    margin: 0 auto;
    max-width: 90%;
  }
  .formulario-devolucion form *{
    text-align: center;
    font-size: 1em;
  }
  .formulario-devolucion form{
    text-align: center;
    margin: 0 auto;
    width: 90%;
    margin-bottom: 1em;
  }
  .formulario-devolucion input{
    max-width: unset;
    padding: 1em 0em 1em 0em;
    font-size: 16px !important;
  }
  .formulario-devolucion img{
    width: 60%;
  }
  .formulario-devolucion button{
    height: 75px;
  }
  .cabecera-wrapper.links{
    font-size: 1em;
  }
  .landing-devoluciones{
    height: 90vh;
  }
  .landing-devoluciones img{
    display: none;
  }
  .landing-devoluciones .formulario-devolucion img{
    display: unset;
  }
  #form-verificar{
    width: 100%;
    padding: 0px;
  }
  .wrapper-centrado{
    width: 80%;
    max-width: unset;
  }
  #cambio-summary *{
    line-height: 1;
  }
  #btn-continuar-cambio{
    bottom: 0px;
    width: 100%;
    padding: 7px !important;
  }
  #cambio-summary .cambios-summary__col-2 li{
    font-size: 0px;
  }
  #cambio-summary .cambios-summary__col-2 ul{
    padding-left: 0px;
  }
  #cambio-summary{
    width: 98%;
    padding: 2%;
    bottom: 20px;
  }
  #cambio-summary p{
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .steps-nav{
    padding-left: .5em !important;
    padding-right: .5em !important;
    gap: 0em !important;
  }
  .metodos-reembolso-title .bonificacion{
    width: 50px;
  }
  .menu-toggle{
    color: #181818;
  }
  #modal-variable .contenido img{
    max-height: 40vh !important;
  }
  #modal-variable .contenido{
    max-height: 80vh !important;
  }
  #btn-continuar-cambio {
    background-color: #db55c2;
    border: 1px solid #db55c2;
    }
}