.rp-permissions, .rp-permissions-open { --rp-ink: #273328; --rp-muted: #596752; --rp-green: #496b37; --rp-line: #d4dfc9; }
.rp-permissions { margin: 0 0 24px; padding: 22px; border-radius: 18px; background: #eef3e7; color: var(--rp-ink); }
.rp-permissions[hidden] { display: none !important; }
/* Es literalmente la primera impresión de la app instalada: que llegue en vez de aparecer
   de golpe. `display` con allow-discrete porque parte de [hidden] (display:none). */
.rp-permissions { opacity: 1; transform: none; transition: opacity 220ms var(--ease-salida, cubic-bezier(.23,1,.32,1)), transform 220ms var(--ease-salida, cubic-bezier(.23,1,.32,1)), display 220ms allow-discrete; }
@starting-style { .rp-permissions:not([hidden]) { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .rp-permissions { transform: none !important; transition-property: opacity; transition-duration: 120ms; }
}
.rp-permissions h2 { margin: 0; color: inherit; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.3px; }
.rp-permissions header > p { margin: 7px 0 20px; color: var(--rp-muted); font-size: 13px; line-height: 1.5; }
.rp-permission-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px 12px; padding: 18px 0; border-top: 1px solid var(--rp-line); }
.rp-permission-row > svg { width: 22px; height: 22px; margin-top: 1px; color: var(--rp-green); }
.rp-permission-row h3 { margin: 0; color: inherit; font-size: 15px; line-height: 1.5; font-weight: 600; }
.rp-permission-row p, .rp-permission-row small { display: block; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--rp-muted); }
.rp-permission-row small { font-size: 12px; }
.rp-permission-row > button { grid-column: 2; justify-self: start; }
.rp-permissions button, .rp-permissions-open { appearance: none; font: inherit; font-size: 13px; line-height: 1.4; font-weight: 500; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; box-shadow: none; cursor: pointer; }
.rp-permission-row > button { background: var(--rp-green); color: #fff; margin-top: 4px; }
.rp-permission-row > button:disabled { background: transparent; border-color: var(--rp-line); color: var(--rp-muted); cursor: default; }
.rp-permissions button:focus-visible, .rp-permissions-open:focus-visible { outline: 2px solid var(--rp-green); outline-offset: 3px; }
.rp-permissions footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid var(--rp-line); }
.rp-permissions footer p { margin: 0; color: var(--rp-muted); font-size: 12px; line-height: 1.5; max-width: 34ch; }
.rp-permissions footer button { background: transparent; color: var(--rp-green); flex-shrink: 0; }
.rp-permissions-open { display: block; text-align: left; background: transparent; border-color: #d4dfc9; color: #496b37; margin-bottom: 12px; }
@media (max-width: 350px) { .rp-permissions { padding: 18px; } .rp-permissions footer { align-items: flex-start; gap: 6px; } }

/* Bloques de pantallas compartidas que pertenecen a un módulo (data-modulo).
   aplicarModulosEnPantalla pone el atributo hidden; esta regla gana a cualquier
   display de la hoja de estilos (las tarjetas y modales traen el suyo). */
[hidden] { display: none !important; }