* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f9;
    color: #1f2937;
}

.topbar {
    background: #0f172a;
    color: #fff;
    padding: 18px 28px;
}

.topbar strong {
    font-size: 22px;
    margin-right: 12px;
}

.topbar span {
    color: #cbd5e1;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 28px;
}

.menu a {
    padding: 9px 14px;
    text-decoration: none;
    border-radius: 8px;
    color: #1f2937;
    background: #f1f5f9;
}

.menu a.activo,
.menu a:hover {
    background: #2563eb;
    color: #fff;
}

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

.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.encabezado {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.encabezado h1 {
    margin: 0;
    font-size: 26px;
}

.encabezado p {
    margin: 6px 0 0;
    color: #64748b;
}

.acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 9px 13px;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    background: #e5e7eb;
    color: #111827;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
}

.btn-warning {
    background: #f59e0b;
    color: #111827;
}

.btn-danger {
    background: #dc2626;
    color: #fff;
}

.btn-secondary {
    background: #64748b;
    color: #fff;
}

.busqueda {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.busqueda input {
    min-width: 280px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: 1 / -1;
}

label {
    font-weight: bold;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

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

.table-wrap {
    overflow: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th,
td {
    padding: 11px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}

th {
    background: #f8fafc;
    font-weight: bold;
}

.estado {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
}

.estado.activo {
    background: #dcfce7;
    color: #166534;
}

.estado.inactivo {
    background: #fee2e2;
    color: #991b1b;
}

.footer {
    text-align: center;
    color: #64748b;
    padding: 24px;
}

.muted {
    color: #64748b;
}

.text-right {
    text-align: right;
}

/* ===============================
   IMÁGENES DE USUARIOS
   =============================== */

.avatar {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    display: block;
}

.avatar-lg {
    width: 110px;
    height: 110px;
    max-width: 110px;
    max-height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

/* ===============================
   IMÁGENES DE PRODUCTOS
   =============================== */

.producto-img {
    width: 65px;
    height: 55px;
    max-width: 65px;
    max-height: 55px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    display: block;
}

.producto-img-lg {
    width: 150px;
    height: 120px;
    max-width: 150px;
    max-height: 120px;
    border-radius: 10px;
    object-fit: cover;
}

/* Control general para imágenes dentro de tablas */
.table-wrap td img {
    display: block;
}

/* Vista previa en formularios */
.preview-box {
    align-items: flex-start;
}

.form-group small {
    font-size: 12px;
}

/* Seguridad extra: evita que cualquier imagen se agrande demasiado */
img.avatar,
img.producto-img {
    object-fit: cover;
}

/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width: 768px) {
    .encabezado {
        display: block;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .busqueda input {
        min-width: 100%;
    }

    .menu {
        padding: 10px;
    }

    .contenedor {
        margin: 14px auto;
    }

    .avatar {
        width: 38px;
        height: 38px;
        max-width: 38px;
        max-height: 38px;
    }

    .producto-img {
        width: 55px;
        height: 45px;
        max-width: 55px;
        max-height: 45px;
    }

    .producto-img-lg {
        width: 130px;
        height: 100px;
    }
}
/* ===============================
   AUTENTICACIÓN
   =============================== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.usuario-sesion {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usuario-sesion > div {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.usuario-sesion > div strong {
    font-size: 14px;
}

.usuario-sesion > div span {
    color: #cbd5e1;
    font-size: 12px;
}

.usuario-sesion form {
    margin: 0;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
}

.login-shell {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
    background: #fff;
}

.login-brand {
    padding: 56px;
    color: #fff;
    background: #172554;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-logo {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #2563eb;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 24px;
}

.login-brand h1 {
    font-size: 34px;
    margin: 0 0 14px;
}

.login-brand p {
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0;
}

.login-card {
    padding: 48px 42px;
}

.login-card h2 {
    margin: 0 0 8px;
    font-size: 28px;
}

.login-card form {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

.login-button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 18px;
    font-size: 14px;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.login-demo {
    margin-top: 22px;
    padding: 13px;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .usuario-sesion {
        width: 100%;
        flex-wrap: wrap;
    }

    .usuario-sesion > div {
        flex: 1;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand {
        padding: 32px;
    }

    .login-card {
        padding: 32px 24px;
    }
}

.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.usuario-sesion { display:flex; align-items:center; gap:12px; }
.usuario-sesion > div { display:flex; flex-direction:column; }
.usuario-sesion > div strong { font-size:14px; margin:0; }
.usuario-sesion > div span { font-size:12px; }
.avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#fff; }
.alerta { padding:12px 14px; border-radius:8px; margin:14px 0; }
.alerta-error { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
@media (max-width:700px){ .topbar{align-items:flex-start;flex-direction:column}.usuario-sesion{width:100%;flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.busqueda input{min-width:100%} }

/* Ajustes de Roles y Permisos */
.alert { padding: 12px 14px; border-radius: 8px; margin: 12px 0; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.alert-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.inline-form { display: inline; margin: 0; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: 11px; font-weight: 700; }
.permission-list { display: flex; flex-wrap: wrap; gap: 10px; }
.permission-item { display: flex; align-items: flex-start; gap: 8px; min-width: 150px; font-weight: normal; }
.permission-item input { width: auto; margin-top: 3px; }
.permission-item span { display: flex; flex-direction: column; }
.permission-item small { color: #64748b; font-weight: normal; }
.form-actions { margin-top: 18px; }


/* Utilidades de formularios y mensajes */
.alert { padding: 12px 14px; border-radius: 8px; margin: 14px 0; border: 1px solid transparent; }
.alert-success { background: #dcfce7; color: #166534; border-color: #86efac; }
.alert-danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.form-inline { display: inline-flex; margin: 0; }
.form-actions { margin-top: 20px; }
.form-card { max-width: 900px; margin: 0 auto; }

/* Inventario y Kardex */
.resumen-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:14px;margin:18px 0}.resumen-item{border:1px solid #e2e8f0;border-radius:10px;padding:14px;background:#f8fafc}.resumen-item span{display:block;color:#64748b;font-size:13px}.resumen-item strong{display:block;font-size:22px;margin-top:4px}.busqueda select,.busqueda input[type=date]{min-height:40px;border:1px solid #cbd5e1;border-radius:7px;padding:8px;background:#fff}.filtros-amplios{align-items:center;flex-wrap:wrap}.form-full{grid-column:1/-1}textarea{width:100%;min-height:90px;border:1px solid #cbd5e1;border-radius:7px;padding:10px;resize:vertical}@media(max-width:768px){.resumen-grid{grid-template-columns:1fr 1fr}.filtros-amplios select,.filtros-amplios input{width:100%}}

/* ===============================
   COMPRAS
   =============================== */
.compra-form{max-width:1200px;margin:0 auto}.separador{border:0;border-top:1px solid #e5e7eb;margin:24px 0}.compra-form h2,.panel-anular h2{margin:0 0 6px;font-size:20px}.detalle-tabla select{min-width:320px}.detalle-tabla input{min-width:110px}.check-line{display:flex;align-items:center;gap:9px;font-weight:700}.check-line input{width:auto}.totales-compra{display:flex;justify-content:flex-end;gap:22px;margin-top:20px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}.totales-compra>div{min-width:130px;text-align:right}.totales-compra span{display:block;color:#64748b;font-size:13px}.totales-compra strong{display:block;font-size:18px;margin-top:4px}.totales-compra .total-final strong{font-size:24px}.detalle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.detalle-grid>div{padding:14px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:10px}.detalle-grid span,.detalle-grid small{display:block;color:#64748b;font-size:12px}.detalle-grid strong{display:block;margin-top:4px}.panel-anular{margin-top:24px;padding:18px;border:1px solid #fecaca;border-radius:10px;background:#fff7f7}.panel-anular p{color:#7f1d1d}.panel-anular[hidden]{display:none}.detalle-tabla .subtotal-fila{font-weight:700;white-space:nowrap}
@media(max-width:900px){.detalle-grid{grid-template-columns:1fr 1fr}.totales-compra{flex-direction:column;align-items:stretch}.totales-compra>div{text-align:right}.detalle-tabla select{min-width:260px}}
@media(max-width:600px){.detalle-grid{grid-template-columns:1fr}}

/* Ventas */
.campo-error{border-color:#dc2626!important;background:#fef2f2!important}.stock-fila{display:inline-block;min-width:42px;text-align:center;padding:4px 8px;border-radius:999px;background:#e0f2fe;color:#075985}.detalle-tabla .precio{min-width:120px}

/* Caja */
.cajas-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px;margin:18px 0 28px}.caja-panel{border:1px solid #e2e8f0;border-radius:10px;padding:15px;display:flex;flex-direction:column;gap:10px}.caja-panel>div:first-child,.caja-abierta{display:flex;justify-content:space-between;gap:10px}.caja-panel p{margin:0;color:#64748b}.caja-abierta{background:#ecfdf5;color:#166534;padding:10px;border-radius:8px}.caja-cerrada{background:#f8fafc;color:#64748b;padding:10px;border-radius:8px}.desglose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 24px}.desglose-grid>div{padding:12px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc}.desglose-grid span,.desglose-grid small{display:block;color:#64748b}.desglose-grid strong{display:block;font-size:19px}.btn-danger{background:#b91c1c;color:#fff;border-color:#b91c1c}@media(max-width:900px){.cajas-grid,.desglose-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.cajas-grid,.desglose-grid{grid-template-columns:1fr}}


/* Dashboard gerencial */
.dashboard-gerencial{display:flex;flex-direction:column;gap:20px}.dashboard-cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px;border-radius:16px;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff}.dashboard-cabecera h1{margin:4px 0 7px;font-size:30px}.dashboard-cabecera p{margin:0;color:#cbd5e1}.dashboard-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#93c5fd;font-weight:800}.dashboard-acciones{display:flex;gap:9px;flex-wrap:wrap}.dashboard-cabecera .btn{background:#fff;color:#1e3a8a;border-color:#fff}.dashboard-cabecera .btn-primary{background:#2563eb;color:#fff;border-color:#60a5fa}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:14px}.kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:13px;padding:17px;box-shadow:0 5px 15px rgba(15,23,42,.04)}.kpi-card span,.kpi-card small{display:block;color:#64748b}.kpi-card strong{display:block;font-size:24px;color:#0f172a;margin:8px 0 4px}.kpi-card.kpi-alerta{border-left:5px solid #f59e0b;background:#fffbeb}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dashboard-grid-principal{grid-template-columns:1.6fr 1fr}.dashboard-panel{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;min-width:0}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px}.panel-heading h2{font-size:18px;margin:0 0 4px}.panel-heading p{margin:0;color:#64748b;font-size:13px}.panel-heading>a{font-size:13px;font-weight:700;color:#2563eb}.chart-wrap{position:relative;width:100%;overflow:hidden}.chart-wrap canvas{display:block;width:100%}.ranking-list{display:flex;flex-direction:column}.ranking-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #eef2f7}.ranking-item:last-child{border-bottom:0}.ranking-pos{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eff6ff;color:#1d4ed8;font-weight:800}.ranking-item small,.tabla-dashboard small{display:block;color:#64748b;margin-top:3px}.ranking-item b{white-space:nowrap}.tabla-dashboard{font-size:13px}.tabla-dashboard th,.tabla-dashboard td{padding:10px 8px}.estado.advertencia{background:#fef3c7;color:#92400e}.empty-state{padding:28px 12px;text-align:center;color:#64748b;background:#f8fafc;border-radius:10px}.cajas-dashboard{display:flex;flex-direction:column;gap:9px}.cajas-dashboard>a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid #dbeafe;background:#eff6ff;border-radius:10px;color:#0f172a}.cajas-dashboard small{display:block;color:#64748b;margin-top:3px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.mini-stats>div{padding:12px;background:#f8fafc;border-radius:9px;text-align:center}.mini-stats span{display:block;color:#64748b;font-size:12px}.mini-stats strong{font-size:20px}.actividad-list>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eef2f7}.actividad-list>div:last-child{border-bottom:0}.actividad-list small{display:block;color:#64748b;margin-top:3px}.actividad-icono{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#eef2ff;color:#3730a3;font-weight:800}.btn-sm{padding:6px 9px;font-size:12px}
@media(max-width:1150px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid-principal{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:700px){.dashboard-cabecera{flex-direction:column}.kpi-grid{grid-template-columns:1fr}.dashboard-cabecera h1{font-size:25px}.mini-stats{grid-template-columns:1fr}.dashboard-panel{padding:13px}}


/* Reportes */
.reportes-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}.reportes-menu{position:sticky;top:12px;padding:14px}.reportes-menu h2{margin:0 0 10px}.reporte-link{display:block;padding:12px;border-radius:9px;text-decoration:none;color:#1e293b;border:1px solid transparent;margin-bottom:7px}.reporte-link strong,.reporte-link span{display:block}.reporte-link span{font-size:12px;color:#64748b;margin-top:3px}.reporte-link:hover,.reporte-link.activo{background:#eff6ff;border-color:#bfdbfe}.reporte-link.activo strong{color:#1d4ed8}.filtros-reporte{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:18px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}.filtros-reporte label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}.filtros-reporte input,.filtros-reporte select{width:100%}.filtro-buscar{grid-column:span 2}.check-reporte{justify-content:flex-end}.check-reporte input{width:auto}.acciones-filtro{grid-column:1/-1;display:flex;gap:8px}.barra-reporte{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0}.barra-reporte>div{display:flex;gap:8px}.tabla-reporte{max-height:620px}.tabla-reporte table{font-size:12px}.tabla-reporte thead th{position:sticky;top:0;z-index:2}.tabla-reporte tfoot td{background:#f8fafc;position:sticky;bottom:0}.reportes-cabecera{margin-bottom:18px}.reportes-cabecera .resumen-grid{grid-template-columns:repeat(5,minmax(130px,1fr))}
@media(max-width:1100px){.reportes-layout{grid-template-columns:1fr}.reportes-menu{position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.reportes-menu h2{grid-column:1/-1}.filtros-reporte{grid-template-columns:repeat(2,minmax(150px,1fr))}.reportes-cabecera .resumen-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.reportes-menu,.filtros-reporte,.reportes-cabecera .resumen-grid{grid-template-columns:1fr}.filtro-buscar{grid-column:auto}.barra-reporte{align-items:stretch;flex-direction:column}.barra-reporte>div{flex-direction:column}.acciones-filtro{flex-direction:column}}

/* Reportes analíticos */
.reporte-ayuda{margin:0 0 16px;background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}.reporte-kpis{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;margin:18px 0}.reporte-kpis article{border:1px solid #dbe4f0;border-radius:12px;padding:15px;background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 4px 12px rgba(15,23,42,.04)}.reporte-kpis span{display:block;color:#64748b;font-size:13px;margin-bottom:5px}.reporte-kpis strong{display:block;color:#0f172a;font-size:21px;line-height:1.2}.reporte-grafico-card{border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin:12px 0 20px;background:#fff}.reporte-grafico-card h3{margin:0}.reporte-grafico-card canvas{display:block;width:100%;max-width:100%;margin-top:8px}.alert-info{padding:12px 14px;border:1px solid #bfdbfe;border-radius:9px}
@media(max-width:1100px){.reporte-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.reporte-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:450px){.reporte-kpis{grid-template-columns:1fr}}

/* Auditoría */
.auditoria-kpis{grid-template-columns:repeat(5,minmax(130px,1fr))}.auditoria-chart{margin:20px 0;padding:16px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.audit-bars{height:190px;display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding:10px 4px 0}.audit-bar-item{min-width:42px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:170px}.audit-bar{width:26px;background:linear-gradient(180deg,#2563eb,#60a5fa);border-radius:6px 6px 0 0}.audit-bar-item strong{font-size:12px;margin-top:4px}.audit-bar-item span{font-size:11px;color:#64748b}.audit-action{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.audit-insert{background:#dcfce7;color:#166534}.audit-update{background:#dbeafe;color:#1d4ed8}.audit-delete,.audit-anular{background:#fee2e2;color:#b91c1c}.audit-login{background:#ede9fe;color:#6d28d9}.audit-logout{background:#f1f5f9;color:#475569}.audit-json-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.audit-json-grid section{border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#f8fafc}.audit-json-grid pre{white-space:pre-wrap;word-break:break-word;background:#0f172a;color:#e2e8f0;padding:14px;border-radius:8px;max-height:480px;overflow:auto}
@media(max-width:900px){.auditoria-kpis{grid-template-columns:repeat(2,1fr)}.audit-json-grid{grid-template-columns:1fr}}