:root{
    --bg:#0b0f14; --card:#111827; --muted:#9CA3AF; --text:#E5E7EB;
    --primary:#2563EB; --primary-600:#1D4ED8; --border:#1F2937; --ok:#10B981; --warn:#F59E0B; --danger:#EF4444;
    --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .dpia-admin{max-width:1120px;margin:24px auto;padding:12px 16px;color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif;}
  .dpia-header{display:flex;align-items:center;justify-content:space-between;margin:8px 0 16px}
  .dpia-header .title h2{margin:0;font-size:22px}
  .dpia-header .subtitle{margin:4px 0 0;color:var(--muted)}
  .dpia-header .actions{display:flex;gap:8px;align-items:center}
  .dpia-header select{background:var(--card);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:10px}
  .grid{display:grid;grid-template-columns: 1fr 1fr; gap:16px}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  .form .fieldset{border-top:1px solid var(--border);padding-top:14px;margin-top:12px}
  .form .fieldset:first-child{border-top:none;padding-top:0;margin-top:0}
  .form h3{margin:0 0 10px 0;font-size:15px}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  input,select{background:#0b1220;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 12px;outline:none}
  input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.25)}
  .hint{color:var(--muted);font-size:12px;margin-top:4px}
  .image-upload-row{display:flex;gap:8px;align-items:center}
  .image-upload-row input{flex:1 1 auto;min-width:0}
  .input-with-action{display:flex;gap:8px;align-items:center}
  .input-with-action input{flex:1 1 auto;min-width:0}
  .input-with-action .btn{padding:10px 12px}
  .btn{border:none;border-radius:12px;padding:10px 14px;cursor:pointer}
  .btn.primary{background:var(--primary);color:#fff}
  .btn.primary:hover{background:var(--primary-600)}
  .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
  .preview .preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .size{font-size:12px;color:var(--muted);background:#0b1220;border:1px solid var(--border);border-radius:999px;padding:4px 10px}
  .dpia-popup-anchor{display:flex;align-items:center;justify-content:center;min-height:210px;border:2px dashed var(--border);border-radius:14px}
  .placeholder{color:var(--muted)}
  .errors{margin-top:8px;color:#fff;background:rgba(239,68,68,.1);border:1px solid var(--danger);padding:10px;border-radius:10px}
  .errors ul{margin:6px 0 0 18px}
  /* Switch */
  .switch{display:inline-flex;align-items:center;gap:10px}
  .switch input{display:none}
  .slider{width:42px;height:24px;background:#334155;border-radius:999px;position:relative;transition:.2s}
  .slider:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s}
  .switch input:checked + .slider{background:var(--ok)}
  .switch input:checked + .slider:before{transform:translateX(18px)}
  .switch-label{color:var(--muted)}
  @media (max-width: 900px){ .grid{grid-template-columns:1fr} .row{grid-template-columns:1fr} }



  /* Snippet box */
.snippet-box {
  margin-top: 16px;
}

.snippet-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.snippet-box__title {
  margin: 0;
}

.snippet-box__host {
  display: flex;
  align-items: center;
  gap: 8px;
}

.snippet-box__host-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9CA3AF;
}

.snippet-box__host-select {
  background: #0b1220;
  color: #E5E7EB;
  border: 1px solid #1F2937;
  border-radius: 10px;
  padding: 6px 10px;
  outline: none;
}

.snippet-box__help {
  margin: 4px 0 12px;
  color: #9CA3AF;
}

/* Cada snippet */
.snippet {
  border: 1px solid #1F2937;
  border-radius: 12px;
  background: #0b1220;
  padding: 10px;
}

.snippet + .snippet {
  margin-top: 14px;
}

.snippet__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* Código */
.snippet__pre {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: #0a0f1a;
  color: #E5E7EB;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.5;
  overflow: auto;
}

/* Botones ya existentes */
.btn.ghost {
  background: transparent;
  border: 1px solid #374151;
  color: #E5E7EB;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.btn.ghost:hover { border-color: #4B5563; }















/* ===== Snippet section ===== */
.section { max-width: 980px; margin: 24px auto; padding: 0 16px; }

.snippet-box.card{
  background: #0b1220;               /* mismo fondo que el resto */
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 16px;
  color: #E5E7EB;
}

.snippet-box__head{
  display:flex; align-items:center; gap:16px;
  justify-content: space-between; margin-bottom:10px;
}

.snippet-box__title{ margin:0; font-size:18px; font-weight:600; color:#E5E7EB; }

.snippet-box__host-label{
  display:flex; align-items:center; gap:8px; font-size:12px; color:#9CA3AF;
}

.snippet-box__host-select{
  background:#0b1220; color:#E5E7EB;
  border:1px solid #1F2937; border-radius:10px; padding:6px 10px;
  outline:none;
}

.snippet-box__help{ margin:4px 0 12px; color:#9CA3AF; }

/* Cada bloque de código */
.snippet{
  background:#0e1628;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:10px;
}

.snippet + .snippet{ margin-top:14px; }

.snippet__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:6px;
}

.snippet__pre{
  margin:0;
  max-height: 220px;                 /* permite scroll si se excede */
  overflow:auto;
  background:#0b1220;
  border-radius:8px;
  padding:10px 12px;
  font: 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#C7D2FE;
  white-space: pre-wrap;             /* envuelve líneas largas */
  word-break: break-word;            /* evita desbordes */
  -webkit-font-smoothing: antialiased;
}

/* Botón ghost más visible sobre fondo oscuro */
.btn.ghost{
  background: transparent;
  border:1px solid #334155;
  color:#E5E7EB;
  padding:6px 10px; border-radius:10px; cursor:pointer;
}
.btn.ghost:hover{ border-color:#64748b; }

/* Responsive */
@media (max-width: 820px){
  .snippet-box__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .snippet__row strong{ font-size:12px; }
  .snippet__pre{ font-size:12px; }
}






/* ===== reset mínimo para esta sección ===== */
.dpia-admin *, .dpia-admin *::before, .dpia-admin *::after { box-sizing: border-box; }

/* ===== contenedor y header ===== */
.dpia-admin.section { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.dpia-admin .dpia-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.dpia-admin .title h2{ margin:0; font-size:24px; color:#e5e7eb; }
.dpia-admin .title .subtitle{ margin:4px 0 0; color:#9ca3af; }

.dpia-admin .actions{ display:flex; align-items:center; gap:10px; }
.dpia-admin .actions select{
  background:#0b1220; color:#e5e7eb; border:1px solid #1f2937;
  border-radius:10px; padding:8px 12px; height:38px;
}
.dpia-admin .btn{ height:38px; padding:0 12px; border-radius:10px; cursor:pointer; }
.dpia-admin .btn.ghost{ background:transparent; border:1px solid #334155; color:#e5e7eb; }
.dpia-admin .btn.ghost:hover{ border-color:#64748b; }
.dpia-admin .btn.primary{ background:#2563eb; color:white; border:none; }
.dpia-admin .btn.primary:hover{ filter:brightness(1.05); }

/* ===== grid principal ===== */
.dpia-admin .grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}

/* tarjetas */
.dpia-admin .card{
  background:#0b1220; border:1px solid #1f2937; border-radius:16px; padding:16px;
  color:#e5e7eb;
}

/* formulario */
.dpia-admin .form .fieldset + .fieldset{ margin-top:16px; }
.dpia-admin .form h3{ margin:0 0 10px; font-size:16px; color:#cbd5e1; }
.dpia-admin .form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dpia-admin .form label{ display:flex; flex-direction:column; gap:6px; }
.dpia-admin .form input, .dpia-admin .form select{
  width:100%; background:#0e1628; color:#e5e7eb; border:1px solid #1f2937;
  border-radius:10px; padding:10px 12px; outline:none;
}
.dpia-admin .form small.hint{ color:#94a3b8; }

/* errores */
.dpia-admin .errors{ background:#1f2937; color:#fecaca; border:1px solid #ef4444;
  border-radius:10px; padding:10px 12px; }

/* preview */
.dpia-admin .preview-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.dpia-admin .size{ font-size:12px; color:#9ca3af; }
.dpia-admin #previewAnchor{
  min-height:210px; display:flex; align-items:center; justify-content:center;
  background:#0e1628; border:1px dashed #334155; border-radius:12px; padding:8px;
}
.dpia-admin #previewAnchor .placeholder{ color:#94a3b8; }

/* snippet box (si lo usás debajo) */
.section .snippet-box.card{ background:#0b1220; border:1px solid #1f2937; border-radius:16px; padding:16px; color:#E5E7EB; margin-top:18px; }
.snippet-box__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:10px; }
.snippet-box__host-label{ display:flex; align-items:center; gap:8px; font-size:12px; color:#9CA3AF; }
.snippet-box__host-select{ background:#0b1220; color:#E5E7EB; border:1px solid #1F2937; border-radius:10px; padding:6px 10px; }
.snippet-box__help{ margin:4px 0 12px; color:#9CA3AF; }
.snippet{ background:#0e1628; border:1px solid #1f2937; border-radius:12px; padding:10px; }
.snippet + .snippet{ margin-top:14px; }
.snippet__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.snippet__pre{ margin:0; max-height:220px; overflow:auto; background:#0b1220; border-radius:8px; padding:10px 12px;
  font: 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#C7D2FE; white-space:pre-wrap; word-break:break-word; }

/* responsive */
@media (max-width: 980px){
  .dpia-admin .grid{ grid-template-columns: 1fr; }
  .dpia-admin .form .row{ grid-template-columns: 1fr; }
  .snippet-box__head{ flex-direction:column; align-items:flex-start; gap:8px; }
}








.dpia-modal[hidden]{display:none}
.dpia-modal{position:fixed;inset:0;z-index:9999}
.dpia-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.dpia-modal__panel{
  position:relative;max-width:920px;margin:4vh auto;background:#0b1220;color:#e5e7eb;
  border:1px solid #1f2937;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.5);padding:16px
}
.dpia-modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dpia-modal__body .row{display:flex;gap:12px;flex-wrap:wrap}
.dpia-modal__body label{display:flex;flex-direction:column;gap:6px;flex:1}
.dpia-modal__body input, .dpia-modal__body select, .dpia-modal__body textarea{
  background:#0f172a;border:1px solid #334155;color:#e5e7eb;border-radius:10px;padding:10px
}
.result label{margin-top:8px;display:block}

.dpia-lookup-list{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dpia-lookup-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:#0f172a;border:1px solid #334155;border-radius:10px;padding:10px 12px;
  color:#e5e7eb;cursor:pointer;text-align:left;width:100%
}
.dpia-lookup-item:hover{border-color:#2563EB;background:#111c33}
.dpia-lookup-item span{color:#9CA3AF;font-size:12px}