/* =========================================================================
   MANUAL API · Factura Perú
   Una sola hoja para los dos temas y para los dominios que corren el plugin.
   El color de acción (--ma-accent) NO se escribe aquí: lo inyecta
   manual_api.php según el dominio, igual que hace mu-plugins/fp-plugins-ui.
   ========================================================================= */

:root {
	/* Valor de reserva. El :root que imprime el plugin va después y gana. */
	--ma-accent:      #109799;
	--ma-accent-dark: #0e8688;
	--ma-accent-rgb:  16, 151, 153;

	--ma-text:    #0f172a;
	--ma-text-2:  #334155;
	--ma-text-3:  #64748b;
	--ma-text-4:  #94a3b8;
	--ma-border:  #e2e8f0;
	--ma-border-2:#f1f5f9;
	--ma-bg:      #ffffff;
	--ma-bg-soft: #f8fafc;
	--ma-bg-card: #f1f5f9;

	--ma-code-bg:  #0a0f1c;
	--ma-code-bg2: #131c30;
	--ma-code-fg:  #e2e8f0;

	--ma-get:    #047857;  --ma-get-bg:    #d1fae5;
	--ma-post:   #1d4ed8;  --ma-post-bg:   #dbeafe;
	--ma-put:    #b45309;  --ma-put-bg:    #fef3c7;
	--ma-patch:  #6b21a8;  --ma-patch-bg:  #f3e8ff;
	--ma-delete: #b91c1c;  --ma-delete-bg: #fee2e2;

	--ma-syn-key:    #93c5fd;
	--ma-syn-string: #86efac;
	--ma-syn-number: #fca5a5;
	--ma-syn-bool:   #c4b5fd;
	--ma-syn-null:   #94a3b8;
	--ma-syn-punct:  #cbd5e1;

	--ma-topbar: 60px;
	--ma-side:   304px;
	--ma-r:      10px;
	--ma-tr:     150ms cubic-bezier(.4, 0, .2, 1);

	--ma-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ma-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Modo oscuro: solo se reescriben los neutros; la marca y el resaltado de
   sintaxis se comparten entre los dos temas. */
html.ma-dark {
	--ma-text:    #f1f5f9;
	--ma-text-2:  #cbd5e1;
	--ma-text-3:  #94a3b8;
	--ma-text-4:  #64748b;
	--ma-border:  #1e293b;
	--ma-border-2:#162032;
	--ma-bg:      #0b1220;
	--ma-bg-soft: #111a2e;
	--ma-bg-card: #15203b;

	--ma-code-bg:  #05080f;
	--ma-code-bg2: #0f1729;

	--ma-get:    #6ee7b7;  --ma-get-bg:    rgba(4, 120, 87, .22);
	--ma-post:   #93c5fd;  --ma-post-bg:   rgba(29, 78, 216, .24);
	--ma-put:    #fcd34d;  --ma-put-bg:    rgba(180, 83, 9, .24);
	--ma-patch:  #d8b4fe;  --ma-patch-bg:  rgba(107, 33, 168, .26);
	--ma-delete: #fca5a5;  --ma-delete-bg: rgba(185, 28, 28, .24);
}

/* ------------------------------------------------------------------ base */

.ma-body {
	margin: 0;
	padding: 0;
	background: var(--ma-bg);
	color: var(--ma-text);
	font-family: var(--ma-font);
	-webkit-font-smoothing: antialiased;
}

.ma-root,
.ma-root * { box-sizing: border-box; }

/* Reinicio defensivo.
   manual_api.php saca del wp_head() el CSS del theme y de los demás plugins,
   pero alguno puede imprimir su <style> a mano, fuera de la cola, y ahí no hay
   nada que sacar. Estas son las reglas que de verdad rompían el maquetado: el
   theme de apiperu.pro capitalizaba los títulos («API consulta» salía «API
   Consulta») y encajaba el manual dentro de su contenedor de contenido.

   Todo va dentro de :where(), que vale cero en especificidad: así el reinicio
   le gana al theme —que usa selectores de elemento— pero pierde contra
   cualquier clase .ma-* de más abajo. Sin eso, este bloque le borraría el
   `text-transform: uppercase` a .ma-h2 y los márgenes a .ma-h1. */
:where(.ma-root h1, .ma-root h2, .ma-root h3, .ma-root h4,
       .ma-root button, .ma-root a, .ma-root span, .ma-root code,
       .ma-root input, .ma-root p, .ma-root li) {
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}

:where(.ma-root h1, .ma-root h2, .ma-root h3, .ma-root h4,
       .ma-root p, .ma-root ul, .ma-root ol, .ma-root pre, .ma-root table) {
	margin: 0;
	padding: 0;
}

:where(.ma-root ul, .ma-root ol) { list-style: none; }

:where(.ma-root button) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
	width: auto;
	text-align: left;
}

:where(.ma-root table) { border: 0; }
:where(.ma-root img)   { max-width: 100%; height: auto; }
:where(.ma-root a)     { text-decoration: none; box-shadow: none; }

.ma-root {
	color: var(--ma-text);
	font-family: var(--ma-font);
	font-size: 15px;
	line-height: 1.6;
}

.ma-root a { color: var(--ma-accent); }

.ma-root :focus-visible {
	outline: 2px solid var(--ma-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --------------------------------------------------------------- topbar */

.ma-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--ma-topbar);
	background: color-mix(in srgb, var(--ma-bg) 92%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ma-border);
}

.ma-topbar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
}

.ma-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}

.ma-brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(140deg, var(--ma-accent), var(--ma-accent-dark));
	box-shadow: 0 2px 8px rgba(var(--ma-accent-rgb), .32);
}

.ma-brand-mark svg { width: 18px; height: 18px; }

.ma-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ma-brand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.ma-brand-tag  { font-size: 11px; color: var(--ma-text-3); }

.ma-sections {
	display: flex;
	gap: 4px;
	margin: 0 auto;
	padding: 4px;
	background: var(--ma-bg-card);
	border-radius: 999px;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
}

.ma-sections::-webkit-scrollbar { display: none; }

.ma-tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--ma-text-2);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 7px 15px;
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--ma-tr), color var(--ma-tr);
}

.ma-tab:hover { color: var(--ma-text); }

.ma-tab.is-active {
	background: var(--ma-bg);
	color: var(--ma-accent);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

html.ma-dark .ma-tab.is-active { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

.ma-actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }

.ma-icon-btn {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ma-border);
	border-radius: 9px;
	background: var(--ma-bg);
	color: var(--ma-text-2);
	cursor: pointer;
	transition: border-color var(--ma-tr), color var(--ma-tr);
}

.ma-icon-btn:hover { border-color: var(--ma-accent); color: var(--ma-accent); }
.ma-icon-btn svg { width: 17px; height: 17px; }

.ma-icon-moon { display: none; }
html.ma-dark .ma-icon-sun  { display: none; }
html.ma-dark .ma-icon-moon { display: block; }

.ma-burger {
	display: none;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid var(--ma-border);
	border-radius: 9px;
	background: var(--ma-bg);
	color: var(--ma-text-2);
	cursor: pointer;
}

.ma-burger svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- layout */

.ma-layout {
	display: grid;
	grid-template-columns: var(--ma-side) minmax(0, 1fr);
	min-height: calc(100vh - var(--ma-topbar));
}

.ma-sidebar {
	position: sticky;
	top: var(--ma-topbar);
	height: calc(100vh - var(--ma-topbar));
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--ma-border);
	background: var(--ma-bg-soft);
}

.ma-search { position: relative; padding: 14px 14px 10px; }

.ma-search-icon {
	position: absolute;
	left: 26px;
	top: 50%;
	transform: translateY(-30%);
	width: 15px;
	height: 15px;
	color: var(--ma-text-4);
	pointer-events: none;
}

#ma-search {
	width: 100%;
	padding: 9px 30px 9px 34px;
	font: inherit;
	font-size: 13.5px;
	color: var(--ma-text);
	background: var(--ma-bg);
	border: 1px solid var(--ma-border);
	border-radius: 9px;
	appearance: none;
}

#ma-search::-webkit-search-cancel-button { display: none; }

#ma-search:focus {
	outline: none;
	border-color: var(--ma-accent);
	box-shadow: 0 0 0 3px rgba(var(--ma-accent-rgb), .16);
}

.ma-search-clear {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-30%);
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: var(--ma-bg-card);
	color: var(--ma-text-3);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.ma-nav { flex: 1; overflow-y: auto; padding: 4px 8px 24px; }
.ma-nav-loading, .ma-nav-empty { padding: 18px 12px; color: var(--ma-text-3); font-size: 13px; }

.ma-group { margin-bottom: 2px; }

.ma-group-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	color: var(--ma-text-2);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	border-radius: 8px;
	cursor: pointer;
}

.ma-group-btn:hover { background: var(--ma-bg-card); color: var(--ma-text); }

.ma-group-caret {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	transition: transform var(--ma-tr);
	color: var(--ma-text-4);
}

.ma-group.is-open .ma-group-caret { transform: rotate(90deg); }

.ma-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ma-group-count {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ma-text-4);
	background: var(--ma-bg-card);
	padding: 1px 7px;
	border-radius: 999px;
}

.ma-group-items { display: none; padding: 2px 0 6px; }
.ma-group.is-open .ma-group-items { display: block; }

.ma-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 12px;
	border: 0;
	border-left: 2px solid transparent;
	background: transparent;
	color: var(--ma-text-2);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	border-radius: 0 7px 7px 0;
}

.ma-item:hover { background: var(--ma-bg-card); color: var(--ma-text); }

.ma-item.is-active {
	background: rgba(var(--ma-accent-rgb), .1);
	border-left-color: var(--ma-accent);
	color: var(--ma-accent);
	font-weight: 600;
}

.ma-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ma-method {
	flex: 0 0 auto;
	font-family: var(--ma-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 2px 6px;
	border-radius: 5px;
	text-transform: uppercase;
}

.ma-method.get    { color: var(--ma-get);    background: var(--ma-get-bg); }
.ma-method.post   { color: var(--ma-post);   background: var(--ma-post-bg); }
.ma-method.put    { color: var(--ma-put);    background: var(--ma-put-bg); }
.ma-method.patch  { color: var(--ma-patch);  background: var(--ma-patch-bg); }
.ma-method.delete { color: var(--ma-delete); background: var(--ma-delete-bg); }
/* No son métodos HTTP: marcan la ficha que enseña una pantalla, no una
   llamada. `demo` queda por si algún JSON viejo todavía lo trae. */
.ma-method.web,
.ma-method.demo   { color: var(--ma-patch);  background: var(--ma-patch-bg); }

.ma-sidebar-foot {
	padding: 10px 16px;
	border-top: 1px solid var(--ma-border);
	font-size: 11.5px;
	color: var(--ma-text-3);
}

.ma-backdrop { display: none; }

/* ----------------------------------------------------------------- main */

.ma-main { min-width: 0; padding: 34px 40px 96px; }
.ma-main:focus { outline: none; }
.ma-wrap { max-width: 860px; }

.ma-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--ma-text-3);
	margin-bottom: 12px;
}

.ma-crumbs span:not(:last-child)::after { content: "/"; margin-left: 7px; color: var(--ma-text-4); }

.ma-h1 {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.2;
}

.ma-lead { margin: 0 0 24px; font-size: 16px; color: var(--ma-text-2); max-width: 68ch; }

.ma-h2 {
	margin: 34px 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ma-text-3);
	padding-left: 10px;
	border-left: 3px solid var(--ma-accent);
}

/* barra del endpoint */

.ma-endpoint-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--ma-bg-soft);
	border: 1px solid var(--ma-border);
	border-radius: var(--ma-r);
	margin-bottom: 18px;
	overflow-x: auto;
}

.ma-endpoint-bar .ma-method { font-size: 11px; padding: 4px 9px; }

.ma-url {
	flex: 1;
	min-width: 0;
	font-family: var(--ma-mono);
	font-size: 13px;
	color: var(--ma-text);
	white-space: nowrap;
}

.ma-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.ma-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ma-text-2);
	background: var(--ma-bg-card);
	border-radius: 999px;
	padding: 4px 11px;
}

.ma-chip b { color: var(--ma-text); font-weight: 600; }

/* tablas de parámetros */

.ma-table-wrap { overflow-x: auto; border: 1px solid var(--ma-border); border-radius: var(--ma-r); }

/* min-width alto a propósito: con menos, en móvil la columna «Detalle» queda
   tan angosta que cada fila se estira a media pantalla. Mejor que la tabla
   scrollee de costado —ya lo hace .ma-table-wrap— y las filas queden bajas. */
.ma-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }

.ma-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ma-text-3);
	background: var(--ma-bg-soft);
	padding: 9px 14px;
	border-bottom: 1px solid var(--ma-border);
	white-space: nowrap;
}

.ma-table td { padding: 10px 14px; border-bottom: 1px solid var(--ma-border-2); vertical-align: top; color: var(--ma-text-2); }
.ma-table tr:last-child td { border-bottom: 0; }

.ma-table code {
	font-family: var(--ma-mono);
	font-size: 12.5px;
	color: var(--ma-text);
	background: var(--ma-bg-card);
	padding: 1px 5px;
	border-radius: 5px;
}

.ma-req {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ma-delete);
}

.ma-opt { font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--ma-text-4); }

.ma-in {
	font-family: var(--ma-mono);
	font-size: 10.5px;
	color: var(--ma-text-3);
	background: var(--ma-bg-card);
	padding: 1px 6px;
	border-radius: 5px;
}

/* bloques de código */

.ma-code {
	background: var(--ma-code-bg);
	border-radius: var(--ma-r);
	overflow: hidden;
	border: 1px solid transparent;
}

html.ma-dark .ma-code { border-color: var(--ma-border); }

.ma-code-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px 0;
	background: var(--ma-code-bg2);
	overflow-x: auto;
	scrollbar-width: none;
}

.ma-code-head::-webkit-scrollbar { display: none; }

.ma-lang {
	appearance: none;
	border: 0;
	background: transparent;
	color: #94a3b8;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 8px 13px;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	transition: color var(--ma-tr), background var(--ma-tr);
}

.ma-lang:hover { color: #e2e8f0; }
.ma-lang.is-active { color: #fff; background: var(--ma-code-bg); }

.ma-copy {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #334155;
	background: transparent;
	color: #cbd5e1;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 11px;
	margin: 4px 6px 6px;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--ma-tr), color var(--ma-tr);
}

.ma-copy:hover { border-color: var(--ma-accent); color: #fff; }
.ma-copy.is-done { border-color: #22c55e; color: #86efac; }
.ma-copy svg { width: 13px; height: 13px; }

.ma-code pre {
	margin: 0;
	padding: 16px 18px;
	overflow-x: auto;
	font-family: var(--ma-mono);
	font-size: 12.8px;
	line-height: 1.65;
	color: var(--ma-code-fg);
	tab-size: 2;
}

.ma-code pre code { font: inherit; color: inherit; background: none; padding: 0; }

/* resaltado JSON */
.ma-t-key    { color: var(--ma-syn-key); }
.ma-t-str    { color: var(--ma-syn-string); }
.ma-t-num    { color: var(--ma-syn-number); }
.ma-t-bool   { color: var(--ma-syn-bool); }
.ma-t-null   { color: var(--ma-syn-null); }
.ma-t-punct  { color: var(--ma-syn-punct); }

/* avisos */

.ma-notes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.ma-note {
	display: flex;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ma-text-2);
	background: var(--ma-bg-soft);
	border: 1px solid var(--ma-border);
	border-left: 3px solid var(--ma-accent);
	border-radius: 0 var(--ma-r) var(--ma-r) 0;
	padding: 10px 14px;
}

.ma-note code {
	font-family: var(--ma-mono);
	font-size: 12.5px;
	background: var(--ma-bg-card);
	padding: 1px 5px;
	border-radius: 5px;
	color: var(--ma-text);
}

/* portada de sección */

.ma-hero { margin-bottom: 30px; }

.ma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ma-accent);
	background: rgba(var(--ma-accent-rgb), .1);
	padding: 4px 11px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.ma-prose { font-size: 15px; color: var(--ma-text-2); }
.ma-prose p { margin: 0 0 12px; max-width: 70ch; }
.ma-prose strong { color: var(--ma-text); }

.ma-prose pre {
	background: var(--ma-code-bg);
	color: var(--ma-code-fg);
	font-family: var(--ma-mono);
	font-size: 12.8px;
	line-height: 1.6;
	padding: 14px 16px;
	border-radius: var(--ma-r);
	overflow-x: auto;
	margin: 0 0 12px;
}

.ma-prose code {
	font-family: var(--ma-mono);
	font-size: 12.8px;
	background: var(--ma-bg-card);
	padding: 1px 5px;
	border-radius: 5px;
	color: var(--ma-text);
}

.ma-prose pre code { background: none; padding: 0; color: inherit; }
.ma-prose ul, .ma-prose ol { margin: 0 0 12px; padding-left: 22px; max-width: 70ch; }
.ma-prose li { margin-bottom: 5px; }

.ma-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-top: 6px; }

.ma-card {
	display: block;
	width: 100%;
	text-align: left;
	border: 1px solid var(--ma-border);
	border-radius: var(--ma-r);
	background: var(--ma-bg);
	padding: 15px 16px;
	cursor: pointer;
	font: inherit;
	transition: border-color var(--ma-tr), transform var(--ma-tr);
}

.ma-card:hover { border-color: var(--ma-accent); transform: translateY(-1px); }
.ma-card-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--ma-text); margin-bottom: 3px; }
.ma-card-desc { display: block; font-size: 13px; color: var(--ma-text-3); }

.ma-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--ma-border);
	border: 1px solid var(--ma-border);
	border-radius: var(--ma-r);
	overflow: hidden;
	margin-top: 6px;
}

.ma-fact { background: var(--ma-bg); padding: 13px 15px; }
.ma-fact-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-text-3); margin-bottom: 3px; }
.ma-fact-value { display: block; font-size: 13.5px; color: var(--ma-text); }

/* --------------------------------------------------------- responsive */

@media (max-width: 1080px) {
	.ma-main { padding: 28px 26px 80px; }
}

@media (max-width: 900px) {
	:root { --ma-side: 288px; }

	.ma-burger { display: grid; }

	.ma-layout { grid-template-columns: minmax(0, 1fr); }

	.ma-sidebar {
		position: fixed;
		top: var(--ma-topbar);
		left: 0;
		width: var(--ma-side);
		max-width: 84vw;
		z-index: 35;
		transform: translateX(-102%);
		transition: transform var(--ma-tr);
		box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
	}

	.ma-sidebar.is-open { transform: none; }

	.ma-backdrop {
		display: block;
		position: fixed;
		inset: var(--ma-topbar) 0 0;
		z-index: 30;
		background: rgba(15, 23, 42, .42);
	}

	.ma-backdrop[hidden] { display: none; }

	.ma-brand-text { display: none; }
	.ma-sections { margin: 0; }
	.ma-main { padding: 24px 18px 72px; }
	.ma-h1 { font-size: 25px; }
}

@media (max-width: 560px) {
	.ma-tab { padding: 7px 11px; font-size: 12.5px; }
	.ma-main { padding: 20px 14px 64px; }
	.ma-h1 { font-size: 22px; }
	.ma-code pre { font-size: 12px; padding: 14px; }
}

/* =========================================================================
   Pantalla de ejemplo del panel (fichas de tipo «demo»)
   Copia visual de apiperu.net. El azul NO es el color del sitio: es el del
   panel que se está imitando, y por eso va fijo y no sale de --ma-accent.
   ========================================================================= */

.ma-demo {
	--ma-demo-azul:   #3b82f6;
	--ma-demo-azul-2: #2563eb;
	/* Se sale del ancho de lectura (860px) a propósito: esto es una pantalla,
	   no un texto, y los cuatro botones tienen que entrar en una sola fila
	   como en el panel de verdad. Dentro de la ventana de Chrome manda el
	   ancho de la ventana; ver `.ma-cr-body .ma-demo` más abajo. */
	width: min(1180px, calc(100vw - var(--ma-side) - 92px));
	margin: 18px 0 4px;
	border: 1px solid var(--ma-border);
	border-radius: var(--ma-r);
	background: var(--ma-bg-soft);
	overflow: hidden;
}

.ma-demo-flag {
	display: inline-block;
	margin: 14px 0 2px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ma-patch);
	background: var(--ma-patch-bg);
}

.ma-demo-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	padding: 18px;
	border-bottom: 1px solid var(--ma-border);
}

.ma-demo-action {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	min-width: 0;
}

.ma-demo-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border: 0;
	border-radius: 6px;
	background: var(--ma-demo-azul);
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--ma-tr);
}

.ma-demo-btn:hover { background: var(--ma-demo-azul-2); }
.ma-demo-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Con `.ma-demo` delante para ganarle a `.ma-root a`, que pinta los enlaces
   del color del sitio: aquí el azul es el del panel que se está copiando. */
.ma-demo .ma-demo-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ma-demo-azul);
	font-family: inherit;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.ma-demo .ma-demo-link:hover { color: var(--ma-demo-azul-2); text-decoration: underline; }

.ma-demo-body { padding: 20px 18px 22px; background: var(--ma-bg); }

.ma-demo-title {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 600;
	color: var(--ma-text-2);
}

.ma-demo-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.ma-demo-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	background: var(--ma-bg);
	color: var(--ma-text);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.ma-demo-input::placeholder { color: var(--ma-text-4); }

.ma-demo-sep { height: 1px; margin: 20px 0 16px; background: var(--ma-border); }

.ma-demo-foot { display: flex; justify-content: flex-end; }

.ma-demo-primary {
	padding: 10px 22px;
	border: 0;
	border-radius: 6px;
	background: var(--ma-demo-azul);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--ma-tr);
}

.ma-demo-primary:hover { background: var(--ma-demo-azul-2); }

.ma-demo-aviso {
	margin: 18px 0 0;
	padding: 13px 16px;
	border: 1px solid var(--ma-border);
	border-left: 3px solid var(--ma-accent);
	border-radius: 0 var(--ma-r) var(--ma-r) 0;
	background: var(--ma-bg-soft);
	font-size: 13.5px;
	color: var(--ma-text-2);
}

.ma-demo-aviso a { color: var(--ma-accent); font-weight: 600; }
.ma-demo-aviso.is-nuevo { animation: ma-demo-entra 220ms cubic-bezier(.4, 0, .2, 1); }

@keyframes ma-demo-entra {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.ma-demo-label { margin: 24px 0 8px; font-size: 15px; font-weight: 600; color: var(--ma-text-2); }

.ma-demo-result {
	padding: 13px 16px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	background: var(--ma-bg-soft);
	font-size: 13.5px;
	color: var(--ma-text-2);
}

/* =========================================================================
   BLINDAJE DE IMÁGENES  ·  no borrar
   -------------------------------------------------------------------------
   WordPress reemplaza los emojis del texto por <img class="emoji"> (Twemoji)
   con un MutationObserver, así que también pisa el HTML que inyecta app.js
   después de cargar. Si el tema trae `img { width: 100% }` —y muchos lo
   traen— un ⚠️ de una nota se convierte en un triángulo del ancho de la
   pantalla. Pasó de verdad en apisperu.pe el 12 de agosto de 2026.
   El plugin no puede confiar en el CSS del tema: lo fija él.
   ========================================================================= */
.ma-root img {
	max-width: 100%;
	height: auto;
}

/* Con !important a propósito: los temas que rompen esto lo hacen con
   `img { width: 100% !important }`, y sin !important la regla pierde. */
.ma-root img.emoji,
.ma-root img.wp-smiley {
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	margin: 0 .07em !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	vertical-align: -.1em !important;
}

/* =========================================================================
   HOJA DE CÁLCULO
   -------------------------------------------------------------------------
   Cuando el dato viaja en un Excel, la tabla se dibuja como un Excel: barra
   verde con el nombre del archivo, letras de columna arriba y números de
   fila al costado. No es adorno: el servicio lee las columnas por posición
   y descarta la fila 1, y así se entiende sin leer una nota.
   El verde es el de la marca Excel (#217346). El icono es dibujo propio.
   ========================================================================= */
.ma-xls {
	--xls-verde:      #217346;
	--xls-verde-osc:  #1a5c38;
	--xls-linea:      #d0d7dd;
	--xls-cabecera:   #eef1f3;
	--xls-celda:      #ffffff;
	--xls-texto:      #1f2933;

	margin: 0 0 20px;
	border: 1px solid var(--xls-linea);
	border-radius: var(--ma-r);
	overflow: hidden;
	background: var(--xls-celda);
}

html.ma-dark .ma-xls {
	--xls-linea:    #2a3648;
	--xls-cabecera: #16203247;
	--xls-celda:    #0f1829;
	--xls-texto:    #dbe3ee;
}

.ma-xls-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--xls-verde);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

/* Tamaño fijo y `flex: none` a propósito: sin esto, un contenedor flex
   estira el SVG y el icono se come la barra. */
.ma-xls-icon {
	flex: none;
	width: 16px;
	height: 16px;
	display: block;
}

.ma-xls-scroll { overflow-x: auto; }

.ma-xls-grid {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--ma-mono);
	font-size: 12.5px;
	color: var(--xls-texto);
	background: var(--xls-celda);
}

.ma-xls-grid th,
.ma-xls-grid td {
	border: 1px solid var(--xls-linea);
	padding: 7px 10px;
	text-align: left;
	white-space: nowrap;
	font-weight: 400;
}

/* Letras de columna y números de fila: el marco gris de la hoja. */
.ma-xls-grid .ma-xls-l,
.ma-xls-grid .ma-xls-n,
.ma-xls-grid .ma-xls-corner {
	background: var(--xls-cabecera);
	color: var(--ma-text-3);
	font-weight: 600;
	text-align: center;
	font-size: 11px;
}

.ma-xls-grid .ma-xls-n,
.ma-xls-grid .ma-xls-corner { width: 34px; min-width: 34px; }

/* La fila 1 del archivo es el encabezado que el servicio descarta. */
.ma-xls-grid .ma-xls-h {
	font-weight: 700;
	color: var(--xls-verde);
	background: var(--xls-cabecera);
}

html.ma-dark .ma-xls-grid .ma-xls-h { color: #4ade80; }

/* =========================================================================
   VENTANA DE NAVEGADOR
   -------------------------------------------------------------------------
   Marco de Chrome alrededor de la pantalla de ejemplo, con sus grises y su
   barra de dirección. Sin él, la copia del panel se confundía con una parte
   más del manual; dentro de una ventana se entiende de un vistazo que es
   otra web.
   ========================================================================= */
.ma-cr {
	--cr-marco:  #dee1e6;
	--cr-barra:  #ffffff;
	--cr-campo:  #f1f3f4;
	--cr-texto:  #3c4043;
	--cr-borde:  #cdd1d6;

	/* Una pantalla no es un texto: se sale del ancho de lectura (860px) y
	   aprovecha lo que dé el monitor. El ancho manda aquí, en la ventana, y
	   lo de dentro se adapta; si se pone en la pantalla, la ventana la corta. */
	width: min(1480px, calc(100vw - var(--ma-side) - 92px));
	margin: 0 0 24px;
	border: 1px solid var(--cr-borde);
	border-radius: 12px;
	overflow: hidden;
	background: var(--cr-marco);
	box-shadow: 0 6px 20px rgba(15, 23, 42, .10);
}

html.ma-dark .ma-cr {
	--cr-marco: #202124;
	--cr-barra: #35363a;
	--cr-campo: #202124;
	--cr-texto: #e8eaed;
	--cr-borde: #3c4043;
	box-shadow: none;
}

.ma-cr-top {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 8px 12px 0;
	background: var(--cr-marco);
}

.ma-cr-dots { display: flex; gap: 6px; padding-bottom: 9px; flex: none; }

.ma-cr-dots i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: block;
}

.ma-cr-red    { background: #ff5f57; }
.ma-cr-yellow { background: #febc2e; }
.ma-cr-green  { background: #28c840; }

/* La pestaña activa: fondo de la barra y esquinas de arriba redondeadas. */
.ma-cr-tab {
	background: var(--cr-barra);
	color: var(--cr-texto);
	font-size: 12px;
	font-weight: 500;
	padding: 7px 18px;
	border-radius: 8px 8px 0 0;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ma-cr-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--cr-barra);
}

.ma-cr-nav {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--cr-texto);
	opacity: .55;
}

.ma-cr-url {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--cr-campo);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 12.5px;
	color: var(--cr-texto);
	font-family: var(--ma-mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ma-cr-url b { font-weight: 600; }

.ma-cr-lock { flex: none; width: 12px; height: 12px; opacity: .6; }

.ma-cr-body { background: var(--ma-bg); }

/* Dentro de la ventana, la pantalla ya no necesita su propio marco ni su
   propio ancho: llena la ventana, que es la que decide cuánto mide. */
.ma-cr-body .ma-demo {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* =========================================================================
   PANTALLA DEL LISTADO DE COMPROBANTES
   -------------------------------------------------------------------------
   Copia visual del listado de ventas del facturador. Mismo azul que la otra
   pantalla: es el del sistema que se imita, no el de la marca del sitio.
   ========================================================================= */
.ma-doc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ma-border);
	background: var(--ma-bg);
}

.ma-doc-head .ma-demo-title { margin: 0; }

.ma-doc-badge {
	background: #fde68a;
	color: #92400e;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
}

.ma-doc-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.ma-doc-btn {
	border: 1px solid var(--ma-demo-azul);
	color: var(--ma-demo-azul);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}

.ma-doc-totales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.ma-doc-total {
	border: 1px solid var(--ma-border);
	border-radius: 8px;
	padding: 10px 12px;
	text-align: center;
	background: var(--ma-bg);
}

.ma-doc-total span { display: block; font-size: 11px; color: var(--ma-text-3); }
.ma-doc-total b { display: block; margin-top: 3px; font-size: 15px; color: var(--ma-demo-azul); }

.ma-doc-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

.ma-doc-filtro {
	flex: 1;
	min-width: 108px;
	border: 1px solid var(--ma-border);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 12.5px;
	color: var(--ma-text-3);
	background: var(--ma-bg);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ma-doc-scroll { overflow-x: auto; margin-top: 14px; }

.ma-doc-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.ma-doc-tabla th {
	text-align: left;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ma-text-3);
	padding: 8px 8px;
	border-bottom: 1px solid var(--ma-border);
	/* Los títulos sí se parten en dos líneas: si no, «Total comprobante»
	   empuja la tabla fuera de la ventana en pantallas medianas. */
	line-height: 1.25;
}

.ma-doc-tabla td {
	padding: 11px 8px;
	border-bottom: 1px solid var(--ma-border-2);
	color: var(--ma-text-2);
	white-space: nowrap;
}

/* El nombre del cliente es lo único que puede partirse: los importes y los
   números de comprobante se leen mal cortados. */
.ma-doc-tabla td b {
	display: block;
	color: var(--ma-demo-azul);
	font-weight: 600;
	white-space: normal;
	min-width: 150px;
}
.ma-doc-tabla td span { display: block; font-size: 11.5px; color: var(--ma-text-3); }
.ma-doc-tabla .ma-doc-num { text-align: right; }

.ma-doc-estado {
	display: inline-block !important;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
}

.ma-doc-estado.ok { background: var(--ma-get-bg); color: var(--ma-get); }
.ma-doc-estado.no { background: var(--ma-bg-card); color: var(--ma-text-2); }
.ma-doc-estado.in { background: var(--ma-post-bg); color: var(--ma-post); }

.ma-demo-result + .ma-demo-result { margin-top: 8px; }

.ma-demo-result b { color: var(--ma-demo-azul); font-weight: 600; }

.ma-demo-pie { margin: 10px 0 0; font-size: 12.5px; color: var(--ma-text-3); }

.ma-demo-pie code {
	font-family: var(--ma-mono);
	font-size: 12px;
	background: var(--ma-bg-card);
	padding: 1px 5px;
	border-radius: 5px;
	color: var(--ma-text-2);
}

/* Con el sidebar ya fuera del flujo, la pantalla ocupa el ancho que haya. */
@media (max-width: 900px) {
	.ma-demo, .ma-cr { width: auto; }
}

@media (max-width: 860px) {
	.ma-demo-bar { flex-wrap: wrap; gap: 14px 22px; }
}

@media (max-width: 640px) {
	.ma-demo-fields { grid-template-columns: 1fr; }
	.ma-demo-foot { justify-content: stretch; }
	.ma-demo-primary { width: 100%; }
}

/* Incrustado con el shortcode: el manual vive dentro del theme, así que la
   altura se limita en vez de ocupar toda la ventana. */
.ma-embed .ma-topbar { position: static; }
.ma-embed .ma-layout { min-height: 0; }
.ma-embed .ma-sidebar { position: static; height: auto; max-height: 76vh; }
.ma-embed .ma-main { padding: 26px 24px 40px; }

@media print {
	.ma-topbar, .ma-sidebar, .ma-backdrop { display: none !important; }
	.ma-layout { grid-template-columns: 1fr; }
	.ma-main { padding: 0; }
	.ma-code, .ma-code pre { background: #fff; color: #000; border: 1px solid #ccc; }
}