/* ============================================================
   custom.css — Tema del webclient (Plan 01, Fase A)
   Se carga DESPUÉS de webclient.css, así que estos estilos ganan.
   Reversible: borra este archivo + collectstatic + reload para volver al default.
   ============================================================ */

:root {
    --bg:         #0e1116;   /* fondo general (deep slate)      */
    --bg-panel:   #161b22;   /* paneles / cards                 */
    --bg-input:   #1b2230;   /* caja de input                   */
    --border:     #2a323d;   /* bordes sutiles                  */
    --fg:         #cdd3de;    /* texto principal (soft)          */
    --fg-dim:     #8b95a5;   /* texto secundario                */
    --accent:     #4dd0e1;   /* acento (cyan) — prompt, foco    */
    --accent-2:   #7ee787;   /* verde — mensajes de sistema     */
    --amber:      #e3b341;   /* resaltados                      */
    --err:        #ff6b6b;   /* errores (rojo suave, no #f00)   */
    --link:       #58a6ff;   /* enlaces                         */

    --mono: 'JetBrains Mono','Cascadia Code','Fira Code','SF Mono',
            'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

/* ---------- Base ---------- */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a:link, a:visited { color: var(--link); text-decoration: none; }
a:hover, a:active  { color: var(--accent); text-decoration: underline; }

/* ---------- Ventana de salida (el texto del juego) ---------- */
#messagewindow {
    background: var(--bg);
    padding: 14px 18px;
    scroll-behavior: smooth;
}

.out {
    color: var(--fg);
    background-color: transparent;
    letter-spacing: 0.1px;
}

/* Clases semánticas de Evennia */
.sys    { color: var(--accent-2); }               /* mensajes del sistema */
.err    { color: var(--err); font-weight: 600; }  /* errores              */
.inp    { color: var(--fg-dim); }                 /* eco de lo que tecleas */
.prompt { color: var(--accent); font-weight: 600; }

/* ---------- Input ---------- */
#input, #inputcontrol {
    background: var(--bg);
}

#inputfield, #inputsizer {
    background: var(--bg-input);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#inputfield::placeholder { color: var(--fg-dim); }

#inputfield:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(77, 208, 225, 0.25);
}

/* ---------- Botones de la barra ---------- */
#splitbutton, #panebutton, #undobutton, #optionsbutton {
    color: var(--fg-dim);
    background-color: transparent;
    transition: color .15s ease;
}
#splitbutton:hover, #panebutton:hover, #undobutton:hover, #optionsbutton:hover {
    color: var(--accent);
}

.button {
    color: var(--bg);
    background-color: var(--accent);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--mono);
}
.button:hover { background-color: var(--accent-2); }

/* ---------- Cards / popups ---------- */
.card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--fg);
}

/* ---------- GoldenLayout: pestañas y paneles ---------- */
.lm_header .lm_tab {
    background: var(--bg-panel) !important;
    color: var(--fg-dim) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0;
}
.lm_tab.lm_active {
    background: var(--bg) !important;
    color: var(--accent) !important;
}
.lm_splitter { background: var(--border) !important; }

/* ---------- Paleta ANSI (16 colores) ----------
   Evennia mapea el color del juego a clases .color-0NN. Los defaults son neón
   puro (#0000ff, #00ff00...) y se ven cutres. Aquí van suavizados y legibles
   sobre el fondo oscuro (AA en texto grande). Esto reestiliza TODO el color
   del juego, no solo el banner. */
.color-000 { color: #3b4252; }  /* black  */
.color-001 { color: #d16969; }  /* red    */
.color-002 { color: #7ec699; }  /* green  */
.color-003 { color: #d7b169; }  /* yellow */
.color-004 { color: #5b8fd6; }  /* blue   */
.color-005 { color: #b48ead; }  /* magenta*/
.color-006 { color: #4db5c9; }  /* cyan   */
.color-007 { color: #cdd3de; }  /* white  */
.color-008 { color: #6b7688; }  /* br black */
.color-009 { color: #ff8a8a; }  /* br red   */
.color-010 { color: #8fe0a8; }  /* br green */
.color-011 { color: #e6c179; }  /* br yellow*/
.color-012 { color: #6aa0e8; }  /* br blue  */
.color-013 { color: #d3a0cc; }  /* br magenta*/
.color-014 { color: #6fd6e6; }  /* br cyan  */
.color-015 { color: #f0f3f7; }  /* br white */

/* ---------- Scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
    border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }