:root {
    --bg: #0b0c10;
    --bg-card: #15171d;
    --texto: #f5f5f7;
    --texto-suave: #a6a8b3;
    --acento: #7c5cff;
    --acento-2: #ff5c8a;
    --borde: #24262e;
    --radio: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.contenedor {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.contenedor-app {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.tarjeta {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 20px;
    margin-bottom: 16px;
}

.boton {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    border: none;
    background: var(--acento);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform .12s ease, opacity .12s ease;
}

.boton:active { transform: scale(0.98); }
.boton-secundario { background: transparent; border: 1px solid var(--borde); color: var(--texto); }

input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--borde);
    background: #0f1015;
    color: var(--texto);
    font-size: 15px;
    margin-bottom: 12px;
}

label { font-size: 13px; color: var(--texto-suave); display: block; margin-bottom: 6px; }

.titulo-app { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.subtitulo-app { color: var(--texto-suave); font-size: 14px; margin: 0 0 20px; }

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borde);
}

.top-nav a { text-decoration: none; font-size: 14px; color: var(--texto-suave); }
.top-nav .marca { color: var(--texto); font-weight: 700; font-size: 16px; text-decoration: none; }

.mensaje-error {
    background: rgba(255, 92, 138, .12);
    border: 1px solid rgba(255, 92, 138, .4);
    color: #ff8fae;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}

.mensaje-ok {
    background: rgba(90, 220, 150, .12);
    border: 1px solid rgba(90, 220, 150, .4);
    color: #7fe3ab;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}

.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde);
}
.lista-simple li:last-child { border-bottom: none; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--bg-card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; text-align: center; }
.stat .valor { font-size: 22px; font-weight: 700; }
.stat .etiqueta { font-size: 12px; color: var(--texto-suave); }