* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

:root {

    --bg: #0f1117;

    --card: rgba(26, 31, 46, .88);

    --border: rgba(255,255,255,.08);

    --text: #ffffff;

    --text-secondary: #b7c0d1;

    --accent: #4f8cff;

    --accent-hover: #2563eb;

    --success: #22c55e;

    --error: #ef4444;
}

/* ==========================================
   BODY
========================================== */

body {

    min-height: 100vh;

    padding: 25px;

    color: var(--text);

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

    background:
        radial-gradient(
            circle at top,
            #1b2d52 0%,
            #111827 35%,
            #0f1117 100%
        );
}

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

.container {

    max-width: 900px;

    margin: 0 auto;
}

/* ==========================================
   HERO
========================================== */

.hero {

    text-align: center;

    margin-bottom: 35px;
}

.hero-badge {

    display: inline-block;

    padding: 8px 16px;

    border-radius: 999px;

    background:
        rgba(79,140,255,.15);

    border:
        1px solid rgba(79,140,255,.35);

    color: #8bb5ff;

    font-size: .85rem;

    margin-bottom: 15px;
}

.hero h1 {

    font-size: 2.4rem;

    margin-bottom: 12px;
}

.hero p {

    max-width: 650px;

    margin: 0 auto;

    color: var(--text-secondary);

    line-height: 1.6;
}

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

.card {

    background: var(--card);

    backdrop-filter: blur(14px);

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

    border-radius: 20px;

    padding: 25px;

    margin-bottom: 20px;

    box-shadow:
        0 12px 40px rgba(0,0,0,.35);
}

.card-header {

    margin-bottom: 20px;
}

.card-header h2 {

    font-size: 1.1rem;

    font-weight: 700;
}

/* ==========================================
   CAMPOS
========================================== */

.field {

    margin-bottom: 18px;
}

label {

    display: block;

    margin-bottom: 8px;

    color: var(--text-secondary);

    font-size: .95rem;
}

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

input,
select {

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    border: 1px solid #2f3a54;

    background: #111827;

    color: white;

    font-size: 15px;

    transition: .2s;
}

input:hover,
select:hover {

    border-color: #4568b8;
}

input:focus,
select:focus {

    outline: none;

    border-color: var(--accent);

    box-shadow:
        0 0 0 4px
        rgba(79,140,255,.15);
}

/* ==========================================
   ERROR
========================================== */

.error {

    display: none;

    margin-top: 15px;

    padding: 14px;

    border-radius: 12px;

    background: var(--error);

    color: white;

    font-weight: 600;
}

/* ==========================================
   RESULTADO
========================================== */

.result-card {

    display: none;
}

/* ==========================================
   TARJETA PRINCIPAL
========================================== */

.refund-hero {

    text-align: center;

    padding: 35px;

    border-radius: 22px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    box-shadow:
        0 15px 50px
        rgba(37,99,235,.35);
}

.refund-label {

    font-size: .8rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: .95;
}

.refund-value {

    margin: 12px 0;

    font-size: 3.5rem;

    font-weight: 900;

    color: white;
}

.refund-status {

    margin-top: 10px;

    font-weight: 600;
}

.refund-days {

    margin-top: 10px;

    opacity: .9;
}

/* ==========================================
   ESTADÍSTICAS
========================================== */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap: 15px;
}

.stat-card {

    padding: 18px;

    text-align: center;

    border-radius: 16px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);
}

.stat-icon {

    font-size: 1.6rem;

    margin-bottom: 10px;
}

.stat-title {

    color: var(--text-secondary);

    font-size: .85rem;
}

.stat-value {

    margin-top: 8px;

    font-size: 1.1rem;

    font-weight: 700;
}

/* ==========================================
   BOTÓN
========================================== */

button {

    width: 100%;

    margin-top: 25px;

    padding: 15px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #4f8cff,
            #2563eb
        );

    color: white;

    font-size: .95rem;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(79,140,255,.35);
}

/* ==========================================
   MENSAJE COPIADO
========================================== */

.copy-success {

    margin-top: 12px;

    text-align: center;

    color: var(--success);

    font-weight: 700;
}

/* ==========================================
   RESUMEN ANTIGUO
========================================== */

.summary {
    display: none !important;
}

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

@media (max-width: 768px) {

    body {
        padding: 15px;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .refund-value {
        font-size: 2.5rem;
    }

    .card {
        padding: 18px;
    }
}