/*
 * Tema visual de secret.basnek.com, extraído del HTML/CSS real servido por
 * https://basnek.com/tools/ (curl del 22/08/2026), no de memoria ni
 * suposiciones. Fuente: bloque <style> inline de esa página (no usan un
 * .css externo propio, solo Bootstrap 5.1.3 vía CDN + Google Fonts).
 *
 * Todos los --basnek-* de abajo son una copia 1:1 de sus --terminal-* con
 * nombre renombrado (mismos valores hex). Única excepción: --basnek-danger,
 * que no existe en su tema custom — ese rojo es el --bs-danger por defecto
 * de Bootstrap 5.1.3 (el mismo CDN que ellos cargan), verificado contra el
 * bootstrap.min.css real, porque su página nunca lo sobreescribe.
 *
 * Tipografía: 'Fira Code' + 'IBM Plex Mono', cargadas por ellos vía Google
 * Fonts CDN (fonts.googleapis.com/fonts.gstatic.com). Aquí se auto-alojan
 * los mismos ficheros .woff2 (subset "latin", suficiente para castellano)
 * en /assets/fonts/ en vez de depender del CDN de Google — decisión
 * acordada explícitamente para no tener que tocar la CSP del proyecto ni
 * cargar recursos de terceros nuevos en /s/{secretId}.
 */

@font-face {
    font-family: 'Fira Code';
    font-style: normal;
    /* Google Fonts sirve el mismo fichero estático para 400/500/600 en el
       subset "latin" de esta versión (v27) — verificado, no es un error:
       los 3 pesos declarados en su CSS apuntan al idéntico .woff2. */
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/fira-code-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    /* Subset "symbols2" del CSS real de Google Fonts: cubre caracteres de
       dibujo de cajas (U+2500-259F), ausentes del subset "latin" (recortado
       a nivel de fichero, no solo de CSS). El banner motd usa 'Courier New'
       explícitamente (como el sitio real) así que no depende de esto, pero
       se incluye para que 'Fira Code' quede completo si en algún momento
       se usan esos caracteres fuera del banner. */
    src: url('/assets/fonts/fira-code-symbols2.woff2') format('woff2');
    unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}

:root {
    --basnek-bg: #0d1117;
    --basnek-bg-light: #161b22;
    --basnek-border: #30363d;
    --basnek-green: #3fb950;
    --basnek-blue: #58a6ff;
    --basnek-yellow: #d29922;
    --basnek-fg: #c9d1d9;
    --basnek-fg-dim: #8b949e;
    --basnek-prompt: #7ee787;
    /* Ver nota arriba: Bootstrap 5.1.3 --bs-danger, no del tema custom. */
    --basnek-danger: #dc3545;

    --basnek-mono-font: 'Fira Code', 'IBM Plex Mono', 'Courier New', monospace;
}

body {
    background-color: var(--basnek-bg);
    color: var(--basnek-fg);
    font-family: var(--basnek-mono-font);
    font-size: 14px;
    line-height: 1.6;
}

/* Cabecera tipo motd, igual que .terminal-header en el sitio real */
.basnek-header {
    background: var(--basnek-bg-light);
    border: 1px solid var(--basnek-border);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Línea de "comando" tipo prompt: cat /etc/motd, cd ... && ls -lah */
.basnek-prompt-line {
    color: var(--basnek-prompt);
    font-weight: 500;
}

.basnek-prompt-line::before {
    content: '$ ';
    color: var(--basnek-green);
}

/* Banner ASCII motd */
.basnek-motd {
    color: var(--basnek-blue);
    font-weight: 600;
    font-family: 'Courier New', monospace;
    line-height: 1.2;
    white-space: pre;
    overflow-x: auto;
}

.basnek-title {
    color: var(--basnek-green);
    font-weight: 600;
    font-size: 1.5rem;
}

.basnek-comment {
    color: var(--basnek-fg-dim);
    font-style: italic;
}

.basnek-comment::before {
    content: '# ';
}

/* Panel genérico oscuro (equivalente a .tools-index / .tab-content) */
.basnek-panel {
    background: var(--basnek-bg-light);
    border: 1px solid var(--basnek-border);
    border-radius: 6px;
    padding: 1.5rem;
}

/* Fila de "output de comando": código + botón copiar, como los
   .password-item del generador de claves real */
.basnek-output-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.basnek-code {
    flex: 1;
    background: var(--basnek-bg);
    border: 1px solid var(--basnek-border);
    color: var(--basnek-fg);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-family: var(--basnek-mono-font);
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: nowrap;
}

.basnek-copy-btn {
    flex-shrink: 0;
    background: var(--basnek-green);
    color: var(--basnek-bg);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.basnek-copy-btn:hover {
    background: var(--basnek-prompt);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(63, 185, 80, 0.3);
}

/* Formularios: mismo estilo que input[type=text]/textarea/select reales */
.basnek-panel input[type='text'],
.basnek-panel textarea,
.basnek-panel select {
    background: var(--basnek-bg);
    border: 1px solid var(--basnek-border);
    color: var(--basnek-fg);
    padding: 0.5rem;
    border-radius: 4px;
    font-family: var(--basnek-mono-font);
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}

.basnek-panel input[type='text']:focus,
.basnek-panel textarea:focus,
.basnek-panel select:focus {
    border-color: var(--basnek-green);
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.2);
}

.basnek-label {
    color: var(--basnek-fg-dim);
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.25rem;
}

.basnek-hint {
    color: var(--basnek-fg-dim);
    font-size: 0.8rem;
}

.basnek-hint-over {
    color: var(--basnek-danger);
}

/* Botón de acción principal (Crear secreto, Revelar secreto...) */
.basnek-btn {
    background: var(--basnek-green);
    color: var(--basnek-bg);
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: 4px;
    font-family: var(--basnek-mono-font);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.basnek-btn:hover:not(:disabled) {
    background: var(--basnek-prompt);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(63, 185, 80, 0.3);
}

.basnek-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.basnek-btn--danger {
    background: var(--basnek-danger);
    color: var(--basnek-fg);
}

.basnek-btn--danger:hover:not(:disabled) {
    background: #e35d6a;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.basnek-link {
    color: var(--basnek-blue);
    text-decoration: none;
    transition: color 0.2s;
}

.basnek-link:hover {
    color: var(--basnek-green);
}

/* Cajas de mensaje (aviso / error / éxito), variante oscura de sus colores
   de acento — su tema no tiene versión "banner claro", así que se hacen
   como panel oscuro con borde/texto del color semántico correspondiente */
.basnek-alert {
    border: 1px solid var(--basnek-border);
    border-left: 3px solid var(--basnek-fg-dim);
    background: var(--basnek-bg);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.basnek-alert--warn {
    border-left-color: var(--basnek-yellow);
    color: var(--basnek-yellow);
}

.basnek-alert--error {
    border-left-color: var(--basnek-danger);
    color: var(--basnek-danger);
}

.basnek-alert--success {
    border-left-color: var(--basnek-green);
    color: var(--basnek-green);
}

.basnek-alert--muted {
    border-left-color: var(--basnek-fg-dim);
    color: var(--basnek-fg-dim);
}

/* Bloque de salida (secreto revelado) */
.basnek-output-block {
    background: var(--basnek-bg);
    color: var(--basnek-fg);
    border: 1px solid var(--basnek-border);
    padding: 1rem;
    border-radius: 4px;
    font-family: var(--basnek-mono-font);
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
    box-sizing: border-box;
}

.basnek-logo {
    height: 32px;
    width: auto;
    display: block;
}

.basnek-footer {
    color: var(--basnek-fg-dim);
    font-size: 0.8rem;
}

/* Scrollbar (igual que el sitio real) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--basnek-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--basnek-border);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--basnek-green);
}