/* ============================================================
   hechizos.css — Estilos del Mapa de Hechizos
   /hechizos/hechizos.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #05000a;
    font-family: 'Inter', system-ui, sans-serif;
    color: #ccc;
}

/* ══════════════════════════════════════
   NAV (top bar)
══════════════════════════════════════ */
#hm-nav {
    position: fixed; top: 0; left: 0; right: 0; height: 44px;
    background: rgba(5,0,10,0.98);
    border-bottom: 1px solid rgba(212,175,55,0.18);
    display: flex; align-items: center; gap: 0;
    z-index: 200; flex-shrink: 0;
    overflow: visible;
}
#hm-nav-left {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    border-right: 1px solid rgba(255,255,255,0.06);
    height: 100%; flex-shrink: 0;
}
#hm-title {
    font-family: 'Cinzel', serif; font-size: 0.8em;
    color: #d4af37; letter-spacing: 2px; white-space: nowrap;
}
#hm-back {
    font-size: 0.65em; color: #555;
    text-decoration: none; transition: color 0.15s;
}
#hm-back:hover { color: #aaa; }

/* ── Toolbar ── */
#hm-toolbar {
    display: flex; align-items: center; gap: 5px;
    padding: 0 10px; flex: 1; height: 100%;
    overflow: visible; scrollbar-width: none;
}
#hm-toolbar::-webkit-scrollbar { display: none; }
.hm-tab-sep {
    width: 1px; height: 20px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0; margin: 0 3px;
}
.hm-btn {
    font-size: 0.62em; padding: 4px 10px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #888; cursor: pointer; white-space: nowrap;
    transition: all 0.13s; font-family: inherit;
    user-select: none; flex-shrink: 0;
}
.hm-btn:hover  { background: rgba(255,255,255,0.09); color: #ccc; }
.hm-btn.activo { background: rgba(0,210,255,0.12); border-color: rgba(0,210,255,0.45); color: #00d2ff; }
.hm-btn.gold   { background: rgba(212,175,55,0.09); border-color: rgba(212,175,55,0.4); color: #d4af37; }
.hm-btn.gold:hover   { background: rgba(212,175,55,0.18); }
.hm-btn.danger { background: rgba(180,50,50,0.12); border-color: rgba(180,70,70,0.45); color: #c97070; }
.hm-btn.danger:hover { background: rgba(180,50,50,0.22); color: #e08888; }
.hm-btn.verde  { background: rgba(50,200,100,0.09); border-color: rgba(50,200,100,0.35); color: #32c864; }
.hm-btn.verde:hover  { background: rgba(50,200,100,0.18); }
.hm-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Buscador central ── */
#hm-search-bar {
    flex: 1; display: flex; justify-content: center; align-items: center;
    padding: 0 12px;
}
#hm-search-central {
    width: 100%; max-width: 480px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px; color: #ddd;
    font-size: 0.72em; padding: 6px 12px;
    font-family: inherit; outline: none;
    transition: border-color 0.15s, background 0.15s;
}
#hm-search-central:focus {
    border-color: rgba(212,175,55,0.55);
    background: rgba(255,255,255,0.1);
}
/* FIX: placeholder legible — antes era #3a3a55 (invisible) */
#hm-search-central::placeholder { color: #666; }

/* ── Pool de PJ (dropdown visual) ── */
.hm-pj-pool-wrap { position: relative; flex-shrink: 0; }
.hm-pj-pool-btn {
    font-size: 0.63em; padding: 4px 10px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #888; cursor: pointer; white-space: nowrap;
    transition: all 0.13s; font-family: inherit; display: flex;
    align-items: center; gap: 6px;
}
.hm-pj-pool-btn.activo { background: rgba(0,210,255,0.1); border-color: rgba(0,210,255,0.4); color: #00d2ff; }
.hm-pj-pool-btn:hover { background: rgba(255,255,255,0.08); color: #ccc; }
.hm-pj-pool-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 220px; background: rgba(8,6,20,0.99);
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 10px; z-index: 400;
    padding: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.8);
}
.hm-pj-pool-dropdown.open { display: block; }
.hm-pool-title {
    font-size: 0.56em; letter-spacing: 1.5px; text-transform: uppercase;
    color: #3a3a55; font-weight: 700; margin-bottom: 7px; padding: 0 2px;
}
.hm-pool-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 5px; margin-bottom: 8px;
}
.hm-pool-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 7px 4px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    transition: all 0.15s; text-decoration: none;
}
.hm-pool-card:hover { background: rgba(212,175,55,0.07); border-color: rgba(212,175,55,0.3); }
.hm-pool-card.activo { background: rgba(0,210,255,0.08); border-color: rgba(0,210,255,0.35); }
.hm-pool-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; object-position: top;
    background: #111; border: 2px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.hm-pool-card.activo .hm-pool-avatar { border-color: rgba(0,210,255,0.5); }
.hm-pool-nombre {
    font-size: 0.56em; color: #aaa; text-align: center;
    line-height: 1.2; word-break: break-word;
    overflow: hidden; max-width: 62px;
}
.hm-pool-card.activo .hm-pool-nombre { color: #00d2ff; }
.hm-pool-todos {
    width: 100%; font-size: 0.62em; padding: 5px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px; color: #666; cursor: pointer; font-family: inherit;
    transition: all 0.13s; margin-top: 4px;
}
.hm-pool-todos:hover { color: #ccc; background: rgba(255,255,255,0.07); }

/* ══════════════════════════════════════
   HERRAMIENTAS OP (barra top — desactivada, contenido movido al panel izquierdo)
══════════════════════════════════════ */
#hm-op-tools { display: none; }

/* ══════════════════════════════════════
   CANVAS
══════════════════════════════════════ */
#hm-canvas-wrap {
    position: fixed;
    top: 44px; left: 0; right: 0; bottom: 32px;
    overflow: hidden; cursor: grab;
    z-index: 1;
    transition: left 0.25s cubic-bezier(0.4,0,0.2,1), right 0.25s cubic-bezier(0.4,0,0.2,1);
}
#hm-canvas-wrap:active { cursor: grabbing; }
#hm-canvas { display: block; width: 100%; height: 100%; }

/* Desplazamientos al abrir paneles — solo laterales, sin empujar top */
body.op-panel-open #hm-canvas-wrap { left: 300px; }
body.side-panel-open #hm-canvas-wrap { right: 300px; }

/* ══════════════════════════════════════
   DRAWER INFERIOR DESLIZABLE
══════════════════════════════════════ */
#hm-drawer-tab {
    position: fixed;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    z-index: 160;
    background: rgba(10,8,22,0.97);
    border: 1px solid rgba(212,175,55,0.2);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 5px 20px 3px;
    font-size: 0.6em; color: #8a7a50;
    cursor: pointer; white-space: nowrap;
    font-family: 'Cinzel', serif; letter-spacing: 1px;
    transition: color 0.15s, background 0.15s, left 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1);
    user-select: none;
}
#hm-drawer-tab:hover { color: #d4af37; background: rgba(20,15,35,0.98); }
#hm-drawer-tab.open  { color: #d4af37; border-color: rgba(212,175,55,0.35); }
#hm-drawer-tab .dt-arrow { display: inline-block; transition: transform 0.25s; margin-left: 5px; }
#hm-drawer-tab.open .dt-arrow { transform: rotate(180deg); }

#hm-drawer {
    position: fixed;
    left: 0; right: 0; bottom: 32px;
    height: 0;
    overflow: hidden;
    z-index: 110;
    transition: height 0.25s cubic-bezier(0.4,0,0.2,1), left 0.25s cubic-bezier(0.4,0,0.2,1);
    background: rgba(8,6,18,0.98);
    border-top: 1px solid rgba(212,175,55,0.15);
}
#hm-drawer.open { height: min(56vh, 480px); }

/* Ajuste del drawer si el panel izquierdo OP está abierto */
body.op-panel-open #hm-drawer { left: 300px; }
body.op-panel-open #hm-drawer-tab { left: calc(300px + 50%); transform: translateX(-50%); }
/* El panel OP izquierdo ya no tiene barra top adicional — canvas siempre empieza en 44px */

#hm-drawer-inner {
    display: flex; flex-direction: column;
    height: 100%; max-width: 860px;
    margin: 0 auto; padding: 0;
}

/* ── Drawer nav tabs ── */
#hm-drawer-nav {
    display: flex; align-items: center; gap: 2px;
    padding: 8px 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.hm-dtab {
    font-size: 0.62em; padding: 5px 12px;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: none; color: #555; cursor: pointer;
    font-family: inherit; transition: all 0.13s; white-space: nowrap;
}
.hm-dtab:hover { color: #999; }
.hm-dtab.activo { background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.25); color: #d4af37; }

#hm-drawer-body {
    flex: 1; overflow: hidden; position: relative;
}

/* ── Pane grimorio ── */
#hm-pane-grimorio {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
}
#hm-pane-grimorio.oculto { display: none; }

#hm-search-wrap {
    padding: 10px 14px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#hm-search {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px; color: #ddd;
    font-size: 0.75em; padding: 7px 10px;
    font-family: inherit; outline: none;
    transition: border-color 0.15s;
}
#hm-search:focus { border-color: rgba(212,175,55,0.4); }
/* FIX: placeholder legible */
#hm-search::placeholder { color: #555; }

#hm-grimorio-list {
    flex: 1; overflow-y: auto;
    padding: 6px 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.15) transparent;
}

/* ── Acordeón de afinidad ── */
.gr-grupo { margin-bottom: 4px; }

.gr-grupo-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    cursor: pointer; user-select: none;
    transition: background 0.12s;
}
.gr-grupo-header:hover { background: rgba(255,255,255,0.04); }

.gr-grupo-arrow {
    font-size: 0.55em; color: #444;
    transition: transform 0.18s; flex-shrink: 0;
}
.gr-grupo.open .gr-grupo-arrow { transform: rotate(90deg); }

.gr-grupo-nombre {
    font-size: 0.68em; font-weight: 600;
    letter-spacing: 0.5px; flex: 1;
}
.gr-grupo-count {
    font-size: 0.58em; color: #3a3a55;
    background: rgba(255,255,255,0.04);
    padding: 1px 6px; border-radius: 8px;
}

.gr-grupo-hechizos {
    display: none; padding: 2px 0 4px 18px;
}
.gr-grupo.open .gr-grupo-hechizos { display: block; }

.gr-hz-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; border-radius: 5px;
    cursor: pointer; transition: background 0.1s;
}
.gr-hz-row:hover { background: rgba(255,255,255,0.05); }
.gr-hz-row.sel   { background: rgba(212,175,55,0.08); }

.gr-hz-dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0; border: 1px solid;
}
.gr-hz-nombre {
    flex: 1; font-size: 0.7em; color: #bbb;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-hz-nombre.desconocido { color: #3a3a55; font-style: italic; }
.gr-hz-meta {
    font-size: 0.58em; color: #3a3a55; white-space: nowrap;
    flex-shrink: 0;
}
.gr-hz-badge {
    font-size: 0.56em; padding: 1px 5px; border-radius: 6px;
    border: 1px solid; flex-shrink: 0;
}
.gr-hz-badge.conocido   { color: #6a8a5a; border-color: rgba(100,180,80,0.25); background: rgba(80,160,60,0.07); }
.gr-hz-badge.aprendible { color: #b8922a; border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.07); }
.gr-hz-badge.posesion   { color: rgba(130,115,180,0.95); border-color: rgba(150,131,200,0.3); background: rgba(150,131,200,0.07); }

/* ── Pane admin ── */
#hm-pane-admin {
    position: absolute; inset: 0;
    padding: 14px 16px;
    overflow-y: auto;
}
#hm-pane-admin.oculto { display: none; }

.adm-seccion { margin-bottom: 18px; }
.adm-titulo {
    font-size: 0.58em; color: #3a3a55; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.adm-fila { display: flex; flex-wrap: wrap; gap: 5px; }

/* ══════════════════════════════════════
   PANEL LATERAL DERECHO (INFO Y EDICIÓN INLINE)
══════════════════════════════════════ */
#hm-side-panel {
    position: fixed; top: 44px; right: 0;
    width: 300px; height: calc(100vh - 44px - 32px);
    background: rgba(8,6,18,0.97);
    border-left: 1px solid rgba(212,175,55,0.15);
    display: flex; flex-direction: column;
    z-index: 180;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
#hm-side-panel.abierto { transform: translateX(0); }

/* Cuando está abierto, empuja el canvas */
body.side-panel-open #hm-canvas-wrap { right: 300px; }

#hm-side-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.sp-titulo {
    font-family: 'Cinzel', serif; font-size: 0.72em;
    color: #d4af37; letter-spacing: 1px;
}
.sp-close {
    background: none; border: none; color: #555; font-size: 1.1em;
    cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.sp-close:hover { color: #ccc; }

#hm-side-panel-body {
    flex: 1; overflow-y: auto; padding: 10px 12px;
    scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.15) transparent;
}

/* FIX: nombre del hechizo en panel — rojo profesional, no saturado */
.sp-nodo-nombre {
    font-size: 0.92em; font-weight: 700; margin-bottom: 4px;
    color: #c0524a; /* rojo suave, profesional */
}
.sp-nodo-meta {
    font-size: 0.64em; color: #5a5a78; margin-bottom: 12px;
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sp-chip {
    font-size: 0.9em; padding: 2px 7px; border-radius: 6px; border: 1px solid;
}
.sp-chip-hex  { color: #c9953a; border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.07); }
.sp-chip-vex  { color: #9a68c8; border-color: rgba(130,80,190,0.35); background: rgba(130,80,190,0.08); }
.sp-chip-pos  { color: rgba(150,131,200,0.9); border-color: rgba(150,131,200,0.3); background: rgba(150,131,200,0.07); }
.sp-chip-est  { color: #4ab3e8; border-color: rgba(74,179,232,0.3); background: rgba(74,179,232,0.06); }
.sp-chip-pri  { color: #d4af37; border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.07); }

.sp-section-title {
    font-size: 0.56em; letter-spacing: 1.5px; text-transform: uppercase;
    color: #3a3a55; font-weight: 700; margin: 12px 0 7px;
    padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sp-desc-field { margin-bottom: 9px; }
.sp-desc-label { font-size: 0.55em; font-weight: 700; color: #d4af37; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 2px; }
.sp-desc-val   { font-size: 0.7em; color: #8a8aaa; line-height: 1.5; }
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* -- ESTILOS DE EDICIÓN INLINE (Parece texto hasta que haces clic) -- */
.sp-inline-input, .sp-inline-area {
    background: transparent; border: 1px solid transparent; border-radius: 4px;
    color: #e0d8f0; font-family: inherit; width: 100%;
    transition: background 0.15s, border-color 0.15s;
    outline: none; box-sizing: border-box;
}
.sp-inline-input {
    font-size: 0.75em; padding: 3px 6px; margin-left: -6px;
    display: block;
}
.sp-inline-area {
    font-size: 0.7em; padding: 4px 6px; margin-left: -6px;
    resize: vertical; line-height: 1.4; color: #8a8aaa; min-height: 40px;
    display: block;
}
.sp-inline-input:hover, .sp-inline-area:hover {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12);
}
.sp-inline-input:focus, .sp-inline-area:focus {
    background: rgba(15,10,30,0.9); border-color: rgba(212,175,55,0.5); color: #fff;
}
.sp-inline-title {
    font-size: 1.0em; font-weight: 700; color: #c0524a; padding: 2px 6px; margin-left: -6px;
}
select.sp-inline-input { cursor: pointer; }
select.sp-inline-input option { background: #0d0c1a; color: #ccc; }
input[type=number].sp-inline-input { -moz-appearance: textfield; }
input[type=number].sp-inline-input::-webkit-outer-spin-button,
input[type=number].sp-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Botones de acción (ahora en la izquierda, pero si los necesitas aquí, se mantienen) */
.sp-action-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sp-btn {
    font-size: 0.62em; padding: 5px 11px; border-radius: 5px;
    border: 1px solid; cursor: pointer; font-family: inherit;
    transition: all 0.12s; white-space: nowrap;
}
.sp-btn-pub     { background: rgba(212,175,55,0.09); border-color: rgba(212,175,55,0.4); color: #d4af37; }
.sp-btn-pub:hover     { background: rgba(212,175,55,0.2); }
.sp-btn-ocultar { background: rgba(120,100,60,0.08); border-color: rgba(120,100,60,0.3); color: #7a6a40; }
.sp-btn-ocultar:hover { color: #d4af37; }
.sp-btn-asignar { background: rgba(50,200,100,0.09); border-color: rgba(50,200,100,0.35); color: #32c864; }
.sp-btn-asignar:hover { background: rgba(50,200,100,0.2); }
.sp-btn-quitar  { background: rgba(180,50,50,0.1); border-color: rgba(180,70,70,0.4); color: #c97070; }
.sp-btn-quitar:hover  { background: rgba(180,50,50,0.2); color: #e08888; }
.sp-btn-props   { background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.3); color: #c9953a; }
.sp-btn-props:hover   { background: rgba(212,175,55,0.18); }
.sp-btn-del     { background: rgba(180,50,50,0.08); border-color: rgba(180,60,60,0.3); color: #b86060; }
.sp-btn-del:hover     { background: rgba(180,50,50,0.18); color: #e08888; }

/* Multi-sel badge */
#hm-sel-badge {
    font-size: 0.6em; color: #d4af37;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 10px; padding: 2px 8px;
    display: none; flex-shrink: 0;
}

/* ══════════════════════════════════════
   PORTAPAPELES
══════════════════════════════════════ */
#hm-clipboard {
    position: fixed; bottom: 36px; right: 308px;
    max-width: 320px; width: max-content;
    background: rgba(8,6,20,0.98);
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 10px; padding: 10px 14px;
    font-size: 0.68em; color: #aaa;
    z-index: 170; display: none;
    line-height: 1.6;
    box-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
#hm-clipboard.visible { display: block; }
.clip-title { font-family: 'Cinzel', serif; color: #d4af37; font-size: 1.05em; margin-bottom: 5px; }
.clip-pj    { color: #ffffff; font-weight: 700; }
.clip-hz    { color: #9090cc; }
.clip-hex   { color: #c9953a; }
.clip-desc  { color: rgba(150,131,200,0.9); }
.clip-close { float: right; cursor: pointer; color: #555; font-size: 1.1em; }
.clip-close:hover { color: #ccc; }

/* ── Panel de operación ── */
#hm-op-panel {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%);
    background: rgba(10,8,22,0.98);
    border: 1px solid rgba(212,175,55,0.22);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 10px 16px 8px;
    display: none; flex-direction: row; align-items: center;
    gap: 8px; flex-wrap: wrap;
    z-index: 150;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.7);
    max-width: min(760px, calc(100vw - 32px));
    width: max-content;
    transition: opacity 0.15s;
}
#hm-op-panel.visible { display: flex; }

#hm-drawer.open ~ #hm-op-panel,
body.drawer-open #hm-op-panel {
    bottom: calc(32px + min(56vh, 480px));
}

.op-nombre {
    font-family: 'Cinzel', serif; font-size: 0.82em; color: #d4af37;
    font-weight: 600; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 200px; flex-shrink: 0;
}
.op-sep  { width: 1px; height: 18px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.op-meta { font-size: 0.62em; color: #5a5a78; white-space: nowrap; flex-shrink: 0; }
.op-chip {
    font-size: 0.6em; padding: 2px 7px; border-radius: 8px;
    border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.op-chip-hex  { color: #c9953a; border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.07); }
.op-chip-vex  { color: #9a68c8; border-color: rgba(130,80,190,0.3); background: rgba(130,80,190,0.07); }
.op-chip-pos  { color: rgba(150,131,200,0.9); border-color: rgba(150,131,200,0.35); background: rgba(150,131,200,0.07); }
.op-chip-nota { color: #d4a830; border-color: rgba(212,160,30,0.25); background: rgba(212,160,30,0.06); }

.op-btn {
    font-size: 0.63em; padding: 4px 11px; border-radius: 5px;
    border: 1px solid; cursor: pointer; font-family: inherit;
    transition: all 0.12s; white-space: nowrap; flex-shrink: 0;
}
.op-btn.conocido-on       { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.4); color: #d4af37; }
.op-btn.conocido-on:hover { background: rgba(212,175,55,0.2); }
.op-btn.conocido-off       { background: rgba(120,100,60,0.08); border-color: rgba(120,100,60,0.3); color: #7a6a40; }
.op-btn.conocido-off:hover { background: rgba(120,100,60,0.18); color: #d4af37; }
.op-btn.asignar       { background: rgba(50,200,100,0.09); border-color: rgba(50,200,100,0.35); color: #32c864; }
.op-btn.asignar:hover { background: rgba(50,200,100,0.2); }
.op-btn.quitar       { background: rgba(180,50,50,0.1); border-color: rgba(180,70,70,0.4); color: #c97070; }
.op-btn.quitar:hover { background: rgba(180,50,50,0.2); color: #e08888; }
.op-btn.editar       { background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.3); color: #c9953a; }
.op-btn.editar:hover { background: rgba(212,175,55,0.18); }
.op-btn.descartar       { background: rgba(180,50,50,0.08); border-color: rgba(180,60,60,0.3); color: #b86060; }
.op-btn.descartar:hover { background: rgba(180,50,50,0.18); color: #e08888; }
.op-btn.cerrar       { background: rgba(80,80,100,0.08); border-color: rgba(80,80,100,0.2); color: #555; }
.op-btn.cerrar:hover { color: #999; }

/* ══════════════════════════════════════
   INFO BAR (bottom strip)
══════════════════════════════════════ */
#hm-info-bar {
    position: fixed; bottom: 0; left: 0; right: 0; height: 32px;
    background: rgba(5,0,10,0.98);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px; font-size: 0.62em; color: #555;
    z-index: 200; overflow: hidden;
}
#hm-info-nodo  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hm-info-stats { color: #333; flex-shrink: 0; }
#hm-zoom-label { color: #333; flex-shrink: 0; min-width: 40px; text-align: right; }

/* ══════════════════════════════════════
   MODAL GENÉRICO
══════════════════════════════════════ */
.hm-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: 500; display: flex; align-items: center; justify-content: center;
}
.hm-modal {
    background: #0d0c1a; border: 1px solid rgba(212,175,55,0.25);
    border-radius: 12px; padding: 22px 26px;
    width: 420px; max-width: 95vw; max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
.hm-modal-title {
    font-family: 'Cinzel', serif; font-size: 0.85em;
    color: #d4af37; margin-bottom: 14px; letter-spacing: 1px;
}
.hm-modal label {
    font-size: 0.68em; color: #888; display: block;
    margin-bottom: 3px; margin-top: 11px;
}
.hm-modal input, .hm-modal select, .hm-modal textarea {
    width: 100%; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px; color: #fff;
    font-size: 0.78em; padding: 7px 10px;
    font-family: inherit; outline: none; box-sizing: border-box;
}
.hm-modal input:focus, .hm-modal select:focus { border-color: rgba(212,175,55,0.45); }
.hm-modal select option { background: #0d0c1a; }
.hm-modal-footer {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}
.hm-btn-cancel {
    background: none; border: 1px solid rgba(255,255,255,0.12);
    color: #666; font-size: 0.68em; padding: 6px 13px;
    border-radius: 5px; cursor: pointer; font-family: inherit;
}
.hm-btn-cancel:hover { color: #bbb; }
.hm-btn-ok {
    background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.4);
    color: #d4af37; font-size: 0.68em; padding: 6px 16px;
    border-radius: 5px; cursor: pointer; font-family: 'Cinzel', serif;
}
.hm-btn-ok:hover { background: rgba(212,175,55,0.24); }

.hm-check-list {
    max-height: 200px; overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 6px; margin-top: 4px;
    scrollbar-width: thin;
}
.hm-check-item {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 6px; border-radius: 4px; cursor: pointer;
    font-size: 0.72em; color: #bbb;
}
.hm-check-item:hover { background: rgba(255,255,255,0.05); }
.hm-check-item input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: #d4af37; flex-shrink: 0; cursor: pointer;
}
.hm-check-item.sel { color: #d4af37; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
#hm-toast {
    position: fixed; bottom: 44px; left: 50%;
    transform: translateX(-50%);
    background: rgba(15,12,28,0.98);
    border: 1px solid rgba(212,175,55,0.35);
    color: #d4af37; font-size: 0.75em; padding: 8px 18px;
    border-radius: 8px; z-index: 600;
    pointer-events: none; opacity: 0; transition: opacity 0.25s;
    white-space: nowrap;
}
#hm-toast.show { opacity: 1; }

/* ══════════════════════════════════════
   PANEL OP IZQUIERDO DESLIZABLE (manual, solo admins)
══════════════════════════════════════ */
#hm-op-left {
    position: fixed; top: 44px; left: 0;
    width: 300px; height: calc(100vh - 44px - 32px);
    background: rgba(6,4,16,0.98);
    border-right: 1px solid rgba(212,175,55,0.15);
    display: flex; flex-direction: column;
    z-index: 180;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
#hm-op-left.abierto { transform: translateX(0); }

#hm-op-left-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
#hm-op-left-title {
    font-family: 'Cinzel', serif; font-size: 0.72em;
    color: #d4af37; letter-spacing: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#hm-op-left-close {
    background: none; border: none; color: #555; font-size: 1.1em;
    cursor: pointer; padding: 2px 6px; flex-shrink: 0;
}
#hm-op-left-close:hover { color: #ccc; }

#hm-op-left-body {
    flex: 1; overflow-y: auto; padding: 10px 12px 20px;
    scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.12) transparent;
}

/* Nombre del hechizo */
.op-l-nombre {
    font-size: 0.9em; font-weight: 700;
    color: #e0d8f0; margin-bottom: 6px; line-height: 1.3;
}

/* Chips de metadatos */
.op-l-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
}
.op-l-chip {
    font-size: 0.62em; padding: 2px 7px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: #888;
}
.op-l-hex  { color: #c9953a; border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.07); }
.op-l-vex  { color: #9a68c8; border-color: rgba(130,80,190,0.3); background: rgba(130,80,190,0.07); }
.op-l-pos  { color: rgba(150,131,200,0.9); border-color: rgba(150,131,200,0.3); background: rgba(150,131,200,0.07); }
.op-l-est  { color: #4ab3e8; border-color: rgba(74,179,232,0.3); background: rgba(74,179,232,0.06); }
.op-l-pri  { color: #d4af37; border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.07); }
.op-l-afx  { color: #7a8a9a; border-color: rgba(120,140,160,0.25); background: rgba(100,120,140,0.07); }

/* Campos de descripción */
.op-l-campo { margin-bottom: 8px; }
.op-l-campo-label {
    font-size: 0.56em; font-weight: 700; color: #d4af37;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px;
}
.op-l-campo-val {
    font-size: 0.72em; color: #8a8aaa; line-height: 1.5;
}

/* Separador */
.op-l-sep {
    height: 1px; background: rgba(255,255,255,0.05);
    margin: 10px 0;
}

/* Título de sección */
.op-l-section-title {
    font-size: 0.54em; letter-spacing: 1.5px; text-transform: uppercase;
    color: #3a3a55; font-weight: 700; margin-bottom: 7px;
}

/* Fila de botones */
.op-l-row {
    display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px;
}

/* Botones del panel */
.op-l-btn {
    font-size: 0.62em; padding: 5px 10px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #888; cursor: pointer; white-space: nowrap;
    transition: all 0.12s; font-family: inherit;
}
.op-l-btn:hover   { background: rgba(255,255,255,0.09); color: #ccc; }
.op-l-gold        { background: rgba(212,175,55,0.09); border-color: rgba(212,175,55,0.35); color: #d4af37; }
.op-l-gold:hover  { background: rgba(212,175,55,0.18); }
.op-l-green       { background: rgba(50,200,100,0.09); border-color: rgba(50,200,100,0.35); color: #32c864; }
.op-l-green:hover { background: rgba(50,200,100,0.18); }
.op-l-warn        { background: rgba(180,50,50,0.09); border-color: rgba(180,70,70,0.35); color: #c97070; }
.op-l-warn:hover  { background: rgba(180,50,50,0.18); }
.op-l-danger      { background: rgba(180,50,50,0.09); border-color: rgba(180,70,70,0.35); color: #c97070; }
.op-l-danger:hover{ background: rgba(180,50,50,0.18); }
.op-l-active      { background: rgba(0,210,255,0.1); border-color: rgba(0,210,255,0.4); color: #00d2ff; }

/* Formulario de edición */
.op-l-edit-form { display: flex; flex-direction: column; gap: 6px; }

.op-l-field-row { display: flex; flex-direction: column; gap: 3px; }
.op-l-field-row label {
    font-size: 0.58em; color: #666; text-transform: uppercase; letter-spacing: 0.8px;
}
.op-l-field-row input,
.op-l-field-row textarea,
.op-l-field-row select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px; color: #ccc;
    font-size: 0.72em; padding: 5px 8px;
    font-family: inherit; outline: none;
    resize: vertical;
}
.op-l-field-row input:focus,
.op-l-field-row textarea:focus,
.op-l-field-row select:focus { border-color: rgba(212,175,55,0.45); }
.op-l-field-row select option { background: #0d0c1a; }

.op-l-field-row-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.op-l-field-row-2 > div { display: flex; flex-direction: column; gap: 3px; }
.op-l-field-row-2 label {
    font-size: 0.58em; color: #666; text-transform: uppercase; letter-spacing: 0.8px;
}
.op-l-field-row-2 input,
.op-l-field-row-2 select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px; color: #ccc;
    font-size: 0.72em; padding: 5px 8px;
    font-family: inherit; outline: none;
}
.op-l-field-row-2 input:focus,
.op-l-field-row-2 select:focus { border-color: rgba(212,175,55,0.45); }
.op-l-field-row-2 select option { background: #0d0c1a; }

.op-l-checks {
    display: flex; flex-direction: column; gap: 5px;
}
.op-l-checks label {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.68em; color: #888; cursor: pointer;
}
.op-l-checks input[type=checkbox] {
    accent-color: #d4af37; cursor: pointer;
}

/* ── Portapapeles en panel OP izquierdo ── */
.op-l-clipboard {
    background: rgba(30,25,55,0.7);
    border: 1px solid rgba(150,131,200,0.25);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.68em;
    display: flex; flex-direction: column; gap: 4px;
}
.op-clip-header {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 5px;
}
.op-clip-pj {
    color: rgba(150,131,200,0.95);
    font-weight: 700; font-size: 1.05em;
    letter-spacing: 0.5px;
}
.op-clip-total {
    color: #e06060; font-size: 0.95em; font-weight: 600;
}
.op-clip-restante {
    color: #555; font-size: 0.88em;
}
.op-clip-lista {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 180px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(150,131,200,0.2) transparent;
}
.op-clip-linea {
    color: #888; line-height: 1.4;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.op-clip-hex  { color: #e06060; font-weight: 600; }
.op-clip-pct  { color: #666; font-size: 0.9em; }
.op-clip-gratis { color: #3ecf6e; font-weight: 600; }
.op-clip-pub  { color: #d4af37; font-size: 0.88em; }
.op-clip-row  { color: #999; line-height: 1.4; }
.op-clip-lbl  { color: #666; }

/* ── Botones de edición rápida numérica (±50 / ±1) ── */
.sp-num-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sp-num-row .sp-inline-input.sp-num-input {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.sp-num-btn {
    background: rgba(212,175,55,0.10);
    border: 1px solid rgba(212,175,55,0.25);
    color: #d4af37;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 0.7em;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.sp-num-btn:hover {
    background: rgba(212,175,55,0.22);
    border-color: rgba(212,175,55,0.55);
}
.sp-num-btn:active {
    background: rgba(212,175,55,0.35);
}

/* ── Navegación con flechas: resalte de checkbox enfocado ── */
.sp-check-row {
    border-radius: 4px;
    padding: 2px 5px;
    margin: 0 -5px;
    transition: background 0.12s;
}
.sp-check-row.sp-check-focused {
    background: rgba(212,175,55,0.12);
    outline: 1px solid rgba(212,175,55,0.35);
    color: #e8d080;
}
.sp-check-row:focus-within {
    background: rgba(212,175,55,0.08);
}

/* ══════════════════════════════════════
   PANEL TABLAS DB (nodos + strings)
══════════════════════════════════════ */

/* Overlay semitransparente */
#hz-tablas-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 290;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s;
}
#hz-tablas-overlay.visible {
    opacity: 1; pointer-events: auto;
}

/* Contenedor principal */
#hz-tablas-wrap {
    position: fixed;
    top: 44px; bottom: 32px;
    left: 0; right: 0;
    display: flex;
    z-index: 300;
    pointer-events: none;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.22s;
}
#hz-tablas-wrap.visible {
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
}

/* Panel izquierdo — Nodos (75%) */
#hz-panel-nodos {
    width: 75%;
    background: rgba(6,4,16,0.99);
    border-right: 1px solid rgba(212,175,55,0.18);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 32px rgba(0,0,0,0.6);
}

/* Panel derecho — Strings (25%) */
#hz-panel-strings {
    width: 25%;
    background: rgba(5,3,13,0.99);
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* Cabecera compartida */
.hz-tab-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(212,175,55,0.12);
    flex-shrink: 0; gap: 8px;
    background: rgba(10,7,22,0.98);
}
.hz-tab-header-title {
    font-family: 'Cinzel', serif; font-size: 0.78em;
    color: #d4af37; letter-spacing: 1px; white-space: nowrap;
    flex-shrink: 0;
}
.hz-tab-header-sub {
    font-size: 0.6em; color: #555; margin-left: 6px;
}
.hz-tab-header-actions {
    display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}
.hz-tab-close {
    background: none; border: none; color: #555; font-size: 1.15em;
    cursor: pointer; padding: 2px 6px; flex-shrink: 0; margin-left: 4px;
}
.hz-tab-close:hover { color: #ccc; }

/* Barra de herramientas de tabla */
.hz-tab-toolbar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(8,5,18,0.96);
    flex-shrink: 0;
}
.hz-tab-toolbar input[type=text] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px; color: #ccc;
    font-size: 0.67em; padding: 4px 9px;
    font-family: inherit; outline: none; min-width: 0; flex: 1 1 140px;
    max-width: 260px;
}
.hz-tab-toolbar input[type=text]:focus {
    border-color: rgba(212,175,55,0.4);
}
.hz-tab-toolbar input[type=text]::placeholder { color: #444; }

/* Botones de tabla */
.hz-btn {
    font-size: 0.6em; padding: 4px 10px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #888; cursor: pointer; white-space: nowrap;
    transition: all 0.12s; font-family: inherit; flex-shrink: 0;
}
.hz-btn:hover { background: rgba(255,255,255,0.09); color: #ccc; }
.hz-btn.gold  { background: rgba(212,175,55,0.09); border-color: rgba(212,175,55,0.35); color: #d4af37; }
.hz-btn.gold:hover { background: rgba(212,175,55,0.18); }
.hz-btn.green { background: rgba(50,200,100,0.09); border-color: rgba(50,200,100,0.35); color: #32c864; }
.hz-btn.green:hover { background: rgba(50,200,100,0.18); }
.hz-btn.danger { background: rgba(180,50,50,0.09); border-color: rgba(180,70,70,0.35); color: #c97070; }
.hz-btn.danger:hover { background: rgba(180,50,50,0.18); }
.hz-btn.blue { background: rgba(60,130,220,0.09); border-color: rgba(60,130,220,0.35); color: #6ab0f0; }
.hz-btn.blue:hover { background: rgba(60,130,220,0.18); }
.hz-btn:disabled { opacity: 0.3; cursor: default; }

/* Área de tabla scrolleable */
.hz-tab-body {
    flex: 1; overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.1) transparent;
}

/* Tabla */
.hz-tabla {
    width: 100%; border-collapse: collapse;
    font-size: 0.62em; table-layout: fixed;
}
.hz-tabla thead th {
    position: sticky; top: 0;
    background: rgba(10,7,24,0.99);
    color: #555; font-weight: 600; font-size: 0.9em;
    letter-spacing: 0.8px; text-transform: uppercase;
    padding: 7px 8px; text-align: left;
    border-bottom: 1px solid rgba(212,175,55,0.1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; user-select: none;
}
.hz-tabla thead th:hover { color: #d4af37; }
.hz-tabla thead th.sort-asc::after  { content: ' ▲'; font-size: 0.75em; }
.hz-tabla thead th.sort-desc::after { content: ' ▼'; font-size: 0.75em; }

.hz-tabla tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.1s;
}
.hz-tabla tbody tr:hover { background: rgba(255,255,255,0.035); }
.hz-tabla tbody tr.hz-row-sel { background: rgba(212,175,55,0.07); }
.hz-tabla tbody tr.hz-row-new { background: rgba(50,200,100,0.05); }
.hz-tabla tbody tr.hz-row-dirty { background: rgba(212,175,55,0.04); }

.hz-tabla td {
    padding: 5px 8px; color: #999; vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hz-tabla td.hz-cell-id    { color: #5a5a7a; font-size: 0.88em; }
.hz-tabla td.hz-cell-name  { color: #d4d0e8; font-weight: 500; }
.hz-tabla td.hz-cell-bool  { text-align: center; }
.hz-tabla td.hz-cell-num   { color: #c9953a; text-align: right; }
.hz-tabla td.hz-cell-afin  { color: #8a9ec8; }
.hz-tabla td.hz-cell-actions { text-align: right; white-space: nowrap; }

/* Inputs inline en celdas editables */
.hz-tabla td input[type=text],
.hz-tabla td input[type=number],
.hz-tabla td select {
    background: rgba(15,12,30,0.9);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 3px; color: #e0d8f0;
    font-size: 1em; padding: 2px 5px;
    font-family: inherit; outline: none; width: 100%;
    box-sizing: border-box;
}
.hz-tabla td input[type=text]:focus,
.hz-tabla td input[type=number]:focus,
.hz-tabla td select:focus { border-color: rgba(212,175,55,0.65); }
.hz-tabla td select option { background: #0d0c1a; }
.hz-tabla td input[type=checkbox] {
    accent-color: #d4af37; cursor: pointer;
    width: 13px; height: 13px;
}

/* Celdas de texto clickeables para edición inline */
.hz-tabla td.hz-cell-text-view {
    cursor: text;
    transition: background 0.12s;
}
.hz-tabla td.hz-cell-text-view:hover {
    background: rgba(212,175,55,0.05);
    outline: 1px solid rgba(212,175,55,0.18);
    outline-offset: -1px;
}
.hz-tabla td.hz-cell-text-view textarea {
    width: 100%; font-size: inherit; font-family: inherit;
    background: #0d0d1a; border: 1px solid rgba(212,175,55,0.35);
    border-radius: 3px; color: #ccc; padding: 2px 4px; resize: vertical;
}

/* Cabeceras de columna con menú contextual */
.hz-tabla thead th[oncontextmenu] {
    position: relative;
}
.hz-tabla thead th[oncontextmenu]:hover::after {
    content: '⋮';
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 0.8em; color: rgba(212,175,55,0.35);
    pointer-events: none;
}

/* Botón editar/borrar en fila */
.hz-row-btn {
    font-size: 0.88em; padding: 1px 6px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #666; cursor: pointer; transition: all 0.1s;
    font-family: inherit;
}
.hz-row-btn:hover { background: rgba(255,255,255,0.09); color: #ccc; }
.hz-row-btn.save  { border-color: rgba(50,200,100,0.4); color: #32c864; background: rgba(50,200,100,0.07); }
.hz-row-btn.save:hover { background: rgba(50,200,100,0.18); }
.hz-row-btn.del   { border-color: rgba(180,70,70,0.35); color: #c97070; background: rgba(180,50,50,0.07); }
.hz-row-btn.del:hover { background: rgba(180,50,50,0.18); }
.hz-row-btn.cancel { border-color: rgba(255,255,255,0.08); color: #555; }

/* Paginación */
.hz-tab-pager {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(8,5,18,0.96); flex-shrink: 0;
    font-size: 0.6em; color: #555; flex-wrap: wrap;
}
.hz-tab-pager span { flex: 1; }
.hz-pager-btn {
    padding: 2px 9px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #888; cursor: pointer; font-family: inherit; font-size: 1em;
}
.hz-pager-btn:hover  { background: rgba(255,255,255,0.09); color: #ccc; }
.hz-pager-btn:disabled { opacity: 0.3; cursor: default; }

/* Botón TABLAS en panel OP izquierdo */
.op-l-btn-tablas {
    font-size: 0.62em; padding: 7px 14px; border-radius: 5px;
    border: 1px solid rgba(120,90,220,0.4);
    background: rgba(120,90,220,0.09);
    color: #a080e0; cursor: pointer; white-space: nowrap;
    transition: all 0.13s; font-family: inherit;
    width: 100%; text-align: left;
    display: flex; align-items: center; gap: 7px;
    margin-top: 6px;
}
.op-l-btn-tablas:hover {
    background: rgba(120,90,220,0.18);
    color: #c0a0ff;
    border-color: rgba(150,110,240,0.6);
}

/* Indicador de fila de strings */
.hz-str-src { color: #6ab0f0; }
.hz-str-tgt { color: #32c864; }

/* Fila de nueva entrada */
.hz-tab-new-row td { background: rgba(50,200,100,0.04); }

/* Mensaje vacío */
.hz-tab-empty {
    text-align: center; color: #333; padding: 32px 16px;
    font-size: 0.7em; font-style: italic;
}

/* Spinner de carga */
.hz-loading {
    display: flex; align-items: center; justify-content: center;
    height: 80px; color: #444; font-size: 0.7em; gap: 8px;
}
.hz-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.15);
    border-top-color: rgba(212,175,55,0.6);
    animation: hz-spin 0.7s linear infinite;
}
@keyframes hz-spin { to { transform: rotate(360deg); } }

/* Resaltado de búsqueda */
.hz-hl { background: rgba(212,175,55,0.25); border-radius: 2px; color: #f0d060; }