/* ==== 1. VARIABLES Y CONFIGURACIÓN ==== */
            :root {
            color-scheme: dark; /* Esto ayuda a que los scrollbars y menús sean oscuros por defecto */
/*   #1a1c1e  #222427  */
            --bg: #2f3236;
            --card: #222427;
            --accent: #4cc9f0;
            --text: #e0e0e0;
            --text-muted: #666;
            --input-bg: #0a0b0c;
            --border: #2d3135;
            --accent-rgb: 255, 77, 109;

            /* Colores de Marca IA */
            --flux: #ff4d6d;
            --sdxl: #7209b7;
            --sd15: #4cc9f0;
            --neg: #ffb703;
        }

   /* Específico para que los slots negativos brillen en Dorado */
#ckpt-neg-1.active-memory, #ckpt-neg-2.active-memory, #ckpt-neg-3.active-memory {
    border-color: #f5b727 !important;
    box-shadow: 0 0 12px rgba(245, 183, 39, 0.4);
}

#ckpt-neg-1.active-memory .slot-save-zone,
#ckpt-neg-2.active-memory .slot-save-zone,
#ckpt-neg-3.active-memory .slot-save-zone {
    background: rgba(245, 183, 39, 0.2);
    color: #f5b727;
}

/* Evita que el texto se "pinte" de azul al arrastrar chips */
.dragging {
    opacity: 0.5;
}
#sortable-container {
    user-select: none;
}

#sortable-container:empty::before {
    content: "Escoge opciones de la biblioteca de preestablecidos para comenzar...";
}

textarea, input {
    user-select: text !important;
    pointer-events: auto !important;
}
        /* Forzado de color base para que el 'dark scheme' no invente colores */
        body {
            background-color: var(--bg);
            color: var(--text);
            margin: 0;
            font-family: sans-serif;
        }
        /* === RESET Y ESTILOS BASE ==== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        /* Scrollbar Moderno (Webkit) */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 4px;
        }
        /* ==== LAYOUT (ESTRUCTURA) ==== */
        .app {
            background: var(--card);
            width: 1100px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(0,0,0,0.9);
            border: 1px solid #820C0C;
        }

     .content {
    padding: 25px;
    display: grid;
    gap: 12px;

    /* 1. CONFIGURACIÓN POR DEFECTO (Móvil) */
    /* En pantallas pequeñas, solo 1 columna para que nada se desborde */
    grid-template-columns: 1fr;
}

/* 2. CONFIGURACIÓN PARA TABLETS (Aprox. 600px en adelante) */
@media (min-width: 600px) {
    .content {
        /* Pasamos a 2 columnas fijas */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3. CONFIGURACIÓN PARA PC (Aprox. 1024px en adelante) */
@media (min-width: 1024px) {
    .content {
        /* AQUÍ ESTÁ EL TRUCO:
           Forzamos 4 columnas siempre, tengan o no contenido. */
        grid-template-columns: repeat(4, 1fr);
    }
}

/* REGLA DE ORO PARA EL ANCHO: */
.full-width, .chips-container, .info-box {
    /* Esto hace que estos elementos SIEMPRE ocupen todo el ancho
       disponible, ya sean 1, 2 o 4 columnas. */
    grid-column: 1 / -1;
}
        .two-cols { grid-column: span 2; }
        .full-width {
            grid-column: 1 / -1;
        }

        .group {
            margin-bottom: 8px;
            display: flex;
            flex-direction: column;
        }

        label {
            display: block;
            font-size: 0.55rem;
            color: var(--text-muted);
            margin-bottom: 4px;
            font-weight: bold;
            text-transform: uppercase;
        }

/* Heredan las dimensiones de .btn-slot pero cambian el acento al activarse */
/* --- CONTENEDOR MAESTRO DE SLOTS (V4M1) --- */
.slot-dual-container {
    display: flex;
    width: 90px;       /* Un poco más para que los porcentajes respiren */
    height: 42px;
    background: #050706;
    border: 1px solid #2d3631;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ZONA 1: GUARDAR (Izquierda - 25%) */
.slot-save-zone {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    color: #555; /* Color neutro inicial */
    font-size: 0.75rem;
    cursor: pointer;
    border-right: 1px solid #1a1f1c;
    transition: all 0.2s;
}

/* ZONA 2: CARGAR (Centro - 50%) */
.slot-load-zone {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #6a7a72;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

/* ZONA 3: ELIMINAR (Derecha - 25%) */
.slot-delete-zone {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    color: #444;
    font-size: 0.9rem;
    cursor: pointer;
    border-left: 1px solid #1a1f1c;
    transition: all 0.2s;
}

/* --- ESTADOS HOVER (Feedback visual) --- */
.slot-save-zone:hover { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.slot-load-zone:hover { background: rgba(255,255,255,0.05); color: #fff; }
.slot-delete-zone:hover { background: rgba(255, 0, 0, 0.2); color: #ff4d4d; }

/* --- ESTADOS DE MEMORIA (Activados por JS) --- */

/* Slot Positivo con Datos (Rosa) */
.slot-dual-container.active-memory {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 77, 109, 0.2);
}
.slot-dual-container.active-memory .slot-save-zone { color: var(--accent); }

/* Slot Negativo con Datos (Dorado) - con un ID o clase específica en el JS */
.slot-dual-container.neg-active {
    border-color: #f5b727;
    box-shadow: 0 0 10px rgba(245, 183, 39, 0.2);
}
.slot-dual-container.neg-active .slot-save-zone { color: #f5b727; }

/* Efecto para el Slot que está actualmente en uso (Focus) */
.slot-dual-container.slot-focus {
    background: #111;
    transform: scale(1.02);
}

/* Botón Reiniciar (Se queda igual, está bien así) */
.btn-reiniciar-compact {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--accent);
    color: var(--accent);
    width: 42px;
    height: 42px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    transition: all 0.2s;
}
select {
    font-family: 'Inter', sans-serif; /* Unifica con el resto de la app */
    font-size: 0.85rem;
    font-weight: 300;                 /* Para que no se vea "pesado" */
    background-color: #1a1a1a;
    color: #eee;
    border: 1px solid #333;
    padding: 8px 30px 8px 10px;       /* Un poco más de aire arriba y abajo */
    border-radius: 6px;               /* Un poco más redondeado para el look moderno */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: border-color 0.2s;    /* Suavidad al interactuar */
}

select:focus {
    border-color: var(--accent);      /* Ilumina el borde con tu color acento */
    outline: none;
}

/* Estilo para las opciones dentro del desplegable */
select option {
    background-color: #1a1a1a !important;
    color: #eee !important;
    appearance: none;
}
        /* =========================================
               COMPONENTES (INPUTS, BUTTONS, TABS)
           ========================================= */
        /* Inputs y Selects */
        input, select, textarea#sub {
            width: 100%;
            padding: 10px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: #fff;
            font-size: 0.8rem;
            outline: none;
            transition: 0.3s;
        }

       /* ESPECÍFICO: Caja de Sujeto (Inter) */
        textarea#sub {
            font-family: 'Inter', sans-serif;
            min-height: 80px;
            resize: vertical;
        }
        /* Tabs (Navegación) */
/* La base: una ranura troquelada en el metal */
.tabs {
    display: flex;
    gap: 0px; /* Sin huecos para que parezca una sola pieza mecanizada */
    margin-bottom: 25px;
    padding: 4px;
    background: #0a0a0a; /* Fondo muy oscuro (el hueco) */
    border-radius: 12px;
    border: 1px solid #222;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7); /* Sombra interna profunda */
}

.tab-btn {
    flex: 1;
    padding: 12px 5px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none; /* sin bordes para evitar saltos */
    border-radius: 8px; /* Un poco menos que el contenedor */
    background: transparent;
    color: #555;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /*rápido y con rebote*/
    /*transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); /*cámara lenta*/
    /*transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);  /*Click seco*/
    position: relative;
    overflow: hidden;
}
/* El botón activo: parece una placa de metal pulido que resalta */
.tab-btn.active {
    background: linear-gradient(180deg, #333 0%, #1a1a1a 100%);
    color: #fff;
    /* Usamos un sombreado que no "empuja" hacia afuera */
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
/* El indicador de luz */
.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 2px;
    background: var(--accent); /* Tu color rosa/rojo */
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent);
      animation: pulso-led 0.8s ease-out;
}

.flash-accent {
    animation: pulso-led 0.8s ease-out;
}
/* Hover: Solo luz, sin cambios físicos */
.tab-btn:hover:not(.active) {
    color: #999;
    background: rgba(255,255,255,0.02);
}
/* Feedback al hacer clic */
.tab-btn:active {
    background: #000;
}
        /* Botones */
        .btn-group { grid-column: span 4; display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 10px; margin-top: 10px; }

        .btn {
            padding: 12px; border: none; border-radius: 6px; font-weight: bold;
            cursor: pointer; text-transform: uppercase; font-size: 0.7rem; transition: 0.4s;
        }

        .btn-main { background-color: var(--accent) !important; color: #000 !important; }

        #neg-btn {
            background-color: #000 !important;
            color: var(--neg) !important;
            border: 1px solid var(--neg) !important;
            
        }

        /* 1. REGLA MAESTRA PARA TODOS LOS BOTONES DE GUARDADO */
        /* "aire" y el tamaño para todos por igual */
        .btn-save-pos,
        .btn-save-neg,
        .btn-copy-neg,
        .btn-save-hybrid {
            height: 46px; /* Aumentado para que respire */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px; /* Espaciado entre letras para mayor legibilidad */
            cursor: pointer;
            transition: all 0.7s ease;
            background: #1a1a1a;
            box-sizing: border-box;
        }
        /* 2. COLORES ESPECÍFICOS (Solo bordes y texto) */
        /* Rosa Phronesis */
        .btn-save-pos {
            border: 1px solid var(--accent);
            color: var(--accent);
        }
        .btn-save-pos:hover {
            background: var(--accent);
            color: #000;
        }
        /* Ámbar Técnico */
        .btn-save-neg {
            border: 1px solid #c4921f;
            color: #c4921f;
        }
        .btn-save-neg:hover {
            background: #ac8362;
            color: #000;
        }
     
        .btn-copy-neg {
            display: block;        /* Convierte el botón en bloque para que respete el ancho total */
            width: 100%;          /* Hace que abarque de lado a lado */
            padding: 12px;        /* Espaciado interno para que sea más fácil de tocar/clicar */
            border: 1px solid #c4921f;
            color: #c4921f;
            background: transparent; /* Fondo inicial transparente */
            border-radius: 8px;   /* Redondeado para que combine con el resto del diseño */
            cursor: pointer;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease; /* Transición suave para el hover */
            margin-top: 10px;     /* Separación del textarea */
        }

        .btn-copy-neg:hover {
            background: #e09d66;
            color: #1a1a1a;
            box-shadow: 0 0 15px rgba(196, 146, 31, 0.4); /* Efecto de brillo sutil */
        }

        /* Azul Acero (Híbrido) */
        .btn-save-hybrid {
            border: 1px solid #00adb5;
            color: #00adb5;
            grid-column: span 2; /* Ocupa el ancho total */
            margin-top: 5px;     /* Separación sutil del bloque superior */
        }
        .btn-save-hybrid:hover {
            background: #00adb5;
            color: #000;
        }

        /* Cuando el contenedor no tiene chips, muestra un mensaje sutil #9c9d68*/
        .chips-container:empty::before {
            content: "Escoge una o varias opciones del selector de preestablecidos para comenzar";
            color: #5d5e3e; /* Un gris muy oscuro, casi invisible */
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 40px;
         /*   text-transform: uppercase; */
        }

        /* Chips */
        .chips-container {
            grid-column: span 4; background: #151517; padding: 15px; border-radius: 8px;
            border: 1px dashed #444; display: flex; flex-wrap: wrap; gap: 8px;
            min-height: 50px; align-items: center; margin-top: 10px; pointer-events: auto !important;
        }

        .chip {
            background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 20px;
            font-size: 0.75rem; cursor: grab; transition: 0.2s; user-select: none; -webkit-user-drag: element;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .chip-negativo {
            display: inline-flex; align-items: center; background: #111 !important;
            color: #eee !important; border: 1px solid var(--neg) !important;
            padding: 4px 10px; border-radius: 6px; margin: 4px; font-size: 0.8rem;
        }

        /* =========================================
                   RESULTADOS Y FAVORITOS
           ========================================= */
        .result-area {
            grid-column: span 4; background: #000; border-radius: 8px;
            border: 1px solid #333; margin-top: 15px; overflow: hidden;
        }

        .res-header {
            padding: 8px 12px; font-size: 0.65rem; font-weight: bold; background: #151517;
            display: flex; justify-content: space-between; color: var(--accent);
            text-transform: uppercase;
        }

            .res-box {
            width: 100%;
            /* Fondo ultra oscuro con un ligero tinte del color activo */
            background: color-mix(in srgb, var(--accent), #000 97%);
            /* El texto ahora cambia según la pestaña activa */
            color: var(--accent);

            padding: 15px;
            font-family: 'Fira Code', monospace;
            font-size: 0.85rem;
            min-height: 100px;
            resize: vertical;
            outline: none;
            display: block;
            line-height: 1.5;
            box-sizing: border-box;

            /* Bordes estilo pantalla incrustada */
            border-radius: 8px;
            border: 1px solid color-mix(in srgb, var(--accent), transparent 80%);
            border-top: 1px solid #000; /* Efecto de profundidad */

            /* Resplandor interno sutil (Glow de pantalla) */
            box-shadow:
                inset 0 2px 10px rgba(0,0,0,0.8),
                0 1px 0 rgba(255,255,255,0.05); /* Brillo en el borde inferior */

            transition: all 0.3s ease;
        }

        /* Efecto opcional: escaneo o brillo extra al estar activo */
        .res-box:focus {
            border-color: color-mix(in srgb, var(--accent), transparent 50%);
            box-shadow:
                inset 0 2px 10px rgba(0,0,0,0.9),
                0 0 15px color-mix(in srgb, var(--accent), transparent 85%);
        }

                /* Favoritos */
        .fav-list { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; margin-
            top: 15px; }

        .fav-item {
            display: flex; justify-content: space-between; align-items: center; padding: 10px;
            background: rgba(255,255,255,0.05); border-radius: 8px; border: 1px solid #333;
            transition: all 0.3s ease; border-left: 0px solid var(--accent);
        }

        .fav-item:hover {
            border-left: 5px solid var(--accent);
            background: rgba(255,255,255,0.08);
        }

        /* =========================================
                   UTILIDADES Y ANIMACIONES
           ========================================= */
        .hidden { display: none; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        #alerta-conflictos {
            color: #ffb700;
            font-size: 0.75rem;
            font-weight: 500;
            margin-top: 10px;
            min-height: 1.2rem;
            /* Quitamos el borde izquierdo para que el latido sea el protagonista */
            transition: opacity 0.5s ease;
        }

        /* Esta es la clase que hace el latido */
        .latido-moribundo {
            animation: pulse-alert 3s ease-in-out infinite;
        }

        @keyframes pulse-alert {
            0% {
                opacity: 0.3; /* Casi invisible */
                text-shadow: 0 0 0px rgba(255, 183, 0, 0);
            }
            50% {
                opacity: 1; /* Intensidad máxima */
                text-shadow: 0 0 8px rgba(255, 183, 0, 0.4); /* Un brillo espectral */
            }
            100% {
                opacity: 0.3;
                text-shadow: 0 0 0px rgba(255, 183, 0, 0);
            }
        }

@keyframes pulso-led {
    0% {
        filter: brightness(1);
        outline: 1px solid transparent;
    }
    40% {
        filter: brightness(1.15); /* Brillo muy sutil */
        outline: 1px solid var(--accent); /* Un borde de luz fino que aparece y desaparece */
    }
    100% {
        filter: brightness(1);
        outline: 1px solid transparent;
    }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.brand-header {
    animation: slideIn 1s ease-out forwards;
}

.info-box {
    grid-column: 1 / -1;
    margin-top: 5px;
    padding: 10px;
    background: #1a1a1c;
    border-left: 3px solid var(--accent);
    display: none;
    animation: fadeIn 0.3s ease;

    /* --- MEJORAS VISUALES DE FUENTE --- */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;      /* Peso normal, evita que se vea "pesada" */
    color: #bbb;           /* Un gris un poco más claro para mejor lectura */
    line-height: 1.4;      /* Espaciado entre líneas para que no se vea apretado */
    letter-spacing: 0.2px; /* Un toque de separación entre letras */
    text-transform: none;  /* Sin mayúsculas forzadas */

    /* Seguridad para el desborde */
    overflow-wrap: break-word;
}

        /* el label y el status conviven bien */
        label {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #trans-status {
            font-size: 0.65rem;
            font-weight: normal;
            text-transform: none;
            transition: all 0.3s ease;
        }

        .neo-notifier {
    position: fixed;
    top: 50%;           /* Centrado vertical */
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    z-index: 10000;     /* Por encima de todo */
    pointer-events: none;
    display: none;
}

.notif-box {
    background: rgba(10, 11, 12, 0.85); /* Fondo oscuro traslúcido */
    backdrop-filter: blur(10px);        /* Efecto cristal esmerilado */
    color: var(--accent);               /* Tu color Rosa, Púrpura o Azul */
    padding: 15px 40px;
    border-radius: 2px;                 /* Bordes rectos más Pro */
    border: 1px solid var(--accent);    /* Borde de color neón */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8),
                inset 0 0 15px var(--accent); /* Resplandor interior */
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    text-align: center;
    min-width: 300px;

    /* Animación de entrada y latido */
    animation: neo-aparecer 0.4s ease-out forwards,
               neo-latido 2s infinite;
}

@keyframes neo-aparecer {
    from { opacity: 0; transform: scale(0.8); letter-spacing: 20px; filter: blur(10px); }
    to { opacity: 1; transform: scale(1); letter-spacing: 4px; filter: blur(0); }
}

@keyframes neo-latido {
    0% { box-shadow: 0 0 25px rgba(0,0,0,0.8), inset 0 0 15px var(--accent); }
    50% { box-shadow: 0 0 40px var(--accent), inset 0 0 25px var(--accent); }
    100% { box-shadow: 0 0 25px rgba(0,0,0,0.8), inset 0 0 15px var(--accent); }
}

@keyframes neo-latido-critico {
    0% { box-shadow: 0 0 25px rgba(0,0,0,0.8), inset 0 0 15px var(--flux); }
    50% { box-shadow: 0 0 40px var(--flux), inset 0 0 25px var(--flux); }
    100% { box-shadow: 0 0 25px rgba(0,0,0,0.8), inset 0 0 15px var(--flux); }
}