* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f6f8;
    color: #2c3e50;
}

/* ---------- Login ---------- */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%);
}
.login-card {
    width: 100%; max-width: 360px;
    background: #fff; border-radius: 12px;
    padding: 32px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
    text-align: center;
}
.login-logo { width: 110px; height: 110px; object-fit: contain; margin-bottom: 16px; }
.login-card h1 { font-size: 1.5rem; color: #1a2a3a; margin-bottom: 4px; }
.login-sub { color: #7f8c8d; font-size: .9rem; margin-bottom: 20px; }
.login-card form { text-align: left; }
.login-card label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: .9rem; }
.login-card input {
    width: 100%; padding: 11px 12px; border: 1px solid #d5dbe1;
    border-radius: 8px; font-size: 1rem;
}
.login-card input:focus { outline: none; border-color: #2980b9; box-shadow: 0 0 0 3px rgba(41,128,185,.15); }
.btn-primario {
    width: 100%; margin-top: 20px; padding: 12px;
    background: #1a2a3a; color: #fff; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
}
.btn-primario:hover { background: #2980b9; }
.alerta { padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.alerta-error { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }

/* ---------- Cabecera ---------- */
.cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; background: #1a2a3a; color: #fff;
}
.cabecera-izq { display: flex; align-items: center; gap: 14px; }
.logo-cabecera { width: 48px; height: 48px; object-fit: contain; }
.cabecera-titulo { display: block; font-size: 1.1rem; font-weight: 700; }
.cabecera-sub { display: block; font-size: .85rem; color: var(--color-vendedora); }
.btn-cerrar {
    color: #fff; text-decoration: none; background: rgba(255,255,255,.12);
    padding: 8px 14px; border-radius: 8px; font-size: .9rem;
}
.btn-cerrar:hover { background: #c0392b; }

/* ---------- Contenido ---------- */
.contenido { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
.filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.filtros label { font-weight: 600; font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.filtros input[type="date"] {
    padding: 8px; border: 1px solid #d5dbe1; border-radius: 8px;
}
.filtros .btn-primario { width: auto; margin-top: 0; padding: 9px 18px; }
.btn-secundario {
    padding: 9px 16px; background: #ecf0f1; color: #2c3e50; text-decoration: none;
    border-radius: 8px; font-size: .9rem; border: none; cursor: pointer; display: inline-block;
}
.btn-secundario:hover { background: #dfe6e9; }

/* ---------- Tarjetas ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tarjeta {
    background: #fff; border-radius: 10px; padding: 18px;
    border-left: 4px solid var(--color-vendedora); box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.tarjeta-label { display: block; font-size: .8rem; color: #7f8c8d; text-transform: uppercase; }
.tarjeta-valor { display: block; font-size: 1.4rem; font-weight: 700; margin-top: 6px; }

/* ---------- Panel / tabla ---------- */
.panel { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); overflow: hidden; }
.panel h2 { padding: 16px 20px; font-size: 1.05rem; border-bottom: 1px solid #ecf0f1; }
.panel h2 small { font-weight: 400; color: #7f8c8d; font-size: .8rem; }
.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px 20px; background: #f8f9fa; font-size: .8rem; text-transform: uppercase; color: #7f8c8d; }
td { padding: 12px 20px; border-top: 1px solid #ecf0f1; }
td.monto { font-weight: 700; }
.sin-datos { text-align: center; color: #95a5a6; padding: 30px; }
.etiqueta { padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.etiqueta-factura { background: #fdecea; color: #c0392b; }
.etiqueta-boleta { background: #eafaf1; color: #27ae60; }
.etiqueta-ok { background: #ebf5fb; color: #2980b9; }
.etiqueta-match { background: #fef9e7; color: #b7950b; font-size: .7rem; }

.texto-tenue { color: #bdc3c7; }
.texto-obs { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.td-centro { text-align: center; }

.icono-sinc { font-size: 1.1rem; }
.sinc-ok { color: #27ae60; }
.sinc-pen { color: #bdc3c7; }

/* ---------- Movil ---------- */
@media (max-width: 600px) {
    .tarjetas { grid-template-columns: 1fr 1fr; }
    .contenido { padding: 0 10px; }
}