/* Los cuatro estados de pantalla. Toda vista los usa; ninguna app los improvisa.
   Vacío (con acción) · Cargando (esqueleto con la forma del contenido) ·
   Error (Reintentar + detalle técnico plegable) · Sin permiso (Pedir acceso + a quién).
   Marcado de referencia en /platform-assets/_design.html */

.ui-state{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s2);padding:var(--s5);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface);color:var(--text)}
.ui-state h2{margin:0;font-size:var(--fs-16);font-weight:650}
.ui-state p{margin:0;max-width:60ch;color:var(--text-2);font-size:var(--fs-13);line-height:1.5}
.ui-state-icon{display:grid;width:34px;height:34px;margin-bottom:var(--s1);place-items:center;border:1px solid var(--line-strong);
  border-radius:50%;color:var(--text-2);font-size:var(--fs-16);font-weight:700}
.ui-state-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}

/* Error: el icono y el borde del icono llevan el color; el título dice qué falló. */
.ui-state-error .ui-state-icon{border-color:var(--danger);color:var(--danger)}
.ui-state-error details{width:100%;margin-top:var(--s1)}
.ui-state-error summary{width:max-content;color:var(--text-2);font-size:var(--fs-12);cursor:pointer}
.ui-state-error summary:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm)}
.ui-state-error pre{margin:var(--s2) 0 0;padding:var(--s3);max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--well);color:var(--text-2);font-size:var(--fs-12);white-space:pre-wrap;overflow-wrap:anywhere}

/* Sin permiso: aviso, no error. Dice a quién se pide. */
.ui-state-denied .ui-state-icon{border-color:var(--warn);color:var(--warn)}
.ui-state-owner{color:var(--text-3);font-size:var(--fs-12)}

/* Cargando: la caja conserva el alto del contenido final para que nada salte. */
.ui-state-loading{border-style:solid}
.ui-skel{display:block;height:12px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--skel-a) 0%,var(--skel-b) 50%,var(--skel-a) 100%);background-size:200% 100%;
  animation:ui-skel 1.4s ease-in-out infinite}
.ui-skel-title{height:16px}
.ui-skel-row{height:var(--h-row);border-radius:0}
@keyframes ui-skel{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.ui-skel{animation:none}}