/* =========================================================
   PANEL DE ADMINISTRACIÓN — reusa variables de styles.css
========================================================= */
.admin-body{ background: var(--bg-light); min-height: 100vh; }

.admin-header{ background: var(--navy-900); padding: 1.4rem 1.5rem; }
.admin-header__inner{
  max-width: 1100px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.admin-header__inner h1{ color: var(--white); font-size: 1.3rem; }

.admin-main{ max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.admin-alert{ padding: 0.9rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.9rem; }
.admin-alert--ok{ background: rgba(46,125,50,0.12); color: #2e7d32; border: 1px solid rgba(46,125,50,0.3); }
.admin-alert--error{ background: rgba(198,40,40,0.1); color: #c62828; border: 1px solid rgba(198,40,40,0.3); }

.admin-count{ color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.4rem; }

.btn--danger{
  background: transparent; color: #c62828; border: 1px solid rgba(198,40,40,0.4);
  padding: 0.65rem 1.2rem; border-radius: var(--radius); font-weight:600; font-size:0.85rem; cursor:pointer;
  transition: background var(--transition);
}
.btn--danger:hover{ background: rgba(198,40,40,0.08); }

/* ---- Listado ---- */
.admin-lista{ display:flex; flex-direction:column; gap: 1.2rem; }
.admin-item{ background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.4rem; }
.admin-item--inactivo{ opacity: 0.6; }

.admin-item__cabecera{ display:flex; align-items:center; gap: 1.2rem; flex-wrap:wrap; }
.admin-item__foto{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--navy-700); display:flex; align-items:center; justify-content:center;
}
.admin-item__foto img{ width:100%; height:100%; object-fit:cover; }
.admin-item__foto span{ color:var(--white); font-family: var(--font-display); font-weight:700; }

.admin-item__titulo{ flex:1; min-width: 200px; }
.admin-item__titulo h2{ font-size: 1.1rem; margin-bottom: 0.15rem; }
.admin-item__titulo p{ font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.4rem; }

.admin-item__acciones{ display:flex; gap: 0.6rem; }
.admin-item__acciones .btn{ padding: 0.6rem 1.1rem; font-size: 0.82rem; }

.admin-item__detalle{ margin-top: 1rem; border-top: 1px solid var(--border-soft); padding-top: 0.8rem; }
.admin-item__detalle summary{ cursor:pointer; font-weight:600; font-size: 0.88rem; color: var(--gold-500); }

.admin-item__grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin-top: 1rem;
}
.admin-item__grid h3{ font-size: 0.82rem; text-transform:uppercase; letter-spacing:0.03em; color: var(--text-muted); margin-bottom: 0.2rem; }
.admin-item__grid p{ font-size: 0.9rem; }

.admin-item__tabla{ margin-top: 1.2rem; }
.admin-item__tabla h3{ font-size: 0.95rem; margin-bottom: 0.5rem; }
.admin-item__tabla table{ width:100%; border-collapse: collapse; }
.admin-item__tabla th, .admin-item__tabla td{ text-align:left; padding: 0.5rem 0.6rem; font-size: 0.82rem; border-bottom: 1px solid var(--border-soft); }
.admin-item__tabla th{ font-family: var(--font-display); color: var(--navy-900); }
.admin-item__tabla td{ color: var(--text-muted); }

/* ---- Formulario ---- */
.admin-form__section{
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.6rem; margin-bottom: 1.4rem;
}
.admin-form__section h2{ font-size: 1.05rem; margin-bottom: 1rem; }
.admin-form__subtitulo{ font-size: 0.9rem; color: var(--text-muted); margin: 1.1rem 0 0.6rem; }

.admin-form__label{ display:block; font-size: 0.85rem; font-weight:600; color: var(--navy-900); margin-bottom: 0.3rem; }

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form select{
  width:100%; padding: 0.65rem 0.8rem; border: 1px solid var(--border-soft); border-radius: 8px;
  font-family: var(--font-body); font-size: 0.9rem; margin-bottom: 0.9rem; background: var(--white);
}
.admin-form input[type="file"]{ margin-bottom: 0.5rem; }

.admin-form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items:start; }
.admin-form__row .filter-check{ margin-bottom: 0; }
@media (max-width: 640px){ .admin-form__row{ grid-template-columns: 1fr; } }

.admin-form__foto{ display:flex; align-items:center; gap: 1.2rem; margin-bottom: 1.2rem; }
.admin-form__foto-preview{
  width:84px; height:84px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--bg-light); border: 1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem; color: var(--text-muted);
}
.admin-form__foto-preview img{ width:100%; height:100%; object-fit:cover; }

.admin-form__checks{ display:flex; flex-wrap:wrap; gap: 0.4rem 1.2rem; }
.admin-form__checks--scroll{ max-height: 200px; overflow-y:auto; display:block; }
.admin-form__checks .filter-check{ width: auto; }

.repetible{ display:flex; flex-direction:column; gap: 0.6rem; margin-bottom: 0.8rem; }
.repetible__fila{
  display:grid; grid-template-columns: 1fr 1fr auto; gap: 0.6rem; align-items:center;
}
.repetible--4col .repetible__fila{ grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.repetible--6col .repetible__fila{ grid-template-columns: repeat(6, 1fr) auto; }
.repetible__fila input{ margin-bottom: 0; }
@media (max-width: 900px){
  .repetible--4col .repetible__fila, .repetible--6col .repetible__fila{ grid-template-columns: 1fr; }
}

.js-quitar-fila{
  border:none; background: rgba(198,40,40,0.08); color:#c62828; cursor:pointer;
  width:34px; height:34px; border-radius:8px; font-size:0.9rem; flex-shrink:0;
}
.js-quitar-fila:hover{ background: rgba(198,40,40,0.16); }

.admin-form__acciones{ display:flex; gap: 1rem; margin-top: 1rem; }

/* =========================================================
   MENÚ PRINCIPAL DEL PANEL — agregar al final de css/admin.css
========================================================= */

.panel-menu{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 900px;
}
@media (max-width: 768px){ .panel-menu{ grid-template-columns: 1fr; } }

.panel-menu__card{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align:center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.panel-menu__card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.panel-menu__icono{ font-size: 2.2rem; display:block; margin-bottom: 0.8rem; }
.panel-menu__card h2{ font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--navy-900); }
.panel-menu__card p{ font-size: 0.85rem; color: var(--text-muted); }

/* Agregar al final de css/admin.css (además de lo que ya pegaste antes) */
.btn--disabled{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  display: inline-block;
}

/* =========================================================
   PANEL DE BANNERS — pega TODO este bloque al final de
   css/admin.css (borra cualquier intento anterior de estas
   mismas clases para evitar reglas duplicadas o a medias).
========================================================= */

.banner-seccion{
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.6rem; margin-bottom: 1.6rem;
}
.banner-seccion__head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;
  margin-bottom: 1.2rem;
}
.banner-seccion__head h2{ font-size: 1.1rem; }
.banner-seccion__limite{ font-size: 0.85rem; color: var(--text-muted); font-style: italic; }

.banner-lista{ display:flex; flex-direction:column; gap: 1rem; }

.banner-item{
  display:flex; align-items:center; gap: 1.2rem; flex-wrap:wrap;
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem;
}
.banner-item--oculto{ opacity: 0.55; }

.banner-item__preview{
  width: 90px; height: 60px; border-radius: 8px; overflow:hidden; flex-shrink:0;
  background: var(--bg-light); display:flex; align-items:center; justify-content:center;
  font-size: 0.72rem; color: var(--text-muted); text-align:center;
}
.banner-item__preview img{ width:100%; height:100%; object-fit:cover; }

.banner-item__info{
  flex: 1 1 70%;
  max-width: 70%;
  min-width: 180px;
}
.banner-item__info h3{ font-size: 1rem; margin-bottom: 0.15rem; }
.banner-item__info p{ font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; word-break: break-all; }
.banner-item__archivo{ font-size: 0.8rem; color: var(--text-muted); }

.banner-item__acciones{
  flex: 1 1 30%;
  max-width: 30%;
  display:flex; gap: 0.5rem; flex-wrap:wrap; justify-content:flex-end;
}
.banner-item__acciones .btn{ padding: 0.55rem 1rem; font-size: 0.8rem; }

.btn--disabled{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  display: inline-block;
}

/* =========================================================
   MENÚ PRINCIPAL DEL PANEL — agregar al final de css/admin.css
========================================================= */

.panel-menu{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.4rem;
  max-width: 1000px;
}
@media (max-width: 768px){ .panel-menu{ grid-template-columns: 1fr; } }

.panel-menu__card{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align:center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.panel-menu__card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.panel-menu__icono{ font-size: 2.2rem; display:block; margin-bottom: 0.8rem; }
.panel-menu__card h2{ font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--navy-900); }
.panel-menu__card p{ font-size: 0.85rem; color: var(--text-muted); }