:root{
  --azul-oscuro:#0a2647;
  --azul-principal:#0d47a1;
  --azul-medio:#1565c0;
  --azul-claro:#e3f0ff;
  --azul-hover:#1976d2;
  --gris-fondo:#f4f7fb;
  --gris-borde:#dfe6ee;
  --texto:#1c2733;
  --texto-suave:#5b6b7c;
  --blanco:#ffffff;
  --exito:#2e7d32;
  --peligro:#c62828;
  --sombra:0 4px 14px rgba(13,71,161,0.10);
}

*{box-sizing:border-box;}

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

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

/* ---------- LOGIN ---------- */
.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-principal) 60%,var(--azul-medio));
  padding:20px;
}
.login-box{
  background:var(--blanco);
  width:100%;
  max-width:380px;
  padding:40px 34px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
  text-align:center;
}
.login-box .icono{
  width:64px;height:64px;border-radius:50%;
  background:var(--azul-claro);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;font-size:30px;color:var(--azul-principal);
}
.login-box h1{font-size:20px;color:var(--azul-oscuro);margin:0 0 4px;}
.login-box p.sub{color:var(--texto-suave);font-size:13px;margin:0 0 24px;}
.login-box input{
  width:100%;padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--gris-borde);border-radius:8px;font-size:14px;
  background:#fbfdff;
}
.login-box input:focus{outline:none;border-color:var(--azul-principal);}
.btn-login{
  width:100%;padding:12px;border:none;border-radius:8px;
  background:var(--azul-principal);color:#fff;font-size:15px;font-weight:600;
  cursor:pointer;transition:.2s;
}
.btn-login:hover{background:var(--azul-hover);}
.login-error{
  background:#fdecea;color:var(--peligro);border:1px solid #f5c2c0;
  padding:10px;border-radius:8px;font-size:13px;margin-bottom:14px;
}

/* ---------- LAYOUT PRINCIPAL ---------- */
.app{display:flex;min-height:100vh;}

.sidebar{
  width:230px;flex-shrink:0;
  background:var(--azul-oscuro);
  color:#cfe0f5;
  display:flex;flex-direction:column;
  padding:22px 0;
}
.sidebar .marca{
  display:flex;align-items:center;gap:10px;
  padding:0 22px 22px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:14px;
}
.sidebar .marca .badge{
  width:36px;height:36px;border-radius:9px;background:var(--azul-principal);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.sidebar .marca strong{color:#fff;font-size:15px;}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;
  color:#cfe0f5;padding:12px 22px;font-size:14px;
  border-left:3px solid transparent;
}
.sidebar nav a:hover, .sidebar nav a.activo{
  background:rgba(255,255,255,0.06);
  border-left:3px solid #64b5f6;
  color:#fff;
}
.sidebar .salir{margin-top:auto;padding:0 22px;}
.sidebar .salir a{color:#ffb4b0;padding:12px 0;display:block;font-size:14px;}

.contenido{flex:1;padding:26px 32px;max-width:100%;}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.topbar h2{margin:0;color:var(--azul-oscuro);font-size:22px;}
.topbar .usuario-chip{
  background:var(--blanco);border:1px solid var(--gris-borde);
  padding:8px 14px;border-radius:20px;font-size:13px;color:var(--texto-suave);
  box-shadow:var(--sombra);
}

/* ---------- TARJETAS / GENERAL ---------- */
.card{
  background:var(--blanco);border-radius:12px;padding:22px;
  box-shadow:var(--sombra);margin-bottom:22px;border:1px solid var(--gris-borde);
}
.card h3{margin-top:0;color:var(--azul-oscuro);font-size:16px;}

.grid-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:24px;}
.stat{
  background:var(--blanco);border-radius:12px;padding:20px;box-shadow:var(--sombra);
  border-left:4px solid var(--azul-principal);
}
.stat span.num{font-size:26px;font-weight:700;color:var(--azul-oscuro);display:block;}
.stat span.label{color:var(--texto-suave);font-size:13px;}

.btn{
  display:inline-block;padding:10px 18px;border-radius:8px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:.2s;text-align:center;
}
.btn-primario{background:var(--azul-principal);color:#fff;}
.btn-primario:hover{background:var(--azul-hover);}
.btn-secundario{background:var(--azul-claro);color:var(--azul-principal);}
.btn-secundario:hover{background:#d2e6ff;}
.btn-peligro{background:#fdecea;color:var(--peligro);}
.btn-peligro:hover{background:#fadbd8;}
.btn-sm{padding:6px 12px;font-size:12px;}

/* ---------- FORMULARIOS ---------- */
.form-grupo{margin-bottom:16px;}
.form-grupo label{display:block;font-size:13px;color:var(--texto-suave);margin-bottom:6px;font-weight:600;}
.form-grupo input[type=text],
.form-grupo input[type=number],
.form-grupo input[type=tel],
.form-grupo select,
.form-grupo textarea{
  width:100%;padding:10px 12px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;background:#fbfdff;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus{
  outline:none;border-color:var(--azul-principal);
}
.form-fila{display:flex;gap:16px;flex-wrap:wrap;}
.form-fila .form-grupo{flex:1;min-width:180px;}
.preview-img{
  width:90px;height:90px;object-fit:cover;border-radius:8px;
  border:1px solid var(--gris-borde);margin-top:8px;
}

/* ---------- TABLA PRODUCTOS (panel) ---------- */
table.tabla{width:100%;border-collapse:collapse;font-size:14px;}
table.tabla th{
  text-align:left;background:var(--azul-claro);color:var(--azul-oscuro);
  padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
}
table.tabla td{padding:10px 12px;border-bottom:1px solid var(--gris-borde);vertical-align:middle;}
table.tabla img.thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;}
.tag{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
}
.tag-camara{background:#e3f0ff;color:var(--azul-principal);}
.tag-mano_obra{background:#fff3e0;color:#e65100;}
.tag-accesorio{background:#e8f5e9;color:var(--exito);}

/* ---------- COTIZADOR ---------- */
.filtros-cotizador{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.filtros-cotizador button{
  padding:8px 16px;border-radius:20px;border:1px solid var(--gris-borde);
  background:var(--blanco);cursor:pointer;font-size:13px;color:var(--texto-suave);
}
.filtros-cotizador button.activo{background:var(--azul-principal);color:#fff;border-color:var(--azul-principal);}

.layout-cotizador{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start;}
@media (max-width:980px){.layout-cotizador{grid-template-columns:1fr;}}

.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}
.prod-card{
  background:var(--blanco);border:1px solid var(--gris-borde);border-radius:12px;
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
}
.prod-card .foto{
  width:100%;height:120px;background:var(--azul-claro);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.prod-card .foto img{width:100%;height:100%;object-fit:cover;}
.prod-card .foto .sin-foto{color:var(--azul-principal);font-size:34px;}
.prod-card .info{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.prod-card .nombre{font-size:13.5px;font-weight:600;color:var(--texto);line-height:1.3;}
.prod-card .precio{color:var(--azul-principal);font-weight:700;font-size:15px;}
.prod-card .btn-agregar{
  margin-top:auto;background:var(--azul-principal);color:#fff;border:none;
  padding:8px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;
}
.prod-card .btn-agregar:hover{background:var(--azul-hover);}
.prod-card .btn-agregar:disabled{background:#9fb8d8;cursor:not-allowed;}

.resumen{
  background:var(--blanco);border-radius:12px;box-shadow:var(--sombra);
  border:1px solid var(--gris-borde);padding:18px;position:sticky;top:20px;
}
.resumen h3{margin-top:0;color:var(--azul-oscuro);}
.item-resumen{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--gris-borde);
}
.item-resumen img{width:42px;height:42px;object-fit:cover;border-radius:6px;background:var(--azul-claro);}
.item-resumen .nom{flex:1;font-size:13px;}
.item-resumen .nom small{display:block;color:var(--texto-suave);}
.contador{display:flex;align-items:center;gap:6px;}
.contador button{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--gris-borde);
  background:var(--gris-fondo);cursor:pointer;font-weight:700;line-height:1;
}
.contador button:hover{background:var(--azul-claro);}
.contador span{min-width:18px;text-align:center;font-size:13px;font-weight:600;}
.item-resumen .quitar{color:var(--peligro);font-size:12px;cursor:pointer;margin-left:6px;}

.totales-box{margin-top:14px;padding-top:14px;border-top:2px solid var(--azul-claro);}
.fila-total{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:var(--texto-suave);}
.fila-total.grande{font-size:19px;font-weight:700;color:var(--azul-oscuro);margin-top:8px;}

.vacio{color:var(--texto-suave);text-align:center;padding:30px 10px;font-size:13.5px;}

/* ---------- COTIZACIÓN IMPRIMIBLE ---------- */
.hoja-cotizacion{
  background:#fff;max-width:800px;margin:0 auto;padding:40px;
  border-radius:10px;box-shadow:var(--sombra);
}
.hoja-cotizacion .encabezado{
  display:flex;justify-content:space-between;border-bottom:3px solid var(--azul-principal);
  padding-bottom:16px;margin-bottom:20px;
}
.hoja-cotizacion .encabezado h1{color:var(--azul-oscuro);margin:0 0 4px;font-size:22px;}
.logo-empresa{max-height:64px;max-width:220px;object-fit:contain;margin-bottom:8px;}
.hoja-cotizacion table{width:100%;border-collapse:collapse;margin-top:10px;}
.hoja-cotizacion th{background:var(--azul-claro);color:var(--azul-oscuro);padding:8px;text-align:left;font-size:12px;text-transform:uppercase;}
.hoja-cotizacion td{padding:8px;border-bottom:1px solid var(--gris-borde);font-size:13.5px;}
.hoja-cotizacion .totales{width:280px;margin-left:auto;margin-top:16px;}

@media print{
  .no-imprimir{display:none !important;}
  body{background:#fff;}
  .hoja-cotizacion{box-shadow:none;padding:0;}
}

.alerta{padding:12px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}
.alerta-exito{background:#e8f5e9;color:var(--exito);border:1px solid #c8e6c9;}
.alerta-error{background:#fdecea;color:var(--peligro);border:1px solid #f5c2c0;}