@charset "UTF-8";
html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-padding-top: 0rem;
}
html.html--index {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #000000;
  font-size: 2rem;
}

.bg {
  margin: 0;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.77)), url("../../src/img/full/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bg.overflow-hidden {
  overflow: hidden;
}

main {
  height: 100%;
  padding-bottom: 10rem;
}

.main--ajustado {
  height: auto;
}

p {
  color: #000000;
  line-height: 1.5;
}

.contenedor {
  width: 95%;
  max-width: 120rem;
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: white;
}

h1, h3 {
  margin: 0 0 5rem 0;
  font-weight: bold;
}

h1 {
  font-size: 4rem;
}

h4 {
  font-size: 2.5rem;
  text-align: left;
  color: #000000;
  font-weight: normal;
  margin-bottom: 1rem;
  margin-top: 1rem;
  margin-left: 1rem;
  text-transform: uppercase;
}

h3 {
  font-size: 2.5rem;
  text-align: left;
  color: #FFFFFF;
  font-weight: normal;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

body > section {
  padding: 10rem 0;
}

footer {
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
}

.boton--mediano {
  max-width: 50%;
  border-style: none;
  margin-bottom: 2rem;
  margin-left: 2rem;
}

.boton--rojo {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #FF4B3A;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 40px;
  margin-top: 3rem;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  padding: 2rem 2rem;
}
.boton--rojo else {
  padding: 2rem 2rem;
}
@media (min-width: 768px) {
  .boton--rojo {
    background-color: #FF4B3A;
    color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 40px;
    margin-top: 3rem;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding: 2rem 2rem;
    padding: 1.2rem 2rem;
  }
  .boton--rojo else {
    padding: 2rem 2rem;
  }
}

.boton--rojo:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.boton--naranja {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #eba555;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 40px;
  margin-top: 3rem;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  padding: 2rem 2rem;
}
.boton--naranja else {
  padding: 2rem 2rem;
}
@media (min-width: 768px) {
  .boton--naranja {
    background-color: #eba555;
    color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 40px;
    margin-top: 3rem;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding: 2rem 2rem;
    padding: 1.2rem 2rem;
  }
  .boton--naranja else {
    padding: 2rem 2rem;
  }
}

.boton--naranja:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.boton--verde {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #63C26E;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 40px;
  margin-top: 3rem;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  padding: 2rem 2rem;
}
.boton--verde else {
  padding: 2rem 2rem;
}
@media (min-width: 768px) {
  .boton--verde {
    background-color: #63C26E;
    color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 40px;
    margin-top: 3rem;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding: 2rem 2rem;
    padding: 1.2rem 2rem;
  }
  .boton--verde else {
    padding: 2rem 2rem;
  }
}

.boton--verde:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.boton--gris {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #BFBFBF;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 40px;
  margin-top: 3rem;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  padding: 2rem 2rem;
}
.boton--gris else {
  padding: 2rem 2rem;
}
@media (min-width: 768px) {
  .boton--gris {
    background-color: #BFBFBF;
    color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 40px;
    margin-top: 3rem;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding: 2rem 2rem;
    padding: 1.2rem 2rem;
  }
  .boton--gris else {
    padding: 2rem 2rem;
  }
}

.boton--gris:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.boton2 {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 15rem;
  width: 15rem;
  background-color: #FFFFFF;
  border-radius: 2.5rem;
  font-size: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.boton2:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.boton2 img {
  height: 8rem;
  width: 8rem;
  margin-bottom: 0rem;
}
.boton2 a {
  margin-top: 0.5rem;
  height: 4rem;
}

.alerta {
  color: white;
  margin-top: 1rem;
  text-align: center;
}

.error {
  background-color: #FF4B3A;
}

.accept {
  background-color: #63C26E;
}

.check {
  display: flex;
  align-items: center;
  margin-left: 2rem;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* Ocultar checkbox real */
.check input {
  display: none;
}

/* Caja */
.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #EFEFEF;
  background-color: #EFEFEF;
  border-radius: 4px;
  display: inline-block;
  position: relative;
}

/* Check */
.check input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Fondo cuando está activo */
.check input:checked + .checkmark {
  background: #FF4B3A;
  border: 2px solid #FF4B3A;
}

.items--productos {
  display: grid;
  row-gap: 3rem;
  justify-items: center;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .items--productos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .items--productos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fondo {
  display: grid;
  grid-template-rows: 20% 70% 10%;
  height: 100%;
  width: 100%;
}
.fondo .fondo__logo {
  justify-content: center;
  margin-top: 4rem;
}
@media (min-width: 390px) {
  .fondo .fondo__logo {
    max-width: 85%;
  }
}
@media (min-width: 768px) {
  .fondo .fondo__logo {
    max-width: 30%;
  }
}

.fondo__login {
  display: flex;
  justify-content: end;
  align-items: end;
  height: 100%;
}
@media (min-width: 390px) {
  .fondo__login {
    max-width: 80%;
  }
}
@media (min-width: 768px) {
  .fondo__login {
    max-width: 25%;
  }
}

.fondo__texto {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.fondo__texto p {
  color: #FFFFFF;
}
.fondo__texto span {
  color: #FF4B3A;
  text-decoration: underline;
  transition: font-size 0.3s ease;
}
.fondo__texto span:hover {
  font-size: 2.1rem;
  cursor: pointer;
}

.header__menu {
  display: grid;
  width: 100%;
  max-height: 28rem;
  opacity: 0.36;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.77)), url("../../src/img/full/header.jpg");
}

.header__menu--logo {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
@media (min-width: 390px) {
  .header__menu--logo {
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  .header__menu--logo {
    max-width: 20%;
  }
}

.header__menu--saludo {
  margin-top: 1rem;
}
.header__menu--saludo h3 {
  margin-bottom: 0rem;
}

.header__menu--rol p {
  margin-top: 0.4rem;
  margin-bottom: 1rem;
  color: #FFFFFF;
}
.header__menu--rol span {
  font-weight: bold;
}

body {
  margin: 0;
  background-image: linear-gradient(to bottom, #EBEBEB, white);
  background-repeat: no-repeat;
}
body.overflow-hidden {
  overflow: hidden;
}

.seleccion {
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seleccion div:nth-child(4) {
  box-shadow: 5px 5px 8px rgb(180, 180, 180);
}
@media (min-width: 390px) {
  .seleccion div:nth-child(-n+3) {
    width: 80%;
  }
}
@media (min-width: 768px) {
  .seleccion div:nth-child(-n+3) {
    width: 30%;
  }
}
.seleccion div:nth-child(-n+3) a {
  display: block;
  width: 100%;
  height: 100%;
}

.header__menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.header__menu img {
  height: 100%;
}
.header__menu a {
  display: inline-block;
}
.header__menu .header__menu--logo {
  justify-self: center;
  align-self: center;
  grid-column: 1/4;
}
.header__menu .header__menu--data {
  margin-left: 3rem;
  grid-column: 1/3;
}
@media (min-width: 768px) {
  .header__menu .header__menu--data {
    grid-column: 1/2;
  }
}
.header__menu .header__menu--carrito {
  margin-right: 3rem;
  margin-bottom: 0rem;
  justify-self: end;
  align-self: center;
  grid-column: 3/4;
}

.footer__menu {
  display: flex;
  height: calc(5rem + env(safe-area-inset-bottom));
  background-color: #FFFFFF;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 2rem env(safe-area-inset-bottom) 2rem;
}
@media (min-width: 390px) {
  .footer__menu {
    gap: 2rem;
  }
}
@media (min-width: 768px) {
  .footer__menu {
    gap: 20rem;
  }
}
.footer__menu svg {
  height: 3.5rem;
  transition: transform 0.3s ease, fill 0.3s ease;
}
.footer__menu svg:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.icono--footer {
  fill: #E6E6E6;
}
.icono--footer:hover {
  fill: #BFBFBF;
}

.icono--actual {
  fill: #E5B7B7;
}
.icono--actual:hover {
  fill: #e27c7c;
}

.info--transferencia {
  text-align: center;
  font-size: 1.5rem;
}
.info--transferencia ul {
  list-style: none;
}

.info--contacto h2 {
  text-align: center;
}

.info--redes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 4rem;
}
.info--redes a {
  font-size: 1.5rem;
  color: black;
}
.info--redes img {
  height: 5rem;
  width: auto;
}
@media (min-width: 390px) {
  .info--redes {
    padding-left: 5rem;
  }
}
@media (min-width: 1200px) {
  .info--redes {
    padding-left: 35rem;
  }
}

.nav__pedidos {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s ease-in-out, opacity 0.5s linear;
}
@media (min-width: 768px) {
  .nav__pedidos {
    display: flex;
    padding-top: 2rem;
    flex-direction: row;
    visibility: visible;
    opacity: 1;
  }
}
.nav__pedidos a {
  text-transform: capitalize;
  color: #BFBFBF;
}
.nav__pedidos a:hover {
  cursor: pointer;
  color: rgb(208, 115, 115);
}
.nav__pedidos .activo {
  color: rgb(208, 115, 115);
}

.titulo--categoria {
  text-transform: capitalize;
}

.mobile-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-menu svg {
  height: 5rem;
}
@media (min-width: 768px) {
  .mobile-menu {
    display: none;
  }
}

.mostrar {
  display: flex;
  visibility: visible;
  opacity: 1;
}

.menu__pedidos {
  height: 100%;
}

.item {
  margin-top: 10rem;
  position: relative;
  width: 70%;
  background-color: #F3F3F3;
  padding: 12rem 1rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.item span {
  font-weight: bold;
}
.item p {
  margin: 0;
  margin-top: 1rem;
  font-size: medium;
  color: rgb(65, 65, 67);
}
.item h4 {
  margin: 0;
  font-weight: bold;
  text-align: center;
}
.item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.circle {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 18rem;
  border-radius: 50%;
  background-color: white;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  align-items: center;
  display: flex;
  align-items: center;
}

.circle img {
  margin: 0 auto;
  width: auto;
}

.formulario {
  margin-top: 2rem;
  background-color: #E6E6E6;
  border-color: none;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 10rem;
}
.formulario legend {
  font-weight: bold;
  padding: 1rem;
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.formulario input {
  display: block;
  height: 3rem;
  padding: 1rem;
  width: 100%;
  border: none;
}
.formulario .formulario--input {
  border-radius: 2rem;
}
.formulario select {
  height: 3rem;
}
.formulario textarea {
  border: none;
  width: 100%;
  height: 6rem;
  border-radius: 0.5rem;
}
.formulario .formulario--fieldset {
  border: none;
}
.formulario .formulario--campo {
  margin-bottom: 1rem;
}
.formulario .boton--verde {
  margin: 0 auto;
  width: 50%;
  height: 4rem;
}
@media (min-width: 1200px) {
  .formulario .boton--verde {
    width: 20%;
  }
}

.formulario--radio {
  margin-top: 0rem;
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
}

.input .boton--rojo {
  margin-top: 0.2rem;
  border-style: none;
  font-size: 1rem;
  padding: 0.2rem;
}

.imagen-small {
  width: 10rem;
  margin: 0 auto;
}

.admin--seleccion {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10rem;
}
@media (min-width: 390px) {
  .admin--seleccion div {
    width: 80%;
  }
}
@media (min-width: 768px) {
  .admin--seleccion div {
    width: 30%;
  }
}
.admin--seleccion div a {
  display: block;
  width: 100%;
  height: 100%;
}

.tabla-productos {
  width: 100%;
  overflow-x: auto;
}
.tabla-productos table {
  border-collapse: collapse;
}

.producto {
  width: 100%;
  margin-top: 3rem;
  margin-bottom: auto;
  height: 100%;
  font-size: 1.8rem;
  text-align: center;
  align-items: center;
}
.producto thead {
  background-color: #BFBFBF;
  color: white;
}
.producto tbody {
  background-color: #E6E6E6;
  font-size: 1.5rem;
}
.producto a {
  font-size: 1rem;
  padding: 0.2rem;
  display: block;
  margin-top: 0.2rem;
}

.producto--boton {
  margin: 2rem 0;
}

.display--producto {
  display: grid;
  width: auto;
  gap: 2rem;
}
@media (min-width: 1200px) {
  .display--producto {
    grid-template-columns: 1fr 0.5fr 1fr;
    gap: 5rem;
  }
}
.display--producto p {
  margin: 0;
  font-size: 1.6rem;
  color: rgb(111, 111, 111, var(--tw-text-opacity, 1));
}
.display--producto h2 {
  font-weight: 600;
  font-size: 2.5rem;
  margin-top: 0rem;
}
.display--producto span {
  font-weight: bold;
}
.display--producto .stock {
  color: #FF4B3A;
}

.display--producto__preparar {
  margin-top: 2rem;
  margin-bottom: 2rem;
  justify-items: center;
  text-align: center;
}

.display--titulo {
  font-size: 4rem;
  font-weight: 700;
}

.display--producto__variantes li {
  font-size: 1.4rem;
  color: rgb(111, 111, 111, var(--tw-text-opacity, 1));
  margin: 0rem;
}
.display--producto__variantes span {
  font-weight: bold;
}

.display--preparar {
  display: grid;
  width: auto;
  gap: 2rem;
}
@media (min-width: 1200px) {
  .display--preparar {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}
.display--preparar p {
  margin: 0;
  font-size: 1.6rem;
  color: rgb(111, 111, 111, var(--tw-text-opacity, 1));
}
.display--preparar h2 {
  font-weight: 600;
  font-size: 2.5rem;
  margin-top: 0rem;
}
.display--preparar span {
  font-weight: bold;
}
.display--preparar .stock {
  color: #FF4B3A;
}
.display--preparar .boton--rojo {
  border-style: none;
}
.display--preparar .formulario--campo {
  margin-top: 2rem;
}
.display--preparar .formulario--campo textarea {
  height: 6rem;
  width: 100%;
  background-color: white;
}

.display--preparar__variantes {
  display: flex;
  flex-direction: column;
}
.display--preparar__variantes li {
  font-size: 1.4rem;
  color: rgb(111, 111, 111, var(--tw-text-opacity, 1));
  margin: 0rem;
}
.display--preparar__variantes span {
  font-weight: bold;
}

.adder {
  display: inline-flex;
  align-items: center;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.adder a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 42px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s;
}

.adder .minus {
  background: #ffffff;
  color: #2c2b2b;
}

.adder .minus:hover {
  background: #c8c7c7;
  color: #ffffff;
}

.adder .plus {
  background: #ffffff;
  color: #2c2b2b;
}

.adder .plus:hover {
  background: #c8c7c7;
  color: #ffffff;
}

.adder input {
  width: 100%;
  height: 42px;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  outline: none;
}

.adder input::-webkit-outer-spin-button,
.adder input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.adder input[type=number] {
  -moz-appearance: textfield;
}

.tabla--preparar {
  border-collapse: collapse;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}
.tabla--preparar th {
  border: none;
  background-color: white;
  color: rgb(117, 117, 117);
  font-weight: 200;
}
.tabla--preparar td {
  color: black;
}
.tabla--preparar tr {
  background-color: white;
  color: black;
}
.tabla--preparar tbody {
  border: none;
  color: red;
}
.tabla--preparar img {
  height: 7rem;
  width: 7rem;
}

.login--form {
  margin-top: 5rem;
  background-color: #FFFFFF;
  border-radius: 5rem;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1200px) {
  .login--form {
    width: 30%;
  }
}
.login--form h1 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.login--form h2 {
  color: rgb(41, 41, 41);
  margin-top: 0rem;
  padding: 4rem;
  text-align: center;
}
.login--form input {
  margin-bottom: 2rem;
  width: 80%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 5px;
  font-size: 15px;
  outline: none;
  color: #333;
  background: transparent;
  box-sizing: border-box;
}
.login--form input::placeholder {
  color: #acacac;
}
.login--form input:focus {
  border-bottom: 1px solid #e63946; /* rojo suave */
}
.login--form .boton--rojo {
  height: 5rem;
  width: 80%;
  border-style: none;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 5rem;
  margin-top: 5rem;
}
@media (min-width: 1200px) {
  .login--form .boton--rojo {
    width: 50%;
  }
}

.login-bg {
  height: 40vh;
  background-image: url("../../src/img/full/bg.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-bg .header__menu--logo {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
@media (min-width: 390px) {
  .login-bg .header__menu--logo {
    max-width: 80%;
  }
}
@media (min-width: 768px) {
  .login-bg .header__menu--logo {
    max-width: 20%;
  }
}
.login-bg img {
  margin-top: 50rem;
}
.login-card {
  background: white;
  width: 100%;
  max-width: 380px;
  padding: 35px 25px;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.login-card {
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}

.login-main {
  padding: 0;
}

.tabla--carrito {
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}
.tabla--carrito thead {
  display: none;
}
@media (min-width: 768px) {
  .tabla--carrito thead {
    display: table-header-group;
  }
}
.tabla--carrito th {
  border: none;
  background-color: white;
  color: rgb(117, 117, 117);
  font-weight: 200;
}
.tabla--carrito td {
  color: black;
}
.tabla--carrito tr {
  background-color: white;
  color: black;
}
.tabla--carrito tbody {
  border: none;
  color: red;
}
.tabla--carrito img {
  margin: 0 auto;
  height: 100%;
  width: 10rem;
}
.tabla--carrito input {
  display: inline-block;
}
.tabla--carrito .boton--rojo {
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  margin: 0 auto;
  margin-top: 1rem;
  padding: 0;
  text-transform: lowercase;
  border: none;
}
.tabla--carrito .boton--rojo:hover {
  transform: scale(1);
}

.tabla--carrito {
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .tabla--carrito {
    display: table;
  }
}
.tabla--carrito tbody,
.tabla--carrito tr,
.tabla--carrito td {
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .tabla--carrito tbody {
    width: auto;
    display: table-row-group;
  }
}
@media (min-width: 768px) {
  .tabla--carrito tr {
    width: auto;
    display: table-row;
  }
}
@media (min-width: 768px) {
  .tabla--carrito td {
    width: auto;
    display: table-cell;
  }
}

.tabla--carrito tr {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}
.tabla--carrito td {
  text-align: center;
  padding-left: 50%;
  position: relative;
}
@media (min-width: 768px) {
  .tabla--carrito td {
    padding-left: 0;
  }
}
.tabla--carrito tfoot td {
  width: 20rem;
  padding-left: 0;
}
@media (min-width: 768px) {
  .tabla--carrito tfoot td {
    width: auto;
  }
}

.tabla--carrito td::before {
  content: attr(data-label);
  position: absolute;
  left: 10px;
  font-weight: bold;
  text-align: left;
}
@media (min-width: 768px) {
  .tabla--carrito td::before {
    content: none;
    position: static;
    font-weight: normal;
    text-align: inherit;
  }
}

.boton--accion--carrito {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.boton--accion--carrito button {
  cursor: pointer;
  border-style: hidden;
  border-radius: 1rem;
  color: white;
  font-weight: bolder;
  font-size: 2rem;
  height: 4rem;
  width: 4rem;
}
.boton--accion--carrito .btn-sub {
  background-color: rgb(219, 201, 141);
}
.boton--accion--carrito .btn-sub:hover {
  background-color: rgb(139, 128, 92);
}
.boton--accion--carrito .btn-add {
  background-color: rgb(200, 216, 183);
}
.boton--accion--carrito .btn-add:hover {
  background-color: rgb(105, 113, 97);
}

.botones--carrito {
  display: grid;
  grid-template-columns: 50% 50%;
  font-size: 1.5rem;
  align-items: center;
  justify-items: center;
}
.botones--carrito .boton--naranja {
  line-height: 2rem;
  width: auto;
  padding: 1rem;
  border-width: 0;
  margin: 0;
}
.botones--carrito .pagar {
  background-color: #63C26E;
}

.gracias {
  display: grid;
  align-items: center;
  justify-items: center;
}
.gracias .boton--naranja {
  border: none;
  width: 50%;
}
@media (min-width: 768px) {
  .gracias .boton--naranja {
    width: 30%;
  }
}

.pago-card {
  margin: 5rem auto;
  background: white;
  padding: 25px;
  border-radius: 10px;
  width: 350px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.pago-card h1 {
  text-align: center;
  margin-bottom: 20px;
}
.pago-card .total {
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
  color: #33a26d;
}
.pago-card label {
  display: block;
  margin-top: 15px;
}
.pago-card select,
.pago-card input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
}
.pago-card .cambio {
  margin-top: 15px;
  font-size: 18px;
  text-align: center;
}
.pago-card .info-transferencia {
  margin-top: 15px;
  text-align: center;
  color: #ccc;
}
.pago-card .btn-pagar {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  background: #ff9800;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.pago-card .btn-pagar:hover {
  background: #ffc107;
}
.pago-card .btnOculto {
  cursor: no-drop;
  background-color: #6e6959;
}
.pago-card .btnOculto:hover {
  background-color: #6e6959;
}
.pago-card .oculto {
  display: none;
}

#ticket {
  display: none;
}
#ticket p {
  line-height: 1.2;
}

@media print {
  body * {
    visibility: hidden;
  }
  #ticket,
  #ticket * {
    visibility: visible;
  }
  #ticket {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 58mm;
    height: auto;
    font-family: monospace;
    font-size: 12px;
  }
  button {
    display: none;
  }
}
.panel-ajustes {
  background: #2c3e50;
  padding: 0.8rem 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.panel-ajustes .ajuste-grupo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.panel-ajustes .ajuste-grupo label {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.9;
}
.panel-ajustes .ajuste-grupo select {
  padding: 0.4rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.controles-nav-sup, .zoom-controls {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.3rem;
  border-radius: 8px;
  gap: 0.5rem;
}
.controles-nav-sup button, .zoom-controls button {
  background: #ecf0f1;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}
.controles-nav-sup button:hover, .zoom-controls button:hover {
  background: white;
}
.controles-nav-sup #indicadorPagina, .zoom-controls #indicadorPagina {
  min-width: 90px;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.btn-toggle {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  background: #e74c3c;
}
.btn-toggle.activo {
  background: #27ae60;
}

#mainCocina {
  margin-top: 1rem;
  transition: transform 0.3s ease;
  transform-origin: top center;
}

.contenedorPedidos {
  overflow: hidden;
  width: 98vw;
  margin: 0 auto;
  padding: 1.5rem 0;
}

.carril-pedidos {
  display: flex;
  gap: 2rem;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  align-items: flex-start;
}

.pedido-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.pedido-card.hecho {
  background: #e8f8f5;
  border: 2px solid #27ae60;
}
.pedido-card .tiempo-espera {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #f1f3f5;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.1rem;
}
.pedido-card .tiempo-espera.urgente {
  color: white;
  background: #e74c3c;
  animation: parpadeo 1.5s infinite;
}

.btn-hecho {
  margin-bottom: 1rem;
  background: #27ae60;
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  margin-top: auto;
}
.btn-hecho.oscuro {
  background: #1e8449;
  cursor: default;
}

.btn-cancelar {
  margin-bottom: 1rem;
  background: #ba3030;
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  margin-top: auto;
}
.btn-cancelar.oscuro {
  background: #6e1e1e;
  cursor: default;
}

.btn-entregado {
  background: #2980b9;
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
}

.notificacion-flotante {
  position: fixed;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  background: #27ae60;
  color: white;
  padding: 1.2rem 3rem;
  border-radius: 0 0 15px 15px;
  z-index: 2000;
  transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  font-weight: bold;
}
.notificacion-flotante.visible {
  top: 0;
}

@keyframes parpadeo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.insumos .botones--insumos {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}
.insumos .botones--insumos .boton--naranja {
  width: auto;
  font-size: 1.2rem;
  margin: 0;
  padding: 1rem;
}
.insumos select,
.insumos input {
  width: 50%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
}
.insumos button {
  text-transform: uppercase;
  font-family: "Nunito", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 1rem;
  border: none;
  border-radius: 2rem;
  color: white;
  background-color: rgb(152, 126, 188);
}
.insumos button:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.insumos .boton--eliminar {
  background-color: #e74c3c;
}
.insumos .tabla-inventario th, .insumos td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.insumos .estado {
  padding: 4px 8px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
}
.insumos .ok {
  background: #70d68f;
}
.insumos .comprar {
  background: #f1c40f;
  color: #000;
}
.insumos .critico {
  background: #e74c3c;
}
.insumos tr.critico {
  background: #fdecea;
}
.insumos tr.comprar {
  background: #fff8e1;
}