:root {
    --azul: #e53935;
    --azul-osc: #b71c1c;
    --verde: #43a047;
    --verde-osc: #2e7d32;
    --rojo: #b33a2e;
    --gris-fondo: #121214;
    --gris-borde: #33363c;
    --gris-texto: #a8adb5;
    --gris-oscuro: #f0f1f3;
    --blanco: #1c1e22;
    --superficie-2: #232529;
    --radio: 8px;
    --sombra: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media print {
    :root {
        --azul: #d32f2f;
        --azul-osc: #b71c1c;
        --verde: #2e8b57;
        --rojo: #9a2a1f;
        --gris-fondo: #ffffff;
        --gris-borde: #dde2e8;
        --gris-texto: #48505a;
        --gris-oscuro: #222831;
        --blanco: #ffffff;
        --superficie-2: #f7f9fb;
        --sombra: none;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--gris-fondo);
    color: var(--gris-oscuro);
    line-height: 1.5;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    background: #000000;
    color: #ffffff;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 2px solid var(--azul);
}

.topbar a { color: #ffffff; }
.topbar a:hover { text-decoration: underline; }

.topbar .marca { display: flex; align-items: center; }
.topbar .marca-logo { height: 34px; width: auto; display: block; }

.topbar nav { display: flex; gap: 1.2rem; align-items: center; font-size: 0.92rem; }
.topbar nav a.activo { color: var(--azul); font-weight: 700; text-decoration: underline; }

.contenedor {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

.contenedor.angosto { max-width: 620px; }

h1 { font-size: 1.5rem; margin: 0 0 1.1rem; color: var(--gris-oscuro); }
h2 { font-size: 1.15rem; margin: 0 0 0.8rem; color: var(--gris-oscuro); }
h3 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--gris-oscuro); }

.subtitulo { color: var(--gris-texto); margin-top: -0.6rem; margin-bottom: 1.3rem; font-size: 0.92rem; }
.nota-ayuda { color: var(--gris-texto); margin-top: 0.6rem; margin-bottom: 0; font-size: 0.85rem; }

.card {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.4rem;
    margin-bottom: 1.4rem;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
@media (max-width: 720px) {
    .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

.modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.6rem; }
@media (max-width: 720px) { .modulos { grid-template-columns: 1fr; } }

.modulo-link {
    display: block;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.modulo-link:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--azul); box-shadow: 0 8px 22px rgba(229, 57, 53, 0.25); }
.modulo-link .icono { font-size: 2.4rem; display: block; margin-bottom: 0.6rem; }
.modulo-link .titulo { font-size: 1.15rem; font-weight: 700; color: var(--gris-oscuro); }
.modulo-link .desc { color: var(--gris-texto); font-size: 0.88rem; margin-top: 0.3rem; }

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--gris-texto); }
.campo { margin-bottom: 1rem; }
.campo .opcional { font-weight: 400; color: #6f7580; }

input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--superficie-2);
    color: var(--gris-oscuro);
}
input::placeholder, textarea::placeholder { color: #6f7580; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.25);
}

textarea { resize: vertical; min-height: 70px; }

.btn {
    display: inline-block;
    background: var(--azul);
    color: #ffffff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.btn:hover { background: var(--azul-osc); text-decoration: none; color: #ffffff; }
.btn.verde { background: var(--verde); }
.btn.verde:hover { background: var(--verde-osc); }
.btn.rojo { background: var(--rojo); }
.btn.rojo:hover { background: #8f3024; }
.btn.secundario { background: var(--superficie-2); color: var(--gris-oscuro); border: 1px solid var(--gris-borde); }
.btn.secundario:hover { background: #2b2e33; color: var(--gris-oscuro); }
.btn.pequeno { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--gris-borde); text-align: left; }
th { background: var(--superficie-2); font-weight: 700; color: var(--gris-texto); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--superficie-2); }
tfoot td { font-weight: 700; background: var(--superficie-2); }
td.num, th.num { text-align: right; }

.alerta { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1.1rem; font-size: 0.9rem; }
.alerta.error { background: rgba(229, 57, 53, 0.15); color: #ff8a80; border: 1px solid rgba(229, 57, 53, 0.4); }
.alerta.ok { background: rgba(67, 160, 71, 0.15); color: #81c995; border: 1px solid rgba(67, 160, 71, 0.4); }

.vacio { text-align: center; color: var(--gris-texto); padding: 2.5rem 1rem; }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--superficie-2); color: var(--gris-oscuro); border: 1px solid var(--gris-borde); }

.tabla-scroll { overflow-x: auto; }

.fila-item { display: grid; grid-template-columns: 1.1fr 2fr 0.7fr 1fr 1fr; gap: 0.5rem; align-items: end; }
.fila-item.cols-carga { grid-template-columns: 1fr 2fr 0.7fr 1fr auto; }
.fila-item.cols-editar { grid-template-columns: 2fr 0.7fr 1fr auto auto; }
@media (max-width: 900px) {
    .fila-item, .fila-item.cols-carga, .fila-item.cols-editar { grid-template-columns: 1fr 1fr; }
}
.fila-item label { font-size: 0.72rem; margin-bottom: 0.15rem; }
.fila-item .subtotal-linea { font-weight: 700; padding-top: 0.5rem; text-align: right; color: var(--gris-oscuro); }

.tarjeta-item {
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    background: var(--superficie-2);
    padding: 1rem;
    margin-bottom: 1rem;
}
.tarjeta-item:last-child { margin-bottom: 0; }
.tarjeta-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--gris-borde);
}
.tarjeta-item-numero {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris-texto);
}
.quitar-fila {
    background: none;
    border: none;
    color: #ff6659;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.15rem 0.3rem;
}
.quitar-fila:hover { text-decoration: underline; }

.resumen-totales { display: flex; justify-content: flex-end; gap: 2rem; margin-top: 0.8rem; font-size: 0.95rem; }
.resumen-totales .total-final { font-size: 1.2rem; font-weight: 800; color: var(--azul); }

.login-box { max-width: 380px; margin: 4.5rem auto 0; }
.login-box .logo-img { display: block; max-width: 220px; height: auto; margin: 0 auto 0.8rem; }

.footer-nota { color: var(--gris-texto); font-size: 0.8rem; text-align: center; margin-top: 2rem; }

.doc-presupuesto { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 2rem; }
.doc-presupuesto .doc-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--azul); padding-bottom: 1rem; margin-bottom: 1.2rem; }
.doc-presupuesto .doc-header .doc-logo { height: 46px; width: auto; margin-bottom: 0.5rem; }
.doc-presupuesto .doc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2rem; margin-bottom: 1.3rem; font-size: 0.92rem; }
.doc-presupuesto .doc-datos dt { color: var(--gris-texto); font-weight: 600; display: inline; }
.doc-presupuesto .doc-datos dd { margin: 0 0 0.2rem; display: inline; }