/* ============================================================
   urdiales.es — Formularios de venta · diseño 2026
   Identidad tomada del logotipo: grotesca negrita muy compacta,
   Navy #092646 y Azul #2D74B4 sobre blanco. Sin fuentes externas.
   ============================================================ */

:root {
	--navy: #092646;
	--navy-deep: #06192f;
	--blue: #2D74B4;
	--blue-light: #4A8FD1;
	--blue-wash: #eaf2fa;
	--ink: #14233a;
	--muted: #5a6a80;
	--border: #dbe3ee;
	--bg-page: #f4f7fb;
	--surface: #ffffff;
	--radius: 14px;
	--radius-sm: 9px;
	--shadow: 0 1px 2px rgba(9, 38, 70, .06), 0 6px 18px rgba(9, 38, 70, .06);
	--shadow-lg: 0 14px 38px rgba(9, 38, 70, .16);
	--font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg-page);
	color: var(--ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sf-form-title { font-family: var(--font); letter-spacing: -.025em; }

:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }

.sf-container { max-width: 960px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- Cabecera: blanca, con el logotipo tal cual ---------- */
.sf-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	border-top: 5px solid var(--navy);
	margin: 0 0 28px;
	position: sticky;
	top: 0;
	z-index: 20;
}
.sf-header-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.sf-logo { display: block; line-height: 0; }
.sf-logo img { height: 34px; width: auto; display: block; }
.sf-sfid-badge {
	font-size: 13px;
	color: var(--muted);
	background: var(--blue-wash);
	padding: 6px 8px 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}
.sf-sfid-badge b { color: var(--navy); font-weight: 700; }
.sf-sfid-badge a {
	margin-left: 8px;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 12px;
}
.sf-sfid-badge a:hover { background: var(--blue); }

/* ---------- Portada ---------- */
.sf-hero-wrap { padding: 28px 0 8px; }
.sf-hero { max-width: 720px; }
.sf-hero h1 {
	font-size: clamp(34px, 6vw, 56px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.04em;
	color: var(--navy);
	margin: 0 0 12px;
}
.sf-hero p { color: var(--muted); font-size: 17px; margin: 0; }

/* Las tres verticales: bloques grandes, el nombre en minúsculas como en el logotipo */
.sf-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-top: 26px;
}
.sf-cards.sf-cards-inline { margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.sf-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow);
	min-height: 190px;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.sf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
.sf-card .sf-card-icon {
	width: 46px; height: 46px;
	border-radius: 12px;
	background: var(--navy);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: auto;
	color: #fff;
	font-weight: 800;
	font-size: 15px;
}
.sf-card h2 {
	margin: 22px 0 4px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--navy);
	text-transform: lowercase;
}
.sf-card p { margin: 0; font-size: 14px; color: var(--muted); }
.sf-cards-inline .sf-card { min-height: 170px; padding: 20px; }
.sf-cards-inline .sf-card h2 { font-size: 22px; margin-top: 16px; text-transform: none; }

.sf-card-icon-brand, .sf-card .sf-card-icon.sf-card-icon-brand {
	background: transparent !important;
	width: 100%; height: 64px;
	justify-content: flex-start;
	border-radius: 0;
}
.sf-card-icon-brand img { max-height: 100%; max-width: 150px; object-fit: contain; }
.sf-brand-logo { max-height: 56px; max-width: 150px; width: auto; height: auto; object-fit: contain; display: block; }
.sf-selected-brand { display: inline-block; vertical-align: middle; margin-right: 6px; }
.sf-selected-brand .sf-brand-logo { max-height: 26px; max-width: 80px; }

.sf-card-disabled {
	display: block;
	background: transparent;
	border: 1px dashed var(--border);
	border-radius: var(--radius);
	padding: 24px;
	color: var(--muted);
	cursor: not-allowed;
}
.sf-card-disabled h2 { margin: 8px 0 6px; font-size: 18px; font-weight: 700; color: var(--muted); }
.sf-card-disabled p { margin: 0; font-size: 14px; }
.sf-card-icon-muted { background: #c7d0dc !important; }

/* ---------- Formularios ---------- */
.sf-form-title {
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--navy);
	margin: 6px 0 18px;
	line-height: 1.1;
}
.sf-fieldset {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 24px 24px;
	margin: 0 0 18px;
	box-shadow: var(--shadow);
}
.sf-fieldset legend {
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -.01em;
	color: var(--navy);
	padding: 0 10px;
	margin-left: -10px;
}
.sf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 10px;
}
.sf-grid label {
	display: flex; flex-direction: column;
	font-size: 13px; font-weight: 600;
	color: var(--muted);
	gap: 6px;
}
.sf-grid label.sf-full { grid-column: 1 / -1; }

input, select, textarea {
	font-family: var(--font);
	font-size: 15px;
	padding: 11px 13px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	max-width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: #b9c8db; }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(45, 116, 180, .16);
}

.sf-hint { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

.sf-linea {
	border: 1.5px solid var(--border);
	border-left: 5px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 16px;
	margin-bottom: 14px;
	background: #fbfcfe;
}
.sf-linea-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sf-linea-header select.sf-prod-select { flex: 1; min-width: 0; }

button, .sf-btn {
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--border);
	background: #fff;
	color: var(--navy);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button:hover, .sf-btn:hover { border-color: var(--blue); color: var(--blue); }
button.sf-btn-primary, .sf-btn-primary {
	background: var(--navy);
	border: 1.5px solid var(--navy);
	color: #fff;
	padding: 13px 26px;
	font-size: 15px;
}
button.sf-btn-primary:hover, .sf-btn-primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
button.sf-btn-danger {
	border-color: #f0c2bf; color: #b3261e; background: #fff;
	padding: 8px 14px; font-size: 13px;
}
button.sf-btn-danger:hover { background: #fdecec; border-color: #d9534f; color: #b3261e; }

/* Los botones de acción de cada formulario llevan estilos en línea: los neutralizamos */
.sf-actions button.sf-btn-primary[style] { background: #fff !important; color: var(--navy); border: 1.5px solid var(--navy); }
.sf-actions button.sf-btn-primary[style]:hover { background: var(--navy) !important; color: #fff; }
.sf-actions button.sf-btn-primary[style*="2D74B4"] { background: var(--blue) !important; border-color: var(--blue); color: #fff; }
.sf-actions button.sf-btn-primary[style*="2D74B4"]:hover { background: var(--navy) !important; border-color: var(--navy); }

.sf-actions {
	margin-top: 22px;
	display: flex;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.sf-conditional { display: none; }

.sf-alert {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	margin-bottom: 18px;
	font-size: 14.5px;
	border: 1.5px solid;
}
.sf-alert-success { background: #e9f8ef; color: #17692f; border-color: #b7e6c6; }
.sf-alert-error { background: #fdecec; color: #a3231b; border-color: #f3c0bd; }
.sf-alert-warning { background: #fff8e6; color: #7a5600; border-color: #f3dfa0; }
.sf-alert ul { margin: 6px 0 0; padding-left: 20px; }

.sf-back-link {
	display: inline-block;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}
.sf-back-link:hover { text-decoration: underline; }

/* ---------- Acceso ---------- */
.sf-login-wrap { max-width: 460px; padding-top: 24px; }
.sf-login-wrap .sf-form-title { font-size: 40px; }

@media (max-width: 600px) {
	.sf-header-inner { padding: 10px 14px; }
	.sf-logo img { height: 28px; }
	.sf-fieldset { padding: 18px 16px; }
	.sf-actions button { width: 100%; }
	.sf-linea-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.sf-card:hover { transform: none; }
}

/* ---------- Panel de administración ---------- */
.sf-login-wrap { max-width: 400px; margin: 60px auto 0; }
.sf-login-wrap .sf-fieldset { margin-bottom: 0; }

.sf-admin-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0 6px;
	flex-wrap: wrap;
	gap: 10px;
}
.sf-admin-nav {
	display: flex;
	gap: 8px;
}
.sf-admin-nav a {
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 8px;
	background: #fff;
	border: 1.5px solid var(--border);
}
.sf-admin-nav a:hover {
	border-color: var(--blue);
	color: var(--blue);
}
.sf-admin-nav a.active {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}
.sf-admin-topbar span {
	color: var(--muted);
	font-size: 14px;
}
table.sf-admin-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: var(--shadow);
}
table.sf-admin-table th, table.sf-admin-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}
table.sf-admin-table th {
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	font-family: var(--font);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
table.sf-admin-table tr:last-child td { border-bottom: none; }
table.sf-admin-table tr:hover td { background: #f7f9fc; }

.sf-vertical-block { margin-bottom: 40px; }
.sf-vertical-block h2 {
	font-family: var(--font);
	font-size: 19px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 12px;
	padding-left: 12px;
	border-left: 4px solid var(--blue);
}
.sf-inline-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-end;
}
.sf-inline-form label {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: var(--muted);
	gap: 4px;
}
.sf-inline-form input { min-width: 0; }
.sf-actions-cell { display: flex; gap: 6px; }
.sf-actions-cell form { display: inline; }

/* ---------- Logos de operadores ---------- */
.sf-card .sf-card-icon-brand {
	/* El contenedor anterior heredaba 40x40px de .sf-card-icon,
	   haciendo que el logo real quedase prácticamente invisible. */
	width: 100%;
	max-width: 180px;
	height: 86px;
	min-height: 86px;
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid #e2e6ed;
	border-radius: 10px;
	padding: 10px 14px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sf-brand-logo {
	display: block;
	width: 100%;
	height: 66px;
	max-width: 165px;
	object-fit: contain;
}
.sf-selected-brand {
	display: inline-flex;
	vertical-align: middle;
	width: 118px;
	height: 46px;
	margin: -7px 8px -10px 0;
	align-items: center;
	justify-content: center;
}
.sf-selected-brand .sf-brand-logo {
	width: 118px;
	height: 46px;
}
.sf-admin-brand-cell {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.sf-brand-logo-admin {
	width: 100px;
	height: 42px;
	object-fit: contain;
}

.sf-logo-upload-help {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid #d8e0ea;
	border-radius: 10px;
	background: #f7f9fc;
	color: #5b6272;
}
.sf-logo-upload-help strong { color:#142c50; font-size:15px; }
/* ---------- Administración de logotipos ---------- */
.sf-logo-admin-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
	align-items: stretch;
}
.sf-logo-admin-card {
	background:#fff;
	border:1px solid #e2e6ed;
	border-radius:12px;
	padding:12px;
	box-sizing:border-box;
	box-shadow:0 4px 14px rgba(20,40,80,.05);
	min-width:0;
}
.sf-logo-admin-card h2 { margin:0 0 8px; font-size:16px; }
.sf-logo-upload-form { display:flex; flex-direction:column; gap:6px; }
.sf-logo-upload-row { display:flex; flex-direction:column; gap:6px; }
.sf-logo-file-label {
	position:relative;
	display:flex;
	align-items:center;
	gap:7px;
	min-height:38px;
	padding:4px 6px;
	border:1px solid #b9c6d8;
	border-radius:8px;
	background:#f8fafc;
	cursor:pointer;
	box-sizing:border-box;
	overflow:hidden;
}
.sf-logo-file-label:hover { border-color:#142c50; background:#f3f6fa; }
.sf-logo-file-button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:7px 9px;
	border-radius:7px;
	background:#142c50;
	color:#fff;
	font-weight:600;
	font-size:12px;
	white-space:nowrap;
	flex:0 0 auto;
}
.sf-logo-file-name {
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:11px;
	color:#5b6272;
}
.sf-logo-file-input {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0;
	cursor:pointer;
	z-index:2;
}
.sf-logo-save-button { width:100%; min-height:38px; padding:8px 10px !important; font-size:12px !important; }
.sf-logo-upload-hint { font-size:10px; color:#697386; }
.sf-logo-admin-preview {
	height:58px;
	margin-top:8px;
	border:1px solid #e2e6ed;
	border-radius:8px;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:5px 8px;
	box-sizing:border-box;
	overflow:hidden;
}
.sf-logo-admin-preview .sf-brand-logo-admin {
	width:125px;
	height:46px;
	max-width:100%;
	object-fit:contain;
}
.sf-logo-admin-status { font-size:11px; color:#5b6272; margin:5px 0 7px; }
.sf-logo-admin-card form + .sf-logo-admin-preview { margin-top:8px; }

/* A partir de 560px, las cuatro tarjetas se muestran en 2x2. */
@media (max-width: 559px) {
	.sf-logo-admin-grid { grid-template-columns: 1fr; gap:10px; }
}

.sf-logo-operator-strip {
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:6px;
	margin-top:14px;
}
.sf-logo-operator-strip a {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:30px;
	padding:5px 6px;
	border:1px solid #d8e0ea;
	border-radius:7px;
	background:#fff;
	color:#142c50;
	font-size:12px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
}
@media (max-width:559px) {
	.sf-logo-operator-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


.sf-logo-admin-card { scroll-margin-top: 16px; }
.sf-logo-operator-strip a:hover { border-color:#142c50; background:#f3f6fa; }
@media (min-width:560px) {
  .sf-logo-admin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:380px) {
  .sf-logo-admin-grid { grid-template-columns:1fr; }
}

/* ---------- Selector explícito de operadora en administración de logos ---------- */
.sf-logo-selector {
	margin-top:14px;
	padding:12px;
	border:1px solid #d8e0ea;
	border-radius:10px;
	background:#fff;
	color:#142c50;
}
.sf-logo-selector > strong { font-size:13px; }
#sf-selected-operator-label { font-weight:700; margin-left:4px; }
.sf-logo-selector-buttons {
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:7px;
	margin-top:9px;
}
.sf-logo-selector-button {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:34px;
	padding:6px 8px;
	border:1px solid #cbd5e1;
	border-radius:7px;
	background:#fff;
	color:#142c50;
	font-size:12px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
	font-family:inherit;
}
.sf-logo-selector-button.active,
.sf-logo-selector-button:hover {
	background:#142c50;
	color:#fff;
	border-color:#142c50;
}
.sf-logo-admin-card { scroll-margin-top:20px; }
.sf-logo-admin-card.is-selected { border-color:#142c50; box-shadow:0 5px 16px rgba(20,40,80,.10); }
.sf-logo-admin-card-heading {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:8px;
}
.sf-logo-admin-card-heading h2 { margin:0; }
.sf-logo-admin-key {
	font-size:10px;
	padding:3px 6px;
	border-radius:5px;
	background:#eef2f7;
	color:#697386;
}
@media (max-width:559px) {
	.sf-logo-selector-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- v10: gestión de logos, formularios independientes ---------- */
.sf-logo-admin-grid-five {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.sf-logo-admin-grid-five .sf-logo-admin-card {
  min-width:0;
  background:#fff;
  border:1px solid #dbe2ea;
  border-radius:12px;
  padding:14px;
  box-sizing:border-box;
}
.sf-logo-admin-grid-five .sf-logo-admin-preview {
  height:76px;
  margin:0 0 12px;
  border:1px solid #dbe2ea;
  border-radius:8px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  box-sizing:border-box;
  overflow:hidden;
}
.sf-logo-admin-grid-five .sf-logo-admin-preview .sf-brand-logo-admin {
  width:150px;
  height:58px;
  max-width:100%;
  object-fit:contain;
}
.sf-logo-native-file-label {
  display:block;
  margin:0;
  color:#142c50;
  font-size:12px;
  font-weight:700;
}
.sf-logo-native-file-input {
  display:block;
  width:100%;
  min-height:40px;
  margin-top:6px;
  padding:6px;
  box-sizing:border-box;
  border:1px solid #b9c6d8;
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  font:inherit;
  font-weight:400;
  cursor:pointer;
}
.sf-logo-native-file-input::file-selector-button {
  margin-right:8px;
  padding:7px 10px;
  border:0;
  border-radius:6px;
  background:#142c50;
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.sf-logo-native-file-input:hover { border-color:#142c50; }
.sf-logo-admin-grid-five .sf-logo-save-button {
  width:100%;
  margin-top:8px;
  min-height:40px;
}
.sf-logo-admin-grid-five .sf-logo-reset-button {
  width:100%;
  min-height:34px;
  font-size:11px;
}
@media (max-width:700px) {
  .sf-logo-admin-grid-five { grid-template-columns:1fr; }
}

/* ---------- Modal "Mostrar resumen" (previsualización sin enviar nada) ---------- */
.sf-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(6, 25, 47, .55);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.sf-modal-overlay.sf-modal-open { display: flex; }
.sf-modal-box {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	max-width: 640px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px 26px;
	position: relative;
}
.sf-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
}
.sf-modal-close:hover { color: var(--navy); }
.sf-modal-box h2 {
	font-family: var(--font);
	color: var(--navy);
	margin-top: 0;
	font-size: 20px;
}
.sf-resumen-table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-size: 14px;
}
.sf-resumen-table th, .sf-resumen-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
	text-align: left;
}
.sf-resumen-table th { background: var(--navy); color: #fff; font-size: 12px; text-transform: uppercase; }
.sf-resumen-table td.sf-num, .sf-resumen-table th.sf-num { text-align: right; }
.sf-resumen-total {
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	text-align: right;
	margin-top: 6px;
}
.sf-resumen-empty { color: var(--muted); font-size: 14px; }
.sf-resumen-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ---------- Gestión moderna de usuarios ---------- */
.sf-users-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 12px;}
.sf-users-head .sf-form-title{margin:0;}
.sf-users-subtitle{margin:3px 0 0;color:var(--muted);font-size:13px;}
.sf-users-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #d8e0ea;border-radius:10px;padding:0 12px;height:42px;margin:0 0 14px;box-shadow:0 2px 10px rgba(9,38,70,.04);}
.sf-users-search span{font-size:22px;color:#718096;line-height:1;}
.sf-users-search input{border:0!important;box-shadow:none!important;outline:0!important;width:100%;padding:7px 0;font-size:13px;background:transparent;}
.sf-users-note{background:#eef3f8;border:1px solid #dbe4ee;border-radius:9px;padding:12px 14px;margin-bottom:16px;color:#667386;font-size:12px;line-height:1.55;}
.sf-users-table-wrap{overflow:auto;border:1px solid #d8e0ea;border-radius:12px;background:#fff;box-shadow:0 4px 18px rgba(9,38,70,.05);}
.sf-users-table{margin:0;min-width:980px;border:0!important;}
.sf-users-table th{font-size:11px;text-transform:none;letter-spacing:.2px;color:#64748b;background:#f7f9fc;border-bottom:1px solid #dce3eb;}
.sf-users-table td{font-size:12px;vertical-align:middle;padding:10px 9px;}
.sf-users-table tbody tr:hover{background:#fbfcfe;}
.sf-email-form{display:flex;align-items:center;gap:5px;min-width:225px;}
.sf-email-form input{width:160px;padding:7px 8px;font-size:11px;border-radius:7px;}
.sf-btn-small{padding:7px 8px!important;font-size:10px!important;}
.sf-status{font-weight:700;font-size:12px;}
.sf-status-active,.sf-welcome-sent{color:#0f9d74;}
.sf-status-off{color:#7b8492;}
.sf-users-table td small{display:block;color:#7b8492;margin-top:2px;font-size:10px;}
.sf-welcome-none{color:#7b8492;font-size:11px;}
.sf-user-actions{display:flex;align-items:center;gap:5px;min-width:330px;flex-wrap:wrap;}
.sf-user-actions form{display:inline-flex;margin:0;}
.sf-btn-welcome{border:0;background:#e9b52f;color:#101820;border-radius:8px;padding:8px 11px;font:700 11px Helvetica,Arial,sans-serif;cursor:pointer;white-space:nowrap;}
.sf-btn-welcome:hover{filter:brightness(.96);transform:translateY(-1px);}
.sf-new-user{margin-top:20px;}
.sf-check{display:flex!important;align-items:center;flex-direction:row!important;gap:7px!important;}
.sf-check input{min-width:auto!important;width:auto!important;}
@media(max-width:700px){.sf-users-head{align-items:flex-start;flex-direction:column}.sf-users-head .sf-btn-primary{width:100%}}

/* ---------- Ajuste de ancho del panel de administración ---------- */
.sf-admin-container {
  width: 92%;
  max-width: 1450px;
  box-sizing: border-box;
}
.sf-admin-container .sf-users-table-wrap {
  width: 100%;
}
.sf-admin-container .sf-users-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}
.sf-admin-container .sf-users-table th,
.sf-admin-container .sf-users-table td {
  padding-left: 12px;
  padding-right: 12px;
}
.sf-admin-container .sf-users-table th:nth-child(1) { width: 10%; }
.sf-admin-container .sf-users-table th:nth-child(2) { width: 25%; }
.sf-admin-container .sf-users-table th:nth-child(3) { width: 10%; }
.sf-admin-container .sf-users-table th:nth-child(4) { width: 10%; }
.sf-admin-container .sf-users-table th:nth-child(5) { width: 15%; }
.sf-admin-container .sf-users-table th:nth-child(6) { width: 30%; }
.sf-admin-container .sf-email-form {
  min-width: 0;
  width: 100%;
}
.sf-admin-container .sf-email-form input {
  width: 100%;
  min-width: 0;
}
.sf-admin-container .sf-user-actions {
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}
.sf-admin-container .sf-user-actions form,
.sf-admin-container .sf-user-actions > a {
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .sf-admin-container { width: 96%; }
  .sf-admin-container .sf-users-table { min-width: 1080px; }
}
@media (max-width: 700px) {
  .sf-admin-container { width: 100%; padding-left: 12px; padding-right: 12px; }
}

/* ---------- Catálogo de terminales dentro de una línea Telco ---------- */
.sf-terminal-picker {
	margin-top: 14px;
	border: 1px dashed #c7d0dd;
	border-radius: 10px;
	padding: 12px 14px;
	background: #f8fafc;
}
.sf-terminal-picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.sf-terminal-picker-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
}
.sf-terminal-picker-title small {
	font-weight: 400;
	color: var(--muted);
}
.sf-terminal-toggle {
	border: 1px solid var(--navy);
	background: #fff;
	color: var(--navy);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.sf-terminal-toggle:hover { background: var(--navy); color: #fff; }

.sf-terminal-selected {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e9b52f;
	border-radius: 10px;
}
.sf-terminal-selected-row { display: flex; align-items: center; gap: 12px; }
.sf-terminal-nota {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 12px;
}
.sf-terminal-nota:focus { outline: none; border-color: var(--navy); }
.sf-terminal-selected-img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; background: #f3f5f9; }
.sf-terminal-selected-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sf-terminal-selected-info b { font-size: 13px; color: var(--ink); }
.sf-terminal-selected-price { font-size: 12px; color: var(--muted); }
.sf-terminal-quitar {
	border: none;
	background: transparent;
	color: #c0392b;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.sf-terminal-quitar:hover { text-decoration: underline; }

.sf-terminal-catalog { margin-top: 14px; }
.sf-terminal-search {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 10px;
}
.sf-terminal-search:focus { outline: none; border-color: var(--navy); }
.sf-terminal-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 10px 0; }
.sf-terminal-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.sf-terminal-tab {
	border: 1px solid var(--border);
	background: #fff;
	color: var(--muted);
	border-radius: 20px;
	padding: 6px 13px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.sf-terminal-tab.active,
.sf-terminal-tab:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.sf-terminal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}
.sf-terminal-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sf-terminal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #c7d0dd; }
.sf-terminal-card.sf-terminal-card-selected { border-color: #e9b52f; box-shadow: 0 0 0 2px rgba(233,181,47,.35); }
.sf-terminal-card img { width: 100%; max-width: 90px; height: 70px; object-fit: contain; margin-bottom: 4px; }
.sf-terminal-card-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.sf-terminal-card-name { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; min-height: 32px; }
.sf-terminal-card-price { font-size: 13px; font-weight: 700; color: var(--navy); }
.sf-terminal-card-meses { font-size: 10px; color: var(--muted); }
.sf-terminal-add-btn {
	margin-top: 4px;
	width: 100%;
	border: none;
	border-radius: 8px;
	background: #e9b52f;
	color: #101820;
	font-size: 11px;
	font-weight: 700;
	padding: 7px 0;
	cursor: pointer;
}
.sf-terminal-add-btn:hover { filter: brightness(.96); }
.sf-terminal-card-selected .sf-terminal-add-btn { background: var(--navy); color: #fff; }

@media (max-width: 560px) {
	.sf-terminal-grid { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
}

/* ---------- Panel de administración: catálogo de terminales ---------- */
.sf-terminal-admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 10px;
}
.sf-terminal-admin-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px;
	text-align: center;
	box-shadow: 0 2px 10px rgba(9,38,70,.04);
}
.sf-terminal-admin-card img { width: 100%; max-width: 100px; height: 80px; object-fit: contain; margin-bottom: 6px; }
.sf-terminal-admin-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.sf-terminal-admin-name { font-size: 13px; font-weight: 600; margin: 3px 0; }
.sf-terminal-admin-price { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.sf-terminal-admin-price .sf-terminal-admin-meses { font-weight: 500; color: var(--muted); font-size: 11px; }
.sf-terminal-admin-meses { font-size: 11px; color: var(--muted); margin-bottom: 8px; }

/* Alinea Editar/Eliminar en fila, dentro del mismo recuadro de la tarjeta.
   El <form> del botón Eliminar es un elemento de bloque por defecto y se
   caía a su propia línea; con display:contents deja de pintar su propia
   caja y su botón pasa a comportarse como un hijo flex más. */
.sf-terminal-admin-card .sf-actions-cell {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.sf-terminal-admin-card .sf-actions-cell form {
	display: contents;
}
.sf-terminal-admin-card .sf-actions-cell .sf-btn,
.sf-terminal-admin-card .sf-actions-cell .sf-btn-danger {
	flex: 1;
	text-align: center;
	white-space: nowrap;
}