/*3a6df0 color azúl */
.emakers {
    display: flex;
}

.emakers .emakers-logo {
    width: 175px;
    height: auto;
    display: block;
}


*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;line-height:1.4;background:#0b0f14;color:#e6edf3}
.container{max-width:1000px;margin:16px auto;padding:0 16px}
h1{font-weight:700;margin:0 0 4px} .muted{opacity:.8;font-size:.9rem;margin:0}
.toolbar{display:flex;gap:8px;align-items:center;margin-top:12px}
.input{flex:1 1 auto;padding:10px 12px;border:1px solid #412929;background:#0e141b;color:#e6edf3;border-radius:10px;outline:none}
.input:focus{border-color:#d60812;box-shadow:0 0 0 3px rgba(246, 59, 59, 0.25)}
.btn{padding:10px 12px;border-radius:10px;border:1px solid #412a2a;background:#301b1b;color:#e6edf3;cursor:pointer}
.btn:hover{filter:brightness(1.1)} .btn-ghost{background:transparent}
.btn-primary:hover,
.btn-primary:focus {
  background: #b50710a3 !important;
  border-color: #b50710a3 !important;
  color: #fff !important;
}
.btn-primary{background:#d60812;border-color:#d60812;color:white}
.btn-small{padding:6px 10px;border-radius:8px}
.spacer{flex:1}

.table-wrap{border:1px solid #223; border-radius:12px; overflow:auto}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:#0d131a;color:#9fb3c8;text-align:left;padding:10px;border-bottom:1px solid #223;cursor:pointer}
tbody td{padding:10px;border-bottom:1px solid #17202a}
tbody tr:hover{background:#0f171f}
th.sort-asc::after{content:" \2191"} th.sort-desc::after{content:" \2193"}

.toggle-switch{position:relative;display:inline-flex;width:56px;height:32px;align-items:center}
.toggle-switch input{position:absolute;opacity:0;inset:0;margin:0}
.toggle-switch-background{position:absolute;inset:0;border-radius:9999px;background:#233341;border:1px solid #3a4a5a;transition:background .2s,border .2s}
.toggle-switch-handle{position:absolute;left:2px;top:2px;width:28px;height:28px;border-radius:9999px;background:#e6edf3;transition:transform .2s}
.toggle-switch input:checked + .toggle-switch-background{background:#2bad4e;border-color:#2bad4e}
.toggle-switch input:checked ~ .toggle-switch-handle{transform:translateX(24px)}
.actions{display:flex;gap:8px;align-items:center}


.admin-bar{max-width:1000px;margin:8px auto 0;padding:0 16px;display:flex;gap:8px}

.hidden{display:none}
.login-card{padding:16px;border:1px solid #223;border-radius:12px;background:#0e141b}
.stack{display:flex;flex-direction:column;gap:8px}
.actions{display:flex;gap:8px;align-items:center;margin-top:8px}


.json-modal::backdrop { background: rgba(0,0,0,.35); }
.json-modal{
  padding: 0;          /* quita el padding UA */
  border: none;        /* quita el borde UA */
  background: transparent; /* evita el fondo blanco */
  box-shadow: none;    /* por si el UA agrega sombra */
  color: inherit;
}
.json-wrap { width: min(880px, 92vw); max-height: 86vh; background: #111; color: #eee;
            border: 1px solid #333; border-radius: 16px; overflow: hidden; }
.json-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; 
            background: #181818; border-bottom: 1px solid #2a2a2a; }
.json-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
.json-head .spacer { flex: 1; }
.json-btn { padding: 8px 12px; font: inherit; border: 1px solid #2a2a2a; 
            background: #222; color: #eee; border-radius: 10px; cursor: pointer; }
.json-btn:hover { background: #262626; }
.json-btn.primary { background: #d60812; border-color: #c1121a; color: #fff; }
.json-btn.danger { background: #2a1b1b; border-color: #5a2c2c; color: #ffb3b3; }
.json-body { display: grid; grid-template-columns: 1fr 280px; gap: 0; }
.json-editor { padding: 10px 12px; background: #0e0e0e; border-right: 1px solid #1e1e1e; }
.json-editor textarea { width: 100%; height: 58vh; min-height: 260px; resize: vertical; 
                        padding: 12px 14px; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, 
                        Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                        font-size: 13px; line-height: 1.55; color: #e6e6e6; background: #0b0b0b;
                        border: 1px solid #262626; border-radius: 12px; outline: none; }
.json-editor textarea.invalid { border-color: #a33; box-shadow: 0 0 0 2px rgba(255,0,0,.15) inset; }
.json-side { padding: 12px; background: #111; }
.json-kv { display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 12px; color: #bbb; }
.json-row { display: flex; justify-content: space-between; gap: 8px; }
.json-row code { background: #171717; padding: 2px 6px; border-radius: 6px; color: #ddd; }
.json-error { margin-top: 8px; padding: 8px 10px; font-size: 12px; border-radius: 8px;
            background: #2b1a1a; color: #ffb5b5; border: 1px solid #5b2c2c; display: none; white-space: pre-wrap; }
.json-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px; background: #181818; 
            border-top: 1px solid #2a2a2a; }
@media (max-width: 900px){
.json-body { grid-template-columns: 1fr; }
.json-side { border-top: 1px solid #1e1e1e; }
}


/* === JSON Tree === */
.json-tree {
  margin-top: 10px;
  padding: 8px 10px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  max-height: 58vh;
  overflow: auto;
}
.json-tree details {
  padding-left: 10px;
  border-left: 1px dashed #2a2a2a;
  margin: 2px 0 2px 6px;
}
.json-tree summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  user-select: none;
}
.json-tree summary::-webkit-details-marker { display: none; }
.json-tree .key { color: #9cdcfe; }       /* claves */
.json-tree .type { color: #a3a3a3; }      /* tipos/longitud */
.json-tree .value.string { color: #ce9178; }
.json-tree .value.number { color: #b5cea8; }
.json-tree .value.boolean { color: #569cd6; }
.json-tree .value.null { color: #808080; font-style: italic; }
.json-tree .meta { opacity: .8; }


/* --- Modal JSON: layout grande con formateado arriba --- */
.json-wrap { width: min(1100px, 94vw); max-height: 90vh; } /* más ancho/alto */
.json-body {
  display: grid;
  grid-template-columns: 2fr 1fr; /* izquierda grande (formateado+raw), derecha meta */
  gap: 0;
}

.json-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #1e1e1e;
  background: #0e0e0e;
}

/* Área “formateado” (accordion) grande */
.json-formatted {
  padding: 10px 12px;
  border-bottom: 1px solid #1e1e1e;
  max-height: 54vh;       /* alto principal */
  overflow: auto;
}

/* El accordion hereda estilos de Bootstrap; solo afinamos tipografía */
#jsonAccordion {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

/* Controles editable inline */
.json-editable {
  display: inline-block;
  min-width: 60px;
  padding: 2px 6px;
  border: 1px dashed transparent;
  border-radius: 6px;
  outline: none;
  cursor: text;
}
.json-editable:focus {
  border-color: #d60812;
  box-shadow: 0 0 0 2px rgba(58, 109, 240, .25);
  background: #0b0b0b;
}

/* Textarea (raw) debajo */
.json-editor {
  padding: 10px 12px;
  background: #0e0e0e;
}
.json-editor textarea {
  width: 100%;
  height: 24vh;           /* más compacto porque lo “grande” es el formateado */
  min-height: 160px;
  resize: vertical;
}

/* NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO */

/* Layout amplio y cómodo del editor JSON */
.json-wrap { width: min(1100px, 94vw); max-height: 90vh; }
.json-body {
  display: grid;
  grid-template-columns: 2.5fr 0.5fr; /* izquierda (acordeón + raw) | derecha (meta + árbol) */
  gap: 0;
}

.json-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #1e1e1e;
  background: #0e0e0e;
}

/* Acordeón “formateado” arriba */
.json-formatted {
  padding: 10px 12px;
  border-bottom: 1px solid #1e1e1e;
  max-height: 54vh;
  overflow: auto;
}

#jsonAccordion {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

/* Raw textarea abajo */
.json-editor {
  padding: 10px 12px;
  background: #0e0e0e;
}
.json-editor textarea {
  width: 100%;
  height: 24vh;
  min-height: 160px;
  resize: vertical;
}

/* Editable inline highlight */
.json-editable {
  display: inline-block;
  min-width: 60px;
  padding: 2px 6px;
  border: 1px dashed transparent;
  border-radius: 6px;
  outline: none;
  cursor: text;
}
.json-editable:focus {
  border-color: #d60812;
  box-shadow: 0 0 0 2px rgba(58, 109, 240, .25);
  background: #0b0b0b;
}

#jsonAccordion .accordion .accordion { margin-left: .5rem; }

/* NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO NUEVO */


.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.pagination button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}