/* RepitLearn — mobile-first. Paleta del demo: índigo #5B5FEF, coral #FF6B4A, carbón #0F1020. */
:root{
  color-scheme:light dark;
  --fondo:#F7F7FB;--sup:#fff;--sup-h:#ececf8;--borde:#e0e0f0;--borde-f:#c8c8e5;
  --tx:#1B1B2F;--tx2:#4d4d6e;--mut:#727299;--acc:#5B5FEF;--acc-h:#4a4edf;--acc-claro:#eeeffd;--coral:#FF6B4A;
  --play-bg:#f5fbf7;--play-bd:#22C55E;--play-tx:#14532d;--prog-bg:#e5ded2;
  --sombra:0 4px 10px -2px rgba(66,45,27,.06),0 2px 5px -2px rgba(66,45,27,.04);--sombra-g:0 16px 32px -6px rgba(45,30,18,.15);
  --tactil:64px;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#0F1020;--sup:#191a32;--sup-h:#232546;--borde:#2a2c54;--borde-f:#3b3e74;
  --tx:#F7F7FB;--tx2:#c0c2e2;--mut:#8789b5;--acc:#5B5FEF;--acc-h:#7377f4;--acc-claro:#23254b;
  --play-bg:#14281f;--play-bd:#22c55e;--play-tx:#86efac;--prog-bg:#27294d;
  --sombra:0 4px 12px -2px rgba(0,0,0,.45);--sombra-g:0 20px 35px -8px rgba(0,0,0,.7);
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;overflow-x:hidden;background:var(--fondo);color:var(--tx);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
#app{width:100%;max-width:520px;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.boot{padding:24px;color:var(--mut)}
code{background:var(--sup);padding:2px 6px;border-radius:6px}
h1,h2,h3{margin:0}
button,select,.big-btn{font:inherit;color:inherit;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background-color .15s,transform .08s,border-color .15s}
button:active{transform:scale(.97)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* Encabezado con logo */
header{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-height:56px}
.logo-container{background:none;gap:12px;padding:0;justify-content:flex-start}
.app-icon-badge{width:48px;height:48px;border-radius:14px;background:#0F1020;border:1.5px solid #5B5FEF;box-shadow:0 4px 12px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.app-icon-svg{width:100%;height:100%;display:block}
.logo-title{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;color:var(--tx);line-height:1.1}
/* Pantallas */
.screen{display:flex;flex-direction:column;flex:1;width:100%}
.screen-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.screen-title{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.screen-subtitle{font-size:.95rem;color:var(--tx2);margin-bottom:18px}
.title-center{flex:1;text-align:center;margin:0 4px}
.btn-icon{min-width:var(--tactil);min-height:var(--tactil);width:var(--tactil);height:var(--tactil);border-radius:18px;background:var(--sup);border:1.5px solid var(--borde);color:var(--tx);font-size:1.4rem;font-weight:700;box-shadow:var(--sombra);flex-shrink:0}
.btn-icon:hover{background:var(--sup-h);border-color:var(--acc)}
.btn-icon.add{color:var(--acc);font-size:1.8rem;line-height:1}
.btn-icon.ghost{visibility:hidden}
/* Categorías */
.categories-grid,.phrases-list{display:flex;flex-direction:column;gap:12px;padding-bottom:24px}
.category-btn{min-height:var(--tactil);padding:16px 20px;border-radius:18px;background:var(--sup);border:1.5px solid var(--borde);justify-content:space-between;box-shadow:var(--sombra);width:100%}
.category-btn:hover:not(:disabled){background:var(--sup-h);border-color:var(--acc)}
.category-btn:disabled{opacity:.55;cursor:not-allowed}
.category-left{display:flex;align-items:center;gap:16px;text-align:left}
.category-emoji{font-size:1.85rem;line-height:1;width:44px;text-align:center;flex-shrink:0}
.category-name{font-size:1.12rem;font-weight:700}
.category-counter{font-size:.8rem;color:var(--mut);margin-top:2px}
.category-badge-active,.category-badge-soon{font-size:.82rem;font-weight:700;padding:6px 14px;border-radius:20px;border:1px solid var(--borde);white-space:nowrap}
.category-badge-active{background:var(--acc-claro);color:var(--acc)}
.category-badge-soon{background:var(--sup-h);color:var(--mut)}
/* Frases */
.phrase-card-btn{min-height:84px;padding:18px 20px;border-radius:20px;background:var(--sup);border:1.5px solid var(--borde);justify-content:space-between;gap:16px;box-shadow:var(--sombra);width:100%;text-align:left}
.phrase-card-btn:hover{border-color:var(--acc);background:var(--sup-h)}
.phrase-card-body{flex:1}
.phrase-card-text{font-size:1.15rem;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.phrase-card-sub{font-size:.85rem;color:var(--mut);margin-top:4px}
.phrase-card-icon-box{width:48px;height:48px;border-radius:14px;background:#191a32;border:1.5px solid #2a2c54;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.phrase-card-icon-svg{width:26px;height:26px}
.empty{padding:24px 16px;text-align:center;color:var(--mut)}
.phrase-row{display:flex;gap:8px;align-items:stretch}
.phrase-row .phrase-card-btn{flex:1;width:auto;min-width:0}
.btn-del{width:56px;flex-shrink:0;border-radius:20px;background:var(--sup);border:1.5px solid var(--borde);font-size:1.2rem;box-shadow:var(--sombra)}
.btn-del:hover{border-color:var(--coral)}
/* Reproductor */
.phrase-preview{text-align:center;margin-bottom:20px;padding:0 6px}
.phrase-preview-text{font-size:1.4rem;font-weight:800;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.phrase-preview-hint{font-size:.85rem;color:var(--mut);margin-top:8px}
.main-player-button{width:100%;min-height:200px;border-radius:32px;background:var(--sup);border:3px solid var(--borde-f);flex-direction:column;gap:14px;padding:24px 20px;box-shadow:var(--sombra)}
.main-player-button.playing{background:var(--play-bg);border-color:var(--play-bd);box-shadow:0 0 0 3px rgba(34,197,94,.25),var(--sombra-g)}
.main-player-icon-box{width:84px;height:84px;border-radius:22px;background:#0F1020;border:2px solid var(--coral);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);overflow:hidden}
.main-player-button.playing .main-player-icon-box{border-color:#22c55e}
.arrow-loop-svg{width:62px;height:62px}
.arcs{transform-origin:50px 50px}
.main-player-button.playing .arcs{animation:spinLoop 4s linear infinite}
@keyframes spinLoop{to{transform:rotate(360deg)}}
.main-player-status{font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.main-player-button.playing .main-player-status{color:var(--play-tx)}
.main-player-time{font-size:.88rem;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
.loop-banner{margin:18px 0 20px;padding:12px 16px;border-radius:14px;background:var(--sup);border:1.5px solid var(--borde);font-size:.95rem;font-weight:600;color:var(--tx2);min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px}
.loop-banner.fragment{background:var(--play-bg);border-color:var(--play-bd);color:var(--play-tx);font-weight:800}
.mini-arrow-svg{width:20px;height:20px}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.btn-control{min-height:var(--tactil);padding:14px 16px;border-radius:18px;background:var(--sup);border:2px solid var(--borde);font-size:1.05rem;font-weight:700;box-shadow:var(--sombra)}
.btn-control:hover{border-color:var(--acc)}
.btn-control.active{border-color:var(--acc);background:var(--acc-claro);color:var(--acc)}
/* Tarjeta de audio */
.audio-card{margin-top:auto;padding:18px;border-radius:20px;background:var(--sup);border:1.5px solid var(--borde);display:flex;flex-direction:column;gap:12px}
.audio-card-head{font-size:.85rem;font-weight:700;color:var(--tx2);display:flex;justify-content:space-between;gap:8px}
.audio-card-badge{font-size:.75rem;color:var(--acc);font-weight:800}
.btn-choose-file{min-height:var(--tactil);border-radius:16px;background:var(--fondo);border:1.5px solid var(--borde);font-size:1rem;font-weight:700;width:100%;gap:8px}
.btn-choose-file:hover{background:var(--sup-h);border-color:var(--acc)}
.sel-label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mut)}
.select{min-height:48px;padding:8px 12px;border:1.5px solid var(--borde);border-radius:14px;background:var(--fondo);color:var(--tx);width:100%;justify-content:flex-start}
.file-status{font-size:.82rem;color:var(--mut);overflow-wrap:anywhere}
.upload-box{display:none;flex-direction:column;gap:6px;padding:12px 14px;background:var(--fondo);border-radius:14px;border:1.5px solid var(--borde)}
.upload-box.active{display:flex}
.upload-info{display:flex;justify-content:space-between;font-size:.88rem;font-weight:700;color:var(--acc)}
.upload-track{width:100%;height:10px;background:var(--prog-bg);border-radius:6px;overflow:hidden}
.upload-fill{height:100%;width:0;background:linear-gradient(90deg,#5B5FEF,#7d80f8);border-radius:6px}
/* Paneles (bottom sheet) */
.detail-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.65)}
.detail-overlay.active{display:flex}
.detail-panel{width:100%;max-width:520px;max-height:88vh;max-height:88dvh;background:var(--sup);border-radius:30px 30px 0 0;box-shadow:var(--sombra-g);display:flex;flex-direction:column;overflow:hidden;padding-bottom:max(20px,env(safe-area-inset-bottom));border-top:1.5px solid var(--borde)}
.drag-zone{touch-action:none;cursor:grab}
.panel-handle-area{width:100%;padding:14px 0 8px;display:flex;justify-content:center}
.panel-handle-bar{width:48px;height:5px;border-radius:3px;background:var(--borde-f)}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 22px 14px;border-bottom:1.5px solid var(--borde)}
.panel-title{font-size:1.25rem;font-weight:800}
.btn-close{width:46px;height:46px;border-radius:50%;background:var(--fondo);border:1px solid var(--borde);font-size:1.25rem;font-weight:700}
.panel-content{padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch}
.detail-card{background:var(--fondo);border:1.5px solid var(--borde);border-radius:18px;padding:16px 18px}
.detail-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:6px}
.d-main{font-size:1.3rem;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.d-pron{font-size:1.15rem;font-weight:600;color:var(--acc);font-style:italic;line-height:1.4}
.d-es{font-size:1.15rem;font-weight:600;line-height:1.4}
.expressions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.expression{padding:12px 14px;border-radius:14px;background:var(--sup);border:1px solid var(--borde);display:flex;flex-direction:column;gap:4px}
.expression b{font-size:1.05rem;font-weight:800}
.expression i{font-size:.92rem;font-weight:600;color:var(--acc)}
.expression span{font-size:.95rem;color:var(--tx2)}
.btn-replay{min-height:var(--tactil);width:100%;border-radius:18px;background:linear-gradient(135deg,#5B5FEF,#4246d0);color:#fff;font-size:1.1rem;font-weight:700;gap:10px;box-shadow:var(--sombra)}
.btn-replay:hover{filter:brightness(1.08)}
.video-slot[hidden]{display:none}
/* Formulario "+" */
.form{display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.88rem;font-weight:700}
.form-input,.form-textarea{width:100%;padding:14px 16px;border-radius:14px;background:var(--fondo);border:1.5px solid var(--borde);color:var(--tx);font:inherit}
.form-textarea{resize:vertical;min-height:70px}
.btn-submit{min-height:var(--tactil);border-radius:18px;background:var(--coral);color:#fff;font-size:1.1rem;font-weight:800;margin-top:10px;width:100%;box-shadow:var(--sombra)}
.btn-submit:hover{filter:brightness(1.08)}
@media (min-width:700px){#app{max-width:560px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}