/* ============================================================
   PORTAL DE ACCESO — signopack.com/acceso/

   Usa la paleta real de la web: beige claro, barra oscura y dorado.
   No hay ni un color inventado aqui; los tokens son los mismos de
   main.css, repetidos para que el portal siga en pie aunque algun
   dia se sirva sin la hoja de la web.

   OJO CON EL DORADO: #D4AF37 sobre blanco da 2:1 de contraste y
   #B8976A da 3:1. Ninguno de los dos vale para texto pequeno. Por
   eso hay un --oro-texto aparte, mas oscuro, que es el unico que
   se usa en tipografia; el dorado de marca queda para fondos,
   bordes y filetes.
   ============================================================ */

:root {
	--beige:      #F3F0EB;
	--beige-2:    #E8E3DA;
	--beige-3:    #DDD6C8;
	--oscuro:     #1A1A1A;
	--oscuro-2:   #2A2A2A;
	--oro:        #D4AF37;
	--oro-suave:  #B8976A;
	--oro-suave2: #C8A96E;
	--oro-texto:  #8A6D2F;   /* 5:1 sobre beige — el unico dorado legible */
	--blanco:     #FFFFFF;
	--apagado:    #6B6B6B;   /* 5.2:1 sobre beige */
	--gris-texto: #565656;   /* para badges y tags: el gris normal no llega sobre beige-2 */
	--linea:      rgba(26, 26, 26, 0.10);
	--linea-2:    rgba(26, 26, 26, 0.18);
	--verde:      #24614A;   /* oscurecido: a #2E7D5B el badge se quedaba en 4,36:1 */
	--verde-suave:#E7F2EC;
	--rojo:       #A33B3B;
	--rojo-suave: #F7E9E9;
	--azul:       #37618A;
	--azul-suave: #E8EFF6;
	--ambar:      #8A6320;
	--ambar-suave:#F7EEDC;
	--sombra:     0 4px 16px rgba(0, 0, 0, 0.05);
	--sombra-md:  0 12px 40px rgba(0, 0, 0, 0.08);
	--radio:      12px;
	--radio-lg:   20px;
	--serif:      'Playfair Display', Georgia, serif;
	--sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ancho:      1320px;
}

.sp-acc-body {
	margin: 0;
	background: var(--beige);
	color: var(--oscuro);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.sp-acc-body * { box-sizing: border-box; }
.sp-acc-body a { color: var(--oscuro); }
.sp-acc-mono { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-acc-body :focus-visible { outline: 2px solid var(--oro-suave); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	.sp-acc-body *, .sp-acc-body *::before, .sp-acc-body *::after {
		animation-duration: .001ms !important; transition-duration: .001ms !important;
	}
}

/* ---------------------------------------------- entrada (login) */

.sp-acc-login {
	min-height: 100vh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 20px; padding: 40px 20px;
	background:
		radial-gradient(1100px 480px at 50% -10%, rgba(212, 175, 55, 0.10), transparent 60%),
		var(--beige);
}
.sp-acc-login-caja {
	width: 100%; max-width: 400px;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-lg);
	box-shadow: var(--sombra-md);
	padding: 40px 34px 30px;
	text-align: center;
}
.sp-acc-login-logo { width: 200px; height: auto; margin: 0 auto 6px; display: block; }
.sp-acc-login-sub {
	margin: 0 0 26px; font-size: 11px; letter-spacing: .18em;
	text-transform: uppercase; color: var(--apagado);
}
.sp-acc-login-pie { margin: 20px 0 0; font-size: 13px; color: var(--apagado); }
.sp-acc-login-nota { margin: 0; font-size: 13px; color: var(--apagado); text-align: center; }

/* ------------------------------------------------- formularios */

.sp-acc-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.sp-acc-form--rejilla {
	display: grid; gap: 14px 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	align-items: end;
}
.sp-acc-campo { display: flex; flex-direction: column; gap: 6px; }
.sp-acc-campo > span {
	font-size: 11px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--apagado);
}
.sp-acc-campo input, .sp-acc-campo select {
	font: inherit; font-size: 14px;
	padding: 11px 13px;
	border: 1px solid var(--linea-2);
	border-radius: var(--radio);
	background: var(--blanco);
	color: var(--oscuro);
	width: 100%;
}
.sp-acc-campo input:focus, .sp-acc-campo select:focus {
	border-color: var(--oro-suave); outline: none;
	box-shadow: 0 0 0 3px rgba(184, 151, 106, 0.18);
}
.sp-acc-campo small { font-size: 12px; color: var(--apagado); }
.sp-acc-campo--boton { justify-content: end; }
.sp-acc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--apagado); }
.sp-acc-inline { display: inline; }

.sp-acc-btn {
	font: inherit; font-size: 14px; font-weight: 600;
	padding: 11px 20px; border-radius: 50px;
	border: 1px solid var(--linea-2); background: var(--blanco); color: var(--oscuro);
	cursor: pointer; transition: background .2s, border-color .2s;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	text-decoration: none;
}
.sp-acc-btn:hover { background: var(--beige-2); border-color: var(--linea-2); }
.sp-acc-btn--oro {
	background: linear-gradient(135deg, var(--oro) 0%, var(--oro-suave) 100%);
	border-color: transparent; color: var(--oscuro);
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.28);
}
.sp-acc-btn--oro:hover { filter: brightness(1.05); background: linear-gradient(135deg, var(--oro) 0%, var(--oro-suave) 100%); }

.sp-acc-mini {
	font: inherit; font-size: 12px; font-weight: 500;
	padding: 6px 11px; border-radius: 50px;
	border: 1px solid var(--linea-2); background: var(--blanco); color: var(--oscuro);
	cursor: pointer; white-space: nowrap; text-decoration: none;
	display: inline-flex; align-items: center; gap: 5px;
}
.sp-acc-mini:hover { background: var(--beige-2); }

/* ------------------------------------------------------- avisos */

.sp-acc-aviso {
	margin: 0 0 18px; padding: 11px 15px;
	border-radius: var(--radio); font-size: 13.5px;
	border: 1px solid var(--linea); text-align: left;
}
.sp-acc-aviso--ok  { background: var(--verde-suave); border-color: rgba(46,125,91,.28); color: var(--verde); }
.sp-acc-aviso--mal { background: var(--rojo-suave);  border-color: rgba(163,59,59,.28);  color: var(--rojo); }
.sp-acc-aviso--avi { background: var(--ambar-suave); border-color: rgba(138,99,32,.28);  color: var(--ambar); }

.sp-acc-demo-aviso {
	margin: 0 0 22px; padding: 13px 17px;
	background: var(--ambar-suave); border: 1px solid rgba(138,99,32,.25);
	border-left: 3px solid var(--oro); border-radius: var(--radio);
	font-size: 13.5px; color: var(--ambar); line-height: 1.5;
}
.sp-acc-demo-aviso strong { color: var(--oscuro); }

/* ---------------------------------------------- barra superior */

.sp-acc-top { background: var(--oscuro); color: var(--beige); }
.sp-acc-top-in {
	max-width: var(--ancho); margin: 0 auto; padding: 13px 22px;
	display: flex; align-items: center; gap: 14px;
}
.sp-acc-top-logo { display: flex; align-items: center; }
.sp-acc-top-logo img { width: 150px; height: auto; display: block; }
.sp-acc-top-sep { width: 1px; height: 18px; background: rgba(243,240,235,.25); }
.sp-acc-top-etq {
	font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
	color: rgba(243,240,235,.72);
}
.sp-acc-top-dcha { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sp-acc-top-user { font-size: 13px; color: rgba(243,240,235,.82); }
.sp-acc-salir {
	font: inherit; font-size: 12.5px; cursor: pointer;
	background: transparent; color: var(--beige);
	border: 1px solid rgba(243,240,235,.3); border-radius: 50px; padding: 6px 15px;
}
.sp-acc-salir:hover { background: rgba(243,240,235,.12); }

/* ------------------------------------ barra de "viendo como" */

.sp-acc-simulando {
	background: var(--oro); color: var(--oscuro);
	font-size: 13px; padding: 9px 22px;
	display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.sp-acc-simulando button {
	font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
	background: var(--oscuro); color: var(--beige);
	border: 0; border-radius: 50px; padding: 5px 14px;
}

/* ------------------------------------------ identidad y tabs */

.sp-acc-ident { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.sp-acc-ident-in {
	max-width: var(--ancho); margin: 0 auto; padding: 22px;
	display: flex; align-items: center; gap: 16px;
}
/* Distintivo de marca. Va en oscuro con dorado y no al reves: el dorado de
   marca sobre beige se queda en 3,8:1, por debajo del minimo legible. Sobre
   el oscuro llega a 8,9:1 y ademas rima con la barra superior. */
.sp-acc-rotulo {
	flex: 0 0 auto;
	width: 46px; height: 46px; border-radius: 13px;
	display: grid; place-items: center;
	background: var(--oscuro); border: 1px solid var(--oscuro);
	font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--oro-suave2);
}
.sp-acc-rotulo--mini {
	width: 26px; height: 26px; border-radius: 7px; font-size: 10px;
	display: inline-grid; vertical-align: middle; margin-right: 8px;
}
.sp-acc-h1 { font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 0; line-height: 1.15; }
.sp-acc-sub { margin: 3px 0 0; font-size: 13px; color: var(--apagado); }

.sp-acc-tabs { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.sp-acc-tabs-in {
	max-width: var(--ancho); margin: 0 auto; padding: 0 22px;
	display: flex; gap: 4px;
	/* overflow-x: auto a secas hace que el navegador se reserve el derecho a
	   sacar TAMBIÉN la barra vertical, y salía una inútil de arriba abajo en
	   la fila de pestañas. Con overflow-y: hidden solo queda el deslizamiento
	   horizontal, que es el que hace falta cuando no caben en el móvil. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;            /* Firefox: la fila es corta, no hace falta barra */
}
.sp-acc-tabs-in::-webkit-scrollbar { display: none; }
.sp-acc-tab {
	padding: 13px 16px; font-size: 13.5px; font-weight: 500;
	color: var(--apagado); text-decoration: none; white-space: nowrap;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sp-acc-tab:hover { color: var(--oscuro); }
.sp-acc-tab.is-activa { color: var(--oscuro); border-bottom-color: var(--oro); font-weight: 600; }

/* --------------------------------------------------- cuerpo */

.sp-acc-main { max-width: var(--ancho); margin: 0 auto; padding: 26px 22px 60px; }

.sp-acc-metricas {
	display: grid; gap: 14px; margin-bottom: 26px;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.sp-acc-card {
	background: var(--blanco); border: 1px solid var(--linea);
	border-radius: var(--radio-lg); padding: 20px; box-shadow: var(--sombra);
}
.sp-acc-card--corte { border-color: rgba(212,175,55,.35); }
.sp-acc-rot {
	margin: 0 0 10px; font-size: 10.5px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--apagado);
}
.sp-acc-cifra {
	margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600;
	line-height: 1; font-variant-numeric: tabular-nums;
}
.sp-acc-cifra span {
	font-family: var(--sans); font-size: 13px; font-weight: 400;
	color: var(--apagado); margin-left: 8px;
}
.sp-acc-card-pie {
	margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linea);
	font-size: 12.5px; color: var(--apagado);
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sp-acc-oro { color: var(--oro-texto); font-weight: 700; }

.sp-acc-stock { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-acc-stock li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-acc-stock span { font-size: 13px; color: var(--apagado); }
.sp-acc-stock b { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.sp-acc-stock small { font-size: 11px; font-weight: 400; color: var(--apagado); margin-left: 3px; }

.sp-acc-cuenta { font-family: var(--mono); font-weight: 600; color: var(--verde); }
.sp-acc-cuenta.is-apurado { color: var(--ambar); }

/* -------------------------------------------------- bloques */

.sp-acc-bloque {
	background: var(--blanco); border: 1px solid var(--linea);
	border-radius: var(--radio-lg); padding: 22px; margin-bottom: 22px;
	box-shadow: var(--sombra);
}
.sp-acc-bloque--demo { border-color: rgba(212,175,55,.4); }
.sp-acc-estrecho { max-width: 620px; }
.sp-acc-bloque-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 22px; flex-wrap: wrap; margin-bottom: 18px;
}
.sp-acc-bloque-head h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0; }
.sp-acc-bloque-head h2 small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--apagado); }
.sp-acc-bloque-head p { margin: 6px 0 0; font-size: 13px; color: var(--apagado); max-width: 64ch; line-height: 1.55; }
.sp-acc-head-cifras { display: flex; gap: 22px; }
.sp-acc-head-cifras div { text-align: right; }
.sp-acc-head-cifras span {
	display: block; font-size: 10.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--apagado);
}
.sp-acc-head-cifras b { font-family: var(--mono); font-size: 19px; font-variant-numeric: tabular-nums; }

.sp-acc-h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 26px 0 14px; }
.sp-acc-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--apagado); line-height: 1.6; max-width: 78ch; }
.sp-acc-nota--fuerte {
	background: var(--beige); border-left: 3px solid var(--oro-suave);
	border-radius: 0 var(--radio) var(--radio) 0; padding: 12px 16px; margin-top: 20px;
}

/* --------------------------------------------------- filtros */

.sp-acc-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.sp-acc-buscar { flex: 1 1 260px; min-width: 0; }
.sp-acc-buscar input {
	font: inherit; font-size: 14px; width: 100%;
	padding: 10px 15px; border: 1px solid var(--linea-2);
	border-radius: 50px; background: var(--beige); color: var(--oscuro);
}
.sp-acc-buscar input:focus {
	outline: none; border-color: var(--oro-suave); background: var(--blanco);
	box-shadow: 0 0 0 3px rgba(184,151,106,.18);
}
.sp-acc-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.sp-acc-chips button {
	font: inherit; font-size: 12.5px; cursor: pointer;
	padding: 7px 13px; border-radius: 50px;
	border: 1px solid var(--linea); background: var(--beige); color: var(--apagado);
	display: inline-flex; align-items: center; gap: 6px;
}
.sp-acc-chips button b { font-family: var(--mono); font-size: 11px; }
.sp-acc-chips button:hover { background: var(--beige-2); color: var(--oscuro); }
.sp-acc-chips button.is-activa {
	background: var(--oscuro); border-color: var(--oscuro); color: var(--beige);
}
.sp-acc-cuenta-filas { margin: 12px 0 0; font-size: 12.5px; color: var(--apagado); }

/* ---------------------------------------------------- tablas */

.sp-acc-tabla-wrap {
	overflow-x: auto;
	border: 1px solid var(--linea); border-radius: var(--radio);
	scrollbar-width: thin;
}
.sp-acc-tabla { width: 100%; min-width: 840px; border-collapse: collapse; font-size: 13.5px; }
.sp-acc-tabla th {
	text-align: left; padding: 11px 14px; white-space: nowrap;
	font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--apagado);
	background: var(--beige); border-bottom: 1px solid var(--linea);
}
.sp-acc-tabla td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }

/* La referencia se queda fija al desplazar en horizontal. Una tabla de 840 px
   en un portatil obliga a arrastrar para ver el estado, y al llegar alli ya no
   se sabe de que pedido es la fila: el dato se veia, pero no se entendia. */
.sp-acc-tabla th:first-child,
.sp-acc-tabla td:first-child {
	position: sticky; left: 0; z-index: 1;
	background: var(--blanco);
	box-shadow: 1px 0 0 var(--linea);
}
.sp-acc-tabla th:first-child { background: var(--beige); z-index: 2; }

/* El borde se le quita a la ultima fila VISIBLE, que la marca el guion al
   filtrar; :last-child apuntaba a la ultima del DOM, normalmente oculta. */
.sp-acc-tabla tbody tr:last-child td,
.sp-acc-tabla tbody tr.es-ultima td { border-bottom: 0; }
.sp-acc-fila-sinfiltro td { border-bottom: 0 !important; }
.sp-acc-fila-sinfiltro:hover td { background: var(--blanco) !important; }
.sp-acc-tabla tbody tr:hover td { background: rgba(212,175,55,.04); }
/* La celda fija es opaca por necesidad, asi que el color del hover va ya
   mezclado: con el rgba translucido la primera columna se quedaba blanca y la
   fila parecia partida en dos. */
.sp-acc-tabla tbody tr:hover td:first-child { background: #FDFCF7; }
.sp-acc-tabla td small { display: block; font-size: 11px; color: var(--apagado); margin-top: 2px; }
.sp-acc-tabla select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--linea-2); border-radius: 7px; background: var(--blanco); }
.sp-acc-acciones { text-align: right; white-space: nowrap; }
.sp-acc-acciones form { display: inline-block; margin-left: 5px; }
.sp-acc-vacio { text-align: center; color: var(--apagado); padding: 34px 14px; font-size: 13.5px; }
.sp-acc-fin { font-size: 12px; color: var(--apagado); }
.sp-acc-track { color: var(--azul); }
.sp-acc-vigila { color: var(--ambar); }
.sp-acc-vigila small { color: var(--ambar); }

.sp-acc-orden {
	display: grid; place-items: center; width: 25px; height: 25px;
	border-radius: 7px; background: var(--beige-2);
	font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--apagado);
}
.sp-acc-orden.is-primero { background: var(--verde-suave); color: var(--verde); }

.sp-acc-tag {
	display: inline-block; margin-left: 7px; padding: 2px 7px;
	border-radius: 5px; background: var(--beige-2);
	font-size: 10.5px; font-weight: 600; color: var(--gris-texto); vertical-align: middle;
}
.sp-acc-tag--demo { background: var(--ambar-suave); color: var(--ambar); }

/* --------------------------------------------------- badges */

.sp-acc-badge {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	padding: 4px 10px; border-radius: 50px;
	font-size: 11.5px; font-weight: 600; border: 1px solid transparent;
}
.sp-acc-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sp-acc-badge--gris     { background: var(--beige-2);    color: var(--gris-texto); border-color: var(--linea); }
.sp-acc-badge--oro      { background: var(--ambar-suave); color: var(--ambar);  border-color: rgba(138,99,32,.25); }
.sp-acc-badge--verde    { background: var(--verde-suave); color: var(--verde);  border-color: rgba(46,125,91,.25); }
.sp-acc-badge--azul     { background: var(--azul-suave);  color: var(--azul);   border-color: rgba(55,97,138,.25); }
.sp-acc-badge--rojo     { background: var(--rojo-suave);  color: var(--rojo);   border-color: rgba(163,59,59,.25); }
.sp-acc-badge--apagado  { background: var(--beige-2);    color: var(--gris-texto); border-color: var(--linea); }

/* --------------------------------------------------- envios */

.sp-acc-envios { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.sp-acc-envio { border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; background: var(--beige); }
.sp-acc-envio header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-acc-envio-dest { margin: 8px 0 14px; font-size: 13px; color: var(--apagado); }
.sp-acc-hitos { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 6px; }
.sp-acc-hitos li { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-acc-hitos i { display: block; height: 3px; border-radius: 3px; background: var(--beige-3); }
.sp-acc-hitos span { font-size: 10px; color: var(--apagado); }
.sp-acc-hitos li.is-hecho i  { background: var(--verde); }
.sp-acc-hitos li.is-actual i { background: var(--azul); }
.sp-acc-envio footer {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding-top: 11px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--apagado);
}

/* ----------------------------------------------------- datos */

.sp-acc-datos { margin: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.sp-acc-datos > div { display: flex; gap: 16px; padding: 11px 15px; background: var(--blanco); align-items: baseline; flex-wrap: wrap; }
.sp-acc-datos dt { flex: 0 0 160px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--apagado); }
.sp-acc-datos dd { margin: 0; font-size: 13.5px; }
.sp-acc-datos dd small { display: block; font-size: 12px; color: var(--apagado); margin-top: 3px; }
.sp-acc-clave {
	font-family: var(--mono); font-size: 15px; font-weight: 700;
	background: var(--ambar-suave); color: var(--ambar);
	padding: 5px 11px; border-radius: 7px; letter-spacing: .04em;
}

/* -------------------------------------------------- APIs */

.sp-acc-api { border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; margin-bottom: 14px; background: var(--beige); }
.sp-acc-api header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sp-acc-api header h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 0; flex: 1 1 auto; }
.sp-acc-endpoint { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 18px; }
.sp-acc-endpoint--mini { margin: 16px 0 0; background: var(--beige-2); }
.sp-acc-endpoint code {
	display: block; font-family: var(--mono); font-size: 12.5px;
	word-break: break-all; color: var(--oscuro); margin-top: 4px;
}
.sp-acc-endpoint .sp-acc-nota { margin-top: 8px; }
.sp-acc-endpoint .sp-acc-nota code { display: inline; background: var(--beige-2); padding: 1px 5px; border-radius: 4px; }

/* ------------------------------------------------------- pie */

.sp-acc-pie {
	max-width: var(--ancho); margin: 0 auto; padding: 22px;
	border-top: 1px solid var(--linea);
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 12.5px; color: var(--apagado);
}

/* --------------------------------------------------- moviles */

@media (max-width: 720px) {
	.sp-acc-top-etq, .sp-acc-top-user { display: none; }
	.sp-acc-ident-in { padding: 18px 16px; }
	.sp-acc-h1 { font-size: 21px; }
	.sp-acc-main { padding: 20px 16px 48px; }
	.sp-acc-bloque, .sp-acc-card { padding: 17px; }
	.sp-acc-tabs-in { padding: 0 16px; }
	.sp-acc-bloque-head { flex-direction: column; gap: 14px; }
	.sp-acc-head-cifras { gap: 18px; }
	.sp-acc-head-cifras div { text-align: left; }
	.sp-acc-datos dt { flex: 1 1 100%; }
	.sp-acc-login-caja { padding: 32px 22px 24px; }
}

/* ============================================================
   GASTOS, GRAFICAS Y FICHA DE PEDIDO
   ============================================================ */

/* ---------- referencia clicable en la tabla ---------- */
.sp-acc-ref {
	color: var(--oscuro); text-decoration: none;
	border-bottom: 1px solid var(--linea-2);
	transition: color .2s, border-color .2s;
}
.sp-acc-ref:hover { color: var(--oro-texto); border-color: var(--oro); }
.sp-acc-dev {
	display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
	background: var(--rojo-suave); color: var(--rojo);
	font-size: 10px; font-weight: 600;
}

/* ---------- variacion mes a mes ---------- */
.sp-acc-delta { font-weight: 700; font-family: var(--mono); font-size: 12px; }
/* Subir el gasto no es "bueno" ni "malo" en si, pero para quien paga la
   factura un alza es lo que hay que mirar. De ahi el ambar, no el rojo. */
.sp-acc-delta.is-sube { color: var(--ambar); }
.sp-acc-delta.is-baja { color: var(--verde); }

/* ---------- graficas ---------- */
.sp-acc-grafica {
	/* Sin overflow: el recorte mataba el tooltip por arriba, porque
	   overflow-x: auto recomputa el overflow-y a auto y lo que sobresale
	   hacia arriba se pierde en silencio. El scroll vive en el hijo. */
	margin-top: 4px;
	position: relative;
}
.sp-acc-grafica-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sp-acc-svg { display: block; width: 100%; min-width: 560px; height: auto; }
.sp-acc-svg text { font-family: var(--sans); }
.sp-acc-gsin {
	margin: 0; padding: 30px 20px; text-align: center;
	color: var(--apagado); font-size: 13.5px;
	background: var(--beige); border-radius: var(--radio);
}
.sp-acc-leyenda { display: flex; gap: 16px; font-size: 12.5px; color: var(--apagado); flex-wrap: wrap; }
.sp-acc-leyenda i {
	display: inline-block; width: 9px; height: 9px; border-radius: 2px;
	margin-right: 6px; vertical-align: middle;
}

/* ---------- desglose de una factura ---------- */
.sp-acc-desglose td { background: var(--beige); padding: 0 14px 12px !important; }
.sp-acc-desglose ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sp-acc-desglose li {
	display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
	font-size: 12.5px; color: var(--apagado);
	padding: 3px 0; border-bottom: 1px dotted var(--linea);
}
.sp-acc-desglose li:last-child { border-bottom: 0; }
.sp-acc-desglose li small { color: var(--apagado); opacity: .85; }
.sp-acc-desglose li b { color: var(--oscuro); }

/* ---------- ficha de pedido ---------- */
.sp-acc-volver { margin: 0 0 14px; font-size: 13px; }
.sp-acc-volver a { color: var(--apagado); text-decoration: none; }
.sp-acc-volver a:hover { color: var(--oscuro); }

.sp-acc-ficha-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 22px; flex-wrap: wrap; margin-bottom: 22px;
	padding-bottom: 18px; border-bottom: 1px solid var(--linea);
}
.sp-acc-ficha-ref {
	font-family: var(--mono); font-size: 26px; font-weight: 700;
	margin: 4px 0 2px; letter-spacing: -.01em;
}
.sp-acc-ficha-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sp-acc-ficha-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.sp-acc-ficha-rejilla .sp-acc-h3:first-child { margin-top: 0; }
@media (max-width: 820px) { .sp-acc-ficha-rejilla { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- linea de tiempo del pedido ---------- */
.sp-acc-linea { list-style: none; margin: 0; padding: 0; }
.sp-acc-linea li {
	display: flex; gap: 14px; position: relative;
	padding: 0 0 20px 0;
}
/* El hilo que une los hitos. En el ultimo sobra. */
.sp-acc-linea li::before {
	content: ""; position: absolute; left: 6px; top: 16px; bottom: 0;
	width: 1px; background: var(--linea-2);
}
.sp-acc-linea li:last-child::before { display: none; }
.sp-acc-linea li:last-child { padding-bottom: 0; }

.sp-acc-linea-punto {
	flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
	margin-top: 3px; background: var(--blanco);
	border: 2px solid var(--linea-2); position: relative; z-index: 1;
}
.sp-acc-linea li.is-hecho .sp-acc-linea-punto  { background: var(--verde); border-color: var(--verde); }
.sp-acc-linea li.is-actual .sp-acc-linea-punto { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 0 4px rgba(212,175,55,.22); }
.sp-acc-linea li.is-devuelto .sp-acc-linea-punto { background: var(--rojo); border-color: var(--rojo); }

.sp-acc-linea b { display: block; font-size: 13.5px; font-weight: 600; color: var(--apagado); }
.sp-acc-linea li.is-hecho b, .sp-acc-linea li.is-actual b, .sp-acc-linea li.is-devuelto b { color: var(--oscuro); }
.sp-acc-linea small { display: block; font-size: 12px; color: var(--apagado); margin-top: 1px; }

@media (max-width: 720px) {
	.sp-acc-ficha-ref { font-size: 21px; }
	.sp-acc-svg { min-width: 520px; }
}

/* ---------- bloque de ayuda del cliente ---------- */
.sp-acc-ayuda {
	display: flex; align-items: center; justify-content: space-between;
	gap: 26px; flex-wrap: wrap;
	background: var(--blanco); border: 1px solid var(--linea);
	border-left: 3px solid var(--oro);
	border-radius: var(--radio-lg); padding: 22px 26px; margin-bottom: 22px;
	box-shadow: var(--sombra);
}
.sp-acc-ayuda h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 5px; }
.sp-acc-ayuda p { margin: 0; font-size: 13.5px; color: var(--apagado); max-width: 58ch; line-height: 1.55; }
.sp-acc-ayuda-vias { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sp-acc-ayuda-vias span { font-size: 12px; color: var(--apagado); }
@media (max-width: 720px) {
	.sp-acc-ayuda { flex-direction: column; align-items: stretch; padding: 18px; }
	.sp-acc-ayuda-vias { align-items: stretch; }
}

/* ============================================================
   PERSONALIDAD: jerarquia por urgencia, no por tamano de caja

   Lo de antes eran cuatro tarjetas identicas en fila. Todas con
   el mismo borde, la misma sombra y el mismo peso: ninguna decia
   cual mirar primero. Aqui manda lo unico con reloj (el corte) y
   lo unico accionable (la cola), y el resto baja a contexto sin
   marco. Border, fill, radius y sombra se gastan por funcion.
   ============================================================ */

/* ---------- el corte, en la cabecera y con reloj ---------- */
.sp-acc-ident-txt { flex: 1 1 auto; min-width: 0; }
.sp-acc-corte {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
	padding-left: 22px; border-left: 1px solid var(--linea);
}
.sp-acc-corte-etq {
	font-size: 10px; font-weight: 600; letter-spacing: .13em;
	text-transform: uppercase; color: var(--apagado);
}
.sp-acc-corte-hora {
	font-family: var(--serif); font-size: 30px; font-weight: 600;
	line-height: 1.05; margin-top: 2px; font-variant-numeric: tabular-nums;
}
.sp-acc-corte-resto {
	font-family: var(--mono); font-size: 12px; font-weight: 600;
	color: var(--verde); font-variant-numeric: tabular-nums;
}
.sp-acc-corte-resto.is-apurado { color: var(--ambar); }

/* ---------- logotipo de marca ---------- */
.sp-acc-rotulo--logo { background: var(--blanco); border-color: var(--linea); padding: 5px; overflow: hidden; }
.sp-acc-rotulo--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-acc-logo-fila { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-acc-logo-fila .sp-acc-rotulo { width: 72px; height: 72px; border-radius: 16px; font-size: 20px; }
.sp-acc-logo-form { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sp-acc-logo-form input[type=file] { font: inherit; font-size: 13px; }

/* ---------- el titular del dia ---------- */
.sp-acc-hoy {
	display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.6fr;
	gap: 34px; align-items: center;
	padding: 26px 0 24px; margin-bottom: 26px;
	border-bottom: 1px solid var(--linea);
}
.sp-acc-hoy-frase {
	margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.15;
}
.sp-acc-hoy-num {
	font-size: 56px; line-height: .9; color: var(--oro-texto);
	font-variant-numeric: tabular-nums;
}
.sp-acc-hoy-frase--ok .sp-acc-hoy-num { color: var(--verde); }
.sp-acc-hoy-sub { margin: 10px 0 0; font-size: 13.5px; color: var(--apagado); line-height: 1.55; max-width: 42ch; }
.sp-acc-hoy-sub strong { color: var(--oscuro); font-weight: 600; }

/* Los datos de contexto: sin caja, separados por filetes. */
.sp-acc-hoy-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.sp-acc-dato { padding: 0 22px; border-left: 1px solid var(--linea); min-width: 0; }
.sp-acc-dato:first-child { padding-left: 0; border-left: 0; }
.sp-acc-dato-cifra {
	margin: 9px 0 6px; font-family: var(--serif); font-size: 27px; font-weight: 600;
	line-height: 1; font-variant-numeric: tabular-nums;
}
.sp-acc-dato-cifra em { font-style: normal; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--apagado); }
.sp-acc-dato-pie { margin: 0; font-size: 12px; color: var(--apagado); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sp-acc-dato-pie a { color: var(--oro-texto); text-decoration: none; }
.sp-acc-dato-pie a:hover { text-decoration: underline; }
.sp-acc-dato .sp-acc-stock { margin-top: 9px; gap: 6px; }
.sp-acc-dato .sp-acc-stock li { font-size: 12.5px; }
.sp-acc-dato .sp-acc-stock b { font-size: 14px; }

/* ---------- alta de pedido ---------- */
.sp-acc-alta { padding: 0; overflow: hidden; }
.sp-acc-alta summary {
	display: flex; align-items: center; gap: 13px; cursor: pointer;
	padding: 18px 22px; list-style: none;
}
.sp-acc-alta summary::-webkit-details-marker { display: none; }
.sp-acc-alta summary:hover { background: var(--beige); }
.sp-acc-alta-mas {
	display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
	border-radius: 50%; background: var(--oro); color: var(--oscuro);
	font-size: 18px; font-weight: 700; line-height: 1;
	transition: transform .25s ease;
}
.sp-acc-alta[open] .sp-acc-alta-mas { transform: rotate(45deg); }
.sp-acc-alta summary b { display: block; font-size: 14.5px; }
.sp-acc-alta summary small { display: block; font-size: 12.5px; color: var(--apagado); margin-top: 1px; }
.sp-acc-alta form { padding: 0 22px; }
.sp-acc-alta details > .sp-acc-nota { padding: 0 22px 20px; }
.sp-acc-campo--ancho { grid-column: 1 / -1; }

/* ---------- barra de tabla: periodo y exportacion ---------- */
.sp-acc-barra-tabla {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
	padding-bottom: 14px; border-bottom: 1px solid var(--linea);
}
.sp-acc-periodo select {
	font: inherit; font-size: 13px; padding: 8px 12px;
	border: 1px solid var(--linea-2); border-radius: 50px;
	background: var(--blanco); color: var(--oscuro); cursor: pointer;
}

/* ---------- whatsapp ---------- */
.sp-acc-ayuda-botones { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.sp-acc-btn--wa { background: #25D366; border-color: #25D366; color: #0B3D1E; font-weight: 600; }
.sp-acc-btn--wa:hover { background: #1FBE5B; border-color: #1FBE5B; color: #0B3D1E; }
.sp-acc-btn--wa svg { width: 16px; height: 16px; }

/* ---------- tutorial ---------- */
.sp-acc-tour {
	position: fixed; inset: 0; z-index: 90;
	display: flex; align-items: center; justify-content: center; padding: 22px;
	background: rgba(26, 26, 26, .62); backdrop-filter: blur(3px);
}
.sp-acc-tour-caja {
	width: 100%; max-width: 480px; background: var(--blanco);
	border-radius: var(--radio-lg); padding: 34px 32px 24px;
	box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.sp-acc-tour-cuenta {
	margin: 0 0 10px; font-family: var(--mono); font-size: 11px;
	letter-spacing: .1em; color: var(--oro-texto);
}
.sp-acc-tour-paso h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0 0 10px; line-height: 1.2; }
.sp-acc-tour-paso p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--apagado); }
.sp-acc-tour-puntos { display: flex; gap: 6px; margin: 24px 0 20px; }
.sp-acc-tour-puntos span { width: 7px; height: 7px; border-radius: 50%; background: var(--beige-3); transition: background .2s, width .2s; }
.sp-acc-tour-puntos span.is-activo { background: var(--oro); width: 20px; border-radius: 4px; }
.sp-acc-tour-pie {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; padding-top: 18px; border-top: 1px solid var(--linea);
}
.sp-acc-tour-pie > div { display: flex; gap: 8px; align-items: center; }
.sp-acc-tour-saltar {
	font: inherit; font-size: 13px; cursor: pointer;
	background: none; border: 0; color: var(--apagado); text-decoration: underline;
	text-underline-offset: 3px; padding: 0;
}
.sp-acc-tour-saltar:hover { color: var(--oscuro); }

@media (max-width: 900px) {
	.sp-acc-hoy { grid-template-columns: 1fr; gap: 24px; }
	.sp-acc-hoy-datos { grid-template-columns: 1fr; gap: 16px; }
	.sp-acc-dato { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--linea); }
	.sp-acc-dato:first-child { padding-top: 0; border-top: 0; }
	.sp-acc-corte { padding-left: 0; border-left: 0; align-items: flex-start; width: 100%; margin-top: 12px; }
	.sp-acc-ident-in { flex-wrap: wrap; }
	.sp-acc-hoy-num { font-size: 44px; }
	.sp-acc-tour-caja { padding: 26px 22px 18px; }
}

/* ============================================================
   FORMULARIO DE ALTA COMPLETO Y GRAFICAS INTERACTIVAS
   ============================================================ */

/* ---------- alta de pedido por bloques ---------- */
.sp-acc-alta-form { padding: 0 22px 20px; }
.sp-acc-alta-form fieldset {
	border: 0; border-top: 1px solid var(--linea);
	margin: 0; padding: 18px 0 4px;
}
.sp-acc-alta-form fieldset:first-of-type { border-top: 0; padding-top: 4px; }
.sp-acc-alta-form legend {
	padding: 0 0 12px; font-size: 11px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--oro-texto);
}
.sp-acc-alta-form .sp-acc-form--rejilla { align-items: start; }

.sp-acc-lineas { display: flex; flex-direction: column; gap: 9px; }
/* (sustituida más abajo por la versión de tres columnas) */
.sp-acc-campo--uds input { text-align: center; }

.sp-acc-alta-pie {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea);
}
.sp-acc-alta-pie span { font-size: 12.5px; color: var(--apagado); max-width: 46ch; }

/* ---------- corte cerrado ---------- */
.sp-acc-corte-resto.is-cerrado { color: var(--apagado); font-weight: 500; }

/* ---------- graficas interactivas ---------- */
.sp-acc-grafica { position: relative; }
.sp-acc-svg .sp-g-barra { transition: opacity .15s ease; }
.sp-acc-svg .sp-g-zona { cursor: default; }
.sp-acc-svg .sp-g-zona[data-ir] { cursor: pointer; }

/* Al pasar por encima se apagan las DEMAS barras en vez de encender la
   apuntada: asi la comparacion visual se mantiene y no parece que el mes
   sobre el que estas haya crecido. */
.sp-acc-grafica.is-activa .sp-g-barra { opacity: .3; }
.sp-acc-grafica.is-activa .sp-g-barra.is-foco { opacity: 1; }

.sp-acc-tip {
	/* max-width y wrap en vez de nowrap: "377 pedidos · 15 devoluciones" en una
	   sola linea medía mas que media tarjeta y empujaba el globo fuera. Que
	   parta en dos lineas es preferible a que se salga. */
	position: absolute; z-index: 5; pointer-events: none;
	background: var(--oscuro); color: var(--beige);
	padding: 8px 12px; border-radius: 9px;
	font-size: 12.5px; line-height: 1.4;
	max-width: min(260px, 92%);
	box-shadow: 0 8px 24px rgba(0,0,0,.22);
	opacity: 0; transform: translate(-50%, 10px);
	transition: opacity .12s ease;
}
.sp-acc-tip.is-visible { opacity: 1; }
.sp-acc-tip b,
.sp-acc-tip span,
.sp-acc-tip small { display: block; }
.sp-acc-tip b { color: var(--blanco); font-size: 13.5px; }
.sp-acc-tip span { color: var(--beige); }
.sp-acc-tip small { color: var(--oro-suave2); font-size: 11px; margin-top: 2px; }
.sp-acc-tip::after {
	/* --flecha la escribe el guion: es cuanto se ha tenido que desplazar el
	   globo para no salirse, asi la punta sigue apuntando a su mes. */
	content: ""; position: absolute;
	left: calc(50% + var(--flecha, 0px)); top: -5px;
	width: 10px; height: 10px; background: var(--oscuro);
	transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 720px) {
	.sp-acc-alta-form { padding: 0 16px 18px; }

}

/* ---------- lineas de articulo, tantas como hagan falta ---------- */
.sp-acc-linea-art {
	display: grid;
	grid-template-columns: 1fr 96px 34px;   /* articulo · uds · quitar */
	gap: 12px; align-items: end;
}
/* La primera linea no se puede quitar, pero reserva el hueco para que su
   campo de unidades quede alineado con el de las de abajo. */
.sp-acc-quitar-hueco { display: block; }

.sp-acc-quitar {
	width: 34px; height: 42px; padding: 0;
	background: none; border: 0; cursor: pointer;
	color: var(--apagado); font-size: 22px; line-height: 1;
	border-radius: var(--radio); transition: color .15s, background .15s;
}
.sp-acc-quitar:hover { color: var(--rojo); background: var(--rojo-suave); }

.sp-acc-anadir {
	margin-top: 12px; gap: 7px;
	border-style: dashed; border-color: var(--linea-2);
	background: transparent; color: var(--apagado);
}
.sp-acc-anadir:hover { background: var(--beige); color: var(--oscuro); border-color: var(--oro-suave); }
.sp-acc-anadir span {
	display: inline-grid; place-items: center;
	width: 17px; height: 17px; border-radius: 50%;
	background: var(--oro); color: var(--oscuro);
	font-size: 13px; font-weight: 700; line-height: 1;
}

@media (max-width: 720px) {
	.sp-acc-linea-art { grid-template-columns: 1fr 76px 32px; gap: 8px; }
	.sp-acc-quitar { width: 32px; }
}

/* Nota al pie de una grafica: solo aparece cuando el dibujo ha tenido que
   distorsionar algo (el suelo de la barra de devoluciones). */
.sp-acc-gnota {
	margin: 8px 0 0; font-size: 12px; line-height: 1.45;
	color: var(--apagado); max-width: 62ch;
}

/* ============================================================
   CONSOLA DE GESTION: listas, fichas y zona de borrado
   ============================================================ */

/* ---------- barra de filtros ---------- */
.sp-acc-filtros {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin: 0 0 16px; padding: 12px; border-radius: var(--radio);
	background: var(--beige);
}
.sp-acc-filtros select,
.sp-acc-filtros input[type="search"] {
	font: inherit; font-size: 13.5px; padding: 8px 11px;
	border: 1px solid var(--linea-2); border-radius: var(--radio);
	background: var(--blanco); color: var(--oscuro);
}
.sp-acc-filtros input[type="search"] { flex: 1 1 240px; min-width: 0; }
.sp-acc-filtros .sp-acc-btn { padding: 8px 16px; }

/* ---------- avisos del resumen ---------- */
.sp-acc-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-acc-alerta {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 11px 14px; border-radius: var(--radio);
	border: 1px solid var(--linea); border-left-width: 3px;
	font-size: 13.5px;
}
.sp-acc-alerta--rojo  { border-left-color: var(--rojo);  background: var(--rojo-suave); }
.sp-acc-alerta--ambar { border-left-color: var(--ambar); background: var(--ambar-suave); }

/* ---------- elegir marca antes de un alta ---------- */
.sp-acc-elegir { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.sp-acc-elegir a {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 14px 16px; border: 1px solid var(--linea-2); border-radius: var(--radio);
	text-decoration: none; background: var(--blanco);
	transition: border-color .18s cubic-bezier(.2,.7,.3,1), background-color .18s cubic-bezier(.2,.7,.3,1);
}
.sp-acc-elegir a:hover { border-color: var(--oro-suave); background: var(--beige); }
.sp-acc-elegir small { flex-basis: 100%; font-size: 12px; color: var(--apagado); }
.sp-acc-elegir--lista { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

/* ---------- fichas: el mismo ritmo que el alta del cliente ---------- */
.sp-acc-ficha fieldset {
	border: 0; border-top: 1px solid var(--linea);
	margin: 0; padding: 18px 0 6px; min-width: 0;
}
.sp-acc-ficha fieldset:first-of-type { border-top: 0; padding-top: 2px; }
.sp-acc-ficha legend {
	padding: 0 0 12px; font-size: 11px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--oro-texto);
}
.sp-acc-ficha .sp-acc-form--rejilla { align-items: start; }
.sp-acc-ficha .sp-acc-check { align-self: end; min-height: 42px; }
.sp-acc-campo textarea {
	font: inherit; font-size: 14px; padding: 11px 13px; width: 100%; resize: vertical;
	border: 1px solid var(--linea-2); border-radius: var(--radio);
	background: var(--blanco); color: var(--oscuro);
}
.sp-acc-campo textarea:focus { border-color: var(--oro-suave); outline: none; box-shadow: 0 0 0 3px rgba(184,151,106,.18); }

/* lineas con SKU (pedido) y lineas de factura */
.sp-acc-linea-art--sku { grid-template-columns: 1fr minmax(90px, 160px) 96px 34px; }
.sp-acc-linea-fac {
	display: grid; gap: 12px; align-items: end;
	grid-template-columns: minmax(150px, 210px) 1fr 96px 130px 34px;
}
@media (max-width: 720px) {
	.sp-acc-linea-art--sku { grid-template-columns: 1fr 76px 32px; }
	.sp-acc-linea-art--sku .sp-acc-campo:nth-child(2) { grid-column: 1 / -1; order: 3; }
	.sp-acc-linea-fac { grid-template-columns: 1fr 1fr 32px; }
	.sp-acc-linea-fac .sp-acc-campo:nth-child(2) { grid-column: 1 / -1; }
}

.sp-acc-legado { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linea-2); }

.sp-acc-consumo {
	margin-top: 12px; padding: 12px 14px; border-radius: var(--radio);
	background: var(--beige); font-size: 13.5px;
}
.sp-acc-consumo p { margin: 0; }
.sp-acc-consumo p + p { margin-top: 8px; }

.sp-acc-botonera { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }

/* ---------- estados de stock y seguimiento ---------- */
.sp-acc-falta { color: var(--rojo); }
td.sp-acc-falta small { color: var(--rojo); }
.sp-acc-stock-pend { font-size: 12px; color: var(--apagado); }
.sp-acc-tag--urgente { background: var(--rojo-suave); color: var(--rojo); }
.sp-acc-track-pend { font-size: 12.5px; color: var(--apagado); font-style: italic; }

/* ---------- cambio rapido de estado con seguimiento ---------- */
.sp-acc-rapido { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sp-acc-rapido input[type="text"] {
	font: inherit; font-size: 12.5px; padding: 5px 8px; width: 118px;
	border: 1px solid var(--linea-2); border-radius: 7px; background: var(--blanco);
}

/* ---------- historial de movimientos de un lote ---------- */
.sp-acc-movs .sp-acc-sale  { color: var(--rojo); }
.sp-acc-movs .sp-acc-entra { color: var(--verde); }

/* ---------- paginacion ---------- */
.sp-acc-paginas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sp-acc-paginas a {
	min-width: 34px; padding: 6px 10px; text-align: center;
	border: 1px solid var(--linea-2); border-radius: 8px;
	font-size: 13px; text-decoration: none; font-variant-numeric: tabular-nums;
}
.sp-acc-paginas a.is-activa { background: var(--oscuro); color: var(--beige); border-color: var(--oscuro); }

/* ---------- zona de borrado ---------- */
/* Separada del bloque que se edita y con su propio rojo: borrar no puede
   parecer el mismo tipo de accion que guardar. */
.sp-acc-peligro {
	margin: 0 0 22px; padding: 18px 22px;
	border: 1px solid rgba(163,59,59,.28); border-radius: var(--radio-lg);
	background: var(--blanco);
}
.sp-acc-peligro h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--rojo); }
.sp-acc-peligro p { margin: 0 0 14px; font-size: 13px; color: var(--apagado); max-width: 72ch; line-height: 1.55; }
.sp-acc-peligro form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sp-acc-peligro-form input[type="text"] {
	font: inherit; font-size: 14px; padding: 10px 12px; min-width: 240px;
	border: 1px solid var(--linea-2); border-radius: var(--radio);
}
.sp-acc-btn--peligro { background: var(--blanco); border-color: rgba(163,59,59,.45); color: var(--rojo); }
.sp-acc-btn--peligro:hover { background: var(--rojo-suave); border-color: var(--rojo); }

/* ---------- papelera de marcas ---------- */
.sp-acc-papelera { border-top: 1px solid var(--linea); padding: 14px 0; }
.sp-acc-papelera:first-of-type { border-top: 0; padding-top: 0; }
.sp-acc-papelera-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.sp-acc-papelera-cab small { display: block; margin-top: 3px; font-size: 12px; color: var(--apagado); }
.sp-acc-papelera-purga { margin-top: 10px; }
.sp-acc-papelera-purga summary { cursor: pointer; font-size: 12.5px; color: var(--rojo); width: fit-content; }
.sp-acc-papelera-purga p { margin: 10px 0 12px; font-size: 13px; color: var(--apagado); max-width: 76ch; line-height: 1.55; }
.sp-acc-papelera-purga form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- informacion legal en la entrada ---------- */
.sp-acc-login-legal {
	margin: 0; max-width: 400px; text-align: center;
	font-size: 11.5px; line-height: 1.55; color: var(--apagado);
}
.sp-acc-login-legal a { color: var(--apagado); }

/* ---------- boton ocupado mientras se envia ---------- */
.sp-acc-body button[aria-busy="true"] { opacity: .6; cursor: progress; }