@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root{
  --totem-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  
  --totem-bg: #050f1b;
  --totem-bg-2: #0a1626;

  --totem-panel:#13283d;
  --totem-panel-2:#102338;

  --totem-text:#f4f8fc;
  --totem-text-soft:rgba(244,248,252,.72);

  --totem-blue:#006ffc;
  --totem-blue-2:#0059cc;

  --totem-green:#19c37d;
  --totem-green-2:#10b876;

  --totem-red:#ff4d4f;

  --totem-border:rgba(255,255,255,.08);

  --totem-shadow:0 25px 60px rgba(0,0,0,.45);

  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
}



html,
body{
  min-height:100%;
}

body.totem-body{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(circle at top, rgba(157, 109, 4, 0.1) 0%, transparent 32%),
    linear-gradient(180deg, var(--totem-bg) 0%, var(--totem-bg-2) 100%);
  color:var(--totem-text);
  font-family:var(--totem-font);
  font-optical-sizing:auto;
}

/* ESTRUCTURA GENERAL */

.totem-shell{
  min-height:100dvh;
  padding:clamp(14px,2vw,28px);
  display:flex;
  flex-direction:column;
}

.totem-container{
  width:min(96vw,1500px);
  min-height:calc(100dvh - clamp(28px,4vw,56px));
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:clamp(14px,1.8vw,24px);
}

.totem-content{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* HEADER */

.totem-header{
  width:100%;
  padding:20px 40px;
  margin-bottom:30px;
}

.totem-header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

.totem-brand{
  display:flex;
  align-items:center;
}

.totem-logo{
  height:60px;
  display:block;
}

.totem-clock{
  font-size:1.6rem;
  font-weight:800;
  color:#fff;
  text-align:right;
}

.totem-header-title{
  width:100%;
  margin-top:10px;
  text-align:center;
  font-size:3.2rem;
  font-weight:400;
  color:#fff;
}

/* PASOS */

.totem-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.totem-step{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--totem-border);
}

.totem-step-number{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  font-weight:900;
  flex:0 0 42px;
}

.totem-step-label{
  font-size:clamp(.95rem,1vw,1.08rem);
  font-weight:800;
}

.totem-step.done{
  background:linear-gradient(180deg,rgba(25,195,125,.18),rgba(15,169,104,.12));
  border-color:rgba(25,195,125,.32);
}

.totem-step.done .totem-step-number{
  background:var(--totem-green);
}

.totem-step.active{
  background:linear-gradient(180deg,rgba(0,111,252,.24),rgba(0,111,252,.14));
  border-color:rgba(0,111,252,.42);
}

.totem-step.active .totem-step-number{
  background:var(--totem-blue);
}

/* BLOQUES */

.totem-panel{
  background:linear-gradient(180deg,rgba(19,40,61,.94),rgba(16,35,56,.96));
  border-radius:var(--radius-xl);
  border:1px solid var(--totem-border);
  box-shadow:var(--totem-shadow);
  padding:clamp(18px,2vw,30px);
}

.totem-panel-title{
  margin:0 0 6px;
  font-size:clamp(1.35rem,2vw,2rem);
  font-weight:900;
}

.totem-panel-subtitle{
  margin:0;
  color:var(--totem-text-soft);
  font-size:clamp(.95rem,1vw,1.05rem);
}

/* RESUMEN ARRIBA */

.totem-summary-top{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}

.totem-summary-card{
  border-radius:22px;
  padding:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}

.totem-summary-label{
  margin-bottom:8px;
  font-size:.92rem;
  color:var(--totem-text-soft);
}

.totem-summary-value{
  font-size:clamp(1.05rem,1.35vw,1.35rem);
  font-weight:900;
}

/* ZONA DE HORAS + LATERAL */

.totem-booking-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
  gap:clamp(14px,1.8vw,24px);
}

.totem-hours-panel{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.totem-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,1.2vw,20px);
}

/* HORAS */

.totem-slot{
  min-height:clamp(110px,12vh,160px);
  border-radius:24px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.totem-slot:hover{
  transform:translateY(-2px);
}

.totem-slot-time{
  font-size:clamp(1.4rem,2vw,2rem);
  font-weight:900;
}

.totem-slot-meta{
  font-size:clamp(.9rem,1vw,1rem);
  font-weight:700;
}

/* DISPONIBLE */

.totem-slot.available{
  background:linear-gradient(180deg,#19c37d,#0fa968);
  border-color:#19c37d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.totem-slot.available .totem-slot-meta{
  color:rgba(220,255,238,.92);
}

/* SELECCIONADA */

.totem-slot.selected{
  background:linear-gradient(180deg,#006ffc,#0059cc);
  border-color:#006ffc;
  box-shadow:0 0 0 4px rgba(0,111,252,.18);
}

.totem-slot.selected .totem-slot-meta{
  color:rgba(223,236,255,.96);
}

/* OCUPADA */

.totem-slot.occupied{
  background:linear-gradient(180deg,rgba(96,112,130,.4),rgba(62,77,95,.38));
  border-color:rgba(160,175,194,.25);
  opacity:.55;
  cursor:not-allowed;
}

.totem-slot.occupied .totem-slot-meta{
  color:rgba(255,255,255,.68);
}

/* LATERAL DERECHO */

.totem-side-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.totem-side-highlight{
  border-radius:24px;
  padding:22px;
  background:linear-gradient(180deg,rgba(0,111,252,.18),rgba(12,38,65,.3));
  border:1px solid rgba(0,111,252,.28);
}

.totem-total-label{
  color:var(--totem-text-soft);
  margin-bottom:8px;
}

.totem-total-value{
  font-size:clamp(2rem,3vw,3rem);
  font-weight:900;
}

/* BOTÓN MUY LLAMATIVO */

.totem-pay-btn{
  width:100%;
  min-height:84px;
  border:0;
  border-radius:24px;
  padding:20px 28px;
  background:linear-gradient(180deg,#19c37d,#10b876);
  color:#ffffff;
  font-size:clamp(1.2rem,1.6vw,1.5rem);
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 18px 36px rgba(16,184,118,.38), inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.totem-pay-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 18px 36px rgba(16,184,118,.38), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ACCIONES SECUNDARIAS */

.totem-actions-inline{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.totem-btn{
  min-height:58px;
  border:0;
  border-radius:18px;
  padding:14px 22px;
  font-size:clamp(1rem,1.1vw,1.12rem);
  font-weight:800;
  cursor:pointer;
}

.totem-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:var(--totem-text);
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;
}

.totem-btn-primary{
  background:linear-gradient(180deg,#006ffc,#0059cc);
  color:#fff;
}

/* LOGIN ANTIGUO */

.totem-login-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:40px;
}

.totem-login-card{
  width:100%;
  max-width:520px;
  background:linear-gradient(180deg,#13283d 0%,#0d1f33 100%);
  border-radius:28px;
  padding:45px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 35px 80px rgba(0,0,0,.55);
}

.totem-login-header{
  text-align:center;
  margin-bottom:35px;
}

.totem-login-logo{
  height:90px;
  margin-bottom:15px;
}

.totem-login-title{
  font-size:2rem;
  font-weight:900;
  color:white;
}

/* TABS */

.totem-login-tabs .nav-link{
  background:rgba(255,255,255,.05);
  border-radius:18px;
  color:white;
  font-weight:700;
  padding:14px;
}

.totem-login-tabs .nav-link.active{
  background:linear-gradient(180deg,#006ffc,#0059cc);
}

/* INPUTS */

.totem-input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:white;
  border-radius:18px;
  padding:16px;
}

.totem-input:focus{
  border-color:#006ffc;
  box-shadow:0 0 0 2px rgba(0,111,252,.25);
  background:rgba(255,255,255,.08);
  color:white;
}

.totem-input::placeholder{
  color:rgba(255,255,255,.45);
}

/* BOTON PRINCIPAL LOGIN */

.totem-login-btn{
  width:100%;
  min-height:78px;
  border:0;
  border-radius:22px;
  padding:18px 24px;
  font-size:1.35rem;
  font-weight:900;
  color:white;
  background:linear-gradient(180deg,#19c37d 0%,#10b876 100%);
  box-shadow:0 10px 30px rgba(16,184,118,.35);
  transition:all .2s;
}

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

/* ALERTAS */

.totem-alert-error{
  background:#ff4d4f;
  color:white;
  padding:14px 18px;
  border-radius:14px;
  margin-bottom:20px;
  font-weight:600;
}

.totem-alert-success{
  background:#10b876;
  color:white;
  padding:14px 18px;
  border-radius:14px;
  margin-bottom:20px;
  font-weight:600;
}

/* QR */

.totem-qr-box{
  background:black;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}

#qr-reader{
  width:100%;
}

/* MODAL */

.totem-modal{
  background:linear-gradient(180deg,#13283d 0%,#0d1f33 100%);
  color:white;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
}

.totem-modal .modal-header,
.totem-modal .modal-footer{
  border-color:rgba(255,255,255,.08);
}

.totem-modal-footer{
  gap:12px;
}

.totem-modal-confirm{
  width:auto;
  min-width:180px;
}

/* LOGIN SIN TARJETA */

.totem-login-content{
  width:min(92vw,760px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.totem-login-label{
  display:block;
  margin-bottom:12px;
  font-size:clamp(1.1rem,1.3vw,1.35rem);
  font-weight:800;
  color:#fff;
}

.totem-touch-input{
  min-height:74px;
  padding:18px 22px;
  font-size:clamp(1.15rem,1.4vw,1.4rem);
  border-radius:20px;
  text-align:center;
}

.totem-btn-block{
  width:100%;
}

.totem-login-tabs{
  margin-top:8px;
}

.totem-login-tabs .nav-item{
  padding:0 6px;
}

.totem-tab-btn{
  min-height:78px;
  border-radius:22px !important;
  font-size:clamp(1.05rem,1.2vw,1.2rem);
  font-weight:900;
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.totem-login-tabs .nav-link.active{
  background:linear-gradient(180deg,#006ffc,#0059cc) !important;
  border-color:rgba(0,111,252,.55) !important;
  box-shadow:0 10px 25px rgba(0,111,252,.28);
}

.totem-login-help{
  font-size:clamp(1rem,1.1vw,1.1rem);
  line-height:1.45;
  color:rgba(255,255,255,.78);
}

/* MENU ANTIGUO */

.totem-menu-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:40px;
}

.totem-menu-card{
  width:100%;
  max-width:1100px;
  background:linear-gradient(180deg,#13283d 0%,#0d1f33 100%);
  border-radius:28px;
  padding:40px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 80px rgba(0,0,0,.55);
}

.totem-menu-header{
  text-align:center;
  margin-bottom:35px;
}

.totem-menu-logo{
  height:90px;
  margin-bottom:15px;
}

.totem-menu-title{
  font-size:2.2rem;
  font-weight:900;
  color:white;
  margin-bottom:8px;
}

.totem-menu-subtitle{
  text-align:center;
  color:rgba(255,255,255,.78);
  font-size:1.15rem;
  margin:0 0 26px;
}

/* GRID ANTIGUO */

.totem-menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;
}

/* TILE ANTIGUO */

.totem-menu-tile{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  min-height:240px;
  display:block;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}

.totem-menu-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}

.totem-menu-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.totem-menu-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 100%);
}

.totem-menu-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  height:100%;
  padding:22px;
}

.totem-menu-text{
  color:white;
  font-size:1.25rem;
  font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

/* MENU NUEVO */

.totem-menu-content{
  width:min(100%,1100px);
  margin:0 auto;
}

.totem-menu-grid-simple{

  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 320px));
  justify-content:center;
  justify-items:center;
  gap:28px;
  width:100%;
  max-width:760px;
  margin:0 auto;
}

.totem-menu-box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:0.82 / 1;
  padding:28px 22px 24px;
  border-radius:30px;
  text-decoration:none;
  text-align:center;
  color:var(--totem-text);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;

  background:
    linear-gradient(180deg, rgba(20,78,100,.96) 0%, rgba(11,45,60,.98) 100%);

  border:1px solid rgba(93,220,255,.16);

  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -18px 36px rgba(0,0,0,.10);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.totem-menu-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(74,211,255,.16) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 36%);
}

.totem-menu-box::after{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  right:22px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(103,228,255,.95) 50%, transparent 100%);
  opacity:.85;
}

.totem-menu-box:hover,
.totem-menu-box:focus,
.totem-menu-box:active{
  text-decoration:none;
  color:var(--totem-text);
}

.totem-menu-box:hover,
.totem-menu-box:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(103,228,255,.34);
  box-shadow:
    0 22px 48px rgba(0,0,0,.34),
    0 0 0 1px rgba(103,228,255,.10),
    0 0 30px rgba(0,170,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -18px 36px rgba(0,0,0,.12);
}

.totem-menu-box:active{
  transform:scale(.985);
}

.totem-menu-box-icon{
  position:relative;
  z-index:1;
  width:92px;
  height:92px;
  margin:0 0 22px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3.2rem;
  line-height:1;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);

  border:1px solid rgba(113,228,255,.22);

  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.totem-menu-box-title{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  font-size:1.95rem;
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.02em;
  color:#ffffff;
  text-wrap:balance;
}

.totem-menu-box-text{
  position:relative;
  z-index:1;
  margin:0;
  max-width:88%;
  font-size:1.02rem;
  line-height:1.32;
  font-weight:400;
  color:rgba(244,248,252,.78);
  text-wrap:balance;
}

@media (max-width: 768px){
  .totem-menu-grid{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
    max-width:560px;
    gap:20px;
  }

  .totem-menu-box{
    padding:24px 18px 20px;
    border-radius:24px;
  }

  .totem-menu-box-icon{
    width:78px;
    height:78px;
    font-size:2.7rem;
    border-radius:22px;
    margin-bottom:18px;
  }

  .totem-menu-box-title{
    font-size:1.55rem;
  }

  .totem-menu-box-text{
    font-size:.96rem;
  }
}

.totem-menu-actions{
  margin-top:28px;
  display:flex;
  justify-content:center;
}

/* BOTON SALIR */

.totem-menu-footer{
  margin-top:30px;
}

.totem-exit-btn{
  display:block;
  width:100%;
  text-align:center;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg,#ff4d4f,#dc3545);
  color:white;
  font-size:1.2rem;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(220,53,69,.4);
}

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

.totem-exit-btn-small{
  width:min(100%,320px);
  min-height:68px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  border-radius:20px;
}

.totem-rentals-page{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.totem-table-area{
  width: 100%;
}

.totem-reservations-table{
  width: 100%;
  margin: 0;
  table-layout: fixed;
  color: var(--totem-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--totem-text);
  --bs-table-hover-bg: rgba(47,128,255,.10);
  --bs-table-hover-color: var(--totem-text);
  --bs-table-color: var(--totem-text);
  --bs-table-border-color: rgba(255,255,255,.08);
}

.totem-reservations-table thead th{
  background: #0d2134 !important;
  color: var(--totem-text) !important;
  font-size: .98rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 14px 10px;
  text-align: center;
}

.totem-reservations-table tbody td{
  padding: 14px 10px;
  font-size: .98rem;
  vertical-align: middle;
  text-align: center;
}

.totem-table-empty{
  padding: 34px 18px !important;
  font-size: 1.2rem;
  color: var(--totem-text-soft) !important;
}

.totem-view-footer{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

/* TABLA RESPONSIVE PARA TOTEM */

@media (max-width:1200px){
  .totem-table thead{
    display:none;
  }

  .totem-table,
  .totem-table tbody,
  .totem-table tr,
  .totem-table td{
    display:block;
    width:100%;
  }

  .totem-table tr{
    background:rgba(255,255,255,.05);
    border-radius:16px;
    padding:16px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,.08);
  }

  .totem-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border:none;
    gap:16px;
  }

  .totem-table td::before{
    font-weight:700;
    color:rgba(255,255,255,.65);
  }

  .totem-table td:nth-child(1)::before{content:"Reserva";}
  .totem-table td:nth-child(2)::before{content:"Deporte";}
  .totem-table td:nth-child(3)::before{content:"Pista";}
  .totem-table td:nth-child(4)::before{content:"Día";}
  .totem-table td:nth-child(5)::before{content:"Inicio";}
  .totem-table td:nth-child(6)::before{content:"Fin";}
  .totem-table td:nth-child(7)::before{content:"Socios";}
  .totem-table td:nth-child(8)::before{content:"Extras";}
  .totem-table td:nth-child(9)::before{content:"";}
}

/* RESPONSIVE GENERAL */

@media (max-width:1180px){
  .totem-summary-top{
    grid-template-columns:repeat(2,1fr);
  }

  .totem-booking-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:820px){
  .totem-menu-grid-simple{
    grid-template-columns:1fr;
  }

  a.totem-menu-box{
    min-height:180px;
  }
}

@media (max-width:780px){
  .totem-steps{
    grid-template-columns:1fr 1fr;
  }

  .totem-login-content{
    width:min(94vw,760px);
  }

  .totem-login-tabs .nav-item{
    padding:0 4px;
  }
}

@media (max-width:560px){
  .totem-steps{
    grid-template-columns:1fr;
  }

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

  .totem-actions-inline{
    flex-direction:column;
  }

  .totem-login-tabs{
    display:grid;
    gap:12px;
  }

  .totem-login-tabs .nav-item{
    padding:0;
  }
}

.totem-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--totem-blue-2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
  color: #fff !important;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(31,111,255,.22);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.totem-action-btn:hover,
.totem-action-btn:focus{
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(31,111,255,.28);
}

.totem-action-btn:active{
  transform: translateY(0);
}

.totem-action-btn[disabled],
.totem-action-btn.is-disabled{
  opacity: .6;
  pointer-events: none;
}

.totem-view-footer{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
}

.totem-view-footer-actions{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.totem-footer-btn{
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
}

.totem-btn-icon{
  font-size: 1.15em;
  line-height: 1;
}

.totem-view-footer-copy{
  width: 100%;
  text-align: center;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--totem-text-soft);
  opacity: .92;
}

@media (max-width: 1080px){
  .totem-view-footer-actions{
    gap: 12px;
  }

  .totem-footer-btn{
    min-height: 50px;
    font-size: .92rem;
  }

  .totem-view-footer-copy{
    font-size: .76rem;
  }
}

.totem-view-footer-actions-single{
  grid-template-columns: 1fr;
}

.totem-view-footer-actions-single .totem-footer-btn{
  width: 100%;
}

/* ==========================================
   RESERVA / AMPLIAR ALQUILER
========================================== */

.totem-reserva-view{
  width: 100%;
}

.totem-reserva-layout{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 420px);
  gap: 22px;
  align-items: start;
}

.totem-reserva-main{
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.totem-reserva-side{
  min-width: 0;
}

.totem-section-card{
  background: linear-gradient(180deg, rgba(19,40,61,.96) 0%, rgba(16,35,56,.98) 100%);
  border: 1px solid var(--totem-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--totem-shadow);
  padding: 22px;
}

.totem-section-head{
  margin-bottom: 18px;
}

.totem-section-title{
  margin: 0;
  color: var(--totem-text);
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  font-weight: 800;
  line-height: 1.1;
}

.totem-reserva-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.totem-info-item{
  min-width: 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.totem-info-item-full{
  grid-column: 1 / -1;
}

.totem-info-label{
  margin-bottom: 6px;
  color: var(--totem-text-soft);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.totem-info-value{
  color: var(--totem-text);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

/* Accesorios */

.totem-acc-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.totem-empty-box{
  grid-column:1 / -1;
  padding:22px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:var(--totem-text-soft);
  font-size:1.1rem;
  text-align:center;
}

.acc-tile{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:22px;
  cursor:pointer;
  user-select:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.acc-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.24);
}

.acc-tile:focus-within{
  outline:4px solid rgba(47,128,255,.28);
  outline-offset:2px;
}

/* DISPONIBLE = VERDE */
.acc-tile.is-available{
  background:linear-gradient(180deg, #19c37d 0%, #10b876 100%) !important;
  border:1px solid #0fa968 !important;
  color:#ffffff !important;
}

.acc-tile.is-available .totem-acc-state{
  background:rgba(0,0,0,.14);
  color:#ffffff;
}

/* SELECCIONADO = AZUL */
.acc-tile.is-selected{
  background:linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%) !important;
  border:1px solid var(--totem-blue) !important;
  color:#ffffff !important;
}

.acc-tile.is-selected .totem-acc-state{
  background:rgba(0,0,0,.14);
  color:#ffffff;
}

/* OCUPADO = GRIS */
.acc-tile.is-locked{
  background:linear-gradient(180deg, #9ea7b3 0%, #7f8997 100%) !important;
  border:1px solid #6e7886 !important;
  color:#ffffff !important;
  cursor:not-allowed;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.acc-tile.is-locked .totem-acc-state{
  background:rgba(0,0,0,.16);
  color:#ffffff;
}

.acc-check{
  transform:scale(1.45);
  margin:0;
}

.acc-check:disabled{
  accent-color:#7f8997;
  opacity:1;
}

.acc-body{
  min-width:0;
}

.acc-name{
  color:inherit;
  font-size:1.18rem;
  font-weight:900;
  line-height:1.15;
  word-break:break-word;
}

.acc-price{
  margin-top:6px;
  color:inherit;
  opacity:.92;
  font-size:1rem;
  font-weight:800;
}

.totem-acc-state{
  align-self:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}

.totem-acc-state .state-available,
.totem-acc-state .state-selected,
.totem-acc-state .state-locked{
  display:none;
}

/* libre */
.acc-tile.is-available:not(.is-selected):not(.is-locked) .totem-acc-state .state-available{
  display:inline;
}

/* seleccionado */
.acc-tile.is-selected .totem-acc-state .state-available,
.acc-tile.is-selected .totem-acc-state .state-locked{
  display:none;
}

.acc-tile.is-selected .totem-acc-state .state-selected{
  display:inline;
}

/* ocupado */
.acc-tile.is-locked .totem-acc-state .state-available,
.acc-tile.is-locked .totem-acc-state .state-selected{
  display:none;
}

.acc-tile.is-locked .totem-acc-state .state-locked{
  display:inline;
}

/* Resumen pago */

.totem-sticky-pay{
  position: sticky;
  top: 18px;
}

.totem-pay-summary{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(47,128,255,.30);
  background: rgba(11,27,44,.65);
  box-shadow: inset 0 0 0 1px rgba(47,128,255,.08);
}

.totem-pay-total-label{
  color: var(--totem-text-soft);
  font-size: .92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.totem-pay-total-value{
  color: var(--totem-text);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.05;
}

.totem-pay-btn{
  width: 100%;
  min-height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 18px;
  border: 1px solid var(--totem-green-2);
  background: linear-gradient(180deg, #2ad98d 0%, var(--totem-green) 55%, var(--totem-green-2) 100%);
  color: #052113 !important;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 14px 30px rgba(25,195,125,.28);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.totem-pay-btn:hover,
.totem-pay-btn:focus{
  color: #052113 !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(25,195,125,.34);
}

.totem-pay-btn:active{
  transform: translateY(0);
}

.totem-pay-btn.disabled,
.totem-pay-btn[aria-disabled="true"]{
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.08);
}

/* Responsive */

@media (max-width: 1180px){
  .totem-reserva-layout{
    grid-template-columns: 1fr;
  }

  .totem-sticky-pay{
    position: static;
  }
}

@media (max-width: 860px){
  .totem-reserva-info-grid,
  .totem-acc-grid{
    grid-template-columns: 1fr;
  }

  .totem-section-card{
    padding: 18px;
  }

  .totem-info-value{
    font-size: 1.05rem;
  }

  .totem-acc-name{
    font-size: 1.05rem;
  }

  .totem-pay-btn{
    min-height: 60px;
    font-size: 1.1rem;
  }
}

/* ==========================================
   VISTA DETALLE RESERVA / AMPLIAR ALQUILER
   Ajustes específicos reutilizando el skin
========================================== */

.totem-reserva-view{
  width: min(96vw, 1500px);
  margin: 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.totem-pay-inline{
  display: grid;
  grid-template-columns: minmax(0,1fr) 240px;
  gap: 16px;
  align-items: stretch;
}

.totem-pay-inline .totem-pay-summary{
  margin-bottom: 0;
  min-height: 100%;
  justify-content: center;
}

.totem-pay-inline .totem-pay-btn{
  min-height: 100%;
}

.totem-acc-check:disabled{
  accent-color: #7f8997;
  opacity: 1;
}

@media (max-width: 860px){
  .totem-pay-inline{
    grid-template-columns: 1fr;
  }

  .totem-pay-inline .totem-pay-btn{
    min-height: 68px;
  }
}

/* ==========================================
   PAGOS
========================================== */

.totem-payments-view{
  width:min(96vw,1100px);
  margin:0 auto;
  display:flex;
  justify-content:center;
}

.totem-payments-card{
  width:100%;
  max-width:960px;
}

.totem-payments-intro{
  text-align:center;
  margin-bottom:28px;
}

.totem-payments-title{
  margin:0 0 10px;
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:900;
  color:var(--totem-text);
}

.totem-payments-text{
  margin:0;
  color:var(--totem-text-soft);
  font-size:clamp(1rem,1.1vw,1.08rem);
  line-height:1.45;
}

.totem-payments-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:24px;
}

a.totem-payment-box{
  min-height:240px;
  border-radius:28px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

a.totem-payment-box:hover,
a.totem-payment-box:focus{
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(0,0,0,.34);
  border-color:rgba(255,255,255,.24);
  color:#fff;
  text-decoration:none;
}

.totem-payment-box-title{
  font-size:clamp(1.8rem,2.4vw,2.2rem);
  font-weight:900;
  line-height:1.1;
  margin-bottom:12px;
}

.totem-payment-box-text{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
  color:rgba(255,255,255,.88);
  max-width:28ch;
}

.totem-payment-box.is-abonados{
  background:linear-gradient(180deg,#006ffc 0%,#0059cc 100%);
}

.totem-payment-box.is-varios{
  background:linear-gradient(180deg,#19c37d 0%,#10b876 100%);
}

@media (max-width:820px){
  .totem-payments-grid{
    grid-template-columns:1fr;
  }

  a.totem-payment-box{
    min-height:190px;
    padding:24px 20px;
    border-radius:24px;
  }

  .totem-payment-box-title{
    font-size:1.7rem;
  }

  .totem-payment-box-text{
    font-size:.98rem;
  }
}

/* ==========================================
   PAGOS - ABONADOS
========================================== */

.totem-abonados-view{
  width: 100%;
}

.totem-abonados-wrap{
  width: min(100%, 1100px);
  margin: 0 auto;
}

.totem-section-subtitle{
  margin-bottom: 22px;
  color: var(--totem-text-soft);
  font-size: 1.05rem;
  line-height: 1.45;
}

.totem-section-subtitle-center{
  text-align: center;
}

.totem-abonados-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 320px));
  justify-content:center;
  gap:28px;
}

.totem-abonados-col{
  min-width: 0;
}

.totem-pay-check{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.totem-pay-select{
  display: block;
  margin: 0;
  cursor: pointer;
}

.totem-pay-tile{
  position: relative;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px 20px;
  border-radius: 24px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
}

.totem-pay-tile{
  position: relative;
  width: 100%;
  aspect-ratio: .82 / 1;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 22px 24px;
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    filter .16s ease;
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -16px 28px rgba(0,0,0,.10);
}

.totem-pay-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.14) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 36%);
  z-index: 0;
}

.totem-pay-select{
  display: block;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.totem-pay-select:active .totem-pay-tile{
  transform: scale(.985);
}

.totem-pay-select .totem-pay-tile:hover{
  transform: translateY(-3px);
  box-shadow:
    0 20px 42px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -16px 28px rgba(0,0,0,.12);
}

.totem-pay-tile-badge{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.totem-pay-tile-title{
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  font-size: 1.68rem;
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.totem-pay-tile-sub{
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 500;
  opacity: .95;
  text-align: center;
  line-height: 1.3;
  max-width: 88%;
  text-wrap: balance;
}

.totem-pay-tile-price{
  position: relative;
  z-index: 1;
  font-size: 1.42rem;
  font-weight: 800;
  text-align: center;
  margin-top: 8px;
  letter-spacing: -.01em;
}

/* DISPONIBLE = VERDE */
.totem-pay-tile.is-pending{
  background:
    linear-gradient(180deg, #1dc884 0%, #139e69 100%);
  border: 1px solid rgba(111, 255, 199, .26);
  color: #fff;
  box-shadow:
    0 16px 34px rgba(8, 78, 54, .34),
    0 0 0 1px rgba(111,255,199,.06),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -16px 28px rgba(0,0,0,.10);
}

.totem-pay-tile.is-pending .totem-pay-tile-badge{
  background: rgba(255,255,255,.16);
  color: #fff;
}

/* SELECCIONADO = AZUL */
.totem-pay-select input:checked + .totem-pay-tile{
  background:
    linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
  border: 1px solid rgba(132, 182, 255, .34);
  color: #fff;
  box-shadow:
    0 18px 38px rgba(31,111,255,.32),
    0 0 0 1px rgba(132,182,255,.08),
    0 0 26px rgba(47,128,255,.14),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -16px 28px rgba(0,0,0,.10);
  transform: translateY(-3px);
}

.totem-pay-select input:checked + .totem-pay-tile .totem-pay-tile-badge{
  background: rgba(255,255,255,.16);
  color: #fff;
}

.totem-pay-select input:checked + .totem-pay-tile::after{
  content: "Seleccionado";
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* PAGADO = GRIS */
.totem-pay-tile.is-paid{
  background:
    linear-gradient(180deg, #8c97a5 0%, #6d7785 100%);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  cursor: not-allowed;
  opacity: .97;
  box-shadow:
    0 16px 34px rgba(27, 36, 49, .28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -16px 28px rgba(0,0,0,.12);
}

.totem-pay-tile.is-paid .totem-pay-tile-badge{
  background: rgba(0,0,0,.18);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}

.totem-pay-actions{
  margin-top: 24px;
}

@media (max-width: 768px){
  .totem-pay-tile{
    padding: 24px 18px 20px;
    border-radius: 24px;
    gap: 10px;
  }

  .totem-pay-tile-title{
    font-size: 1.45rem;
  }

  .totem-pay-tile-sub{
    font-size: .95rem;
    max-width: 92%;
  }

  .totem-pay-tile-price{
    font-size: 1.25rem;
  }
}

@media (max-width: 860px){
  .totem-abonados-grid{
    grid-template-columns: 1fr;
  }

  .totem-pay-tile{
    min-height: 180px;
  }

  .totem-pay-tile-title{
    font-size: 1.35rem;
  }
}

/* ==========================================
   PAGOS - INICIO
========================================== */

.totem-payments-view{
  width: 100%;
}

.totem-payments-wrap{
  width: min(100%, 980px);
  margin: 0 auto;
}

.totem-payments-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 10px;
}

.totem-payments-tile{
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  border-radius: 26px;
  text-decoration: none !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.totem-payments-tile:hover,
.totem-payments-tile:focus{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.26);
  text-decoration: none !important;
}

.totem-payments-tile:active{
  transform: scale(.985);
}

.totem-payments-tile-inner{
  text-align: center;
}

.totem-payments-tile-title{
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 12px;
}

.totem-payments-tile-text{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: .95;
}

.totem-payments-tile-abonados{
  background: linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
  border: 1px solid var(--totem-blue-2);
  color: #fff;
}

.totem-payments-tile-varios{
  background: linear-gradient(180deg, #19c37d 0%, #0fa968 100%);
  border: 1px solid #0fa968;
  color: #fff;
}

@media (max-width: 860px){
  .totem-payments-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .totem-payments-tile{
    min-height: 180px;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .totem-payments-tile-title{
    font-size: 1.6rem;
  }

  .totem-payments-tile-text{
    font-size: .98rem;
  }
}

/* ==========================================
   REDSYS REDIRECT
========================================== */

.totem-redirect-view{
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.totem-redirect-box{
  width: min(100%, 680px);
  padding: 34px 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(19,40,61,.96) 0%, rgba(16,35,56,.98) 100%);
  border: 1px solid var(--totem-border);
  box-shadow: var(--totem-shadow);
  text-align: center;
}

.totem-redirect-spinner{
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.12);
  border-top-color: var(--totem-blue);
  animation: totem-spin 1s linear infinite;
}

.totem-redirect-title{
  color: var(--totem-text);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 10px;
}

.totem-redirect-text{
  color: var(--totem-text-soft);
  font-size: 1.02rem;
  line-height: 1.45;
}

.totem-redirect-noscript{
  margin-top: 22px;
}

@keyframes totem-spin{
  to{
    transform: rotate(360deg);
  }
}

/* ==========================================
   PAGOS - SELECCIONAR MÉTODO
========================================== */

.totem-pay-method-view{
  width: 100%;
}

.totem-pay-method-wrap{
  width: min(100%, 980px);
  margin: 0 auto;
}

.totem-summary-table th:nth-child(2),
.totem-summary-table td:nth-child(2){
  width: 180px;
  text-align: right;
  white-space: nowrap;
}

.totem-summary-total-row th,
.totem-summary-total-row td{
  font-size: 1.08rem;
  font-weight: 900;
}

.totem-pay-method-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

.totem-pay-method-btn{
  width: 100%;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 18px;
  color: #fff !important;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.totem-pay-method-btn:hover,
.totem-pay-method-btn:focus{
  transform: translateY(-1px);
  text-decoration: none !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.26);
  color: #fff !important;
}

.totem-pay-method-btn:active{
  transform: scale(.985);
}

.totem-pay-method-btn-cash{
  background: linear-gradient(180deg, #19c37d 0%, #0fa968 100%);
  border: 1px solid #0fa968;
}

.totem-pay-method-btn-card{
  background: linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
  border: 1px solid var(--totem-blue-2);
}

.totem-pay-method-btn-wallet{
  background: linear-gradient(180deg, #f5b942 0%, #e09a00 100%);
  border: 1px solid #d38f00;
  color: #1b1404 !important;
}

.totem-pay-method-btn-wallet:hover,
.totem-pay-method-btn-wallet:focus{
  color: #1b1404 !important;
}
.totem-pay-method-actions form{
  margin: 0;
}

.totem-pay-method-actions .totem-pay-method-btn{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
}

/* ==========================================
   PAGOS PENDIENTES / VARIOS
========================================== */

.totem-pagos-pendientes-view{
  width: 100%;
}

.totem-pagos-pendientes-wrap{
  width: min(100%, 1180px);
  margin: 0 auto;
}

.totem-pagos-info-box{
  margin: 0 0 20px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--totem-text-soft);
}

.totem-pagos-info-box p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.totem-pagos-info-box p + p{
  margin-top: 10px;
}

.totem-pay-block + .totem-pay-block{
  margin-top: 20px;
}

.pago-table-wrap{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.pago-table{
  margin-bottom: 0;
  color: var(--totem-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-striped-color: var(--totem-text);
  --bs-table-hover-bg: rgba(47,128,255,.08);
  --bs-table-hover-color: var(--totem-text);
  --bs-table-color: var(--totem-text);
  --bs-table-border-color: rgba(255,255,255,.08);
}

.pago-table thead th{
  vertical-align: middle;
}

.pago-table thead tr:first-child th{
  background: linear-gradient(180deg, #19c37d 0%, #0fa968 100%) !important;
  color: #fff !important;
  font-size: 1.05rem;
  font-weight: 800;
  border-color: #0fa968 !important;
}

.pago-table thead tr:nth-child(2) th,
.pago-table thead tr:nth-child(3) th{
  background: linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%) !important;
  color: #fff !important;
  font-weight: 700;
  border-color: var(--totem-blue-2) !important;
}

.pago-table td,
.pago-table th{
  padding: .95rem .85rem;
  font-size: 1rem;
  vertical-align: middle;
}

.pago-table tbody tr.row-toggle{
  transition: background-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.pago-table tbody tr.row-toggle:not(.is-disabled):hover > td{
  background-color: rgba(255,255,255,.06);
}

.pago-table tbody tr.row-toggle.is-checked > td{
  background-color: rgba(15,169,104,.16) !important;
}

.pago-table tbody tr.row-toggle.is-checked > td:first-child{
  box-shadow: inset 4px 0 0 #0fa968;
}

.pago-table tbody tr.row-toggle.is-disabled{
  opacity: .68;
  cursor: not-allowed;
}

.pago-table tbody tr.row-toggle:not(.is-disabled){
  cursor: pointer;
}

.pago-table tbody tr > td:first-child{
  text-align: center;
  vertical-align: middle;
  width: 58px;
}

.pago-table input[type="checkbox"]{
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(1px);
  cursor: pointer;
}

.pago-table input[type="checkbox"]:disabled{
  cursor: not-allowed;
}

.pay-submit-wrap{
  margin-top: 24px;
}

@media (max-width: 768px){
  .totem-pagos-pendientes-wrap{
    width: 100%;
  }

  .totem-pagos-info-box{
    padding: 14px 16px;
    border-radius: 14px;
  }

  .pago-table td,
  .pago-table th{
    padding: .8rem .65rem;
    font-size: .94rem;
  }
}

html.totem-standalone body{
  overscroll-behavior: none;
}

.totem-loading-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,15,27,.72);
  backdrop-filter: blur(2px);
}

.totem-loading-overlay.d-none{
  display: none !important;
}

.totem-loading-spinner{
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.12);
  border-top-color: var(--totem-blue);
  animation: totem-spin 1s linear infinite;
}

.totem-bonos-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.totem-bono-select{
  display: block;
  margin: 0;
  cursor: pointer;
}

.totem-bono-tile{
  width: 100%;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #19c37d 0%, #0fa968 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.totem-bono-select:hover .totem-bono-tile{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}

.totem-bono-row-1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.totem-bono-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.totem-bono-check{
  flex: 0 0 auto;
  transform: scale(1.45);
  margin: 0;
  cursor: pointer;
}

.totem-bono-name{
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  word-break: break-word;
}

.totem-bono-price{
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 900;
  white-space: nowrap;
  text-align: right;
}

.totem-bono-row-2{
  margin-top: 10px;
  padding-left: 38px;
}

.totem-bono-desc{
  font-size: 1rem;
  font-weight: 700;
  opacity: .95;
  line-height: 1.3;
}

.totem-bono-check:checked ~ .totem-bono-name,
.totem-bono-check:checked ~ .totem-bono-price{
  color: #fff;
}

.totem-bono-tile:has(.totem-bono-check:checked){
  background: linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
  border-color: var(--totem-blue);
  box-shadow: 0 16px 30px rgba(31,111,255,.28);
}

@media (max-width: 860px){
  .totem-bonos-grid{
    grid-template-columns: 1fr;
  }

  .totem-bono-row-1{
    align-items: flex-start;
  }

  .totem-bono-name{
    font-size: 1.08rem;
  }

  .totem-bono-price{
    font-size: 1.02rem;
  }

  .totem-bono-row-2{
    padding-left: 34px;
  }
}

/* ==========================================
   BONOS - CONFIRMAR COMPRA
========================================== */

.totem-bonos-confirm-view{
  width: 100%;
}

.totem-bonos-confirm-wrap{
  width: min(100%, 860px);
  margin: 0 auto;
}

.totem-bonos-confirm-card{
  padding: 28px 24px;
}

.totem-bonos-confirm-head{
  text-align: center;
  margin-bottom: 24px;
}

.totem-bonos-confirm-name{
  color: var(--totem-text);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
}

.totem-bonos-confirm-meta{
  margin-top: 10px;
  color: var(--totem-text-soft);
  font-size: 1.08rem;
  line-height: 1.35;
}

.totem-bonos-confirm-meta strong{
  color: var(--totem-text);
  font-weight: 900;
}

.totem-bonos-confirm-alert{
  margin-bottom: 24px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f5b942 0%, #e09a00 100%);
  color: #1b1404;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 12px 24px rgba(224,154,0,.20);
}

.totem-bonos-entrega-block{
  margin-bottom: 26px;
}

.totem-bonos-entrega-title{
  margin-bottom: 14px;
  color: var(--totem-text);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
}

.totem-entrega-option{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  cursor: pointer;
}

.totem-entrega-check{
  transform: scale(1.45);
  margin: 0;
  cursor: pointer;
}

.totem-entrega-tile{
  width: 100%;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #19c37d 0%, #0fa968 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.totem-entrega-option:hover .totem-entrega-tile{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}

.totem-entrega-check:checked + .totem-entrega-tile{
  background: linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
  border-color: var(--totem-blue);
  box-shadow: 0 16px 30px rgba(31,111,255,.28);
}

.totem-entrega-name{
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
}

.totem-entrega-desc{
  font-size: .96rem;
  font-weight: 700;
  opacity: .94;
  line-height: 1.25;
}

.totem-bonos-confirm-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.totem-btn-block{
  width: 100%;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 1.05rem;
  font-weight: 800;
}

@media (max-width: 860px){
  .totem-bonos-confirm-card{
    padding: 20px 16px;
  }

  .totem-bonos-confirm-alert{
    font-size: 1.08rem;
  }

  .totem-entrega-tile{
    min-height: 80px;
  }
}

/* ==========================================
   BONOS - MÉTODO DE PAGO
========================================== */

.totem-bonos-pay-view{
  width: 100%;
}

.totem-bonos-pay-wrap{
  width: min(100%, 860px);
  margin: 0 auto;
}

.totem-bonos-pay-card{
  padding: 28px 24px;
}

.totem-bonos-pay-head{
  text-align: center;
  margin-bottom: 24px;
}

.totem-bonos-pay-name{
  color: var(--totem-text);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.1;
}

.totem-bonos-pay-meta{
  margin-top: 10px;
  color: var(--totem-text-soft);
  font-size: 1.06rem;
  line-height: 1.35;
}

.totem-bonos-pay-price{
  margin-top: 10px;
  color: var(--totem-text);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
}

.totem-bonos-pay-delivery{
  margin-top: 10px;
  color: var(--totem-text-soft);
  font-size: 1rem;
  line-height: 1.35;
}

.totem-bonos-pay-delivery strong{
  color: var(--totem-text);
  font-weight: 900;
}

.totem-bonos-pay-alert{
  margin-bottom: 24px;
  text-align: center;
  color: var(--totem-text-soft);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.totem-bonos-pay-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (max-width: 860px){
  .totem-bonos-pay-card{
    padding: 20px 16px;
  }

  .totem-bonos-pay-alert{
    font-size: 1.02rem;
  }
}

.totem-clock{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  color: var(--totem-text);
  line-height: 1.1;
}

.totem-clock-time{
  font-size: 1.8rem;
  font-weight: 900;
}

.totem-clock-date{
  margin-top: 4px;
  font-size: .95rem;
  color: var(--totem-text-soft);
  font-weight: 600;
}

/* ==========================================
   ALQUILER FLOW - NUEVA INTERFAZ
========================================== */

.totem-rental-flow{
  width:min(100%, 1360px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.totem-flow-step{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.totem-flow-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}

.totem-flow-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--totem-text-soft);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.totem-flow-title{
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.totem-flow-subtitle{
  margin:12px 0 0;
  max-width:760px;
  font-size:1.05rem;
  line-height:1.45;
  color:var(--totem-text-soft);
}

.totem-flow-back{
  flex:0 0 auto;
}

.totem-flow-back .totem-btn{
  min-width:180px;
  min-height:64px;
  border-radius:20px;
}

/* TIMELINE */

.totem-flow-track{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:14px;
}

.totem-flow-track-item{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.totem-flow-track-num{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1rem;
  font-weight:900;
}

.totem-flow-track-label{
  color:#fff;
  font-size:1rem;
  font-weight:800;
  line-height:1.1;
}

.totem-flow-track-item.is-done{
  background:linear-gradient(180deg, rgba(25,195,125,.18), rgba(15,169,104,.12));
  border-color:rgba(25,195,125,.26);
}

.totem-flow-track-item.is-done .totem-flow-track-num{
  background:linear-gradient(180deg, #19c37d 0%, #10b876 100%);
}

.totem-flow-track-item.is-active{
  background:linear-gradient(180deg, rgba(0,111,252,.24), rgba(0,111,252,.14));
  border-color:rgba(0,111,252,.34);
  box-shadow:0 16px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,111,252,.08);
}

.totem-flow-track-item.is-active .totem-flow-track-num{
  background:linear-gradient(180deg, var(--totem-blue) 0%, var(--totem-blue-2) 100%);
}

/* GRID FICHAS */

.totem-rental-tiles{
  --bs-gutter-x:22px;
  --bs-gutter-y:22px;
}

.totem-rental-tiles .tile{
  position:relative;
  width:100%;
  min-height:220px;
  padding:26px 22px;
  border-radius:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(93,220,255,.16);
  color:#fff !important;
  text-align:center;
  text-decoration:none !important;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -18px 36px rgba(0,0,0,.10);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.totem-rental-tiles .tile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(74,211,255,.14) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 36%);
}

.totem-rental-tiles .tile::after{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(103,228,255,.95) 50%, transparent 100%);
  opacity:.85;
}

.totem-rental-tiles .tile:hover:not(:disabled),
.totem-rental-tiles .tile:focus-visible:not(:disabled){
  transform:translateY(-4px);
  box-shadow:
    0 22px 48px rgba(0,0,0,.34),
    0 0 0 1px rgba(103,228,255,.10),
    0 0 30px rgba(0,170,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -18px 36px rgba(0,0,0,.12);
}

.totem-rental-tiles .tile:active:not(:disabled){
  transform:scale(.985);
}

.totem-rental-tiles .tile > div:first-child{
  position:relative;
  z-index:1;
  font-size:1.9rem;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}

.totem-rental-tiles .tile .sub{
  position:relative;
  z-index:1;
  margin-top:2px;
  font-size:1.02rem;
  line-height:1.3;
  font-weight:600;
  color:rgba(244,248,252,.82);
  text-wrap:balance;
}

/* VARIACIONES CALENDARIOS */

.totem-rental-tiles .tile-cal{
  aspect-ratio:.84 / 1;
}

.totem-rental-tiles .tile-cal-0{
  background:linear-gradient(180deg, rgba(20,78,100,.96) 0%, rgba(11,45,60,.98) 100%);
}

.totem-rental-tiles .tile-cal-1{
  background:linear-gradient(180deg, rgba(18,85,122,.96) 0%, rgba(9,49,78,.98) 100%);
}

.totem-rental-tiles .tile-cal-2{
  background:linear-gradient(180deg, rgba(11,97,123,.96) 0%, rgba(9,58,79,.98) 100%);
}

.totem-rental-tiles .tile-cal-3{
  background:linear-gradient(180deg, rgba(25,97,113,.96) 0%, rgba(14,53,70,.98) 100%);
}

.totem-rental-tiles .tile-cal-4{
  background:linear-gradient(180deg, rgba(30,87,120,.96) 0%, rgba(14,48,76,.98) 100%);
}

.totem-rental-tiles .tile-cal-5{
  background:linear-gradient(180deg, rgba(24,88,100,.96) 0%, rgba(12,43,62,.98) 100%);
}

/* DIAS */

.totem-rental-tiles .tile-day-ok{
  aspect-ratio:.84 / 1;
  background:linear-gradient(180deg, rgba(18,93,115,.96) 0%, rgba(10,54,74,.98) 100%);
}

.totem-rental-tiles .tile-day-disabled{
  aspect-ratio:.84 / 1;
  background:linear-gradient(180deg, rgba(113,122,136,.68) 0%, rgba(78,88,102,.78) 100%);
  border-color:rgba(255,255,255,.08);
  cursor:not-allowed;
  opacity:.6;
  box-shadow:
    0 12px 26px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.totem-rental-tiles .tile-day-disabled::after{
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
}

/* HORAS */

.totem-rental-tiles-hours .tile{
  min-height:190px;
  aspect-ratio:auto;
}

.totem-rental-tiles .tile.btn.btn-light{
  background: linear-gradient(180deg, #2b7a68 0%, #225f52 100%) !important;
  border: 1px solid rgba(122, 188, 167, .20) !important;
  color: #fff !important;
  box-shadow:
    0 14px 28px rgba(8, 41, 34, .24),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -16px 28px rgba(0,0,0,.10) !important;
}

.totem-rental-tiles .tile.btn.btn-light .sub{
  color: rgba(232, 241, 238, .84) !important;
}

.totem-rental-tiles .tile-hour-busy{
  background:linear-gradient(180deg, rgba(123,132,146,.70) 0%, rgba(82,92,108,.82) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  cursor:not-allowed;
  opacity:.68;
}

.totem-rental-tiles .tile-hour-busy .sub{
  color:rgba(255,255,255,.76) !important;
}

/* ETAPAS LARGAS */

.totem-flow-stage{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(300px, 390px);
  gap:24px;
  align-items:start;
}

.totem-flow-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.totem-flow-side{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.totem-choice-card{
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(19,40,61,.94), rgba(16,35,56,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.totem-choice-card-head{
  margin-bottom:18px;
}

.totem-choice-card-title{
  margin:0;
  font-size:1.5rem;
  font-weight:900;
  line-height:1.08;
  color:#fff;
}

.totem-choice-card-subtitle{
  margin:10px 0 0;
  color:var(--totem-text-soft);
  font-size:1rem;
  line-height:1.4;
}

.totem-summary-side-card{
  padding:22px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(8,27,49,.92) 0%, rgba(9,22,38,.98) 100%);
  border:1px solid rgba(0,111,252,.20);
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(0,111,252,.06);
}

.totem-summary-side-card.is-total-card{
  background:linear-gradient(180deg, rgba(0,111,252,.18) 0%, rgba(9,25,45,.96) 100%);
  border-color:rgba(0,111,252,.28);
}

.totem-summary-side-title{
  margin-bottom:16px;
  color:#fff;
  font-size:1.15rem;
  font-weight:900;
  line-height:1.1;
}

.totem-summary-side-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--totem-text-soft);
  font-size:1rem;
  font-weight:700;
}

.totem-summary-side-row:first-of-type{
  border-top:0;
  padding-top:0;
}

.totem-summary-side-row strong{
  color:#fff;
  font-size:1.08rem;
  font-weight:900;
  text-align:right;
}

.totem-summary-side-row.is-total{
  margin-top:2px;
  padding-top:18px;
}

.totem-summary-side-row.is-total strong{
  font-size:1.65rem;
  line-height:1;
}

/* INPUTS DEL DESCUENTO */

#discountBox .form-label{
  color:#fff;
  font-size:1.02rem;
  font-weight:800;
}

#discountBox .form-select,
#discountBox .form-control{
  min-height:66px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:1.08rem;
  padding:16px 18px;
  box-shadow:none;
}

#discountBox .form-select:focus,
#discountBox .form-control:focus{
  border-color:rgba(0,111,252,.52);
  box-shadow:0 0 0 3px rgba(0,111,252,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
}

#discountBox .form-control::placeholder{
  color:rgba(255,255,255,.42);
}

#discountBox .alert,
#calcError.alert,
#accError.alert,
#confirmError.alert{
  border-radius:18px;
  border:0;
  font-weight:700;
}

/* ACCESORIOS */

.totem-rental-acc-list{
  --bs-gutter-x:18px;
  --bs-gutter-y:18px;
}

.totem-rental-acc-list .acc-tile{
  min-height:170px;
  grid-template-columns:auto 1fr;
  gap:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  padding:20px;
}

.totem-rental-acc-list .acc-name{
  font-size:1.3rem;
}

.totem-rental-acc-list .acc-price{
  font-size:1.02rem;
}

.totem-rental-acc-list .acc-check{
  transform:scale(1.55);
}

/* CONFIRMACION */

.totem-confirm-text{
  margin:0;
  font-size:1.16rem;
  line-height:1.6;
  color:#fff;
}

.totem-confirm-extras{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.totem-confirm-extras-title{
  margin-bottom:10px;
  font-size:1rem;
  font-weight:900;
  color:#fff;
}

.totem-confirm-extras-list{
  margin:0;
  padding-left:20px;
  color:var(--totem-text-soft);
  font-size:1rem;
  line-height:1.5;
}

.totem-confirm-total{
  color:#fff;
  font-size:clamp(2.2rem, 3.4vw, 3rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
}

/* BOTONES DE PAGO */

.totem-pay-method-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.totem-pay-method-btn{
  min-height:70px;
  border-radius:22px;
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:none;
}

.totem-pay-method-btn:disabled,
.totem-pay-btn:disabled{
  opacity:.55;
  pointer-events:none;
  filter:grayscale(.08);
}

/* MENSAJES DE CARGA */

.totem-rental-tiles .alert{
  border-radius:22px;
  border:0;
  padding:22px 20px;
  font-weight:700;
}

/* RESPONSIVE */

@media (max-width: 1220px){
  .totem-flow-track{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .totem-flow-stage{
    grid-template-columns:1fr;
  }

  .totem-flow-side{
    order:-1;
  }
}

@media (max-width: 860px){
  .totem-flow-head{
    flex-direction:column;
    align-items:stretch;
  }

  .totem-flow-track{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .totem-flow-track-item{
    min-height:78px;
    padding:14px 16px;
    border-radius:18px;
  }

  .totem-flow-title{
    font-size:clamp(1.7rem, 6vw, 2.2rem);
  }

  .totem-rental-tiles .tile,
  .totem-rental-tiles .tile-cal,
  .totem-rental-tiles .tile-day-ok,
  .totem-rental-tiles .tile-day-disabled{
    min-height:180px;
    aspect-ratio:auto;
    border-radius:24px;
  }

  .totem-rental-tiles .tile > div:first-child{
    font-size:1.55rem;
  }

  .totem-choice-card,
  .totem-summary-side-card{
    padding:18px;
    border-radius:22px;
  }

  .totem-rental-acc-list .acc-tile{
    min-height:140px;
  }
}

@media (max-width: 560px){
  .totem-flow-track{
    grid-template-columns:1fr;
  }

  .totem-rental-tiles .col-6,
  .totem-rental-tiles .col-lg-4{
    width:100%;
  }

  .totem-flow-back .totem-btn{
    width:100%;
  }
}

/* ==========================================
   ALQUILER FLOW - GRID REAL DE FICHAS
========================================== */

#calGrid.totem-rental-tiles,
#diasGrid.totem-rental-tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 1fr));
  gap:22px;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

#horasGrid.totem-rental-tiles{
  display:grid;
  grid-template-columns:repeat(5, minmax(150px, 1fr));
  gap:16px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

#accList.totem-rental-tiles{
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:18px;
  width:100%;
}

#calGrid.totem-rental-tiles > [class*="col-"],
#diasGrid.totem-rental-tiles > [class*="col-"],
#horasGrid.totem-rental-tiles > [class*="col-"],
#accList.totem-rental-tiles > [class*="col-"]{
  width:100%;
  max-width:none;
  padding:0 !important;
  margin:0 !important;
  flex:none !important;
}

/* SOLO bajamos a 2 columnas cuando de verdad sea pequeño */
@media (max-width: 900px){
  #calGrid.totem-rental-tiles,
  #diasGrid.totem-rental-tiles,
  #horasGrid.totem-rental-tiles{
    grid-template-columns:repeat(2, minmax(180px, 1fr));
    max-width:760px;
  }
}

@media (max-width: 560px){
  #calGrid.totem-rental-tiles,
  #diasGrid.totem-rental-tiles,
  #horasGrid.totem-rental-tiles,
  #accList.totem-rental-tiles{
    grid-template-columns:1fr;
    max-width:420px;
  }
}

/* ==========================================
   HORAS AGRUPADAS POR PISTA (COLUMNAS FIJAS)
========================================== */

#horasGrid.totem-hour-columns{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(150px, 1fr));
  gap:18px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

.totem-hour-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.totem-hour-column-title{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 12px;
  border-radius:20px;
  text-align:center;
  font-size:1.08rem;
  font-weight:900;
  line-height:1.15;
  color:#fff;
  background:linear-gradient(180deg, rgba(20,78,100,.96) 0%, rgba(11,45,60,.98) 100%);
  border:1px solid rgba(93,220,255,.16);
  box-shadow:
    0 12px 26px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.totem-hour-column-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.totem-hour-column-list .tile{
  width:100%;
  min-height:120px;
  padding:16px 12px;
  border-radius:22px;
}

.totem-hour-column-list .tile > div:first-child{
  font-size:1.18rem;
}

.totem-hour-column-list .tile .sub{
  font-size:.86rem;
}

/* 4 columnas si baja un poco */
@media (max-width: 1200px){
  #horasGrid.totem-hour-columns{
    grid-template-columns:repeat(4, minmax(150px, 1fr));
    max-width:1080px;
  }
}

/* 3 columnas */
@media (max-width: 980px){
  #horasGrid.totem-hour-columns{
    grid-template-columns:repeat(3, minmax(150px, 1fr));
    max-width:860px;
  }
}

/* 2 columnas */
@media (max-width: 760px){
  #horasGrid.totem-hour-columns{
    grid-template-columns:repeat(2, minmax(150px, 1fr));
    max-width:560px;
  }
}

/* 1 columna */
@media (max-width: 560px){
  #horasGrid.totem-hour-columns{
    grid-template-columns:1fr;
    max-width:420px;
  }
}

.totem-rental-tiles-hours .tile > div:first-child,
.totem-hour-column-list .tile > div:first-child{
  font-size: .92rem !important;
  line-height: 1.05;
}

.totem-rental-tiles-hours .tile .sub,
.totem-hour-column-list .tile .sub{
  font-size: .72rem !important;
  line-height: 1.15;
}

.totem-rental-tiles-hours .tile,
.totem-hour-column-list .tile{
  min-height: 96px !important;
  padding: 12px 8px !important;
}

/* ==========================================
   DESCUENTO - AJUSTES VISUALES
========================================== */

/* En este paso no queremos la columna lateral */
.totem-flow-stage-discount{
  display:block;
  max-width:920px;
  margin:0 auto;
}

.totem-choice-card-discount{
  max-width:920px;
  margin:0 auto;
}

/* Resumen superior del descuento */
.totem-discount-summary-inline{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}

.totem-discount-summary-box{
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.totem-discount-summary-label{
  margin-bottom:8px;
  color:var(--totem-text-soft);
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.totem-discount-summary-value{
  color:#fff;
  font-size:1.45rem;
  font-weight:900;
  line-height:1.05;
}

/* Botón continuar debajo del bloque de descuento */
.totem-discount-actions{
  margin-top:22px;
}

.totem-discount-actions .totem-pay-btn{
  width:100%;
  min-height:68px;
}

/* Select y opciones visibles */
#discountBox .form-select{
  background-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

#discountBox .form-select option{
  background:#102338 !important;
  color:#ffffff !important;
}

#discountBox .form-select:focus{
  background-color:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-color:rgba(0,111,252,.48) !important;
  box-shadow:0 0 0 3px rgba(0,111,252,.14) !important;
}

/* Inputs de socios también más legibles */
#discountBox .form-control{
  background-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

#discountBox .form-control::placeholder{
  color:rgba(255,255,255,.48) !important;
}

#discountBox .form-control:focus{
  background-color:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-color:rgba(0,111,252,.48) !important;
  box-shadow:0 0 0 3px rgba(0,111,252,.14) !important;
}

/* Mensajes automáticos de descuento */
#discountBox .alert{
  border-radius:18px;
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

/* Responsive */
@media (max-width: 700px){
  .totem-discount-summary-inline{
    grid-template-columns:1fr;
  }
}

/* ==========================================
   EXTRAS - AJUSTES VISUALES
========================================== */

.totem-flow-stage-acc{
  display:block;
  max-width:1100px;
  margin:0 auto;
}

.totem-choice-card-acc{
  max-width:1100px;
  margin:0 auto;
}

.totem-acc-summary-inline{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}

.totem-acc-summary-box{
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.totem-acc-summary-box-total{
  background:linear-gradient(180deg, rgba(0,111,252,.14) 0%, rgba(255,255,255,.05) 100%);
  border-color:rgba(0,111,252,.20);
}

.totem-acc-summary-label{
  margin-bottom:8px;
  color:var(--totem-text-soft);
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.totem-acc-summary-value{
  color:#fff;
  font-size:1.45rem;
  font-weight:900;
  line-height:1.05;
}

.totem-acc-actions{
  margin-top:22px;
}

.totem-acc-actions .totem-pay-btn{
  width:100%;
  min-height:68px;
}

/* Extras algo más finos visualmente */
.totem-rental-acc-list{
  --bs-gutter-x:16px;
  --bs-gutter-y:16px;
}

.totem-rental-acc-list .acc-tile{
  min-height:150px;
  border-radius:22px;
}

/* Responsive */
@media (max-width: 860px){
  .totem-acc-summary-inline{
    grid-template-columns:1fr;
  }
}

/* ==========================================
   PAGO - AJUSTES VISUALES
========================================== */

.totem-flow-stage-pay{
  display:block;
  max-width:980px;
  margin:0 auto;
}

.totem-choice-card-pay{
  max-width:980px;
  margin:0 auto;
}

.totem-pay-summary-inline{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:22px;
}

.totem-pay-summary-box{
  padding:22px 24px;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.totem-pay-summary-box-total{
  text-align:center;
  background:linear-gradient(180deg, rgba(0,111,252,.18) 0%, rgba(16,35,56,.96) 100%);
  border-color:rgba(0,111,252,.24);
  box-shadow:
    0 16px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.totem-pay-summary-label{
  margin-bottom:10px;
  color:var(--totem-text-soft);
  font-size:.92rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.totem-pay-summary-value{
  color:#fff;
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
}

.totem-pay-actions-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.totem-pay-actions-grid .totem-pay-method-btn{
  min-height:74px;
  border-radius:22px;
  font-size:1.08rem;
  font-weight:900;
  box-shadow:0 14px 28px rgba(0,0,0,.20);
}

.totem-pay-actions-grid .totem-pay-method-btn:hover,
.totem-pay-actions-grid .totem-pay-method-btn:focus{
  box-shadow:0 18px 34px rgba(0,0,0,.26);
}

.totem-choice-card-pay .totem-confirm-text{
  margin-top:4px;
  font-size:1.14rem;
  line-height:1.6;
  color:#fff;
}

.totem-choice-card-pay .totem-confirm-extras{
  margin-top:22px;
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.totem-choice-card-pay .totem-confirm-extras-title{
  margin-bottom:10px;
  color:#fff;
  font-size:1rem;
  font-weight:900;
}

.totem-choice-card-pay .totem-confirm-extras-list{
  margin:0;
  padding-left:18px;
  color:var(--totem-text-soft);
  font-size:.98rem;
  line-height:1.5;
}

@media (max-width: 760px){
  .totem-pay-actions-grid{
    grid-template-columns:1fr;
  }

  .totem-pay-actions-grid .totem-pay-method-btn{
    min-height:68px;
  }
}

/* ==========================================
   PAGO OK
========================================== */

.totem-ok-view{
  width:min(100%, 920px);
  margin:0 auto;
  padding:12px 0 8px;
}

.totem-ok-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  padding:34px 28px 30px;
  text-align:center;
  background:linear-gradient(180deg, rgba(19,40,61,.96) 0%, rgba(16,35,56,.98) 100%);
  border:1px solid var(--totem-border);
  box-shadow:var(--totem-shadow);
}

.totem-ok-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(74,211,255,.10) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 36%);
}

.totem-ok-icon-wrap{
  position:relative;
  z-index:1;
  width:118px;
  height:118px;
  margin:0 auto 24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(35,133,109,.20) 0%, rgba(27,112,93,.18) 100%);
  border:1px solid rgba(126,212,184,.22);
  box-shadow:
    0 18px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.totem-ok-icon{
  font-size:3.5rem;
  line-height:1;
  font-weight:900;
  color:#e6fbf3;
}

.totem-ok-heading{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  color:var(--totem-text);
  font-size:clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.totem-ok-text{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0 auto;
  color:var(--totem-text-soft);
  font-size:1.08rem;
  line-height:1.55;
  text-wrap:balance;
}

.totem-ok-extra{
  position:relative;
  z-index:1;
  margin-top:22px;
  min-height:24px;
}

@media (max-width: 860px){
  .totem-ok-card{
    padding:28px 18px 24px;
    border-radius:24px;
  }

  .totem-ok-icon-wrap{
    width:96px;
    height:96px;
    margin-bottom:20px;
  }

  .totem-ok-icon{
    font-size:2.9rem;
  }

  .totem-ok-heading{
    font-size:1.5rem;
  }

  .totem-ok-text{
    font-size:1rem;
  }
}

/* ==========================================
   AMPLIAR ALQUILER - PAGO
========================================== */

.totem-ampliar-pay-view{
  width:min(100%, 980px);
  margin:0 auto;
}

.totem-ampliar-pay-card{
  padding:24px;
}

.totem-ampliar-pay-head{
  text-align:center;
  margin-bottom:24px;
}

.totem-ampliar-pay-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--totem-text-soft);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.totem-ampliar-pay-title{
  margin:0;
  color:var(--totem-text);
  font-size:clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
}

.totem-ampliar-pay-subtitle{
  margin:10px 0 0;
  color:var(--totem-text-soft);
  font-size:1.02rem;
  line-height:1.45;
}

.totem-ampliar-pay-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:18px;
  align-items:stretch;
  margin-bottom:22px;
}

.totem-ampliar-pay-list{
  padding:20px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.totem-ampliar-pay-list-title{
  margin:0 0 14px;
  color:var(--totem-text);
  font-size:1.08rem;
  font-weight:900;
  line-height:1.1;
}

.totem-ampliar-pay-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}

.totem-ampliar-pay-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.totem-ampliar-pay-item-name{
  color:var(--totem-text);
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
}

.totem-ampliar-pay-item-price{
  color:var(--totem-text-soft);
  font-size:.96rem;
  font-weight:800;
  white-space:nowrap;
}

.totem-ampliar-pay-total{
  padding:20px 22px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(0,111,252,.18) 0%, rgba(16,35,56,.96) 100%);
  border:1px solid rgba(0,111,252,.24);
  box-shadow:
    0 16px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.totem-ampliar-pay-total-label{
  color:var(--totem-text-soft);
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.totem-ampliar-pay-total-value{
  margin-top:10px;
  color:var(--totem-text);
  font-size:clamp(2rem, 3vw, 2.8rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
}

.totem-ampliar-pay-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.totem-ampliar-pay-actions .totem-pay-method-btn{
  min-height:72px;
  border-radius:22px;
  font-size:1.08rem;
  font-weight:900;
}

@media (max-width: 860px){
  .totem-ampliar-pay-card{
    padding:18px;
  }

  .totem-ampliar-pay-summary{
    grid-template-columns:1fr;
  }

  .totem-ampliar-pay-item{
    padding:12px 14px;
  }

  .totem-ampliar-pay-title{
    font-size:1.55rem;
  }

  .totem-ampliar-pay-subtitle{
    font-size:.98rem;
  }
}

/* ==========================================
   FRANJAS HORARIAS
========================================== */

.totem-rental-bands{
  --bs-gutter-x:22px;
  --bs-gutter-y:22px;
}

.totem-rental-bands .tile-band{
  min-height:210px;
  aspect-ratio:.92 / 1;
}

.totem-rental-bands .tile-band .sub{
  max-width:90%;
}

.totem-band-count{
  position:relative;
  z-index:1;
  margin-top:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:.86rem;
  font-weight:800;
  line-height:1;
}

.totem-rental-bands .tile-band-0{
  background:linear-gradient(180deg, rgba(20,78,100,.96) 0%, rgba(11,45,60,.98) 100%);
}

.totem-rental-bands .tile-band-1{
  background:linear-gradient(180deg, rgba(18,85,122,.96) 0%, rgba(9,49,78,.98) 100%);
}

.totem-rental-bands .tile-band-2{
  background:linear-gradient(180deg, rgba(11,97,123,.96) 0%, rgba(9,58,79,.98) 100%);
}

.totem-rental-bands .tile-band-3{
  background:linear-gradient(180deg, rgba(25,97,113,.96) 0%, rgba(14,53,70,.98) 100%);
}

#franjasGrid.totem-rental-tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 1fr));
  gap:22px;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

#franjasGrid.totem-rental-tiles > [class*="col-"]{
  width:100%;
  max-width:none;
  padding:0 !important;
  margin:0 !important;
  flex:none !important;
}

@media (max-width: 980px){
  #franjasGrid.totem-rental-tiles{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
    max-width:760px;
  }
}

@media (max-width: 560px){
  #franjasGrid.totem-rental-tiles{
    grid-template-columns:1fr;
    max-width:420px;
  }
}

/* CASH VIEW */

.totem-pay-cash-view{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100%;
}

.totem-pay-cash-wrap{
  width:100%;
  max-width:720px;
}

.totem-pay-cash-card{
  text-align:center;
  padding:32px 28px;
}

.totem-pay-cash-total{
  font-size:3.2rem;
  font-weight:800;
  margin:18px 0 26px;
  color:var(--totem-green);
}

.totem-pay-cash-info{
  margin-bottom:20px;
}

.totem-pay-cash-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--totem-border);
  font-size:1.1rem;
}

.totem-pay-cash-row span{
  color:var(--totem-text-soft);
}

.totem-pay-cash-row strong{
  font-size:1.3rem;
}

.totem-pay-cash-status{
  margin:20px 0;
  padding:14px;
  border-radius:14px;
  background:var(--totem-panel-2);
  font-weight:600;
}

.totem-pay-cash-actions{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
}

/* ESTADOS CASH */

#cashStatus.normal{
  background: var(--totem-panel-2);
  color: var(--totem-text);
}

#cashStatus.ok{
  background: #0fa968;
  color: #fff;
}

#cashStatus.error{
  background: #b00020;
  color: #fff;
}