/* bot-os · el mapa a la izquierda, lo que dice el .md a la derecha. */

:root {
    --fondo: #04060e;
    --fondo-barra: #070b16;
    --fondo-panel: #080c18;
    --fondo-hueco: #0d1324;
    --borde: rgba(140, 160, 255, .13);
    --borde-fuerte: rgba(140, 160, 255, .26);
    --texto: #d9deef;
    --texto-tenue: #8791b3;
    --texto-apagado: #5c668a;

    --bot: #ffffff;
    --rama: #aab9ff;
    --tabla: #45d6bd;
    --seccion: #b79bff;
    --consulta: #7d90e6;

    --bien: #4fd6a0;
    --aviso: #e9b45a;
    --mal: #f0777f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--fondo);
    color: var(--texto);
    font: 14px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* --- Armazon ----------------------------------------------------------- */

.pantalla {
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.tablero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(400px, .85fr);
    min-height: 0;
}

/* Sin panel, el mapa se queda con todo el ancho. El canvas se vuelve a medir solo:
   lo vigila un ResizeObserver, no hace falta avisarle desde aqui. */
.tablero.sin-panel { grid-template-columns: 1fr; }
.tablero.sin-panel .panel { display: none; }

/* --- Barra de arriba ---------------------------------------------------- */

.barra {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    background: var(--fondo-barra);
    border-bottom: 1px solid var(--borde);
}

.marca { display: flex; align-items: center; gap: 12px; }
.marca strong { display: block; font-size: 15px; letter-spacing: .04em; }
.marca small { display: block; color: var(--texto-tenue); font-size: 11.5px; }

.marca-punto {
    width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fff, #93a6ff 55%, #3b49a8);
    box-shadow: 0 0 14px rgba(150, 170, 255, .75);
}

.buscador { position: relative; flex: 1; max-width: 520px; }

.buscador input {
    width: 100%;
    padding: 8px 13px;
    border-radius: 8px;
    border: 1px solid var(--borde);
    background: var(--fondo-hueco);
    color: var(--texto);
    font: inherit;
    outline: none;
}

.buscador input:focus { border-color: var(--borde-fuerte); }

.resultados {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
    max-height: 340px; overflow-y: auto;
    margin: 0; padding: 4px; list-style: none;
    background: #0b1020;
    border: 1px solid var(--borde-fuerte);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

.resultados button {
    display: flex; gap: 10px; align-items: baseline;
    width: 100%; padding: 7px 10px; text-align: left;
    background: none; border: 0; border-radius: 6px;
}

.resultados button:hover, .resultados button:focus-visible { background: rgba(140, 160, 255, .12); }
.resultados .clase { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-apagado); }
.resultados .texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filtros { display: flex; gap: 14px; color: var(--texto-tenue); font-size: 12.5px; }
.filtros label { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.filtros input { accent-color: #7d90e6; }

/* La hamburguesa vive en el extremo derecho, del lado del panel que abre y cierra. */

.hamburguesa {
    flex: none;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 36px; height: 32px; padding: 0 8px;
    background: var(--fondo-hueco);
    border: 1px solid var(--borde);
    border-radius: 8px;
}

.hamburguesa span {
    display: block; height: 1.5px; border-radius: 2px;
    background: var(--texto-tenue);
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.hamburguesa:hover { border-color: var(--borde-fuerte); }
.hamburguesa:hover span { background: var(--texto); }

/* Cerrado se convierte en una flecha hacia la izquierda: de donde va a salir el panel. */
.hamburguesa[aria-expanded="false"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg) scaleX(.62); transform-origin: left; }
.hamburguesa[aria-expanded="false"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) scaleX(.62); transform-origin: left; }

/* --- La galaxia --------------------------------------------------------- */

.galaxia {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40, 56, 130, .38), transparent 70%),
        radial-gradient(ellipse 120% 90% at 50% 120%, rgba(90, 60, 150, .18), transparent 65%),
        #04060e;
}

.galaxia canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.galaxia canvas.arrastrando { cursor: grabbing; }

.rotulo-galaxia {
    position: absolute; top: 16px; left: 20px;
    pointer-events: none;
    font-size: 11.5px; line-height: 1.7;
    color: var(--texto-tenue);
    text-shadow: 0 1px 6px #04060e;
}

.rotulo-galaxia strong { display: block; letter-spacing: .22em; font-size: 10.5px; color: #97a4cf; }
.rotulo-galaxia span { display: block; }
.rotulo-galaxia .tenue { color: var(--texto-apagado); }

.leyenda {
    position: absolute; left: 20px; bottom: 16px;
    display: flex; flex-wrap: wrap; gap: 14px;
    margin: 0; padding: 0; list-style: none;
    font-size: 11.5px; color: var(--texto-tenue);
    pointer-events: none;
}

.leyenda li { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 50%; }
.p-bot { background: var(--bot); box-shadow: 0 0 9px var(--bot); }
.p-rama { background: var(--rama); box-shadow: 0 0 9px var(--rama); }
.p-tabla { background: var(--tabla); box-shadow: 0 0 9px var(--tabla); }
.p-seccion { background: var(--seccion); box-shadow: 0 0 9px var(--seccion); }
.p-consulta { background: var(--consulta); box-shadow: 0 0 9px var(--consulta); }

.boton-flotante {
    position: absolute; right: 16px; bottom: 16px;
    padding: 6px 13px; border-radius: 7px;
    background: rgba(13, 19, 36, .82);
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: 12px;
    backdrop-filter: blur(6px);
}

.boton-flotante:hover { color: var(--texto); border-color: var(--borde-fuerte); }

/* --- El panel ----------------------------------------------------------- */

.panel {
    min-height: 0;
    overflow-y: auto;
    overflow-wrap: anywhere;
    background: var(--fondo-panel);
    border-left: 1px solid var(--borde);
    padding: 22px 24px 60px;
}

.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-thumb { background: #1b2340; border-radius: 6px; border: 3px solid var(--fondo-panel); }

.cargando, .vacio { color: var(--texto-apagado); padding: 40px 0; text-align: center; }

.ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 14px; font-size: 12px; }
.ruta button { background: none; border: 0; padding: 0; color: var(--texto-tenue); }
.ruta button:hover { color: var(--rama); text-decoration: underline; }
.ruta .sep { color: var(--texto-apagado); }
.ruta > .sep:last-child { display: none; }

.cabeza h2 {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 4px; font-size: 20px; line-height: 1.3; font-weight: 600;
}

.bolita { flex: none; width: 11px; height: 11px; margin-top: 8px; border-radius: 50%; }
.t-bot { background: var(--bot); box-shadow: 0 0 12px var(--bot); }
.t-rama { background: var(--rama); box-shadow: 0 0 12px var(--rama); }
.t-tabla { background: var(--tabla); box-shadow: 0 0 12px var(--tabla); }
.t-seccion { background: var(--seccion); box-shadow: 0 0 12px var(--seccion); }
.t-consulta { background: var(--consulta); box-shadow: 0 0 12px var(--consulta); }

.subtitulo { margin: 0; color: var(--texto-tenue); font-size: 13px; }

.insignias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.insignia {
    padding: 3px 9px; border-radius: 999px;
    background: rgba(140, 160, 255, .09);
    border: 1px solid var(--borde);
    font-size: 11.5px; color: var(--texto-tenue);
}

.tono-bien { color: var(--bien); border-color: rgba(79, 214, 160, .32); background: rgba(79, 214, 160, .09); }
.tono-aviso { color: var(--aviso); border-color: rgba(233, 180, 90, .32); background: rgba(233, 180, 90, .09); }
.tono-mal { color: var(--mal); border-color: rgba(240, 119, 127, .32); background: rgba(240, 119, 127, .09); }
.tono-apagado { color: var(--texto-apagado); }

.bloque { margin-top: 26px; }

.bloque h3 {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 10px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--texto-apagado);
}

.pie { margin: 9px 0 0; font-size: 11.5px; color: var(--texto-apagado); }

.copiar {
    padding: 3px 9px; border-radius: 6px;
    background: none; border: 1px solid var(--borde);
    color: var(--texto-apagado);
    font-size: 10.5px; letter-spacing: .06em;
}

.copiar:hover { color: var(--texto); border-color: var(--borde-fuerte); }

/* Cifras */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; }

.cifra {
    padding: 11px 13px;
    background: var(--fondo-hueco);
    border: 1px solid var(--borde);
    border-radius: 9px;
}

.cifra b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.cifra span { display: block; margin-top: 2px; font-size: 11px; color: var(--texto-tenue); }

/* Enlaces a otros nodos */

.enlaces { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }

.enlaces .enlace {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; padding: 8px 11px; text-align: left;
    background: var(--fondo-hueco);
    border: 1px solid transparent;
    border-left: 2px solid var(--borde-fuerte);
    border-radius: 7px;
}

.enlaces .enlace:hover { background: #121a33; border-color: var(--borde-fuerte); }
.enlaces .enlace .texto { font-size: 13px; }
.enlaces .enlace .nota { font-size: 11.5px; color: var(--texto-apagado); }
.enlaces .enlace.tono-bien { border-left-color: var(--bien); }
.enlaces .enlace.tono-aviso { border-left-color: var(--aviso); }
.enlaces .enlace.tono-mal { border-left-color: var(--mal); }
.enlaces .enlace.tono-apagado { opacity: .55; }

/* Markdown del .md */

.md { font-size: 13.5px; }
.md h3, .md h4, .md h5 {
    margin: 22px 0 8px;
    font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--texto-apagado);
}
.md h3:first-child, .md h4:first-child { margin-top: 0; }
.md p { margin: 0 0 11px; }
.md strong { color: #eef1fb; font-weight: 600; }
.md ul, .md ol { margin: 0 0 11px; padding-left: 20px; }
.md li { margin-bottom: 4px; }
.md a { color: var(--rama); }

.md blockquote {
    margin: 0 0 12px;
    padding: 9px 13px;
    background: rgba(233, 180, 90, .07);
    border-left: 2px solid var(--aviso);
    border-radius: 0 7px 7px 0;
}

.md blockquote p:last-child { margin-bottom: 0; }

code {
    padding: 1px 5px;
    background: rgba(140, 160, 255, .11);
    border-radius: 4px;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .89em;
    color: #b9c6ff;
}

pre {
    margin: 0 0 12px;
    padding: 13px 15px;
    overflow-x: auto;
    background: #060a14;
    border: 1px solid var(--borde);
    border-radius: 9px;
}

pre code { padding: 0; background: none; color: var(--texto); font-size: 12.2px; line-height: 1.6; }

.md-tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: 9px; }
.md-tabla table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.md-tabla th {
    padding: 8px 11px; text-align: left; white-space: nowrap;
    background: #0c1222;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto-apagado); font-weight: 600;
}

.md-tabla td { padding: 7px 11px; border-top: 1px solid var(--borde); vertical-align: top; }
.md-tabla tbody tr:hover { background: rgba(140, 160, 255, .05); }

/* El panel parte las palabras largas para que no se desborde nada; dentro de una celda
   estrecha eso deja una letra por renglon, asi que ahi se rompe solo entre palabras. */
.md-tabla th, .md-tabla td { overflow-wrap: break-word; }

/* Los parametros de una consulta */

.parametros { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }

.parametros li {
    padding: 10px 12px;
    background: var(--fondo-hueco);
    border: 1px solid var(--borde);
    border-radius: 8px;
}

.parametros .encabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.parametros .encabeza code { background: rgba(229, 143, 208, .13); color: #e9a7d8; font-size: 12.5px; }
.parametros .tipo { font-size: 11px; color: var(--texto-tenue); }

.parametros .requisito {
    padding: 1px 7px; border-radius: 999px;
    background: rgba(140, 160, 255, .09);
    font-size: 10.5px; color: var(--texto-apagado);
}

.parametros .requisito.es-obligatorio { color: var(--aviso); background: rgba(233, 180, 90, .11); }
.parametros .que { margin: 6px 0 0; font-size: 12.5px; color: var(--texto); }
.parametros .ejemplo { margin: 5px 0 0; font-size: 11.5px; color: var(--texto-apagado); }

.aviso { color: var(--aviso); }

.fuente {
    margin-top: 30px; padding-top: 14px;
    border-top: 1px solid var(--borde);
    font-size: 11.5px; color: var(--texto-apagado);
}

/* SQL coloreado */

.sql-pal { color: #8ea2ff; }
.sql-cad { color: #79d6a4; }
.sql-num { color: #e5c07b; }
.sql-par { color: #e58fd0; }
.sql-com { color: #59628a; font-style: italic; }

/* --- La puerta: entrar, y la pagina de error ----------------------------- */

.tarjeta-sola {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 42%, rgba(40, 56, 130, .4), transparent 70%),
        radial-gradient(ellipse 120% 90% at 50% 120%, rgba(90, 60, 150, .2), transparent 65%),
        var(--fondo);
}

.tarjeta {
    display: flex; flex-direction: column; gap: 15px;
    width: 100%; max-width: 372px;
    padding: 28px;
    background: rgba(10, 14, 28, .78);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
}

.tarjeta .marca { margin-bottom: 4px; }

.tarjeta label { display: flex; flex-direction: column; gap: 5px; }
.tarjeta label > span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-apagado); }

.tarjeta input[type="text"], .tarjeta input[type="password"] {
    width: 100%; padding: 9px 12px;
    background: var(--fondo-hueco);
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto);
    font: inherit;
    outline: none;
}

.tarjeta input[type="text"]:focus, .tarjeta input[type="password"]:focus { border-color: var(--borde-fuerte); }

.tarjeta .casilla { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.tarjeta .casilla input { accent-color: #7d90e6; }
.tarjeta .casilla span { font-size: 12.5px; color: var(--texto-tenue); text-transform: none; letter-spacing: 0; }

.boton {
    display: inline-block; padding: 10px 16px;
    background: linear-gradient(180deg, #3a4a9e, #2b3877);
    border: 1px solid rgba(160, 178, 255, .38);
    border-radius: 8px;
    color: #eaefff; font-size: 14px; text-align: center; text-decoration: none;
}

.boton:hover { background: linear-gradient(180deg, #45579f, #33418a); }

.error { color: var(--mal); font-size: 12.5px; }
.error ul { margin: 0; padding-left: 18px; }
.error ul:empty { display: none; }

.explica { margin: 0; font-size: 13px; color: var(--texto-tenue); }
.detalle-error { max-height: 220px; font-size: 11.5px; color: var(--texto-apagado); }

/* --- La sesion, en la barra ---------------------------------------------- */

.sesion { display: flex; align-items: center; gap: 8px; margin: 0; }
.sesion .quien { font-size: 12.5px; color: var(--texto-tenue); }

.sesion button {
    padding: 5px 11px; border-radius: 7px;
    background: var(--fondo-hueco);
    border: 1px solid var(--borde);
    color: var(--texto-apagado);
    font-size: 12px;
}

.sesion button:hover { color: var(--texto); border-color: var(--borde-fuerte); }

/* --- Pantallas angostas -------------------------------------------------- */

@media (max-width: 1080px) {
    .pantalla { height: auto; }
    .tablero { grid-template-columns: 1fr; }
    .galaxia { height: 62vh; }
    .panel { border-left: 0; border-top: 1px solid var(--borde); }
    .filtros { display: none; }
}