/*
    =========================================================
    BOT TRACE PANEL
    IAmBot — Live Operation Status
    =========================================================

    Primera identidad visual del Dashboard.

    Objetivo:
    - Mantener coherencia con la portada de IAmBot.
    - Dar protagonismo a los datos.
    - Evitar apariencia de panel administrativo genérico.
    - Transmitir claridad, trazabilidad y calma.
*/


/* =========================================================
   VARIABLES
   ========================================================= */

   :root {

    --background: #08111c;
    --background-secondary: #0d1926;

    --surface: rgba(16, 30, 45, 0.88);
    --surface-hover: rgba(20, 38, 56, 0.94);

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text: rgba(255, 255, 255, 0.88);
    --text-soft: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.42);

    --blue: #4da3ff;
    --blue-soft: rgba(77, 163, 255, 0.14);

    --success: #55c98a;
    --success-soft: rgba(85, 201, 138, 0.12);

    --warning: #e6b84d;
    --warning-soft: rgba(230, 184, 77, 0.12);

    --danger: #ef6b6b;
    --danger-soft: rgba(239, 107, 107, 0.12);

    --shadow:
        0 12px 35px rgba(0, 0, 0, 0.22);

    --radius: 12px;

    --max-width: 1100px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}


html {
    font-size: 16px;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(30, 75, 115, 0.20),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #08111c 0%,
            #091522 100%
        );

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.container {

    width: min(
        var(--max-width),
        calc(100% - 40px)
    );

    margin: 0 auto;

    padding:
        45px
        0
        60px;
}


/* =========================================================
   HEADER
   ========================================================= */

header {

    text-align: center;

    margin-bottom: 28px;
}


.hero {

    padding:
        20px
        0
        15px;
}


.hero h1 {

    margin: 0;

    color: #ffffff;

    font-family:
        "Outfit",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        clamp(2rem, 5vw, 3rem);

    font-weight: 700;

    letter-spacing: 0.01em;

    line-height: 1.1;

    text-shadow:
        0 3px 18px rgba(0, 0, 0, 0.35);
}


.subtitle {

    margin:
        10px
        0
        0;

    color: var(--text-soft);

    font-size: 1rem;

    letter-spacing: 0.04em;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.container > p {

    margin:
        0
        0
        28px;
}


.container > p a {

    color: var(--text-soft);

    text-decoration: none;

    border-bottom:
        1px solid transparent;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.container > p a:hover {

    color: var(--blue);

    border-bottom-color:
        rgba(77, 163, 255, 0.45);
}


/* =========================================================
   TARJETAS
   ========================================================= */

.card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    padding:
        24px;

    margin-bottom:
        22px;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


.card:hover {

    background:
        var(--surface-hover);

    border-color:
        var(--border-strong);
}


.card h2 {

    margin:
        0
        0
        18px;

    padding:
        0
        0
        12px;

    color:
        rgba(255, 255, 255, 0.92);

    font-size:
        0.95rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    border-bottom:
        1px solid var(--border);
}


.card p {

    margin:
        0 0 12px;
}


/* =========================================================
   GRID
   ========================================================= */

.grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;

    margin-bottom:
        22px;
}


.grid .card {

    margin-bottom:
        0;
}


/* =========================================================
   TABLAS
   ========================================================= */

table {

    width:
        100%;

    border-collapse:
        collapse;

    margin-top:
        4px;
}


th {

    padding:
        11px
        12px;

    background:
        rgba(255, 255, 255, 0.06);

    color:
        var(--text-soft);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-align:
        left;

    text-transform:
        uppercase;

    border-bottom:
        1px solid var(--border);
}


td {

    padding:
        12px;

    color:
        var(--text);

    font-size:
        0.92rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}


tr:last-child td {

    border-bottom:
        none;
}


/*
    Primera columna de las tablas de estado.

    La hacemos ligeramente más discreta para que
    el valor sea visualmente protagonista.
*/

.card table td:first-child {

    color:
        var(--text-soft);
}


.card table td:last-child {

    text-align:
        right;

    color:
        rgba(255, 255, 255, 0.94);

    font-weight:
        500;
}


/* =========================================================
   BOT STATUS
   ========================================================= */

/*
    La primera tarjeta representa el estado actual
    y por eso tiene un poco más de presencia.
*/

.card:first-of-type {

    border-color:
        rgba(77, 163, 255, 0.16);
}


/* =========================================================
   ESTADOS
   ========================================================= */

.success {

    color:
        var(--success);
}


.warning {

    color:
        var(--warning);
}


.danger {

    color:
        var(--danger);
}


.status {

    font-size:
        1.15rem;

    font-weight:
        700;
}


/* =========================================================
   ACTIVIDAD RECIENTE
   ========================================================= */

.card ul {

    margin:
        0;

    padding-left:
        1.25rem;

    color:
        var(--text-soft);
}


.card li {

    margin-bottom:
        9px;

    padding-left:
        4px;
}


.card li:last-child {

    margin-bottom:
        0;
}


/* =========================================================
   ENLACES / BOTONES
   ========================================================= */

.button {

    display:
        inline-block;

    padding:
        11px
        20px;

    color:
        #ffffff;

    background:
        var(--blue);

    border:
        none;

    border-radius:
        7px;

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.button:hover {

    background:
        #6ab2ff;

    transform:
        translateY(-1px);
}


/* =========================================================
   CENTRADO
   ========================================================= */

.center {

    text-align:
        center;

    margin-top:
        30px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    margin:
        45px 0 10px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    text-align:
        center;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.disclaimer {

    border-left:
        3px solid var(--warning);

    padding-left:
        15px;
}


/* =========================================================
   RESPONSIVE — TABLETS
   ========================================================= */

@media screen and (max-width: 850px) {

    .container {

        width:
            calc(100% - 30px);

        padding-top:
            30px;

        padding-bottom:
            45px;
    }


    .grid {

        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .grid .card {

        margin-bottom:
            22px;
    }


    .hero h1 {

        font-size:
            2rem;
    }
}


/* =========================================================
   RESPONSIVE — MÓVILES
   ========================================================= */

@media screen and (max-width: 600px) {

    .container {

        width:
            calc(100% - 24px);

        padding-top:
            22px;
    }


    .hero {

        padding:
            15px
            0
            12px;
    }


    .hero h1 {

        font-size:
            1.8rem;
    }


    .subtitle {

        font-size:
            0.9rem;
    }


    .card {

        padding:
            18px;

        border-radius:
            10px;
    }


    .card h2 {

        font-size:
            0.86rem;
    }


    td,
    th {

        padding:
            9px 7px;

        font-size:
            0.82rem;
    }


    /*
        La tabla de historial puede necesitar
        desplazamiento horizontal en pantallas pequeñas.
    */

    .card {

        overflow-x:
            auto;
    }


    footer {

        margin-top:
            35px;
    }
}


/* =========================================================
   PREFERENCIA DE REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    * {

        scroll-behavior:
            auto !important;

        transition:
            none !important;
    }
}