/* =========================
   MESA DE ENTRADA DIGITAL
========================= */

.mesa-body{
  min-height:100vh;
  background:#0f1115;
  color:#f5f5f5;
}

/* HEADER */

.mesa-header{
  min-height:86px;

  padding:18px 32px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(10,10,10,.96);

  border-bottom:1px solid rgba(255,255,255,.08);
}

.mesa-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.mesa-brand img{
  width:54px;
  height:54px;
  object-fit:contain;
}

.mesa-brand strong{
  display:block;
  font-size:.9rem;
  letter-spacing:1px;
}

.mesa-brand span{
  display:block;
  color:#c9a86a;
  font-size:.78rem;
  margin-top:3px;
}

.mesa-volver{
  color:#c9a86a;

  text-decoration:none;

  border:1px solid rgba(201,168,106,.45);

  padding:9px 16px;

  border-radius:999px;

  font-size:.85rem;

  transition:.25s;
}

.mesa-volver:hover{
  background:rgba(201,168,106,.08);
}

/* MAIN */

.mesa-main{
  max-width:980px;
  margin:0 auto;
  padding:54px 22px 80px;
}

/* HERO */

.mesa-hero{
  margin-bottom:30px;
}

.mesa-hero span{
  color:#c9a86a;

  text-transform:uppercase;

  font-size:.78rem;

  letter-spacing:2px;
}

.mesa-linea{
  width:80px;
  height:2px;

  background:#c9a86a;

  margin:14px 0 18px;

  border-radius:999px;
}

.mesa-hero h1{
  font-size:clamp(2rem,5vw,3.3rem);

  margin:10px 0 14px;
}

.mesa-hero p{
  max-width:760px;

  color:#d2d2d2;

  line-height:1.8;
}

/* CARD */

.mesa-card{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.02)
    );

  border:1px solid rgba(255,255,255,.08);

  border-left:3px solid #c9a86a;

  border-radius:22px;

  padding:32px;
}

/* FORM */

.mesa-form{
  display:grid;
  gap:18px;
}

.mesa-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.mesa-form label{
  display:block;

  margin-bottom:7px;

  color:#c9a86a;

  font-size:.82rem;

  letter-spacing:.3px;
}

.mesa-form input,
.mesa-form select,
.mesa-form textarea{

  width:100%;

  padding:12px 14px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.05);

  color:#fff;

  font-family:inherit;

  box-sizing:border-box;

  transition:.2s;
}

.mesa-form input:focus,
.mesa-form select:focus,
.mesa-form textarea:focus{

  outline:none;

  border-color:#c9a86a;

  background:rgba(255,255,255,.07);
}

.mesa-form textarea{
  min-height:130px;
  resize:vertical;
}

.mesa-form option{
  color:#111;
}

/* AVISO */

.mesa-aviso{

  font-size:.82rem;

  line-height:1.7;

  color:#cfcfcf;

  background:rgba(201,168,106,.08);

  border-left:2px solid #c9a86a;

  padding:14px;

  border-radius:12px;
}

/* BOTON */

.mesa-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;

  padding:14px 24px;

  border-radius:999px;

  border:1px solid #c9a86a;

  background:#c9a86a;

  color:#111;

  font-weight:700;

  cursor:pointer;

  transition:.25s;
}

.mesa-btn:hover{
  transform:translateY(-2px);
}

/* ESTADO */

.post-estado{
  margin-top:6px;
  font-size:.92rem;
}

.post-estado.ok{
  color:#7CFFB2;
}

.post-estado.error{
  color:#ff8f8f;
}

/* MOBILE */

@media(max-width:768px){

  .mesa-header{
    flex-direction:column;
    gap:16px;
    text-align:center;
  }

  .mesa-grid{
    grid-template-columns:1fr;
  }

  .mesa-card{
    padding:24px;
  }

  .mesa-btn{
    width:100%;
  }

  .mesa-volver{
    width:100%;
    text-align:center;
  }

}


.mesa-bottom-link{
  margin-top:26px;
  text-align:center;
}

.mesa-bottom-link a{
  color:#c9a86a;

  text-decoration:none;

  font-size:.9rem;

  transition:.2s;
}

.mesa-bottom-link a:hover{
  opacity:.8;
}


.mesa-volver {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c9a86a !important;
  border: 1px solid rgba(201,168,106,.55) !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 99 !important;
}

@media (max-width: 768px) {
  .mesa-volver {
    width: 100% !important;
    margin-top: 10px !important;
  }
}


.mesa-topbar {
  min-height: 86px;
  padding: 18px 32px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  background: rgba(10,10,10,.96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 10;
}

@media(max-width:768px){
  .mesa-topbar {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}


.mesa-turno-link{
  margin-top:18px;
}

.mesa-turno-link a{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:14px;
  font-weight:500;

  color:#c9a86a;
  text-decoration:none;

  border-bottom:1px solid transparent;

  transition:.2s ease;
}

.mesa-turno-link a:hover{
  color:#b8934f;
  border-color:#c9a86a;
}