:root {
  --ink: #1b1030; --muted: #6c6483; --line: #e8e1f2; --tint: #f6f2fb;
  --deep: #2a0b52; --purple: #8e3fa8; --magenta: #d6247f; --teal: #22b8b0; --yellow: #ffd23f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--ink); background: #f3eff9; line-height: 1.5; }
h1, h2, h3 { margin: 0 0 .4em; letter-spacing: -.01em; }
.muted { color: var(--muted); }
small { color: var(--muted); font-weight: 500; }
img { max-width: 100%; display: block; }

.btn { display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 12px; padding: .7rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--magenta); color: #fff; }
.btn--primary:hover { background: #bf1b6e; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); padding: .45rem .9rem; }
.btn--link { background: none; border: 0; color: var(--magenta); padding: .3rem 0; font-weight: 600; text-decoration: underline; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.flash { padding: .8rem 1rem; border-radius: 12px; font-weight: 600; margin: 0 0 1rem; }
.flash--ok { background: #e6f7f1; color: #0f6b4f; border: 1px solid #b9e8d7; }
.flash--error { background: #fdecef; color: #9b1c3a; border: 1px solid #f7c3cd; }

/* Inicio de sesión */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(120deg, var(--deep), #5a1668 55%, #7b1660); }
.auth__card { width: 100%; max-width: 400px; background: #fff; border-radius: 24px; padding: 2rem; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .5); }
.auth__logo { height: 36px; width: auto; margin-bottom: 1rem; }

/* Formularios */
.form { display: grid; gap: .9rem; }
.form label { display: grid; gap: .3rem; font-weight: 700; font-size: .9rem; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=date], .form input[type=file], .form select {
  font: inherit; font-weight: 500; padding: .65rem .8rem; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; width: 100%;
}
.form input[type=file] { padding: .5rem; background: var(--tint); }
.form .check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.form .check input { width: 18px; height: 18px; accent-color: var(--purple); }
.form--grid { grid-template-columns: 1fr 1fr; }
.span2 { grid-column: 1 / -1; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; }
.reset { margin-top: .4rem; }

/* Panel */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .8rem 1.25rem; background: linear-gradient(120deg, var(--deep), #5a1668 55%, #7b1660); color: #fff; }
.top img { height: 30px; width: auto; }
.top__title { font-weight: 700; opacity: .85; }
.top__link { margin-left: auto; color: var(--yellow); font-weight: 700; text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.panel { background: #fff; border-radius: 22px; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 14px 40px -28px rgba(42, 11, 82, .4); }

.slides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; }
.slide { border: 1.5px solid var(--line); border-radius: 18px; padding: 1.1rem; }
.slide__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.tag { font-size: .75rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px; }
.tag--on { background: #e6f7f1; color: #0f6b4f; }
.tag--off { background: #eee; color: #666; }
.previews { display: grid; grid-template-columns: 1fr 90px; gap: .6rem; margin-bottom: 1rem; }
.previews figure { margin: 0; }
.previews figcaption { font-size: .75rem; font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
.previews img, .ph { width: 100%; aspect-ratio: 24 / 11; object-fit: cover; border-radius: 10px; background: var(--tint); }
.previews__mobile img, .previews__mobile .ph { aspect-ratio: 4 / 5; }
.ph { display: grid; place-items: center; text-align: center; font-size: .75rem; color: var(--muted); padding: .4rem; border: 1.5px dashed var(--line); }

.logo-now { display: flex; align-items: center; gap: 1rem; margin: .75rem 0 1rem; flex-wrap: wrap; }
.logo-now__box { display: flex; align-items: center; gap: .2rem; padding: .7rem 1rem; border-radius: 14px; background: linear-gradient(120deg, var(--deep), #5a1668 55%, #7b1660); }
.logo-now__box img { height: 46px; width: auto; }
.logo-now__box .logo-now__word { height: 36px; }

/* Pestañas */
.tabs { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px -16px rgba(42, 11, 82, .35); }
.tabs__inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tabs__inner::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; flex: none; padding: .95rem 1rem .85rem; color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.tabs__tab:hover { color: var(--deep); }
.tabs__tab::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.tabs__tab.is-active { color: var(--deep); }
.tabs__tab.is-active::after { background: linear-gradient(90deg, var(--purple), var(--magenta)); }

/* Usuarios */
.top__user { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; text-align: right; line-height: 1.2; padding: .25rem .25rem .25rem .6rem; border-radius: 999px; }
.top__user:hover, .top__user.is-active { background: rgba(255, 255, 255, .12); }
.top__avatar { box-sizing: content-box; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .35); flex: none; }
.top__user.is-active .top__avatar { background: var(--yellow); color: var(--deep); border-color: var(--yellow); }
.top__user small { display: block; color: rgba(255, 255, 255, .7); font-weight: 600; font-size: .72rem; }
.btn--soft { background: var(--tint); color: var(--deep); border-color: var(--line); }
.btn--soft:hover { border-color: var(--purple); }
.btn--danger { background: #fff; color: #b3123f; border-color: #f2c2cf; }
.btn--danger:hover { background: #fdecef; }
.tag--admin { background: #f2e6fb; color: #6a1f8c; }
.users { display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
.user { border: 1.5px solid var(--line); border-radius: 14px; }
.user[open] { border-color: #d7c6ea; }
.user summary { display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.user summary::-webkit-details-marker { display: none; }
.user summary::after { content: "Editar ▾"; margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--purple); }
.user[open] summary::after { content: "Cerrar ▴"; }
.user__name { font-weight: 800; }
.user__id { color: var(--muted); font-weight: 600; }
.user__seen { font-size: .8rem; color: var(--muted); }
.user__body { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 0 1rem 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.user__form { align-content: start; }
.user__form:nth-child(2) { grid-template-columns: 1fr 1fr; }
.user__form:nth-child(2) .btn { grid-column: 1 / -1; justify-self: start; }
.user__form .btn { justify-self: start; }
.user__delete { grid-column: 1 / -1; }
.users__add { margin-top: .5rem; }

@media (max-width: 760px) {
  .user__body, .user__form:nth-child(2) { grid-template-columns: 1fr; }
  .user summary::after { margin-left: 0; }
  .slides, .form--grid { grid-template-columns: 1fr; }
  .top__title, .top__user-text { display: none; }
  .top__user { padding: 0; }
  .top { gap: .75rem; padding: .7rem 1rem; }
  .top img { height: 26px; }
  .top__link { white-space: nowrap; font-size: .9rem; }
  .tabs__tab { padding: .85rem .75rem .75rem; font-size: .92rem; }
}
.form select { min-height: 46px; }

/* Vista previa del portal */
.portal-now { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem; margin: .75rem 0 .5rem; }
.portal-now figure { margin: 0; }
.portal-now figcaption { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem; }
.portal-now__box { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 1.6rem; width: 340px; max-width: 100%; aspect-ratio: 9 / 10; padding: 1.3rem 1.4rem; border-radius: 22px; color: #fff; background: var(--deep); }
.portal-now__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(52, 14, 100, .92) 0%, rgba(52, 14, 100, .78) 50%, rgba(42, 11, 82, .55) 100%); }
.portal-now__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.portal-now__logo { display: flex; align-items: center; gap: .15rem; }
.portal-now__logo img { height: 40px; width: auto; }
.portal-now__logo .portal-now__word { height: 30px; }
.portal-now__box strong { align-self: end; font-size: 1.6rem; line-height: 1.15; max-width: 16rem; margin-top: 2.5rem; }
.portal-now__box strong span { color: var(--yellow); }
.portal-now__box--mobile { width: 210px; aspect-ratio: 4 / 5; gap: 1rem; padding: 1rem; border-radius: 18px; }
.portal-now__box--mobile .portal-now__logo img { height: 30px; }
.portal-now__box--mobile .portal-now__logo .portal-now__word { height: 22px; }
.portal-now__box--mobile strong { font-size: 1.15rem; margin-top: 1.2rem; }