:root {
    --azul: #6fb1e6;
    --azul-oscuro: #3d7fb8;
    --rosa: #f4a6c1;
    --rosa-oscuro: #e0729e;
    --gris: #f7f7fa;
    --texto: #333;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #eaf4fc 0%, #fdeef4 100%);
    color: var(--texto);
    margin: 0;
    min-height: 100vh;
}

.contenedor-login {
    max-width: 400px;
    margin: 80px auto;
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.contenedor-login h1 { color: var(--azul-oscuro); margin-bottom: 0; }
.contenedor-login h2 { color: var(--rosa-oscuro); font-weight: 500; margin-top: 4px; }

form { text-align: left; }
label { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; color: #555; }
input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

button, .btn {
    background: linear-gradient(90deg, var(--azul), var(--rosa));
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 18px;
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
}
button:hover, .btn:hover { opacity: 0.9; }

.topbar {
    background: white;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.topbar h1 { font-size: 18px; color: var(--azul-oscuro); margin: 0; }
.topbar nav a {
    margin-left: 16px;
    text-decoration: none;
    color: var(--texto);
    font-size: 14px;
    font-weight: 600;
}
.topbar nav a:hover { color: var(--rosa-oscuro); }

.contenido { max-width: 1100px; margin: 24px auto; padding: 0 20px; }

.card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }
th { background: var(--gris); color: #555; }
tr:hover { background: #fafafa; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-formal { background: #dbeafe; color: var(--azul-oscuro); }
.badge-minorista { background: #fce7f3; color: var(--rosa-oscuro); }

.total-ok { color: #16a34a; font-weight: 700; }
.total-bad { color: #dc2626; font-weight: 700; }

.mensaje-error { background: #fee2e2; color: #b91c1c; padding: 10px; border-radius: 8px; margin-bottom: 12px; }
.mensaje-ok { background: #dcfce7; color: #15803d; padding: 10px; border-radius: 8px; margin-bottom: 12px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }