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

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family: "Segoe UI", Arial, sans-serif;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(124, 92, 246, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(20, 184, 166, 0.12),
            transparent 30%
        ),
        #10131c;

    color: #e8eaf2;
}


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

.card {
    position: relative;

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

    min-height: 680px;

    margin: 40px auto;

    padding: 0;

    display: grid;
    grid-template-columns: 210px 1fr;

    background: #191d29;

    border: 1px solid #292e3e;
    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   BARRA LATERAL
   ========================================================= */

.tabs {
    margin: 0;

    padding: 28px 14px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;

    gap: 8px;

    background: #141720;

    border: none;

    border-right: 1px solid #292e3e;

    border-radius: 0;

    box-shadow: none;
}


/* =========================================================
   IDENTIDAD VISUAL DE LAS TABS
   ========================================================= */

.tab {
    position: relative;

    width: 100%;

    padding: 14px 16px;

    text-align: left;

    background: transparent;

    border: none;

    border-radius: 10px;

    color: #858b9e;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

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

.tab:hover {
    background: #202534;
    color: #ffffff;

    transform: translateX(3px);
}


/* =========================================================
   TAB ACTIVA
   ========================================================= */

.tab.active {
    background: #272d3d;

    color: #ffffff;

    box-shadow: none;
}

.tab.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 25%;

    width: 3px;
    height: 50%;

    background: #8b5cf6;

    border-radius: 0 4px 4px 0;
}


/* Eliminar completamente el diseño anterior */

.tab.active::after {
    display: none;
}


/* =========================================================
   AREA PRINCIPAL
   ========================================================= */

.card > *:not(.tabs) {
    position: relative;
}


/* =========================================================
   TITULO
   ========================================================= */

h2 {
    margin: 0;

    padding: 34px 38px 22px;

    color: #f4f5f8;

    font-size: 27px;

    font-weight: 700;

    letter-spacing: -0.5px;

    border-bottom: 1px solid #292e3e;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

h2::first-letter {
    color: #8b5cf6;
}


/* =========================================================
   BADGE
   ========================================================= */

.badge {
    padding: 6px 11px;

    background: #20263a;

    color: #9b87f5;

    border: 1px solid #343b55;

    border-radius: 6px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    margin: 30px 38px 0;
}


/* =========================================================
   LABELS
   ========================================================= */

label {
    display: block;

    margin-bottom: 9px;

    color: #858b9e;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
select,
textarea {
    width: 100%;

    padding: 14px 15px;

    background: #11141d;

    border: 1px solid #303647;

    border-radius: 9px;

    color: #eef0f5;

    font-family: inherit;

    font-size: 14px;

    outline: none;

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

input:hover,
select:hover,
textarea:hover {
    border-color: #41485c;
}

input:focus,
select:focus,
textarea:focus {
    background: #151923;

    border-color: #8b5cf6;

    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.12);
}

input::placeholder,
textarea::placeholder {
    color: #5f6577;
}


/* =========================================================
   CAJA DE RESULTADO
   ========================================================= */

.template-box {
    position: relative;

    margin: 30px 38px 0;

    padding: 20px;

    background: #0e1118;

    border: 1px solid #282d3b;

    border-radius: 11px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02);
}


/* Encabezado de la consola */

.template-box::before {
    content: "PREVISUALIZACIÓN DEL INCIDENTE";

    display: block;

    margin-bottom: 14px;

    color: #666d80;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


/* =========================================================
   TEXTO DEL TEMPLATE
   ========================================================= */

.template-text {
    padding-right: 80px;

    color: #c9cedb;

    font-family:
        "Cascadia Code",
        Consolas,
        Monaco,
        monospace;

    font-size: 12px;

    line-height: 1.7;

    white-space: pre-wrap;
}


/* =========================================================
   COPIAR
   ========================================================= */

.copy-btn {
    position: absolute;

    top: 17px;
    right: 17px;

    padding: 7px 12px;

    background: #252b3b;

    color: #aeb5c7;

    border: 1px solid #363d50;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

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

.copy-btn:hover {
    background: #30384d;

    color: #ffffff;

    border-color: #4a536a;
}


/* =========================================================
   BOTON PRINCIPAL
   ========================================================= */

.btn-main {
    width: calc(100% - 76px);

    margin: 25px 38px 0;

    padding: 15px 20px;

    background: #8b5cf6;

    color: #ffffff;

    border: none;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.7px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(139, 92, 246, 0.18);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-main:hover {
    background: #7c4ee8;

    transform: translateY(-1px);

    box-shadow:
        0 12px 25px rgba(139, 92, 246, 0.25);
}

.btn-main:active {
    transform: translateY(0);
}


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

.footer-info {
    margin: 12px 38px 25px;

    color: #5f6678;

    font-size: 10px;

    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 750px) {

    body {
        padding: 15px;
    }

    .card {
        width: 100%;

        margin: 0;

        display: block;

        min-height: auto;
    }

    .tabs {
        flex-direction: row;

        padding: 10px;

        border-right: none;

        border-bottom: 1px solid #292e3e;

        overflow-x: auto;
    }

    .tab {
        min-width: 110px;

        text-align: center;

        padding: 11px 12px;
    }

    .tab:hover {
        transform: none;
    }

    .tab.active::before {
        display: none;
    }

    h2 {
        padding: 25px 22px 18px;

        font-size: 22px;
    }

    .grid {
        grid-template-columns: 1fr;

        margin: 24px 22px 0;
    }

    .template-box {
        margin: 25px 22px 0;
    }

    .btn-main {
        width: calc(100% - 44px);

        margin-left: 22px;
        margin-right: 22px;
    }

    .footer-info {
        margin-left: 22px;
        margin-right: 22px;
    }
}