/*
 * panel-admin.css
 * Panel administrativo interno de SAES ELECTRONICA (page-panel-saes.php).
 * A propósito NO reutiliza variables.css del sitio público: esta es una
 * aplicación aparte, con su propia hoja de estilo autocontenida.
 */

:root {
	--sp-negro: #0A0A0A;
	--sp-negro-suave: #14181d;
	--sp-azul: #10b0e9;
	--sp-azul-hover: #0d8dba;
	--sp-naranja: #e8871e;
	--sp-naranja-hover: #c56f14;
	--sp-texto: #10151a;
	--sp-texto-suave: #5a6672;
	--sp-borde: #dde3e8;
	--sp-fondo: #f4f6f8;
	--sp-blanco: #ffffff;
	--sp-error: #c0392b;
	--sp-exito: #1e8e5a;
	--sp-radio: 10px;
	--sp-sombra: 0 4px 20px rgba(16,21,26,.08);
}

* { box-sizing: border-box; }
body.saes-panel-body {
	margin: 0;
	font-family: 'Inter', Arial, sans-serif;
	background: var(--sp-fondo);
	color: var(--sp-texto);
}

/* ═══════════ LOGIN ═══════════ */
.sp-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at top, var(--sp-negro-suave), var(--sp-negro));
	padding: 1.5rem;
}
.sp-login__caja {
	background: var(--sp-blanco);
	border-radius: 16px;
	box-shadow: var(--sp-sombra);
	padding: 2.5rem 2rem;
	width: 100%;
	max-width: 380px;
	text-align: center;
}
.sp-login__logo { width: 130px; margin: 0 auto 1.5rem; }
.sp-login h1 { font-size: 1.4rem; margin: 0 0 .4rem; }
.sp-login__sub { color: var(--sp-texto-suave); font-size: .9rem; margin: 0 0 1.5rem; }
.sp-login form { text-align: left; }

/* ═══════════ APP SHELL ═══════════ */
.sp-app { display: flex; min-height: 100vh; }

.sp-nav {
	width: 240px;
	flex-shrink: 0;
	background: var(--sp-negro);
	color: #fff;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}
.sp-nav__marca { display: flex; align-items: center; gap: .6rem; padding: 1.5rem 1.25rem; }
.sp-nav__marca img { width: 34px; }
.sp-nav__marca span { font-weight: 700; font-size: .95rem; }
.sp-nav nav { display: flex; flex-direction: column; padding: .5rem; flex: 1; }
.sp-nav nav a, .sp-nav__proximamente {
	display: block;
	padding: .75rem 1rem;
	border-radius: 8px;
	color: #cfd6dc;
	text-decoration: none;
	font-size: .9rem;
	margin-bottom: .15rem;
}
.sp-nav nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sp-nav nav a.sp-activo { background: var(--sp-azul); color: #fff; font-weight: 600; }
.sp-nav__proximamente { color: #565f68; cursor: not-allowed; }
.sp-nav__pie {
	padding: 1rem 1.25rem;
	border-top: 1px solid rgba(255,255,255,.1);
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: .82rem;
}
.sp-nav__pie span { color: #cfd6dc; }
.sp-nav__pie a { color: var(--sp-azul); text-decoration: none; }

.sp-main { flex: 1; padding: 2rem 2.5rem; max-width: 1100px; }

.sp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; }
.sp-header h1 { font-size: 1.5rem; margin: 0; }
.sp-header > div { display: flex; gap: .6rem; }

/* ═══════════ COMPONENTES ═══════════ */
.sp-campo { margin-bottom: 1rem; }
.sp-campo label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--sp-texto-suave); }
.sp-campo input, .sp-login input {
	width: 100%;
	padding: .75rem .9rem;
	border-radius: 8px;
	border: 1px solid var(--sp-borde);
	font-family: inherit;
	font-size: .95rem;
}
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .sp-grid-2 { grid-template-columns: 1fr; } .sp-main { padding: 1.25rem; } .sp-app { flex-direction: column; } .sp-nav { width: 100%; height: auto; position: static; } }

.sp-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .75rem 1.4rem;
	border-radius: 8px;
	border: none;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
}
.sp-boton--primario { background: var(--sp-naranja); color: #fff; }
.sp-boton--primario:hover { background: var(--sp-naranja-hover); }
.sp-boton--secundario { background: var(--sp-blanco); color: var(--sp-texto); border: 1.5px solid var(--sp-borde); }
.sp-boton--secundario:hover { border-color: var(--sp-azul); color: var(--sp-azul); }
.sp-boton--texto { background: none; color: var(--sp-azul); padding: .5rem 0; }
.sp-boton--bloque { width: 100%; }
.sp-boton--chico { padding: .4rem .8rem; font-size: .8rem; }
.sp-boton:disabled { opacity: .6; cursor: default; }

.sp-alerta { padding: .8rem 1rem; border-radius: 8px; font-size: .88rem; margin-bottom: 1rem; }
.sp-alerta--error { background: #fdecec; color: var(--sp-error); }
.sp-alerta--ok { background: #e9f7ef; color: var(--sp-exito); }
.sp-vacio, .sp-nota { color: var(--sp-texto-suave); font-size: .9rem; }
.sp-texto-peligro { color: var(--sp-error) !important; }

/* KPIs (Analíticas) */
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sp-kpi { background: var(--sp-blanco); border-radius: var(--sp-radio); padding: 1.25rem; box-shadow: var(--sp-sombra); display: flex; flex-direction: column; gap: .2rem; }
.sp-kpi span { font-size: .8rem; color: var(--sp-texto-suave); }
.sp-kpi strong { font-size: 1.5rem; }
.sp-kpi small { font-size: .75rem; color: var(--sp-texto-suave); }

/* Chip (badge de instalador en Clientes) */
.sp-chip { background: var(--sp-azul); color: #fff; font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; margin-left: .3rem; }

/* Inventario */
.sp-stock-valor { font-weight: 700; }
.sp-stock--bajo { color: #b08d57; }
.sp-stock--agotado { color: var(--sp-error); }
.sp-inv-ajuste { display: flex; align-items: center; gap: .4rem; }
.sp-inv-input { width: 70px !important; padding: .4rem !important; }
.sp-inv-mensaje { font-size: .78rem; color: var(--sp-exito); }

/* Select dentro del buscador de listas (Inventario) */
.sp-buscador-lista select { padding: .7rem .6rem; border-radius: 8px; border: 1px solid var(--sp-borde); font-family: inherit; }

/* Tarjetas del inicio */
.sp-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sp-tarjeta {
	background: var(--sp-blanco);
	border-radius: var(--sp-radio);
	padding: 1.5rem;
	box-shadow: var(--sp-sombra);
	text-decoration: none;
	color: var(--sp-texto);
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.sp-tarjeta__icono { font-size: 1.8rem; }
.sp-tarjeta__titulo { font-weight: 700; }
.sp-tarjeta__desc { font-size: .85rem; color: var(--sp-texto-suave); }
.sp-tarjeta--accion { border: 2px solid var(--sp-naranja); }

.sp-tarjeta-form { background: var(--sp-blanco); border-radius: var(--sp-radio); padding: 1.75rem; box-shadow: var(--sp-sombra); }
.sp-tarjeta-form h3 { margin: 1.5rem 0 1rem; font-size: 1rem; }
.sp-tarjeta-form h3:first-child { margin-top: 0; }

/* Buscador de productos */
.sp-buscador { position: relative; margin-bottom: 1rem; }
.sp-buscador input { width: 100%; padding: .75rem .9rem; border-radius: 8px; border: 1px solid var(--sp-borde); font-family: inherit; }
.sp-buscar-resultados {
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	background: var(--sp-blanco);
	border-radius: 8px;
	box-shadow: var(--sp-sombra);
	max-height: 280px;
	overflow-y: auto;
	z-index: 10;
}
.sp-buscar-item { display: block; width: 100%; text-align: left; padding: .6rem .9rem; border: none; background: none; cursor: pointer; border-bottom: 1px solid var(--sp-fondo); }
.sp-buscar-item:hover { background: var(--sp-fondo); }
.sp-buscar-item strong { display: block; font-size: .88rem; }
.sp-buscar-item span { display: block; font-size: .76rem; color: var(--sp-texto-suave); }
.sp-buscar-vacio { padding: .9rem; color: var(--sp-texto-suave); font-size: .85rem; }

/* Tabla de líneas de factura (formulario) */
.sp-tabla-items { width: 100%; border-collapse: collapse; margin-bottom: .75rem; }
.sp-tabla-items th { text-align: left; font-size: .78rem; color: var(--sp-texto-suave); padding: .5rem .4rem; border-bottom: 1px solid var(--sp-borde); }
.sp-tabla-items td { padding: .4rem; border-bottom: 1px solid var(--sp-fondo); }
.sp-tabla-items input { width: 100%; padding: .5rem; border-radius: 6px; border: 1px solid var(--sp-borde); font-family: inherit; }
.sp-quitar-fila { background: none; border: none; color: var(--sp-error); cursor: pointer; font-size: 1rem; }
.sp-fila-manual { background: #fff8ec; }
.sp-etiqueta-manual { display: block; font-size: .72rem; color: var(--sp-naranja-hover); font-weight: 600; margin-top: .25rem; }

.sp-prod-foto img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.sp-prod-sin-foto { display: inline-block; width: 40px; height: 40px; line-height: 1.1; font-size: .6rem; color: var(--sp-error); background: #fdecec; border-radius: 6px; text-align: center; display: flex; align-items: center; justify-content: center; }

.sp-totales { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
.sp-totales__filas { min-width: 240px; }
.sp-totales__filas > div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .9rem; }
.sp-totales__total { border-top: 1px solid var(--sp-borde); margin-top: .3rem; padding-top: .5rem !important; font-size: 1.1rem !important; }
.sp-check { display: flex; align-items: center; gap: .4rem; font-size: .88rem; margin-bottom: .75rem; justify-content: flex-end; }

/* Listado de facturas */
.sp-buscador-lista { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 400px; }
.sp-buscador-lista input { flex: 1; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--sp-borde); font-family: inherit; }
.sp-tabla-lista { width: 100%; border-collapse: collapse; background: var(--sp-blanco); border-radius: var(--sp-radio); overflow: hidden; box-shadow: var(--sp-sombra); }
.sp-tabla-lista th { text-align: left; padding: .8rem 1rem; background: var(--sp-fondo); font-size: .78rem; color: var(--sp-texto-suave); }
.sp-tabla-lista td { padding: .8rem 1rem; border-top: 1px solid var(--sp-fondo); font-size: .9rem; }

/* Documento de factura (pantalla + impresión) */
.sp-factura-doc { background: var(--sp-blanco); border-radius: var(--sp-radio); box-shadow: var(--sp-sombra); padding: 2.5rem; max-width: 700px; }
.sp-factura-doc__enc { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--sp-negro); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.sp-factura-doc__enc img { width: 110px; }
.sp-factura-doc__numero { text-align: right; display: flex; flex-direction: column; font-size: .85rem; color: var(--sp-texto-suave); }
.sp-factura-doc__numero strong { font-size: 1.3rem; color: var(--sp-texto); }
.sp-factura-doc__cliente { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1.5rem; font-size: .9rem; }
.sp-factura-doc__tabla { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.sp-factura-doc__tabla th { text-align: left; border-bottom: 2px solid var(--sp-texto); padding: .5rem; font-size: .8rem; }
.sp-factura-doc__tabla td { padding: .6rem .5rem; border-bottom: 1px solid var(--sp-fondo); font-size: .9rem; }
.sp-factura-doc__totales { margin-left: auto; max-width: 260px; }
.sp-factura-doc__totales > div { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .9rem; }
.sp-factura-doc__total-final { border-top: 2px solid var(--sp-texto); margin-top: .4rem; padding-top: .6rem !important; font-size: 1.2rem !important; font-weight: 800; }
.sp-factura-doc__pie { margin-top: 2rem; font-size: .75rem; color: var(--sp-texto-suave); text-align: center; }

/* Buscador de productos con miniatura (modo cotización) */
.sp-buscar-item { display: flex !important; align-items: center; gap: .6rem; }
.sp-buscar-item__mini { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sp-buscar-item__texto { display: flex; flex-direction: column; text-align: left; }

/* Columna de foto en la tabla del formulario "Nueva cotización" */
.sp-cot-foto { text-align: center; }
.sp-cot-foto img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.sp-cot-sin-foto { font-size: .7rem; color: var(--sp-texto-suave); }

/* ═══════════ DOCUMENTO DE COTIZACIÓN (marca SAES — mismo formato que usaban en Excel) ═══════════ */
.sp-cotiz-doc { background: var(--sp-blanco); border-radius: var(--sp-radio); box-shadow: var(--sp-sombra); max-width: 780px; overflow: hidden; }

.sp-cotiz-doc__banner {
	background: var(--sp-negro);
	padding: 1.75rem 2rem;
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
}
.sp-cotiz-doc__banner::after {
	content: '';
	position: absolute;
	right: -10%;
	top: -40%;
	width: 70%;
	height: 220%;
	background: var(--sp-azul);
	border-radius: 50%;
	opacity: .9;
}
.sp-cotiz-doc__banner img { position: relative; z-index: 1; width: 170px; }

.sp-cotiz-doc__datos { display: flex; justify-content: space-between; padding: 1.5rem 2rem 0; gap: 1rem; flex-wrap: wrap; }
.sp-cotiz-doc__empresa { display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; color: var(--sp-texto-suave); }
.sp-cotiz-doc__empresa strong { font-size: 1rem; color: var(--sp-texto); }
.sp-cotiz-doc__numero { text-align: right; display: flex; flex-direction: column; font-size: .85rem; color: var(--sp-texto-suave); }
.sp-cotiz-doc__numero strong { font-size: 1.4rem; color: var(--sp-azul); }

.sp-cotiz-doc__cliente { padding: 1rem 2rem; margin: 1rem 2rem 0; background: var(--sp-fondo); border-radius: 8px; font-size: .92rem; }

.sp-cotiz-doc__tabla { width: calc(100% - 4rem); margin: 1.5rem 2rem; border-collapse: collapse; }
.sp-cotiz-doc__tabla th { text-align: left; border-bottom: 2px solid var(--sp-texto); padding: .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.sp-cotiz-doc__tabla td { padding: .5rem; border-bottom: 1px solid var(--sp-fondo); font-size: .85rem; vertical-align: middle; }
.sp-cotiz-doc__foto { width: 60px; }
.sp-cotiz-doc__foto img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }

.sp-cotiz-doc__pie { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 2rem 2rem; gap: 1rem; flex-wrap: wrap; }
.sp-cotiz-doc__terminos { font-size: .78rem; color: var(--sp-texto-suave); font-weight: 600; }
.sp-cotiz-doc__terminos p { margin: 0 0 .3rem; }
.sp-cotiz-doc__totales { min-width: 220px; }
.sp-cotiz-doc__totales > div { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .9rem; }
.sp-cotiz-doc__total-final { border-top: 2px solid var(--sp-texto); margin-top: .4rem; padding-top: .6rem !important; font-size: 1.25rem !important; font-weight: 800; color: var(--sp-azul); }

@media print {
	.sp-nav, .sp-no-imprimir { display: none !important; }
	.sp-app, .sp-main { display: block; padding: 0; margin: 0; }
	body.saes-panel-body { background: #fff; }
	.sp-factura-doc, .sp-cotiz-doc { box-shadow: none; max-width: 100%; }
	.sp-factura-doc { padding: 0; }
	.sp-cotiz-doc__banner, .sp-cotiz-doc__banner::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}