:root {
  --tinta: #16232e;
  --texto: #33424f;
  --suave: #64748b;
  --linea: #e3e8ee;
  --fondo: #f2f5f8;
  --blanco: #ffffff;
  --acento: #0f62b7;
  --acento-oscuro: #0c4e93;
  --acento-tenue: #e7f0fa;
  --ok: #177245;
  --ok-tenue: #e7f4ec;
  --alerta: #b45309;
  --alerta-tenue: #fdf3e3;
  --error: #b3261e;
  --error-tenue: #fbecea;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(22, 35, 46, 0.05), 0 4px 16px rgba(22, 35, 46, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

.oculto { display: none !important; }

/* ---------- Barra superior ---------- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tinta);
}

.marca strong { display: block; font-size: 16px; }

.marca-sub { font-size: 12.5px; color: var(--suave); }

.marca-icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--acento);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.estado { font-size: 13px; color: var(--suave); }
.estado.estado-ok { color: var(--ok); }
.estado.estado-alerta { color: var(--alerta); }

/* ---------- Aviso de clave ---------- */

.aviso-clave {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 28px;
  background: var(--alerta-tenue);
  border-bottom: 1px solid #ecd9b6;
  color: var(--alerta);
  font-size: 14px;
}

.aviso-clave input {
  padding: 7px 10px;
  border: 1px solid #ecd9b6;
  border-radius: 8px;
  font: inherit;
}

/* ---------- Layout ---------- */

.contenedor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 28px 64px;
  align-items: start;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}

.col-form { display: grid; gap: 18px; }
.col-destinos { display: grid; gap: 18px; position: sticky; top: 20px; }

h2 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--tinta);
}

.pista { font-size: 12.5px; font-weight: 400; color: var(--suave); }

/* ---------- Tabs de modo ---------- */

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #e6ebf1;
  border-radius: var(--radio);
}

.tab {
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--suave);
  cursor: pointer;
}

.tab.activa {
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 1px 3px rgba(22, 35, 46, 0.12);
}

/* ---------- Formulario ---------- */

.campo { margin-bottom: 14px; }
.campo:last-child { margin-bottom: 0; }

.campo label {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta);
}

.campo label em { color: var(--error); font-style: normal; }

.campo input,
.campo textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
}

.campo input:focus,
.campo textarea:focus,
.aviso-clave input:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}

.campo textarea { resize: vertical; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* Editor Quill */

#editor { min-height: 220px; font-size: 15px; }

.ql-toolbar.ql-snow {
  border-color: var(--linea);
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
}

.ql-container.ql-snow {
  border-color: var(--linea);
  border-radius: 0 0 8px 8px;
  font-family: inherit;
}

/* ---------- Imágenes ---------- */

.fila-imagenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.img-banner { grid-column: 1 / -1; }

.img-titulo {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta);
}

.img-zona {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 110px;
  border: 1.5px dashed #c3cdd8;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}

.img-zona:hover { border-color: var(--acento); background: var(--acento-tenue); }

.img-placeholder { font-size: 13.5px; color: var(--suave); }

.img-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-quitar {
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--blanco);
  font: inherit;
  font-size: 12.5px;
  color: var(--error);
  cursor: pointer;
}

.img-nombre {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Sitios destino ---------- */

.destinos-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.destinos-cab h2 { margin: 0; }

.destinos-acciones { display: flex; gap: 6px; }

.btn-mini {
  padding: 4px 10px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--blanco);
  font: inherit;
  font-size: 12.5px;
  color: var(--texto);
  cursor: pointer;
}

.btn-mini:hover { border-color: var(--acento); color: var(--acento); }

.lista-sitios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sitio {
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.sitio.marcado { border-color: var(--acento); }

.sitio-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.sitio-cab input { accent-color: var(--acento); width: 16px; height: 16px; flex: none; }

.sitio-nombre { font-weight: 600; color: var(--tinta); font-size: 14px; }

.sitio-url {
  flex: 1;
  font-size: 12px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

.badge-falta { background: var(--alerta-tenue); color: var(--alerta); }

.sitio.sin-token .sitio-cab { cursor: not-allowed; opacity: 0.65; }

.sitio-banner-config {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  padding: 10px 12px 12px;
  border-top: 1px dashed var(--linea);
  background: #f8fafc;
}

.sitio-banner-config label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--suave);
  margin-bottom: 3px;
}

.config-slider { display: flex; gap: 6px; align-items: center; }

.sitio-banner-config select,
.sitio-banner-config input[type="number"] {
  padding: 6px 8px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  background: var(--blanco);
  max-width: 100%;
}

.sitio-banner-config select { flex: 1; min-width: 0; }

.slider-manual { width: 90px; }
.pos-banner { width: 64px; }

.btn-cargar-sliders {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: var(--blanco);
  font-size: 14px;
  color: var(--acento);
  cursor: pointer;
}

.btn-cargar-sliders:disabled { color: var(--suave); cursor: wait; }

.sitio-error {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--error);
  margin: 0;
}

/* ---------- Publicar ---------- */

.publicar-zona { display: grid; gap: 10px; }

.btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn-sec {
  background: var(--blanco);
  border: 1px solid #ecd9b6;
  color: var(--alerta);
}

.btn-publicar {
  padding: 13px 16px;
  background: var(--acento);
  color: #fff;
  font-size: 15px;
  box-shadow: var(--sombra);
  transition: background 0.15s;
}

.btn-publicar:hover { background: var(--acento-oscuro); }
.btn-publicar:disabled { background: #9db4cb; cursor: wait; }

.aviso-form {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--error-tenue);
  color: var(--error);
  font-size: 13.5px;
}

.progreso { margin: 0; font-size: 13.5px; color: var(--suave); }

/* ---------- Resultados ---------- */

.lista-resultados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.resultado {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
}

.resultado-ok { background: var(--ok-tenue); }
.resultado-error { background: var(--error-tenue); }

.resultado-icono {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

.resultado-ok .resultado-icono { background: var(--ok); }
.resultado-error .resultado-icono { background: var(--error); }

.resultado-cuerpo strong { color: var(--tinta); }

.resultado-cuerpo a { color: var(--acento); font-weight: 600; }

.resultado-detalle { color: var(--suave); }

.resultado-error .resultado-detalle { color: var(--error); }

.resultado-advertencias {
  grid-column: 2;
  margin: 2px 0 0;
  padding: 6px 8px 6px 24px;
  border-radius: 6px;
  background: var(--alerta-tenue);
  color: var(--alerta);
  font-size: 12.5px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .contenedor { grid-template-columns: 1fr; padding: 16px; }
  .col-destinos { position: static; }
  .barra { padding: 12px 16px; }
}

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