[hidden] { display: none !important; }
body.app { background: var(--bg-soft); min-height: 100vh; }
.top nav { gap: 10px; }
.plan-badge { font-weight: 700; font-size: .9rem; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.plan-badge.pro { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 720px) { #btn-mis { font-size: 0; padding: 0 12px; } #btn-mis::before { content: "📁"; font-size: 1.1rem; } .plan-badge { display: none; } }

.link { background: none; border: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font: inherit; padding: 8px 0; min-height: 44px; }
.mini { font-size: .9rem; color: var(--muted); margin: 8px 0 0; }

/* Crear */
.crear { padding: 36px 0 80px; max-width: 880px; }
.crear h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.como { margin: 0 0 24px; padding-left: 1.3em; color: var(--ink-2); }
.como li { margin: 4px 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-bottom: 18px; }
.card.drag { border: 2px dashed var(--blue); background: #f5f7ff; }
.card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-h h2 { font-size: 1.35rem; margin: 0; }
.card-h small { font-family: var(--body); font-weight: 600; font-size: .9rem; color: var(--muted); }
.num { width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 1rem var(--head); flex: none; }
.lbl { display: block; font-weight: 700; margin: 6px 0 8px; }
textarea, input[type=text], select, .titulo-deck { width: 100%; font: 1rem/1.5 var(--body); color: var(--ink); background: #fff; border: 1.5px solid #c9ced8; border-radius: 12px; padding: 12px 14px; min-height: 48px; }
textarea { resize: vertical; }
textarea:focus, input:focus, select:focus { outline: 3px solid #b9c7ff; border-color: var(--blue); }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; font-size: .9rem; color: var(--muted); }
.ej { border: 1px solid var(--line); background: var(--bg-soft); border-radius: 999px; padding: 8px 12px; font: 600 .88rem var(--body); color: var(--ink-2); cursor: pointer; min-height: 40px; }
.ej:hover { border-color: var(--ink); }
.acciones-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.estado { font-weight: 600; color: var(--ink-2); }
#btn-grabar.rec { background: #e5203a; border-color: #e5203a; color: #fff; }
.drop-hint { color: var(--muted); font-size: .9rem; margin: 10px 0 0; }
.archivos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.archivos li { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; font-size: .92rem; }
.archivos li button { border: 0; background: none; cursor: pointer; font-size: 1rem; width: 32px; height: 32px; border-radius: 8px; }
.archivos li button:hover { background: #fff; }

.ajustes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.ajustes label, .logo-ctrl label { font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
input[type=range] { width: 100%; min-height: 44px; accent-color: var(--accent); }
@media (max-width: 640px) { .ajustes { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 20px 0 0; }
legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tema-op { position: relative; }
.tema-op input { position: absolute; opacity: 0; }
.tema-op label { display: block; cursor: pointer; border-radius: 12px; border: 2px solid var(--line); overflow: hidden; }
.tema-op .sw { height: 54px; display: flex; align-items: flex-end; padding: 8px; gap: 6px; }
.tema-op .sw i { height: 8px; border-radius: 4px; }
.tema-op .nm { display: block; padding: 6px 8px; font-weight: 700; font-size: .88rem; background: #fff; }
.tema-op input:checked + label { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.tema-op input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.color-propio { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
input[type=color] { width: 52px; height: 44px; border: 1.5px solid #c9ced8; border-radius: 10px; padding: 3px; background: #fff; cursor: pointer; }
.logo-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-prev { width: 140px; height: 80px; border: 1.5px dashed #c9ced8; border-radius: 12px; display: grid; place-items: center; color: var(--muted); font-size: .9rem; background: repeating-conic-gradient(#f3f5f8 0 25%, #fff 0 50%) 50%/16px 16px; }
.logo-prev img { max-width: 120px; max-height: 64px; object-fit: contain; }
.logo-ctrl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
#extra { margin-bottom: 0; }
.crear-cta { text-align: center; margin-top: 8px; }
.btn.grande { min-height: 58px; font-size: 1.12rem; padding: 0 32px; }

/* Cargando */
.cargando { position: fixed; inset: 0; background: rgba(11,13,18,.72); z-index: 60; display: grid; place-items: center; padding: 16px; }
.cargando-in { background: #fff; border-radius: 20px; padding: 32px 28px; text-align: center; max-width: 380px; width: 100%; }
#cargando-txt { font: 700 1.15rem var(--head); margin: 16px 0 0; }
.spin { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; border: 5px solid var(--bg-soft); border-top-color: var(--accent); animation: g 0.9s linear infinite; }
@keyframes g { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

/* Editor */
.barra { position: sticky; top: 68px; z-index: 15; background: #fff; border-bottom: 1px solid var(--line); }
.barra-in { display: flex; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; }
.titulo-deck { flex: 1 1 220px; font-weight: 700; min-height: 44px; padding: 8px 12px; }
#tema-editor { width: auto; min-height: 44px; padding: 8px 12px; }
.tip { margin: 18px 0; color: var(--ink-2); }
.slides { display: flex; flex-direction: column; gap: 22px; max-width: 980px; margin: 0 auto; }
.add { display: flex; margin: 22px auto 80px; }
.s-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.s-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.s-tools .n { font: 800 .95rem var(--head); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-soft); }
.s-tools select { width: auto; min-height: 40px; padding: 6px 10px; font-size: .9rem; }
.ib { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1rem; padding: 0 10px; font-family: var(--body); font-weight: 600; }
.ib:hover { border-color: var(--ink); }
.ib.ia { background: var(--ink); color: #fff; border-color: var(--ink); }
.s-tools .esp { flex: 1; }
.aviso { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff4c2; border: 1px solid #f0d36b; color: #5a4300; font-weight: 600; font-size: .92rem; }
.s-ia { display: none; gap: 8px; margin-top: 10px; }
.s-ia.on { display: flex; flex-wrap: wrap; }
.s-ia input { flex: 1 1 260px; }
.s-ia .chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.s-notas { margin-top: 10px; }
.s-notas summary { cursor: pointer; font-weight: 700; color: var(--ink-2); min-height: 40px; display: flex; align-items: center; }
.s-notas textarea { min-height: 80px; font-size: .95rem; }

/* ===== Diapositiva (16:9, escala con su ancho) ===== */
.slide { --bg: #fff; --tx: #0b0d12; --mu: #5d6372; --ac: #2450ff; --ai: #fff; --hf: "Bricolage Grotesque", sans-serif; --bf: "Plus Jakarta Sans", sans-serif;
  position: relative; aspect-ratio: 16/9; width: 100%; background: var(--bg); color: var(--tx); border-radius: 10px; overflow: hidden; container-type: inline-size; font-family: var(--bf); }
.slide .in { position: absolute; inset: 0; padding: 6.5cqw 7cqw; display: flex; flex-direction: column; }
.slide h3, .slide .h { font-family: var(--hf); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.slide [contenteditable] { outline: none; border-radius: .4cqw; cursor: text; }
.slide [contenteditable]:hover { box-shadow: 0 0 0 .25cqw color-mix(in srgb, var(--ac) 45%, transparent); }
.slide [contenteditable]:focus { box-shadow: 0 0 0 .3cqw var(--ac); }
.slide [contenteditable]:empty::before { content: attr(data-ph); opacity: .45; }
.slide .ico { font-size: 4.2cqw; line-height: 1; margin-bottom: 1.6cqw; }
.slide .t { font-size: 4cqw; margin-bottom: 2.6cqw; }
.slide ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.5cqw; }
.slide li { position: relative; padding-left: 3cqw; font-size: 2.15cqw; line-height: 1.35; }
.slide li::before { content: ""; position: absolute; left: 0; top: .62em; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--ac); }
.slide .tx { font-size: 2.1cqw; color: var(--mu); line-height: 1.4; }
.slide .bar { width: 14cqw; height: .9cqw; border-radius: 99px; background: var(--ac); }
.slide .big-ico { position: absolute; right: 5cqw; bottom: 4cqw; font-size: 12cqw; opacity: .12; pointer-events: none; }
/* portada y cierre */
.slide.l-portada .in, .slide.l-cierre .in { justify-content: center; }
.slide.l-portada .h { font-size: 6cqw; max-width: 80%; }
.slide.l-portada .tx { font-size: 2.4cqw; margin-top: 2.4cqw; max-width: 75%; }
.slide.l-portada .bar { margin-top: 4cqw; }
.slide.l-cierre .h { font-size: 5.2cqw; max-width: 85%; }
.slide.l-cierre .tx { font-size: 2.4cqw; margin-top: 2.2cqw; max-width: 75%; }
.slide.l-cierre .bar { margin-bottom: 3.5cqw; }
/* sección */
.slide.l-seccion { background: var(--ac); color: var(--ai); }
.slide.l-seccion .in { justify-content: center; }
.slide.l-seccion .h { font-size: 5.4cqw; max-width: 85%; }
.slide.l-seccion .tx { color: var(--ai); opacity: .85; font-size: 2.3cqw; margin-top: 2cqw; max-width: 70%; }
.slide.l-seccion li::before { background: var(--ai); }
.slide.l-seccion .wm, .slide.l-seccion .pag { color: var(--ai); opacity: .75; }
/* dos columnas */
.slide .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; flex: 1; }
.slide .col { border-top: .5cqw solid var(--ac); padding-top: 1.8cqw; }
.slide .col .ct { font-family: var(--hf); font-weight: 800; font-size: 2.5cqw; margin-bottom: 1.6cqw; }
.slide .col li { font-size: 1.95cqw; }
/* cifras */
.slide .cifras { display: grid; gap: 3cqw; flex: 1; align-content: center; }
.slide .cifra .v { font-family: var(--hf); font-weight: 800; font-size: 6.4cqw; color: var(--ac); line-height: 1; letter-spacing: -0.03em; }
.slide .cifra .e { font-size: 1.9cqw; color: var(--mu); margin-top: 1.2cqw; line-height: 1.35; }
/* cita */
.slide.l-cita .in { justify-content: center; }
.slide .q { font-family: var(--hf); font-size: 11cqw; line-height: .6; color: var(--ac); height: 6cqw; }
.slide .cita { font-family: var(--hf); font-weight: 700; font-size: 3.6cqw; line-height: 1.2; max-width: 88%; }
.slide .autor { font-size: 2cqw; color: var(--mu); margin-top: 2.6cqw; }
.slide .autor:not(:empty)::before { content: "— "; }
/* logo y marca de agua */
/* ===== Diseño v2 (10-nov): más grande, centrado, tarjetas y decoración ===== */
.slide .cab { display: flex; align-items: center; gap: 1.8cqw; margin-bottom: 3cqw; }
.slide .cab .t { margin-bottom: 0; font-size: 4.3cqw; }
.slide .chip-ico { flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 1.8cqw; display: grid; place-items: center; font-size: 3.4cqw; background: color-mix(in srgb, var(--ac) 16%, var(--bg)); }
.slide.l-puntos .in, .slide.l-dos_columnas .in, .slide.l-cifras .in { justify-content: center; }
.slide li { font-size: 2.55cqw; line-height: 1.35; }
.slide .col li { font-size: 2.2cqw; }
.slide .cols { flex: 0 1 auto; gap: 2.6cqw; }
.slide .col { border-top: 0; padding: 2.6cqw 2.8cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--ac) 8%, var(--bg)); }
.slide .col .ct { font-size: 2.6cqw; color: var(--ac); }
.slide .tarjetas { display: grid; gap: 2cqw; }
.slide .tarjetas.n2 { grid-template-columns: 1fr 1fr; }
.slide .tarjetas.n3 { grid-template-columns: repeat(3, 1fr); }
.slide .tarjetas.n4 { grid-template-columns: 1fr 1fr; }
.slide .tarjeta { border-radius: 2cqw; padding: 2.6cqw 2.6cqw 2.8cqw; background: color-mix(in srgb, var(--ac) 8%, var(--bg)); border: .25cqw solid color-mix(in srgb, var(--ac) 22%, transparent); }
.slide .tarjeta .nro { display: block; font-family: var(--hf); font-weight: 800; font-size: 3.6cqw; line-height: 1; color: var(--ac); margin-bottom: 1.4cqw; letter-spacing: -0.02em; }
.slide .tarjeta .tt { margin: 0; font-size: 2.35cqw; line-height: 1.35; }
.slide .tarjetas.n4 .tarjeta { padding: 2cqw 2.4cqw; display: grid; grid-template-columns: auto 1fr; gap: 1.8cqw; align-items: start; }
.slide .tarjetas.n4 .tarjeta .nro { margin: 0; font-size: 3cqw; }
.slide .cifras { flex: 0 1 auto; gap: 2cqw; }
.slide .cifra { border-radius: 2cqw; padding: 2.6cqw; background: color-mix(in srgb, var(--ac) 8%, var(--bg)); min-width: 0; }
.slide .cifra .v { overflow-wrap: break-word; hyphens: manual; }
.slide .cifras.largo .v { font-size: 4.4cqw; }
.slide .cifras.muy-largo .v { font-size: 3.4cqw; }
.slide .deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.slide .deco i { position: absolute; border-radius: 50%; background: var(--ac); }
.slide .deco i:first-child { width: 46cqw; height: 46cqw; right: -14cqw; top: -16cqw; opacity: .14; }
.slide .deco i:last-child { width: 20cqw; height: 20cqw; right: 16cqw; bottom: -9cqw; opacity: .08; }
.slide.l-seccion .deco i { background: var(--ai); }
.slide.l-seccion .deco i:first-child { opacity: .12; }
.slide.l-portada .h { font-size: 6.4cqw; }
.slide .in { z-index: 1; }

.slide .logo-s { position: absolute; max-width: 12cqw; max-height: 6cqw; object-fit: contain; }
.slide .logo-s.ad { top: 3cqw; right: 3.4cqw; } .slide .logo-s.ai { top: 3cqw; left: 3.4cqw; }
.slide .logo-s.bd { bottom: 3cqw; right: 3.4cqw; } .slide .logo-s.bi { bottom: 3cqw; left: 3.4cqw; }
.slide .logo-s.portada { top: 3cqw; right: 3.4cqw; }
.slide .wm { position: absolute; left: 3.4cqw; bottom: 2.2cqw; font-size: 1.15cqw; color: var(--mu); opacity: .8; font-weight: 600; }
.slide .logo-s.bi ~ .wm { left: auto; right: 3.4cqw; }
.slide .pag { position: absolute; right: 3.4cqw; bottom: 2.2cqw; font-size: 1.15cqw; color: var(--mu); }
.slide .logo-s.bd ~ .pag { display: none; }

/* Cajón */
.cajon { position: fixed; inset: 0; z-index: 50; background: rgba(11,13,18,.5); display: flex; justify-content: flex-end; }
.cajon-in { width: min(420px, 100%); background: #fff; height: 100%; padding: 20px; overflow: auto; }
.cajon-h { display: flex; justify-content: space-between; align-items: center; }
.cajon-h h2 { font-size: 1.4rem; margin: 0; }
.x { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; }
#lista-decks { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
#lista-decks li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
#lista-decks li button.abrir { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; font: 700 1rem var(--body); padding: 8px; min-height: 44px; }
#lista-decks li small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(11,13,18,.6); display: grid; place-items: center; padding: 16px; }
.modal-in { position: relative; background: #fff; border-radius: 22px; padding: 32px 28px; max-width: 440px; width: 100%; }
.modal-in .x { position: absolute; right: 14px; top: 14px; }
.modal .amt { font: 800 2.8rem/1 var(--head); margin: 12px 0; letter-spacing: -0.03em; }
.modal .amt small { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.lista-ok { list-style: none; padding: 0; margin: 0 0 20px; }
.lista-ok li { padding: 7px 0 7px 28px; position: relative; }
.lista-ok li::before { content: "✓"; position: absolute; left: 2px; font-weight: 800; color: var(--accent); }
.modal .btn.grande { width: 100%; }
.modal-in { max-height: calc(100vh - 32px); overflow-y: auto; }
.codigo-edu { background: #fff4e0; border: 1px solid #ffd79a; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; font-size: .95rem; }
.pagos { display: flex; flex-direction: column; gap: 10px; }
.pagos .btn { flex-direction: column; gap: 4px; padding: 10px 18px; min-height: 64px; border-radius: 16px; line-height: 1.15; }
.pagos .btn small { font-weight: 600; font-size: .82rem; opacity: .9; }
.aviso-ejemplo { background: #eef2ff; border: 1px solid #c9d3ff; border-radius: 12px; padding: 12px 14px; }
.ver-ejemplo { margin: -6px 0 18px; }
.ver-ejemplo a { font-weight: 700; color: var(--blue); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.ver-ejemplo a:hover { text-decoration: underline; }

/* Presentar */
.presentar { position: fixed; inset: 0; background: #000; z-index: 90; display: grid; place-items: center; }
.p-slide { width: min(100vw, calc(100vh * 16 / 9)); }
.p-slide .slide { border-radius: 0; }
.p-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 10px 16px; color: #8a90a0; font-size: .85rem; opacity: 0; transition: opacity .2s; }
.presentar:hover .p-bar { opacity: 1; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 100; font-weight: 600; max-width: calc(100% - 32px); }

#imprimir { display: none; }
@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  body * { visibility: hidden; }
  body { background: #fff; }
  #imprimir, #imprimir * { visibility: visible; }
  #imprimir { display: block; position: absolute; left: 0; top: 0; width: 13.333in; }
  #imprimir .slide { width: 13.333in; height: 7.5in; aspect-ratio: auto; border-radius: 0; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #imprimir .slide [contenteditable]:empty::before { content: none; }
}