:root {
    --color-primario: #1565c0;
    --color-primario-oscuro: #0d47a1;
    --color-fondo: #f4f6f8;
    --color-borde: #dde3e8;
    --color-texto: #1f2933;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
}

.topbar {
    background: var(--color-primario-oscuro);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-brand { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.topbar-logo-chip {
    background: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
}
.topbar-logo { height: 22px; width: auto; display: block; }
.topbar-partner-separador { color: #ccc; font-size: 14px; margin: 0 2px; }
.topbar-logo-partner { height: 20px; }
.topbar-leyenda-partner {
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
}

.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-link { color: #fff !important; text-decoration: none; font-weight: 600; }
.topbar-link:hover { text-decoration: underline; }

.inline-form { display: inline; }

.content { max-width: 1200px; margin: 0 auto; padding: 24px; }

.footer {
    text-align: center;
    padding: 16px;
    color: #8a97a3;
    font-size: 12px;
}

/* --- Login --- */
.login-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-logo { text-align: center; margin-bottom: 20px; }
.login-logo img { max-width: 260px; max-height: 80px; }

/* --- Pantalla de administración de empresas (CrearUsuario) --- */
.admin-wrapper {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.admin-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.admin-card h1 { margin: 0 0 4px; font-size: 22px; }
.seccion-titulo { font-size: 15px; margin: 24px 0 12px; border-top: 1px solid var(--color-borde); padding-top: 16px; }
.seccion-titulo:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }

.fila-bascula {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}
.fila-bascula-campos {
    display: grid;
    grid-template-columns: 90px 1fr 2fr 30px;
    gap: 10px;
    align-items: end;
}
.fila-bascula .form-group { margin-bottom: 0; }
.fila-bascula label { font-size: 11px; }
.btn-quitar-bascula {
    background: #fdecea;
    color: #c62828;
    border: none;
    border-radius: 6px;
    height: 36px;
    cursor: pointer;
    font-size: 13px;
}
.btn-quitar-bascula:hover { background: #f8d0cd; }

.fila-bascula-apikey {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-borde);
    flex-wrap: wrap;
}
.fila-bascula-apikey .ayuda { margin: 0; white-space: nowrap; }
.input-apikey {
    flex: 1;
    min-width: 160px;
    font-family: monospace;
    font-size: 11px;
    padding: 6px 8px;
    background: #f7f9fb;
    color: #667;
}
.fila-bascula-apikey .btn-link { white-space: nowrap; font-size: 12px; }

.fila-bascula-sinc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: #667;
}
.punto-sinc { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sinc-ok .punto-sinc { background: #2e7d32; }
.sinc-alerta { color: #b45309; }
.sinc-alerta .punto-sinc { background: #f59e0b; }
.sinc-nunca { color: #8a97a3; }
.sinc-nunca .punto-sinc { background: #c7ced4; }

.logo-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.logo-preview img { max-height: 40px; max-width: 140px; border: 1px solid var(--color-borde); border-radius: 4px; padding: 4px; }

.lista-checks-basculas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
}
.check-bascula { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check-bascula input { width: 16px; height: 16px; margin: 0; }

@media (max-width: 600px) {
    .fila-bascula-campos { grid-template-columns: 1fr 1fr; }
    .fila-bascula .form-group-grande { grid-column: span 2; }
    .btn-quitar-bascula { grid-column: span 2; }
}
.subtitle { color: #667; margin: 0 0 20px; font-size: 14px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; }

.form-control {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 14px;
}

.field-error { color: #c62828; font-size: 12px; }
.alerta-error {
    background: #fdecea;
    color: #c62828;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

.alerta-exito {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

.ayuda { display: block; color: #8a97a3; font-size: 11px; margin-top: 3px; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check-label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 13px; cursor: pointer; }
.form-check-input { width: 16px; height: 16px; margin: 0; }
.volver-login { text-align: center; margin-top: 16px; font-size: 13px; }
.volver-login a { color: var(--color-primario); }

/* --- Modal de envío de correo --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 61, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}
.modal-caja {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.modal-caja h3 { margin: 0 0 16px; font-size: 17px; }
.modal-caja textarea.form-control { resize: vertical; font-family: inherit; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.btn-primary {
    background: var(--color-primario);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.btn-primary:hover { background: var(--color-primario-oscuro); }

.btn-secondary {
    display: inline-block;
    background: #fff;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primario);
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
    padding: 0;
}
.btn-link-peligro { color: #c62828; }

/* --- Filtro --- */
.filtro-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}
.filtro-campo label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.filtro-boton { align-self: end; }

/* --- Encabezado de página (título + gráfico compacto a la derecha) --- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
}
.page-header h1 { margin: 0 0 10px; }

.page-header-left {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page-header-left .filtro-form { margin-bottom: 0; }

/* --- Gráfico compacto (junto al título) --- */
.grafico-compacto {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 10px 14px;
    width: 560px;
    max-width: 100%;
}
.grafico-compacto h2 { margin: 0 0 4px; font-size: 11px; text-align: center; color: #667; font-weight: 600; }

.aviso-admin {
    background: #f3e8ff;
    color: #6b21a8;
    border: 1px solid #d8b4fe;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 10px;
}

.estado-peso {
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.estado-peso-ok { background: #e6f4ea; color: #1e7145; }
.estado-peso-espera { background: #fff8e1; color: #8a6d00; }
.estado-peso-error { background: #fdecea; color: #c62828; }

.grafico-aviso {
    background: #fff8e1;
    color: #8a6d00;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    margin-bottom: 6px;
}

.graficos-torta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.columna-torta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.grafico-subtitulo { font-size: 10px; font-weight: 600; color: #8a97a3; margin: 0; text-align: center; }
.grafico-torta { min-height: 150px; display: flex; align-items: center; justify-content: center; color: #8a97a3; font-size: 11px; }

.grupo-stats-tipo {
    border: 2px solid var(--color-primario-oscuro);
    border-radius: 8px;
    padding: 6px 8px 8px;
}
.titulo-tipo { font-size: 14px; font-weight: 700; color: var(--color-primario-oscuro); text-align: center; margin: 0 0 6px; }

.fila-stats-compactas {
    display: flex;
    gap: 4px;
}
.fila-stats-compactas .stat-chip { padding: 4px 3px; }
.fila-stats-compactas .stat-valor { font-size: 10px; }
.fila-stats-compactas .stat-etiqueta { font-size: 6px; }

.grafico-stats {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.stat-chip {
    flex: 1;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.stat-chip-oscuro { background: #0d1b3d; color: #fff; }
.stat-chip-verde { background: #0d5c4a; color: #4ff0c7; }
.stat-chip-azul { background: #0d3b5c; color: #6fc7ff; }
.stat-valor { font-size: 15px; font-weight: 700; }
.stat-etiqueta { font-size: 8px; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.85; margin-top: 2px; }
.stat-chip-oscuro .stat-etiqueta { color: #c7d0e8; }

/* --- Barra de acciones (exportar / informe general) --- */
.acciones-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 24px;
}

.btn-exportar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 6px 10px 6px 6px;
    font-size: 12px;
    color: var(--color-texto);
    text-decoration: none;
    cursor: pointer;
}
.btn-exportar:hover { border-color: var(--color-primario); background: #f5f9ff; }
.btn-exportar:disabled { opacity: 0.6; cursor: default; }

.icono-archivo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}
.icono-pdf { background: #d32f2f; }
.icono-excel { background: #1e7145; }

@media (max-width: 900px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .grafico-compacto { width: 100%; }
}

/* --- Tabla --- */
.tabla-section { background: #fff; border: 1px solid var(--color-borde); border-radius: 8px; padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-reportes { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla-reportes th, .tabla-reportes td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
    white-space: nowrap;
}
.tabla-reportes th { background: #f0f3f6; font-weight: 600; font-size: 11px; }
.th-ordenable { cursor: pointer; user-select: none; }
.th-ordenable:hover { background: #e4e9ef; }
.icono-orden { display: inline-block; width: 10px; font-size: 10px; color: var(--color-primario); }

.etiqueta-tipo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.etiqueta-recepcion { background: #e6f4ea; color: #1e7145; }
.etiqueta-despacho { background: #e3f0fc; color: #1565c0; }

.celda-acciones {
    display: flex;
    gap: 6px;
    align-items: center;
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -4px 0 6px -4px rgba(0,0,0,0.15);
}
.btn-icono-fila {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
.icono-correo { background: #1565c0; font-size: 11px; }

.fila-total td { font-weight: 700; background: #f5f9ff; border-top: 2px solid var(--color-primario); border-bottom: none; }
.sin-resultados { padding: 24px; text-align: center; color: #667; }

/* --- Responsive: celulares --- */
@media (max-width: 600px) {
    .content { padding: 12px; }

    .topbar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
    .topbar-brand span:last-child { display: none; } /* oculta "Reportes de Pesaje · Fat-Truck", el logo alcanza */
    .topbar-user { gap: 8px; font-size: 12px; flex-wrap: wrap; }

    .page-header h1 { font-size: 20px; }

    .filtro-form { padding: 12px; gap: 10px; }
    .filtro-campo { flex: 1 1 100%; }
    .filtro-boton { align-self: stretch; }
    .filtro-boton .btn-primary { width: 100%; }

    .grafico-compacto { padding: 8px 10px; }
    .graficos-torta-grid { grid-template-columns: 1fr; gap: 16px; }
    .grafico-torta { min-height: 130px; }
    .grafico-stats { flex-wrap: wrap; }
    .stat-chip { flex: 1 1 45%; }

    .acciones-bar { gap: 6px; }
    .btn-exportar { flex: 1 1 auto; justify-content: center; font-size: 11px; }

    .tabla-reportes { font-size: 11px; }
    .tabla-reportes th, .tabla-reportes td { padding: 5px 6px; }
}