/* ==========================================================================
   Pablo Mejía Arquitectura · Sistema digital · v0.2.2 (16 oct 2026)
   Variables y piezas comunes del ecosistema. Todas las apps cargan este archivo.
   Fuente de verdad: Manual de marca v7. No cambiar valores aquí sin cambiarlos allá.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("Manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Marca */
  --pma-verde: #102A1E;
  --pma-terracota: #B05F45;      /* en las apps: solo las líneas en edición */
  --pma-linea-edicion: var(--pma-terracota);
  --pma-blanco: #FFFFFF;
  /* Aclarados del verde: solo se aclara con blanco */
  --pma-v70: color-mix(in srgb, var(--pma-verde) 70%, #fff);
  --pma-v55: color-mix(in srgb, var(--pma-verde) 55%, #fff);
  --pma-v40: color-mix(in srgb, var(--pma-verde) 40%, #fff);
  --pma-v15: color-mix(in srgb, var(--pma-verde) 15%, #fff);
  --pma-v08: color-mix(in srgb, var(--pma-verde) 8%, #fff);
  --pma-v04: color-mix(in srgb, var(--pma-verde) 4%, #fff);
  /* Estados (paleta funcional, fuera de la marca) */
  --pma-error: #9B1C31;   --pma-error-fondo: #FBEAEC;
  --pma-aviso: #B7791F;   --pma-aviso-texto: #7A4E0E; --pma-aviso-fondo: #FBF1E1;
  --pma-info-fondo: var(--pma-v08);
  /* Tipografía */
  --pma-fuente: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pma-rotulo-tracking: .18em;   /* versalitas: 600, mayúsculas, espaciado */
  /* Medidas */
  --pma-barra-alto: 64px;
  --pma-margen: 24px;             /* borde de la barra */
  --pma-margen-app: 40px;         /* margen lateral del contenido de las apps */
  --pma-filete: 1px;
  --pma-radio: 0px;               /* la marca no redondea esquinas */
  /* Movimiento */
  --pma-dur-1: 120ms;             /* hover, foco */
  --pma-dur-2: 220ms;             /* paneles, textos que aparecen */
  --pma-dur-3: 480ms;             /* entradas de página */
  --pma-curva: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --pma-dur-1: 0ms; --pma-dur-2: 0ms; --pma-dur-3: 0ms; }
}

/* ---------- Barra superior común ---------- */
.pma-barra {
  position: relative; z-index: 50;
  height: var(--pma-barra-alto);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--pma-margen-app);   /* el ícono de la app arranca en el margen del contenido */
  background: var(--pma-blanco);
  font-family: var(--pma-fuente); color: var(--pma-verde);
}
.pma-boton-ecosistema {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-right: -9px;   /* el Tempietto toca el margen derecho */
  border: 0; background: none; color: var(--pma-verde); cursor: pointer;
  transition: background var(--pma-dur-1) var(--pma-curva);
}
.pma-boton-ecosistema svg { width: 22px; height: auto; }
.pma-boton-ecosistema:hover, .pma-boton-ecosistema[aria-expanded="true"] { background: var(--pma-v08); }
.pma-sep { width: var(--pma-filete); height: 24px; background: var(--pma-v15); }
.pma-app {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
}
.pma-app .pma-icono { width: 22px; height: 22px; }
.pma-app-nombre {
  font-weight: 700; font-size: 12px; letter-spacing: var(--pma-rotulo-tracking);
  text-transform: uppercase; white-space: nowrap;
}
.pma-barra-der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pma-estado { font-size: 12px; color: var(--pma-error); }
.pma-estado:empty { display: none; }        /* guardar bien es silencioso; solo se avisa si falla */
/* minimizar y cerrar la ventana de simulación, debajo del menú */
.pma-ventana { position: absolute; right: calc(var(--pma-margen-app) - 2px); top: calc(var(--pma-barra-alto) - 14px); display: flex; gap: 12px; }
.pma-ventana button { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--pma-v70); cursor: pointer; }
.pma-ventana button:hover { color: var(--pma-verde); }
.pma-menu {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: none; color: var(--pma-verde); cursor: pointer;
}
.pma-menu:hover { background: var(--pma-v08); }

/* ---------- Panel del ecosistema (se abre desde el Tempietto) ---------- */
.pma-panel {
  position: absolute; right: calc(var(--pma-margen-app) - 9px); top: calc(var(--pma-barra-alto) - 1px);   /* abre bajo el Tempietto, a la derecha */
  width: min(440px, calc(100vw - 2 * var(--pma-margen)));
  background: var(--pma-blanco);
  border: var(--pma-filete) solid var(--pma-v15);
  box-shadow: 0 12px 32px -12px rgba(16, 42, 30, .25);
  padding: 8px 0 0;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--pma-dur-2) var(--pma-curva), transform var(--pma-dur-2) var(--pma-curva);
}
.pma-panel[data-abierto] { opacity: 1; transform: none; pointer-events: auto; }
/* filas del panel: entran escalonadas, 30 ms entre una y otra */
@keyframes pma-fila { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pma-panel[data-abierto] > a { animation: pma-fila var(--pma-dur-2) var(--pma-curva) both; }
.pma-panel[data-abierto] > a:nth-of-type(2) { animation-delay: 30ms; }
.pma-panel[data-abierto] > a:nth-of-type(3) { animation-delay: 60ms; }
.pma-panel[data-abierto] > a:nth-of-type(4) { animation-delay: 90ms; }
.pma-panel[data-abierto] > a:nth-of-type(5) { animation-delay: 120ms; }
.pma-panel-rotulo {
  padding: 10px 20px 8px; font-size: 10.5px; font-weight: 600;
  letter-spacing: var(--pma-rotulo-tracking); text-transform: uppercase; color: var(--pma-v55);
}
.pma-panel a {
  display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; align-items: center;
  padding: 12px 20px; color: var(--pma-verde); text-decoration: none;
  transition: background var(--pma-dur-1) var(--pma-curva);
}
.pma-panel a:hover, .pma-panel a:focus-visible { background: var(--pma-v04); outline: none; }
.pma-panel a[aria-current="true"] { background: var(--pma-v08); }
.pma-panel .pma-icono { width: 36px; height: 36px; grid-row: span 2; }
.pma-panel .pma-icono-provisional { font-size: 10px; }
.pma-panel b { font-weight: 600; font-size: 15px; }
.pma-panel small { font-size: 12.5px; color: var(--pma-v70); line-height: 1.4; }
.pma-panel-pie {
  display: flex; justify-content: space-between; margin-top: 8px; padding: 12px 20px;
  border-top: var(--pma-filete) solid var(--pma-v15); font-size: 12px;
}
.pma-panel-pie a { display: inline; padding: 0; color: var(--pma-v70); }
.pma-panel-pie a:hover { background: none; color: var(--pma-verde); }

/* ---------- Íconos ---------- */
.pma-icono { display: block; color: var(--pma-verde); }
.pma-icono svg { width: 100%; height: 100%; }
/* provisional mientras no exista el ícono de la app */
.pma-icono-provisional {
  display: grid; place-items: center; border: 1.5px dashed var(--pma-v40); border-radius: 50%;
  font-weight: 600; font-size: 8px; letter-spacing: .04em; color: var(--pma-v55);
}

/* ---------- Firma fija al pie de las apps ----------
   «por Pablo Mejía Arquitectura», centrada en una franja de 24 px, igual en todas las pantallas.
   La pone ecosistema.js; el contenido de la app termina encima de la franja (padding-bottom en html.pma-con-firma). */
.pma-firma { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--pma-firma-alto, 24px); display: grid; place-items: center;
  background: var(--pma-blanco); font: 10px var(--pma-fuente); letter-spacing: .02em; color: var(--pma-v70); pointer-events: none; }
html.pma-con-firma body { padding-bottom: var(--pma-firma-alto, 24px); }

/* ---------- Pie común ---------- */
.pma-pie {
  display: flex; gap: 24px; align-items: baseline;
  margin: 0 var(--pma-margen); padding: 12px 0 20px;
  border-top: var(--pma-filete) solid var(--pma-v15);
  font-family: var(--pma-fuente); font-size: 12px; color: var(--pma-v70); letter-spacing: .02em;
}
.pma-pie b { font-weight: 600; color: var(--pma-verde); }
.pma-pie nav { margin-left: auto; display: flex; gap: 20px; }
.pma-pie a { color: inherit; text-decoration: none; }
.pma-pie a:hover { color: var(--pma-verde); }
@media (max-width: 640px) { .pma-pie { flex-direction: column; gap: 6px; } .pma-pie nav { margin-left: 0; } }

/* ---------- Foco visible en todo el ecosistema ---------- */
.pma-barra :focus-visible, .pma-pie :focus-visible, .pma-portada :focus-visible {
  outline: 2px solid var(--pma-verde); outline-offset: 2px;
}

/* ---------- Carga común a todas las apps ----------
   La pantalla de atrás se vela y se desenfoca; al centro, el ícono de la app se entinta en un barrido
   circular y luego se vacía en el mismo sentido, en ciclo. La planta nunca gira: se respeta la regla del ícono.
   Solo aparece si la espera pasa de 400 ms y, una vez visible, dura al menos 600 ms, para no parpadear. */
@property --pma-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --pma-b { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pma-carga {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; align-content: center; gap: 22px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--pma-fuente); color: var(--pma-verde); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity var(--pma-dur-2) var(--pma-curva);
}
.pma-carga[data-visible] { opacity: 1; pointer-events: auto; }
.pma-carga-icono { position: relative; width: 72px; height: 72px; }
.pma-carga-icono > span { position: absolute; inset: 0; }
.pma-carga-icono svg { width: 100%; height: 100%; display: block; }
.pma-carga-base { color: var(--pma-v15); }
.pma-carga-tinta {
  color: var(--pma-verde);
  -webkit-mask-image: conic-gradient(transparent var(--pma-b), #000 var(--pma-b) var(--pma-a), transparent var(--pma-a));
  mask-image: conic-gradient(transparent var(--pma-b), #000 var(--pma-b) var(--pma-a), transparent var(--pma-a));
  animation: pma-entinta 2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pma-entinta {
  0%   { --pma-a: 0deg;   --pma-b: 0deg; }
  50%  { --pma-a: 360deg; --pma-b: 0deg; }
  100% { --pma-a: 360deg; --pma-b: 360deg; }
}
.pma-carga-texto { font-size: 14px; font-weight: 600; }
.pma-carga-detalle { font-size: 12.5px; color: var(--pma-v70); margin-top: -14px; }
@media (prefers-reduced-motion: reduce) {
  .pma-carga-tinta { animation: none !important; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Barra y panel en pantallas angostas ---------- */
@media (max-width: 520px) {
  .pma-barra { gap: 12px; }
  .pma-app-nombre { font-size: 12px; letter-spacing: .14em; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .pma-estado { display: none; }                 /* el estado pasa al menú de la app */
  .pma-panel { left: 0; right: 0; width: auto; border-left: 0; border-right: 0; }
  .pma-panel a { padding: 14px var(--pma-margen); min-height: 64px; }
  .pma-panel-rotulo { padding-left: var(--pma-margen); }
  .pma-panel-pie { padding: 14px var(--pma-margen) 18px; }
  .pma-panel-pie a { padding: 0; min-height: 0; }
}

/* ---------- Controles propios de la app en la barra (v0.2.1) ----------
   Espacio antes del menú para controles que la app necesita a mano (sonido, idioma).
   Texto sin cajas; el activo en verde con raya inferior. */
.pma-barra-app { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.pma-barra-app:empty { display: none; }
.pma-barra-app button { border: 0; background: none; padding: 6px 2px; cursor: pointer; font: inherit; letter-spacing: inherit; color: var(--pma-v55); }
.pma-barra-app button[aria-pressed="true"] { color: var(--pma-verde); box-shadow: inset 0 -1.5px 0 var(--pma-verde); }
.pma-barra-app [data-solo-escritorio] { display: contents; }
@media (max-width: 520px) { .pma-barra-app [data-solo-escritorio] { display: none; } }

/* ---------- Margen de las apps en teléfono (v0.2.1) ---------- */
@media (max-width: 520px) { :root { --pma-margen-app: 16px; } }