/* Ajustes generales del sitio */
:root {
  --md-primary-fg-color: #1f4e9c;
  --md-primary-fg-color--light: #4c8ff0;
  --md-primary-fg-color--dark: #163b78;
  --md-accent-fg-color: #21ba45;
}
.md-typeset { font-size: .78rem; }
.md-typeset h1 { font-weight: 700; }
.md-typeset h2 { font-weight: 600; }

/* Portada: grid de módulos */
.grid.cards > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.grid.cards > ul > li { margin: 0; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; padding: .7rem .9rem; transition: border-color .15s, box-shadow .15s; }
.grid.cards > ul > li:hover { border-color: var(--md-accent-fg-color); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.grid.cards > ul > li > p { margin: .2rem 0; }
.grid.cards > ul > li > hr { margin: .5rem 0; }
.grid.cards .twemoji, .grid.cards .lg { font-size: 1.4rem; vertical-align: middle; margin-right: .3rem; }

/* Pasos numerados */
.md-typeset ol.steps { counter-reset: paso; list-style: none; padding-left: 0; }
.md-typeset ol.steps > li { counter-increment: paso; position: relative; padding-left: 2.2rem; margin: .7rem 0; }
.md-typeset ol.steps > li::before {
  content: counter(paso);
  position: absolute; left: 0; top: .05rem;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--md-primary-fg-color); color: #fff;
  font-weight: 700; font-size: .8rem; line-height: 1.55rem; text-align: center;
}
.md-typeset ol.steps > li .where { display: block; font-size: .72rem; color: var(--md-default-fg-color--light); margin-top: .15rem; }

/* Tabla de permisos / roles */
.md-typeset table.compact { font-size: .7rem; }
.md-typeset .perm { font-family: var(--md-code-font-family); font-size: .68rem; background: var(--md-code-bg-color); padding: .05em .35em; border-radius: 3px; white-space: nowrap; }

/* Widgets interactivos */
.widget { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; padding: .8rem 1rem; margin: 1rem 0; background: var(--md-code-bg-color); }
.widget h4 { margin: 0 0 .5rem; font-size: .85rem; }
.widget label { display: inline-flex; flex-direction: column; gap: .2rem; font-size: .72rem; margin: 0 .8rem .5rem 0; }
.widget input, .widget select { font: inherit; padding: .3rem .5rem; border: 1px solid var(--md-default-fg-color--lighter); border-radius: .2rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); min-width: 9rem; }
.widget .out { margin-top: .5rem; font-size: .78rem; }
.widget .out .big { font-size: 1.3rem; font-weight: 700; color: var(--md-primary-fg-color); }
.widget .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; }
.widget .mod { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .25rem; padding: .4rem .6rem; background: var(--md-default-bg-color); }
.widget .mod b { display: block; font-size: .75rem; margin-bottom: .2rem; }
.widget .mod span { display: block; font-size: .68rem; color: var(--md-default-fg-color--light); }
.widget .mod span.ok::before { content: "✓ "; color: var(--md-accent-fg-color); font-weight: 700; }
.widget .mod span.no { opacity: .45; text-decoration: line-through; }
.widget .mod.off { opacity: .4; }
.widget .seg { display: inline-flex; border: 1px solid var(--md-primary-fg-color); border-radius: .25rem; overflow: hidden; margin-bottom: .5rem; }
.widget .seg button { border: 0; background: transparent; padding: .3rem .8rem; font: inherit; font-size: .72rem; cursor: pointer; color: var(--md-primary-fg-color); }
.widget .seg button.on { background: var(--md-primary-fg-color); color: #fff; }
.widget table { font-size: .72rem; }
.widget tr.hide { display: none; }
.widget .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.widget .plan { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; padding: .6rem .8rem; background: var(--md-default-bg-color); position: relative; }
.widget .plan.pop { border-color: var(--md-accent-fg-color); }
.widget .plan .tag { position: absolute; top: -.6rem; right: .6rem; background: var(--md-accent-fg-color); color: #fff; font-size: .6rem; padding: .1rem .5rem; border-radius: .6rem; font-weight: 700; }
.widget .plan h5 { margin: 0; font-size: .85rem; }
.widget .plan .price { font-size: 1.1rem; font-weight: 700; color: var(--md-primary-fg-color); }
.widget .plan .price small { font-size: .65rem; font-weight: 400; color: var(--md-default-fg-color--light); }
.widget .plan ul { margin: .4rem 0 0; padding-left: 1rem; font-size: .68rem; }
.widget .plan li.hl { font-weight: 700; color: var(--md-primary-fg-color); }