:root{
  --nav-w: 220px;
  --blue-900:#183244;
  --blue-800:#1d3a50;
  --blue-600:#1e73be;
  --bg:#f4f6f7;
  --card:#ffffff;
  --muted:#6b7b84;
  --ink:#23303a;
  --accent:#0b5dc6;
  --ok:#1bb55c;
  --radius:10px;
}

html,body,#root{height:100%;margin:0;font-family:"Inter",Roboto,sans-serif;background:linear-gradient(#f6f8f9,#eef2f3);color:var(--ink)}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px;box-sizing:border-box}
.login-card{width:100%;max-width:520px;background:var(--card);border-radius:14px;padding:36px;box-shadow:0 6px 18px rgba(20,30,40,.08),inset 0 1px 0 rgba(255,255,255,.6);text-align:center}
.login-card h1{margin:0 0 18px;font-size:32px;font-weight:800;color:#2f444c}
.input-field input{border-radius:8px;height:46px;padding-left:14px;border:1px solid #e6ecee;box-shadow:none}


.btn-login{
  width:100%;
  height:46px;
  border-radius:8px;
  background:linear-gradient(180deg,var(--blue-600),#1161b1);
  box-shadow:0 6px 12px rgba(17,98,176,.16);
  font-weight:600;
  color: #fff;      /* ← Añadido para texto blanco */
  border: none;      /* ← Añadido para quitar el borde */
  outline: none;     /* ← Añadido para quitar el borde al hacer clic */
}

/* APP LAYOUT */
.app-root{min-height:100vh;display:flex;flex-direction:row;}

/* TOPBAR (mobile/compact) */
.topbar{
  display:none;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--blue-900),var(--blue-800));
  color:#eaf6ff;padding:12px 14px;box-shadow:0 2px 14px rgba(0,0,0,.08)
}
.topbar .brand{font-weight:800}
.burger{border:0;background:transparent;color:#fff;cursor:pointer}
.burger i{font-size:26px}

/* SIDEBAR */
.sidebar{
  width:var(--nav-w);min-height:100vh;
  background:linear-gradient(180deg,var(--blue-900),var(--blue-800));
  color:#e9f2f7;box-shadow:4px 0 18px rgba(10,20,30,.06);
  padding:22px 14px;box-sizing:border-box;position:fixed;left:0;top:0;overflow:auto;
  transform:translateX(0);transition:transform .25s ease;
}
.sidebar .brand{font-size:18px;font-weight:800;margin-bottom:14px;line-height:1.15}
.sidebar nav{margin-top:4px}
.side-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;margin:4px 0;cursor:pointer;
  color:rgba(255,255,255,.92);position:relative
}
.side-item i.material-icons{font-size:20px}
.side-item:hover{background:rgba(255,255,255,.05)}

.side-item.active{
  background: var(--accent); /* Fondo azul oscuro */
  color: #fff; /* Texto blanco */
  font-weight: 700;
}

.side-item.active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent);
}

/* MAIN CONTENT */
.main{margin-left:var(--nav-w);padding:28px;box-sizing:border-box;width:100%;min-height:100vh}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.header h2{font-size:26px;margin:0;font-weight:800;color:#26343b}

/* DASH KPIs */
.kpi-row{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.kpi{background:var(--card);flex:0 0 180px;min-height:90px;border-radius:10px;padding:16px;box-shadow:0 6px 14px rgba(20,30,40,.04);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.kpi small{color:var(--muted);margin-bottom:6px}
.kpi strong{font-size:26px;color:var(--blue-900)}

/* GENERIC CARD */
.card-box{background:var(--card);border-radius:10px;padding:16px;box-shadow:0 6px 14px rgba(20,30,40,.03);margin-bottom:14px}
.card-box h4{margin:0 0 10px 0;font-weight:800}

/* TABLE */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:700;padding:10px 6px;color:#40585f}
.tbl td{padding:10px 6px;border-top:1px solid #f1f4f5;color:#2d3b41}
.link{color:var(--accent);font-weight:700;text-decoration:none}

/* FORMS simples */
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.form-grid .full{grid-column:1/-1}
.input, .select{
  width:100%;border:1px solid #e6ecee;border-radius:8px;min-height:42px;padding:10px;box-sizing:border-box;background:#fff
}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border-radius:10px;border:0;background:var(--blue-600);color:#fff;font-weight:700;cursor:pointer}
.btn.secondary{background:#6c7a86}
.btn.success{background:var(--ok)}
.btn.sm{height:34px;border-radius:8px;font-size:.9rem;padding:0 10px}
.actions{display:flex;gap:8px}

/* MOBILE */
@media (max-width: 980px){
  .topbar{display:flex}
  .sidebar{transform:translateX(-100%);z-index:30}
  .app-root.nav-open .sidebar{transform:translateX(0)}
  .main{margin-left:0;padding:18px}
  .form-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .form-grid{grid-template-columns:1fr}
}
.footer-small{color:var(--muted);font-size:13px;margin-top:10px}
.logo-sm{font-weight:800;letter-spacing:.6px;color:#eaf6ff}



.actions { gap: 6px; flex-wrap: wrap; }   /* por si el td queda chico */
.actions .btn { white-space: nowrap; }    /* que no parta palabras */

.btn.sm.assign {                           /* solo para "Asignar butacas" */
  font-size: .82rem;
  padding: 0 8px;
}
@media (max-width:1280px){
  .btn.sm.assign{ font-size:.78rem; padding:0 6px; }
}



/* Plano de asientos */
.seat-legend { display:flex; align-items:center; gap:14px; margin:8px 0 12px; }
.seat-dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.seat-dot.green { background:#22c55e; }
.seat-dot.red { background:#ef4444; }

.deck-tabs { display:flex; gap:8px; margin:8px 0 12px; flex-wrap:wrap; }
.deck-tabs .tab { background:#e9eef3; border-radius:10px; padding:4px 10px; cursor:pointer; }
.deck-tabs .tab.active { background:#cfe6ff; }

.seat-panel { margin-top:6px; }
.seat-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
.seat-row .row-label { width:16px; color:#64748b; text-align:right; margin-right:6px; }
.seat { width:24px; height:24px; border-radius:5px; background:#22c55e; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }
.seat.busy { background:#ef4444; cursor:not-allowed; }
.seat.gap { width:16px; height:1px; margin:0 8px; background:transparent; } /* pasillo */
.seat-cols { display:flex; align-items:center; gap:10px; margin-top:6px; padding-left:22px; color:#64748b; }
.seat-col-lbl { width:24px; text-align:center; }



.seat-free, .seat-taken {
  width:28px;height:28px;border-radius:6px;border:0;display:inline-block;
}


/* Collapsibles genéricos */
.collapsible .panel-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:0; cursor:pointer; user-select:none;
}
.collapsible .panel-content{ display:none; margin-top:10px; }
.collapsible.open .panel-content{ display:block; }
.collapsible .chev{ transition:transform .18s ease; font-size:18px; opacity:.7; }
.collapsible.open .chev{ transform:rotate(180deg); }


/* Centrar el plano de asientos dentro del card */
.seatmap{ display:flex; flex-direction:column; align-items:center; }
.seat-grid{ margin:0 auto; }      /* por si el contenedor es muy ancho */
.seat-legend{ display:flex; gap:14px; align-items:center; margin:6px 0 8px; }



/* Estilos para buscador, paginación y selectores con filtro */
.search-bar-wrap { margin-bottom: 12px; max-width: 300px; }
.sm-input { width: 100%; padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: #555; }
.pagination button { padding: 4px 10px; }
.field-wrap .search-select-wrap { position: relative; }
.field-wrap .search-select-wrap input[type="text"] { width: 100%; }
.field-wrap .search-select-options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; max-height: 200px; overflow-y: auto; z-index: 100; margin-top: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.field-wrap .search-select-options.visible { display: block; }
.field-wrap .search-select-options div { padding: 8px 12px; cursor: pointer; }
.field-wrap .search-select-options div:hover { background: #f0f4f8; }


/* --- Loading Overlay --- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #cfe2ff;
  border-bottom-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* --- Modern Scrollbars --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}


nav {

    background-color: transparent !important;
   
}


.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-small, .btn-floating, .dropdown-content, .collapsible, .sidenav {
    -webkit-box-shadow: none !important; 
    box-shadow: none !important; 
}




/* --- Bloqueo para dispositivos no soportados --- */
#orientation-warning {
  display: none; /* Oculto por defecto */
  position: fixed;
  inset: 0;
  background: #183244;
  color: #fff;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
#orientation-warning .icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: var(--accent);
}
#orientation-warning h3 {
  font-size: 24px;
  margin: 0 0 10px;
}
#orientation-warning p {
  max-width: 400px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
}

/* Media Query para mostrar el mensaje en pantallas pequeñas o tablets en vertical */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 767px) {
  #root {
    display: none !important; /* Ocultamos la aplicación */
  }
  #orientation-warning {
    display: flex !important; /* Mostramos el mensaje */
  }
}


.bus-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.bus-layout .row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.bus-layout .seat {
  width: 36px;
  height: 36px;
  border: 2px solid #999;
  background: transparent;
  color: #333;
  font-size: 13px;
  font-weight: bold;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bus-layout .seat.busy {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  cursor: not-allowed;
}
.bus-layout .gap {
  width: 34px;
  height: 1px;
}
.bus-layout .frente-label,
.bus-layout .fondo-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  margin: 4px 0;
}
.bus-layout .label-row {
  font-size: 11px;
  color: #999;
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
}
.bus-layout .col-label {
  width: 80px;
}


/* Ocultar campos globales (ahora se configuran por piso) */
.form-grid .form-item:has([name="filas"]),
.form-grid .form-item:has([name="butacas_total"])
 {
  display: none !important;
}