/* Comandero — estilos base aislados (Fase 1).
   REGLA DE ORO: todo selector va prefijado con .cmd-app-wrapper para no
   romper el tema de WordPress.

   Este archivo cubre lo que en la app standalone hacían el <style> del
   index.html y el preflight del CDN de Tailwind:
   1) Variables de tema del wrapper
   2) Mini-reset scopeado (sustituye al preflight, que va apagado en el build)
   3) Animaciones, scrollbar, sombras y demás estilos custom
   Las utilidades de Tailwind viven en app-tailwind.css (generado). */

/* ── 1. Variables + base del wrapper ─────────────────────────────────── */
.cmd-app-wrapper {
	--font-head: "Montserrat", sans-serif;
	--font-body: "Open Sans", sans-serif;
	--hope-primary: #11522F;
	--hope-secondary: #8BB93E;
	--hope-cta: #E31A22;
	--hope-ocre: #EBA315;
	--card-radius: 20px;
	--surface: #ffffff;
	--paper: #f6f8f5;
	--hairline: #e7ece6;
	--ink: #16271e;
	--muted: #5d6b62;

	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

/* En modo aislado el wrapper pinta su propio fondo "paper" */
.cmd-modo-aislado {
	background: var(--paper);
}

/* ── 2. Mini-reset scopeado (equivalente al preflight de Tailwind) ───── */
.cmd-app-wrapper *,
.cmd-app-wrapper ::before,
.cmd-app-wrapper ::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;       /* las utilidades border-* asumen esto */
	border-color: #e5e7eb;
	-webkit-tap-highlight-color: transparent;
}

.cmd-app-wrapper h1, .cmd-app-wrapper h2, .cmd-app-wrapper h3,
.cmd-app-wrapper h4, .cmd-app-wrapper h5, .cmd-app-wrapper h6 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: var(--font-head);
}

.cmd-app-wrapper p,
.cmd-app-wrapper figure {
	margin: 0;
}

.cmd-app-wrapper ul, .cmd-app-wrapper ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmd-app-wrapper a {
	color: inherit;
	text-decoration: inherit;
}

.cmd-app-wrapper button,
.cmd-app-wrapper input,
.cmd-app-wrapper textarea,
.cmd-app-wrapper select {
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

.cmd-app-wrapper button {
	background-color: transparent;
	background-image: none;
	text-transform: none;
	-webkit-appearance: button;
	cursor: pointer;
}

.cmd-app-wrapper input::placeholder,
.cmd-app-wrapper textarea::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.cmd-app-wrapper img,
.cmd-app-wrapper svg,
.cmd-app-wrapper video {
	display: block;
	vertical-align: middle;
}

.cmd-app-wrapper img {
	max-width: 100%;
	height: auto;
}

.cmd-app-wrapper [hidden] {
	display: none !important;
}

.cmd-app-wrapper ::selection {
	background: color-mix(in oklab, var(--hope-secondary) 40%, white);
}

/* ── 3. Estilos custom de la app (del index.html standalone) ─────────── */

/* Stainless steel hairline scrollbar */
.cmd-app-wrapper .scroller::-webkit-scrollbar { width: 9px; height: 9px; }
.cmd-app-wrapper .scroller::-webkit-scrollbar-thumb { background: #cfd8d1; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.cmd-app-wrapper .scroller::-webkit-scrollbar-track { background: transparent; }

/* Drawer + entrance animations */
@keyframes hopeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hopeSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes hopeSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
/* transform-only (sin opacity): el contenido queda visible aunque la
   animación nunca arranque (contextos headless/segundo plano) */
@keyframes hopePop { 0% { transform: scale(.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes hopeRise { from { transform: translateY(16px); } to { transform: translateY(0); } }
@keyframes hopeAlert { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Animaciones solo cuando el usuario las acepta — capturas estáticas,
   impresión y export siguen visibles */
@media (prefers-reduced-motion: no-preference) {
	.cmd-app-wrapper .hope-overlay { animation: hopeFadeIn .22s ease both; }
	.cmd-app-wrapper .hope-sheet { animation: hopeSlideUp .34s cubic-bezier(.22,.61,.36,1) both; }
	.cmd-app-wrapper .hope-pop { animation: hopePop .26s ease forwards; }
	.cmd-app-wrapper .hope-rise { animation: hopeRise .5s ease forwards; }
	.cmd-app-wrapper .hope-alert { animation: hopeAlert .3s ease both; }
}
.cmd-app-wrapper .hope-sheet--closing { animation: hopeSlideDown .26s cubic-bezier(.55,.09,.68,.53) both; }

.cmd-app-wrapper .card-shadow { box-shadow: 0 1px 2px rgba(16,40,28,.04), 0 10px 30px -18px rgba(16,40,28,.25); }
.cmd-app-wrapper .card-shadow-hover { box-shadow: 0 2px 6px rgba(16,40,28,.06), 0 26px 48px -24px rgba(16,40,28,.45); }

/* checkbox tick */
.cmd-app-wrapper .tick { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .22s ease; }
.cmd-app-wrapper .checked .tick { stroke-dashoffset: 0; }

/* ── 4. Estado de carga (antes de que React monte) ───────────────────── */
.cmd-app-wrapper .cmd-cargando {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
}