/* Configuración → Dominios de envío (dominios.js): una tarjeta por dominio con su estado y la tabla de registros DNS para
   copiar. Con los colores del espacio (espacio.css), de día y de noche; aquí solo se suman los del estado. */

#sending-domains {
  --dominio-listo: #1d7a55;
  --dominio-pendiente: #8a5a00;
  --dominio-falla: #b42332;
}
html[data-theme="dark"] #sending-domains {
  --dominio-listo: #5fd3a2;
  --dominio-pendiente: #f2c46b;
  --dominio-falla: #ff9a9a;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) #sending-domains {
    --dominio-listo: #5fd3a2;
    --dominio-pendiente: #f2c46b;
    --dominio-falla: #ff9a9a;
  }
}

.dominio-agregar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 1rem 0 1.5rem; }
.dominio-agregar label { flex: 1 1 16rem; max-width: 24rem; margin: 0; }

.dominio { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.dominio-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.dominio-cabeza h4 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.dominio-estado { font-size: 0.85rem; font-weight: 600; }
.dominio-estado::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 50%; background: currentColor; }
.dominio-estado.es-listo { color: var(--dominio-listo); }
.dominio-estado.es-pendiente { color: var(--dominio-pendiente); }
.dominio-estado.es-falla { color: var(--dominio-falla); }

.dominio-registros { margin: 0.75rem 0; font-size: 0.92rem; }
.dominio-registros td { vertical-align: top; }
.dominio-valor { max-width: 22rem; }
.dominio-copiar { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.dominio-copiar code { font-family: ui-monospace, monospace; font-size: 0.85em; overflow-wrap: anywhere; word-break: break-all; }
.dominio-ok { color: var(--dominio-listo); font-weight: 600; white-space: nowrap; }
.dominio-falta { color: var(--dominio-falla); font-weight: 600; white-space: nowrap; }
.dominio-duda { color: var(--texto-suave); white-space: nowrap; }

/* En el celular, cada registro como una ficha: tipo arriba, nombre y valor a todo el ancho. */
@media (max-width: 640px) {
  .dominio { padding: 0.9rem; }
  .dominio-registros thead { display: none; }
  .dominio-registros tr { display: grid; gap: 0.35rem; padding: 0.6rem 0; border-bottom: 1px solid var(--borde); }
  .dominio-registros td { padding: 0; border: 0; max-width: none; }
  .dominio-registros td[data-label]::before { content: attr(data-label); display: block; font-size: 0.78rem; color: var(--texto-suave); }
}