/* Panel de administración — todo lleva el prefijo adm-.
   24-10 (marca del sello): cada parte es una sección con una línea fina arriba, sin cajas. */

.adm-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px 40px;
  max-width: 1300px;
  align-items: start;
}

.adm-tarjeta {
  border-top: 1px solid var(--borde);
  padding: 20px 0 12px;
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.adm-tarjeta h3 {
  margin: 0;
  font: 600 20px var(--titulos);
  letter-spacing: -0.01em;
}

.adm-tarjeta h4 {
  margin: 10px 0 0;
  font: 600 15px var(--titulos);
  color: var(--texto);
}

.adm-ayuda { margin: 0; font-size: 13px; line-height: 1.5; }

.adm-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.adm-numero {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adm-numero strong {
  font: 600 24px var(--titulos);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.adm-numero span { font-size: 12px; }
.adm-vivo { color: var(--rojo); }

.adm-dato { display: grid; gap: 6px; }
.adm-dato > span { font-size: 12px; }

.adm-dato-valor {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.adm-dato-valor code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 8px 10px;
  font: 500 13px var(--numeros);
}

.adm-linea { display: flex; gap: 8px; }
.adm-linea .adm-entrada { flex: 1; min-width: 0; }

.adm-formulario { display: grid; gap: 12px; align-content: start; }

.adm-campo { display: grid; gap: 6px; }

.adm-campo-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
}

.adm-entrada {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
  color: var(--texto);
  font: 15px var(--cuerpo);
  width: 100%;
}

.adm-entrada:focus { outline: 2px solid var(--oro); outline-offset: -1px; }

textarea.adm-entrada { resize: vertical; }

.adm-boton-chico {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 8px 12px;
  font: 500 13px var(--cuerpo);
  cursor: pointer;
  white-space: nowrap;
}

.adm-boton-chico:hover { border-color: rgba(var(--suave-rgb), 0.55); }
.adm-peligro { color: var(--rojo); }

/* Personas y tutoriales: filas separadas por líneas finas */
.adm-tabla {
  display: grid;
  max-height: 420px;
  overflow-y: auto;
  border-top: 1px solid var(--borde);
}

.adm-persona {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}

.adm-persona-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adm-persona-info strong { overflow-wrap: anywhere; }
.adm-persona-info span { font-size: 12px; }

.adm-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.adm-error { color: var(--rojo); margin: 0; }
.adm-resultado { display: grid; gap: 6px; }
.adm-resultado p { margin: 0; font-size: 13px; }

.adm-progreso { width: 100%; accent-color: var(--oro); }

/* ---------- Tu marca (24-10): ocupa todo el ancho ----------
   A la izquierda el nombre y los colores; a la derecha la vista previa y el logo. */
.adm-marca { grid-column: 1 / -1; }

.adm-marca-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: start;
}

.adm-marca-lado {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.adm-colores {
  display: grid;
  border-top: 1px solid var(--borde);
}

.adm-color-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 116px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

.adm-color-textos {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adm-color-textos .tenue { font-size: 12px; }

.adm-color-muestra {
  width: 44px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: none;
  cursor: pointer;
}

.adm-color-muestra::-webkit-color-swatch-wrapper { padding: 3px; }
.adm-color-muestra::-webkit-color-swatch { border: 0; border-radius: 5px; }
.adm-color-muestra::-moz-color-swatch { border: 0; border-radius: 5px; }

.adm-hex {
  padding: 8px 10px;
  font: 500 14px var(--numeros);
  text-transform: uppercase;
}

/* Avisos de contraste: no impiden guardar */
.adm-avisos { display: grid; gap: 6px; }
.adm-avisos:empty { display: none; }

.adm-aviso {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto);
}

.adm-aviso::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo);
}

.adm-acciones-marca,
.adm-acciones-logo { justify-content: flex-start; align-items: center; }

/* Vista previa: una página en miniatura (sus colores van en línea, desde admin.js) */
.adm-vista {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 220px;
  border: 1px solid;
  border-radius: var(--radio);
  overflow: hidden;
}

.adm-vista-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-right: 1px solid;
  min-width: 0;
}

.adm-vista-sello {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
}

.adm-vista-sello svg { display: block; width: 100%; height: 100%; }

.adm-vista-logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px dashed;
  border-radius: 6px;
  font-size: 10px;
}

.adm-vista-nombre {
  font: 600 12px var(--titulos);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.adm-vista-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 11px;
}

.adm-vista-icono {
  width: 8px;
  height: 8px;
  border: 1.5px solid;
  border-radius: 50%;
  flex: none;
}

.adm-vista-pagina {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  min-width: 0;
}

.adm-vista-titulo {
  font: 600 20px var(--titulos);
  letter-spacing: -0.02em;
}

.adm-vista-estado { font-size: 11px; }

.adm-vista-marco {
  align-self: stretch;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
}

.adm-vista-boton {
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font: 600 12px var(--cuerpo);
}

@media (max-width: 1100px) {
  .adm-marca-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .adm-rejilla { grid-template-columns: 1fr; }
  .adm-persona { flex-direction: column; align-items: stretch; }
  .adm-acciones { justify-content: flex-start; }
  .adm-color-fila { grid-template-columns: minmax(0, 1fr) 40px 104px; gap: 10px; }
  .adm-vista { grid-template-columns: 96px minmax(0, 1fr); }
}