/* Minimal UI */
:root { --bg:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --accent:#38bdf8; --card:#111827; --ok:#22c55e; --err:#ef4444; --warn:#f59e0b; }
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;}
main.container{max-width:1100px;margin:0 auto;padding:16px;}
h1,h2,h3{margin:8px 0 12px;}
.card{background:var(--card);border-radius:14px;padding:14px;border:1px solid #1f2937;box-shadow:0 1px 0 rgba(255,255,255,0.03) inset;}
.row{display:flex;gap:12px;flex-wrap:wrap;}
.col{flex:1 1 300px;min-width:280px}
label{display:block;margin:.25rem 0 .1rem;font-size:.9rem;color:var(--muted)}
input,select,button,textarea{background:#0b1220;color:var(--fg);border:1px solid #1f2937;border-radius:10px;padding:.55rem .7rem;outline:none}
input,select,textarea{width:100%}
button{cursor:pointer}
button.primary{background:#0ea5e9;border-color:#0284c7}
button.ghost{background:transparent}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:#1f2937;color:var(--muted);font-size:.75rem}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px;font-size:.95rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.5rem;border-bottom:1px solid #1f2937;text-align:left}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.tabs{display:flex;gap:6px;margin:10px 0 14px}
.tab{padding:.4rem .7rem;border:1px solid #1f2937;border-radius:999px;background:#0b1220;color:#cbd5e1;cursor:pointer;font-size:.9rem}
.tab.active{background:#0ea5e9;color:#00111a;border-color:#0284c7}
.help{color:var(--muted);font-size:.9rem}
.hr{height:1px;background:#1f2937;margin:10px 0}
.small{font-size:.9rem}
.ok{color:var(--ok)} .err{color:var(--err)} .warn{color:var(--warn)}
code.inline{background:#0b1220;border:1px solid #1f2937;border-radius:8px;padding:.1rem .35rem}
.list{display:grid;gap:8px}
.item{padding:.6rem .7rem;border:1px solid #1f2937;border-radius:12px;background:#0b1220}
.link{color:var(--accent);text-decoration:none}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}

.modal header {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 8px;
  text-align: center;
}
.modal input {
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.modal .actions button.primary {
  background: var(--err);
  border-color: #b91c1c;
}
.modal .actions button.primary:hover {
  background: #dc2626;
}
.modal .actions button.ghost {
  background: transparent;
  border: 1px solid #475569;
}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9998}
.modal{background:#0b1220;border:1px solid #1f2937;border-radius:14px;max-width:560px;width:90%;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:9999}
.modal header{font-weight:600;font-size:1.2rem;margin-bottom:8px;text-align:center}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.modal .actions button.primary{background:var(--err);border-color:#b91c1c}
.modal .actions button.primary:hover{background:#dc2626}



/* Backdrop centrado y con margen interior para pantallas pequeñas */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9998;
  padding:24px;              /* evita que toque bordes */
  box-sizing:border-box;
}

/* Contenedor del modal: columna, con altura máxima y scroll interno */
.modal{
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:14px;
  width:min(560px, 96vw);
  max-height:calc(100vh - 48px);  /* nunca se sale de la pantalla */
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  z-index:9999;
}

/* Cabecera */
.modal header{
  font-weight:600; font-size:1.2rem;
  padding:14px 16px 8px; margin:0;
  text-align:center; border-bottom:1px solid #1f2937;
}

/* Cuerpo scrollable */
.modal .modal-body{
  padding:12px 16px;
  overflow:auto;           /* <— si el contenido es largo, scrollea dentro */
  flex:1 1 auto;
  min-height:0;            /* necesario para que flex respete overflow */
}

/* Barra de acciones siempre visible */
.modal .actions{
  display:flex; gap:8px; justify-content:flex-end;
  padding:12px 16px;
  border-top:1px solid #1f2937;
  background:#0b1220;
  position:sticky; bottom:0;  /* <— queda fija dentro del modal */
}

/* Botones */
.modal .actions button.primary{ background:var(--err); border-color:#b91c1c }
.modal .actions button.primary:hover{ background:#dc2626 }
.modal .actions button.ghost{ background:transparent; border:1px solid #475569 }

/* Mejoras móviles y safe-area */
@supports(padding: env(safe-area-inset-bottom)){
  .modal-backdrop{ padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}


/* === Scrollbar elegante en modales === */
.modal .modal-body {
  overflow-y: auto;
  scrollbar-width: thin;           /* Firefox */
  scrollbar-color: #444 #0b1220;   /* thumb color / track color */
}

/* WebKit (Chrome, Edge, Safari) */
.modal .modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal .modal-body::-webkit-scrollbar-track {
  background: #0b1220;
  border-radius: 10px;
}
.modal .modal-body::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}
.modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Botones dentro de modales */
.modal .actions button {
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 8px;
  min-width: auto;
  line-height: 1.2;
}

/* Botón principal (rojo, más pequeño y no tan cuadrado) */
.modal .actions button.primary {
  background: var(--err);
  border-color: #b91c1c;
  color: #fff;
  font-weight: 600;
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 8px;
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}
.modal .actions button.primary:hover {
  background: #dc2626;
  transform: scale(1.03);
}

/* Botón secundario */
.modal .actions button.ghost {
  background: transparent;
  border: 1px solid #475569;
  color: #cbd5e1;
  font-weight: 500;
}
.modal .actions button.ghost:hover {
  background: rgba(255,255,255,0.05);
}

/* Centrado visual y separación */
.modal .actions {
  justify-content: center;
  gap: 12px;
}


/* Campo de confirmación tipo "BORRAR" en modales */
.modal input#del_confirm,
.modal input#del_confirm_link {
  display: inline-block;
  width: 120px;                /* más pequeño */
  height: 28px;
  margin-top: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: #f87171;              /* rojo suave */
  background: #0f172a;         /* fondo oscuro */
  border: 1px solid #334155;
  border-radius: 6px;
  outline: none;
  transition: all 0.15s ease;
}

.modal input#del_confirm:focus,
.modal input#del_confirm_link:focus {
  border-color: #f87171;
  box-shadow: 0 0 4px #f87171;
  color: #fff;
}

/* Pestañas de locales */
.venue-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  overflow-x:auto; padding-bottom:6px; margin:4px 0 10px;
}
.venue-tab{
  padding:.35rem .6rem; border:1px solid #1f2937; border-radius:999px;
  background:#0b1220; color:#cbd5e1; cursor:pointer; white-space:nowrap;
  font-size:.9rem;
}
.venue-tab.active{ background:#0ea5e9; color:#00111a; border-color:#0284c7 }


/* --- GRID de locales --- */
.venues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 6px;
  overflow-y: auto;
  max-height: calc(100vh - 220px); /* ajusta según la altura del resto de la vista */
}

/* Cada tarjeta */
.venue-card {
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.venue-card:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

/* Imagen */
.venue-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #111827;
}

/* Texto */
.venue-card .info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}
.venue-card .name {
  font-weight: 600;
  font-size: 1rem;
  color: #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-card .city {
  font-size: 0.9rem;
  color: #9ca3af;
}
.venue-card .address {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-card .actions {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px 10px;
  gap: 4px;
}
.venue-card .actions button {
  flex: 1;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 6px;
}

/* --- Ficha modal de local --- */
.local-detail {
  text-align: center;
}
.local-detail img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 12px;
  margin-bottom: 10px;
  object-fit: cover;
}
.local-detail .kv {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #cbd5e1;
}
.local-detail .kv strong {
  color: #f3f4f6;
}
.local-detail .classes {
  margin-top: 12px;
  text-align: left;
  max-height: 220px;
  overflow-y: auto;
}
.local-detail .classes .item {
  border-bottom: 1px solid #1f2937;
  padding: 4px 0;
}
.local-detail .classes .item:last-child {
  border-bottom: none;
}

/* Iconos SVG inline */
.ico { width:18px; height:18px; vertical-align:-3px; margin-right:6px; opacity:.9; }
.local-detail .kv { display:flex; gap:10px; align-items:center; justify-content:center; }
.local-detail .kv .label { min-width:90px; text-align:right; color:#9ca3af; }
.local-detail .kv .value { color:#e5e7eb; }


/* Form compacto dentro del modal de clases */
.inline-form { display:grid; grid-template-columns: 1fr; gap:10px; }
.inline-form .row3 { display:grid; grid-template-columns: repeat(3, max-content); gap:12px; justify-content:center; }
.inline-form label { display:block; font-size:.85rem; color:#9ca3af; margin-bottom:4px; text-align:center; }
.inline-form input, .inline-form select {
  width:auto; min-width: 110px; max-width: 140px;
  text-align:center; padding:6px 8px; border-radius:8px;
}
.inline-form .hint { text-align:center; font-size:.8rem; color:#94a3b8; }


/* modal de clases aún más compacto */
.modal .inline-form { gap:8px; }
.modal .inline-form .row3 { gap:10px; }
.modal .actions { padding-top:10px; }


/* select de local más ancho dentro del modal */
.inline-form select#c_venue_id {
  min-width: 260px;
  max-width: 100%;
  text-align: left;
}

/* mantiene los otros selects compactos */
.inline-form select#c_level,
.inline-form select#c_day {
  min-width: 110px;
  max-width: 140px;
  text-align: center;
}

.toolbar h2 {
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#al_list.grid { display: grid; gap: 10px; }
@media (min-width: 720px){ #al_list.grid { grid-template-columns: 1fr 1fr; } }
.item .right { margin-left: auto; }
.chk { display:block; }


.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body input[type="url"],
.modal-body input[type="file"]{
  width:100%;
  box-sizing:border-box;
  min-width:0;
}

.title.with-badge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.badge{
  min-width:26px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:center;
}