/* Portal de miembros · Magia Sagrada — estilo tipo app, primero celular */
:root {
  --morado: #3B1F5C; --morado-2: #5A3A82; --violeta: #6E45A8; --lila: #EDE3F7; --lila-2: #D9C3F0;
  --dorado: #E2C276; --dorado-2: #C9A24A; --arena: #F1E6CC;
  --tinta: #1E1230; --suave: #5E4E70; --linea: #E6DCF0; --fondo: #FAF6FB; --tarjeta: #FFFFFF;
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Work Sans', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace;
  --radio: 18px; --menu-alto: 72px;
}
.tema-admin {
  --fondo: #1E1230; --tarjeta: #2C1C44; --linea: #46336A; --tinta: #FAF6FB; --suave: #CDBFE0; --lila: #3B1F5C;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
@media (min-width: 600px) { body { background: #E9E0F2; } .tema-admin { background: #120A1E; } }
.app { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--fondo); position: relative; padding-bottom: calc(var(--menu-alto) + 24px + env(safe-area-inset-bottom)); }
.pantalla-acceso .app { padding-bottom: 0; }
a { color: var(--violeta); }
.tema-admin a { color: var(--dorado); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08; }
h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; }
p { margin: 0; }
.etiqueta { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--violeta); }
.tema-admin .etiqueta { color: var(--dorado); }
.suave { color: var(--suave); font-size: 13px; }
.contenido { padding: calc(env(safe-area-inset-top) + 40px) 20px 0; display: flex; flex-direction: column; gap: 18px; }
.fila { display: flex; align-items: center; gap: 12px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pila { display: flex; flex-direction: column; gap: 10px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.crece { flex: 1; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avisos */
.aviso { margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; position: relative; z-index: 5; }
.aviso-ok { background: #E3F2E7; color: #1D5B33; }
.aviso-error { background: #FBE4E4; color: #8A1F1F; }
.tema-admin .aviso-ok { background: #1F4A33; color: #D7F5E2; }
.tema-admin .aviso-error { background: #5A1F2B; color: #FFE1E6; }

/* Botones */
.btn { min-height: 52px; border-radius: 26px; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; font: 600 16px var(--sans); text-decoration: none; cursor: pointer; background: var(--morado); color: #FAF6FB; width: 100%; }
.btn:hover { filter: brightness(1.08); }
.btn-dorado { background: var(--dorado); color: #1E1230 !important; }
.btn-violeta { background: var(--violeta); color: #FFF !important; }
.btn-linea { background: transparent; color: var(--violeta); border: 1.5px solid currentColor; }
.tema-admin .btn-linea { color: var(--dorado); }
.btn-chico { min-height: 40px; font-size: 13px; padding: 0 14px; width: auto; }
.btn-peligro { background: transparent; color: #C0475A; border: 1.5px solid #C0475A; }
.tema-admin .btn-peligro { color: #FF9AAA; border-color: #FF9AAA; }
.btn-redondo { width: 44px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--lila); color: var(--morado); border: none; cursor: pointer; flex-shrink: 0; text-decoration: none; }
.tema-admin .btn-redondo { background: #2C1C44; color: #FAF6FB; border: 1px solid var(--linea); }
.cabeza-oscura .btn-redondo { background: var(--morado-2); color: #FAF6FB; }

/* Formularios */
label { font-size: 13px; font-weight: 600; color: var(--morado); }
.tema-admin label { color: var(--dorado); font-weight: 500; font-size: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid #DDD0EC; background: #FFF; padding: 0 14px; font: 15px var(--sans); color: var(--tinta);
}
textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.tema-admin input, .tema-admin select, .tema-admin textarea { background: #2C1C44; border-color: var(--linea); color: #FAF6FB; }
.tema-admin input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--dorado-2); outline-offset: 2px; }
.archivo { border: 1.5px dashed var(--violeta); border-radius: 18px; padding: 18px; text-align: center; background: #FFF; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tema-admin .archivo { border-color: var(--dorado); background: #2C1C44; }
.archivo input { min-height: 0; border: none; background: transparent; padding: 0; width: 100%; }
.segmentos { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 16px; padding: 4px; }
.segmentos label { min-height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--suave); text-align: center; padding: 0 4px; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos input:checked + span { color: inherit; }
.segmentos label:has(input:checked) { background: var(--morado); color: #FAF6FB; }
.tema-admin .segmentos label:has(input:checked) { background: var(--dorado); color: #1E1230; }
.segmentos input:focus-visible + span { outline: 3px solid var(--dorado-2); border-radius: 8px; }

/* Tarjetas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.tarjeta-oscura { background: var(--morado); color: #FAF6FB; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.tarjeta-oscura .etiqueta { color: var(--dorado); }
.tarjeta-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; }
.icono-caja { width: 44px; height: 44px; border-radius: 14px; background: var(--lila); color: var(--violeta); display: flex; align-items: center; justify-content: center; }
.pastilla { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; padding: 5px 9px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; background: var(--lila); color: var(--morado); }
.tema-admin .pastilla:not([class*="pastilla-"]) { background: #4A2D70; color: #FAF6FB; }
.pastilla-dorada { background: var(--dorado); color: #1E1230; }
.pastilla-morada { background: var(--morado); color: #FAF6FB; }
.pastilla-violeta { background: var(--violeta); color: #FFF; }
.pastilla-linea { background: transparent; border: 1px dashed currentColor; color: var(--suave); }
.barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--dorado); border-radius: 3px; }
.avatar { width: 46px; height: 46px; border-radius: 23px; background: var(--dorado); color: var(--morado); display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }

/* Cabecera oscura (curso, categoría) */
.cabeza-oscura { background: var(--morado); color: #FAF6FB; padding: calc(env(safe-area-inset-top) + 40px) 22px 24px; border-radius: 0 0 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.cabeza-oscura .etiqueta { color: var(--dorado); }
.cabeza-oscura p { color: #E4D8F2; font-size: 14px; }

/* Acceso */
.acceso-arriba { background: var(--morado); min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 32px) 20px 24px; position: relative; overflow: hidden; text-align: center; }
.acceso-arriba .marca { font-family: var(--serif); font-size: 50px; font-weight: 600; line-height: 1; color: #FAF6FB; position: relative; }
.acceso-arriba .etiqueta, .acceso-arriba .lema { color: var(--dorado); position: relative; }
.acceso-arriba .lema { font-size: 14px; }
.acceso-arriba svg.flor { position: absolute; opacity: 0.35; width: 300px; height: 300px; }
.acceso-hoja { background: var(--fondo); border-radius: 32px 32px 0 0; margin-top: -28px; position: relative; padding: 32px 26px 28px; display: flex; flex-direction: column; gap: 18px; min-height: calc(100dvh - 272px); }
.firma { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: #7F6E96; margin-top: auto; }

/* Categorías */
.cat { text-decoration: none; border-radius: 20px; padding: 16px; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; }
.cat .etiqueta { color: inherit; opacity: 0.85; font-size: 10px; letter-spacing: 1.5px; }
.cat h3 { font-size: 21px; }
.tono-morado { background: var(--morado); color: #FAF6FB; }
.tono-violeta { background: var(--violeta); color: #FAF6FB; }
.tono-lila { background: var(--lila); color: var(--morado); }
.tono-dorado { background: var(--arena); color: var(--morado); }

/* Listas de audio y lecciones */
.item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--linea); text-decoration: none; color: inherit; }
.item-activo { background: var(--lila); border-color: var(--lila-2); }
.circulo { width: 46px; height: 46px; border-radius: 23px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--violeta); color: #FAF6FB; }
.circulo-arena { background: var(--arena); color: var(--morado); }
.item .titulo { font-weight: 600; font-size: 15px; }
.reproductor { background: var(--tinta); color: #FAF6FB; border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tema-admin .reproductor { background: #120A1E; }
.reproductor audio, .reproductor video { width: 100%; border-radius: 12px; }
.marco-video { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; }
.marco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Módulos (goteo por fecha) */
.modulo { border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--linea); }
.modulo-cerrado { background: #F3EEF8; border-style: dashed; border-color: #D6C6EA; }
.tema-admin .modulo-cerrado { background: #26173B; border-color: var(--linea); }
.modulo summary, .modulo .cab { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 58px; cursor: pointer; }
.modulo summary::-webkit-details-marker { display: none; }
.num { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; background: var(--morado); color: #FAF6FB; }
.num-hecho { background: var(--violeta); }
.num-cerrado { background: var(--arena); color: var(--suave); }
.lecciones { padding: 0 12px 12px 60px; display: flex; flex-direction: column; gap: 4px; }
.leccion { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: inherit; text-decoration: none; }
.punto { width: 14px; height: 14px; border-radius: 7px; border: 1.5px solid #BBA8D6; flex-shrink: 0; }
.punto-hecho { background: var(--violeta); border-color: var(--violeta); }
.nota { display: flex; gap: 10px; align-items: flex-start; background: var(--lila); border-radius: 16px; padding: 12px 14px; font-size: 13px; color: var(--morado); }

/* Calendario */
.dias, .mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dias { text-align: center; font-family: var(--mono); font-size: 10px; color: var(--suave); }
.dia { height: 44px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 14px; text-decoration: none; color: var(--tinta); background: var(--tarjeta); border: 1px solid var(--linea); }
.dia-vacio { background: transparent; border: none; }
.dia-hoy { border: 1.5px solid var(--violeta); }
.tema-admin .dia-hoy { border-color: var(--dorado); }
.dia-sel { background: var(--morado); color: #FAF6FB; border-color: var(--morado); font-weight: 700; }
.tema-admin .dia-sel { background: var(--dorado); color: #1E1230; border-color: var(--dorado); }
.puntos { display: flex; gap: 2px; height: 6px; }
.puntos i { width: 6px; height: 6px; border-radius: 3px; display: block; }
.p-presencial { background: var(--dorado-2); }
.p-virtual { background: var(--violeta); }
.tema-admin .p-virtual { background: #B48CE8; }
.p-modulo { background: var(--dorado); }
.dia-sel .p-virtual { background: var(--lila-2); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--suave); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 8px; height: 8px; border-radius: 4px; display: block; }
.evento-presencial { background: var(--morado); color: #FAF6FB; border: none; }
.tema-admin .evento-presencial { background: #3B1F5C; }

/* Admin */
.kpi { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-size: 20px; }
.kpi span { font-size: 11px; color: var(--suave); }
.kpi-dorado { background: var(--dorado); color: #1E1230 !important; border: none; }
.kpi-dorado span { color: #3B1F5C; }
.accion { text-decoration: none; color: #FAF6FB !important; background: #3B1F5C; border: 1px solid var(--morado-2); border-radius: 18px; padding: 14px; min-height: 88px; display: flex; flex-direction: column; justify-content: space-between; font-weight: 600; font-size: 14px; }
.accion-fuerte { background: var(--violeta); border-color: var(--violeta); }
.fecha-caja { width: 50px; height: 54px; border-radius: 12px; background: #1E1230; border: 1px solid var(--linea); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.fecha-caja b { font-size: 20px; line-height: 1; }
.fecha-caja span { font-family: var(--mono); font-size: 9px; color: var(--dorado); letter-spacing: 1px; }
.mini { width: 44px; height: 44px; border-radius: 12px; border: none; background: #3B1F5C; color: #FAF6FB; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.mini:disabled { opacity: 0.35; cursor: default; }
.tabla-scroll { overflow-x: auto; }
.separador { height: 1px; background: var(--linea); margin: 4px 0; }
.mod-admin { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.mod-admin .fechas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px; }
details.mas summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--dorado); min-height: 44px; display: flex; align-items: center; }

/* Menú inferior */
.menu { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 520px; height: calc(var(--menu-alto) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #FFF; border-top: 1px solid var(--linea); display: flex; justify-content: space-around; align-items: center; z-index: 20; }
.tema-admin .menu { background: #160C24; }
.menu a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: #6A5A80; font-size: 11px; min-width: 60px; padding: 6px 0; }
.tema-admin .menu a { color: #C4B5DA; }
.menu a.activo { color: var(--morado); font-weight: 600; }
.tema-admin .menu a.activo { color: var(--dorado); }

@media (min-width: 600px) { .contenido { padding-top: 48px; } }
@media (prefers-reduced-motion: no-preference) { .btn, .item, .dia { transition: filter .15s, background .15s; } }