:root{ --oro:#c5a059; --oro-claro:#e6c988; --negro:#0b0b0d; --negro2:#141416; --marron:#1c1712; --panel:#1a1712; --rojo:#7a1f2b; --azul:#0e2f4f; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;} html,body{ margin:0 !important; padding:0 !important; width:100%; min-height:100vh; min-height:-webkit-fill-available; height:100%; background-color:#000000 !important; font-family:Georgia,'Times New Roman',serif; color:#f1e6c9; overflow:hidden; position:fixed; inset:0; } #app{ width:100%; height:100%; position:relative; background-color:#000000; margin:0; padding:0; } .screen{ position:absolute; inset:0; width:100%; height:100%; display:none; flex-direction:column; opacity:0; transition:opacity .35s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; } .screen.active{ display:flex; opacity:1; } /* ---------- SPLASH ---------- */ #screen-splash{ align-items:center; justify-content:center; background:#000; cursor:pointer; transition:opacity .6s ease, transform .6s ease; will-change:opacity, transform; } #screen-splash .splash-foto{ position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; animation:fadeZoom 1.6s ease forwards; } /* Velo oscuro: la foto se ve, pero el texto dorado sigue legible encima */ #screen-splash .splash-velo{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.85) 100%); pointer-events:none; } #screen-splash .spinner, #screen-splash .tap-hint, #screen-splash .build-tag{ z-index:2; } #screen-splash .tap-hint{ text-shadow:0 2px 8px rgba(0,0,0,.9); } #screen-splash .tap-hint{ position:absolute; bottom:8%; width:100%; text-align:center; color:var(--oro); font-size:13px; letter-spacing:2px; opacity:0; animation:hintIn 1s ease 1.6s forwards, hintPulse 1.8s ease-in-out 2.4s infinite; } @keyframes fadeZoom{ from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} } @keyframes hintIn{ to{opacity:.85;} } @keyframes hintPulse{ 0%,100%{opacity:.85;} 50%{opacity:.4;} } .spinner{ position:absolute; bottom:16%; width:26px; height:26px; border:2px solid rgba(197,160,89,.25); border-top-color:var(--oro); border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin{ to{transform:rotate(360deg);} } .build-tag{ position:absolute; bottom:3%; width:100%; text-align:center; color:#6b5c3d; font-size:9.5px; letter-spacing:1px; } /* Transición fluida de salida del splash (paso 1/7) */ #screen-splash.exiting{ opacity:0; transform:scale(1.06); pointer-events:none; } #screen-splash.exiting .tap-hint, #screen-splash.exiting .spinner{ animation:none; opacity:0; transition:opacity .3s ease; } /* ---------- LOGIN ---------- */ #screen-login{ background:radial-gradient(ellipse at top, #1d1812 0%, #060505 75%); align-items:center; padding:40px 24px 30px; justify-content:flex-start; } #loginView, #registerView{ display:flex; flex-direction:column; align-items:center; width:100%; } .login-badge{ width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #2a2418, #0b0906); border:2px solid var(--oro); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(197,160,89,.12), 0 8px 24px rgba(0,0,0,.6); margin-top:6px; } .login-badge img{ width:118px; height:118px; object-fit:contain; border-radius:50%; } .login-title{ text-align:center; margin-top:14px; } .login-title h1{ font-size:24px; margin:0; letter-spacing:1px; color:var(--oro-claro); text-shadow:0 2px 8px rgba(0,0,0,.7); } .login-title span{ display:block; font-size:11px; letter-spacing:3px; color:#9c8a63; margin-top:4px; text-transform:uppercase; } .role-tabs{ display:flex; width:100%; max-width:360px; margin:26px 0 18px; background:rgba(255,255,255,.03); border:1px solid rgba(197,160,89,.3); border-radius:14px; padding:4px; gap:4px; } .role-tab{ flex:1; text-align:center; padding:10px 3px; border-radius:10px; font-size:10.5px; color:#b7a67e; cursor:pointer; letter-spacing:.2px; transition:.2s; } .role-tab.active{ background:linear-gradient(180deg, var(--oro-claro), var(--oro)); color:#221a0e; font-weight:bold; box-shadow:0 3px 10px rgba(197,160,89,.35); } .login-form{ width:100%; max-width:360px; } .field{ margin-bottom:16px; } .field label{ font-size:11px; color:#b7a67e; letter-spacing:1px; display:block; margin-bottom:6px; } .field input, .field select{ width:100%; padding:13px 14px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(197,160,89,.35); color:#f1e6c9; font-size:15px; font-family:inherit; outline:none; } .field input:focus{ border-color:var(--oro-claro); } .pass-wrap{ position:relative; } .pass-wrap input{ padding-right:44px !important; } .pass-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:16px; opacity:.55; user-select:none; line-height:1; transition:opacity .15s; } .pass-toggle.visible{ opacity:1; } .pass-toggle:active{ opacity:.85; } .btn-gold{ width:100%; padding:14px; border:none; border-radius:12px; background:linear-gradient(180deg, var(--oro-claro), var(--oro) 60%, #9c7c3e); color:#241c0d; font-weight:bold; font-size:15px; letter-spacing:1px; box-shadow:0 6px 16px rgba(197,160,89,.35), inset 0 1px 0 rgba(255,255,255,.4); cursor:pointer; font-family:inherit; } .btn-gold:active{ transform:translateY(2px); box-shadow:0 3px 8px rgba(197,160,89,.3); } .login-toggle{ margin-top:16px; text-align:center; font-size:12.5px; color:#9c8a63; } .login-toggle b{ color:var(--oro-claro); cursor:pointer; } .login-error{ color:#e08a8a; font-size:12px; text-align:center; margin-top:10px; min-height:14px; } .login-photos{ display:flex; gap:10px; justify-content:center; margin:18px 0 4px; opacity:.85; } .login-photos img{ width:52px; height:78px; object-fit:cover; border-radius:6px; border:1px solid rgba(197,160,89,.4); } .quick-access{ width:100%; max-width:360px; margin:18px 0 6px; } .quick-access-label{ font-size:10px; letter-spacing:1.5px; color:#a99568; text-align:center; margin-bottom:10px; display:flex; align-items:center; gap:8px; } .quick-access-label::before, .quick-access-label::after{ content:''; flex:1; height:1px; background:rgba(197,160,89,.3); } .quick-btns{ display:flex; flex-direction:column; gap:8px; } .quick-btn{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px; background:linear-gradient(180deg, rgba(197,160,89,.14), rgba(197,160,89,.05)); border:1px solid rgba(197,160,89,.4); color:#f1e6c9; cursor:pointer; font-size:13px; font-weight:bold; letter-spacing:.3px; } .quick-btn .qb-ico{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:rgba(197,160,89,.18); border:1px solid rgba(197,160,89,.4); display:flex; align-items:center; justify-content:center; font-size:14px; } .quick-btn:active{ transform:scale(.98); background:rgba(197,160,89,.2); } /* ---------- MAIN APP (con fondo Foto 3) ---------- */ #screen-main{ background:var(--negro2); } .main-bg-fixed{ position:fixed; inset:0; z-index:0; background-image:var(--main-bg-img); background-size:cover; background-position:center center; background-repeat:no-repeat; pointer-events:none; } .main-bg-fixed::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,4,3,.55) 0%, rgba(5,4,3,.75) 40%, rgba(5,4,3,.92) 100%); } .topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:14px 16px 12px; background:rgba(8,6,4,.72); backdrop-filter:blur(6px); border-bottom:1px solid rgba(197,160,89,.35); } .topbar img{ width:34px; height:34px; border-radius:50%; border:1px solid var(--oro); } .topbar .tb-title{ flex:1; } .topbar .tb-title b{ display:block; color:var(--oro-claro); font-size:15px; letter-spacing:.5px; } .topbar .tb-title small{ display:block; color:#a99568; font-size:10px; } .tb-icon{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(197,160,89,.12); border:1px solid rgba(197,160,89,.4); font-size:15px; cursor:pointer; } .main-content{ position:relative; z-index:2; padding:18px 16px 100px; } .welcome-line{ text-align:center; margin:6px 0 18px; } .welcome-line b{ color:var(--oro-claro); font-size:14px; } .welcome-line span{ display:block; font-size:11px; color:#c9b98e; margin-top:2px; } .grid-3d{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .folder-3d{ position:relative; border-radius:16px; padding:16px 12px; background:linear-gradient(155deg, #2a2013 0%, #17130c 60%, #0c0906 100%); border:1px solid rgba(197,160,89,.4); box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -6px 14px rgba(0,0,0,.4); display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; min-width:0; overflow:hidden; } @media (max-width:360px){ .grid-3d{ gap:10px; } .folder-3d{ padding:12px 6px; } .folder-3d .ico{ width:38px; height:38px; font-size:18px; } .folder-3d span{ font-size:11px; } .folder-3d small{ font-size:8.5px; } .role-tab{ font-size:9px; padding:9px 2px; } } .folder-3d:active{ transform:translateY(3px) scale(.98); box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); } .folder-3d .ico{ width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--oro-claro), var(--oro) 55%, #7c611f); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5); } .folder-3d span{ font-size:12.5px; color:#f1e6c9; text-align:center; letter-spacing:.3px; font-weight:bold; } .folder-3d small{ font-size:9.5px; color:#a99568; text-align:center; } .folder-3d .badge{ position:absolute; top:8px; right:8px; background:var(--rojo); color:#fff; font-size:9px; padding:2px 6px; border-radius:10px; font-weight:bold; } .bottombar{ position:fixed; bottom:0; left:0; right:0; z-index:6; display:flex; background:rgba(8,6,4,.9); backdrop-filter:blur(6px); border-top:1px solid rgba(197,160,89,.35); padding:8px 4px 10px; } .bb-item{ flex:1; text-align:center; color:#8f7c56; font-size:9.5px; cursor:pointer; } .bb-item .bi{ font-size:18px; display:block; margin-bottom:2px; } .bb-item.active{ color:var(--oro-claro); } /* ---------- SUBPANTALLAS (Asistencia, Repertorio, etc.) ---------- */ .sub-screen{ background:linear-gradient(180deg,#141117,#0a0908 60%); padding:0; } .sub-header{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:16px; padding-top:calc(16px + max(env(safe-area-inset-top), 20px)); background:rgba(10,8,6,.92); border-bottom:1px solid rgba(197,160,89,.35); } .back-btn{ width:44px; height:44px; border-radius:50%; background:rgba(197,160,89,.12); border:1px solid rgba(197,160,89,.4); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--oro-claro); cursor:pointer; flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .sub-header h2{ font-size:16px; color:var(--oro-claro); margin:0; letter-spacing:.5px; } .sub-body{ padding:16px; padding-bottom:60px; } .card{ background:rgba(255,255,255,.035); border:1px solid rgba(197,160,89,.25); border-radius:12px; padding:14px; margin-bottom:12px; } .card h3{ margin:0 0 4px; font-size:14.5px; color:var(--oro-claro); } .card p{ margin:0; font-size:12.5px; color:#c9bd9c; line-height:1.5; } .pill{ display:inline-block; font-size:10px; padding:3px 9px; border-radius:20px; background:rgba(197,160,89,.15); color:var(--oro-claro); border:1px solid rgba(197,160,89,.35); margin-top:6px; } .pill.ok{ background:rgba(90,160,90,.18); color:#a3d9a3; border-color:rgba(90,160,90,.4); } .pill.warn{ background:rgba(200,120,60,.18); color:#e0ad7d; border-color:rgba(200,120,60,.4); } .attend-options{ display:flex; gap:6px; margin-top:8px; } .attend-btn{ flex:1; padding:9px 4px; border-radius:10px; font-size:11px; font-weight:bold; text-align:center; font-family:inherit; cursor:pointer; border:1.5px solid transparent; color:#fff; } .attend-btn.ok{ background:rgba(90,160,90,.22); border-color:rgba(90,160,90,.5); color:#a3d9a3; } .attend-btn.ok.selected{ background:linear-gradient(180deg,#7bc47f,#4a9e50); color:#fff; border-color:#4a9e50; } .attend-btn.warn{ background:rgba(200,120,60,.22); border-color:rgba(200,120,60,.5); color:#e0ad7d; } .attend-btn.warn.selected{ background:linear-gradient(180deg,#e0ad7d,#c8783c); color:#241c0d; border-color:#c8783c; } .attend-btn.danger{ background:rgba(180,60,60,.22); border-color:rgba(180,60,60,.5); color:#e08a8a; } .attend-btn.danger.selected{ background:linear-gradient(180deg,#d98a8a,#a94a4a); color:#fff; border-color:#a94a4a; } .attend-btn:active{ transform:scale(.96); } .list-row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid rgba(197,160,89,.14); cursor:pointer; } .list-row .lr-ico{ width:38px; height:38px; border-radius:10px; background:rgba(197,160,89,.12); border:1px solid rgba(197,160,89,.35); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .list-row .lr-text{ flex:1; } .list-row .lr-text b{ font-size:13.5px; color:#f1e6c9; display:block; } .list-row .lr-text small{ font-size:11px; color:#a99568; } .list-row .lr-arrow{ color:#8f7c56; font-size:14px; } .search-box{ width:100%; padding:11px 14px; border-radius:10px; margin-bottom:14px; background:rgba(255,255,255,.04); border:1px solid rgba(197,160,89,.35); color:#f1e6c9; font-size:13.5px; font-family:inherit; outline:none; } /* ===== CALENDARIO DE ASISTENCIA — días con/sin evento ===== */ .cal-day{ position:relative; aspect-ratio:1; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#f1e6c9; transition:transform .12s ease, filter .12s ease; -webkit-tap-highlight-color:transparent; } /* Día SIN evento: bloqueo total — ni cambia de color, ni abre nada, ni reacciona al tacto de ninguna forma, para NINGÚN rol (Superadmin incluido). pointer-events:none con !important desactiva TODA interacción de puntero (clic, touch, :hover, :active) a nivel de navegador, no solo el onclick del JS. Tono liso, oscuro/gris, sin bordes ni colores vivos, opacidad muy reducida. */ .cal-day-vacio{ background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.05) !important; color:#544a37 !important; text-decoration:line-through; opacity:0.25 !important; filter:grayscale(1); box-shadow:none !important; cursor:not-allowed !important; pointer-events:none !important; user-select:none !important; } /* Día CON evento pero no interactuable para este rol/fecha ahora mismo (p.ej. un músico viendo un ensayo futuro, o Comité viendo un día que no es hoy): se ve claramente que hay algo, pero tampoco reacciona al tacto. */ .cal-day-evento-bloqueado{ cursor:not-allowed !important; pointer-events:none !important; filter:saturate(.65); } /* Día CON evento y SÍ interactuable: el único que responde al toque — resaltado limpio, sin puntos ni badges, con fondo/borde de color vivo propio del estado y sombra de realce. pointer-events:auto explícito, aunque es el valor por defecto, para que quede inequívoco que estos SÍ reciben el toque. */ .cal-day-evento{ cursor:pointer; pointer-events:auto; border-width:2.5px !important; box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 3px 8px rgba(0,0,0,.5), 0 0 16px 1px var(--glow-color, rgba(197,160,89,.6)); } .cal-day-evento:active{ transform:scale(0.90); filter:brightness(1.25) saturate(1.3); } /* QR */ .qr-wrap{ display:flex; flex-direction:column; align-items:center; padding:10px 0 20px; } .qr-box{ width:200px; height:200px; background:#fff; border-radius:14px; padding:12px; box-shadow:0 10px 26px rgba(0,0,0,.5); margin-bottom:14px; } .qr-name{ color:var(--oro-claro); font-size:16px; font-weight:bold; } .qr-sub{ color:#a99568; font-size:12px; margin-top:2px; } .scan-frame{ width:220px; height:220px; border-radius:16px; margin:10px auto 18px; border:2px solid var(--oro); position:relative; overflow:hidden; background:rgba(197,160,89,.06); display:flex; align-items:center; justify-content:center; color:#8f7c56; font-size:12px; } .scan-line{ position:absolute; left:6%; width:88%; height:2px; background:var(--oro-claro); box-shadow:0 0 8px var(--oro-claro); top:0; animation:scanmove 1.8s ease-in-out infinite; } @keyframes scanmove{ 0%{top:4%;} 50%{top:92%;} 100%{top:4%;} } /* Escáner QR a pantalla completa (móvil) */ .scanner-overlay{ display:none; position:fixed; inset:0; z-index:999; background:#000; flex-direction:column; align-items:center; justify-content:center; } .scanner-overlay.active{ display:flex; } .scanner-overlay video, .scanner-overlay #scannerVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; } .scanner-overlay #scannerVideo video, .scanner-overlay #scannerVideo canvas{ width:100% !important; height:100% !important; object-fit:cover; } .scanner-topbar{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:16px 18px; padding-top:calc(16px + env(safe-area-inset-top)); color:#f1e6c9; font-weight:bold; font-size:14px; background:linear-gradient(180deg, rgba(0,0,0,.65), transparent); } .scanner-close{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; } .scanner-guide{ position:relative; z-index:2; width:min(70vw,280px); height:min(70vw,280px); } .scanner-guide .corner{ position:absolute; width:34px; height:34px; border:3px solid var(--oro-claro); } .scanner-guide .tl{ top:0; left:0; border-right:none; border-bottom:none; border-top-left-radius:12px; } .scanner-guide .tr{ top:0; right:0; border-left:none; border-bottom:none; border-top-right-radius:12px; } .scanner-guide .bl{ bottom:0; left:0; border-right:none; border-top:none; border-bottom-left-radius:12px; } .scanner-guide .br{ bottom:0; right:0; border-left:none; border-top:none; border-bottom-right-radius:12px; } .scanner-guide .scan-line{ position:absolute; left:4%; width:92%; height:2px; background:var(--oro-claro); box-shadow:0 0 10px var(--oro-claro); top:4%; margin:0; animation:scanmove 1.8s ease-in-out infinite; } .scanner-hint{ position:relative; z-index:2; color:#f1e6c9; font-size:12.5px; margin-top:18px; text-align:center; padding:0 30px; } .scanner-confirm{ position:relative; z-index:2; width:min(80vw,320px); margin-top:22px; } .scan-success-overlay{ position:absolute; inset:0; z-index:10; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(15,60,30,.94); animation:scanSuccessFade .25s ease; } .scan-success-overlay.show{ display:flex; } .scan-success-overlay.expirado{ background:rgba(90,20,20,.94); } .scan-success-overlay.expirado .scan-success-check{ background:#b43c3c; box-shadow:0 0 0 8px rgba(180,60,60,.25); } .scan-success-overlay.expirado .scan-success-title{ color:#ffd7d7; } .scan-success-overlay.expirado .scan-success-detail{ color:#ffbdbd; } .scan-success-check{ width:96px; height:96px; border-radius:50%; background:#3fae5c; color:#fff; font-size:52px; line-height:96px; text-align:center; box-shadow:0 0 0 8px rgba(63,174,92,.25); animation:scanSuccessPop .35s cubic-bezier(.34,1.56,.64,1); } .scan-success-title{ color:#eafff0; font-size:19px; font-weight:bold; margin:4px 0 0; } .scan-success-detail{ color:#c9f0d5; font-size:14px; text-align:center; padding:0 24px; } @keyframes scanSuccessFade{ from{opacity:0;} to{opacity:1;} } @keyframes scanSuccessPop{ from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;} } .attend-log{ width:100%; } .attend-log .list-row{ cursor:default; } /* Repertorio detalle */ .voice-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; margin:4px 4px 4px 0; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(197,160,89,.3); font-size:12px; color:#e6d9b3; cursor:pointer; } .voice-chip.mine{ border-color:var(--oro-claro); background:rgba(197,160,89,.18); font-weight:bold; } .pdf-viewer{ margin-top:14px; border-radius:12px; overflow:hidden; border:1px solid rgba(197,160,89,.35); background:#efe6d0; } .pdf-page{ padding:26px 20px; color:#3a3220; min-height:260px; } .pdf-page h4{ text-align:center; font-size:15px; margin:0 0 16px; letter-spacing:1px; border-bottom:2px solid #3a3220; padding-bottom:10px;} .staff-line{ height:1px; background:#7d7256; margin:16px 0; position:relative; } .staff-line::before{ content:'𝄞'; position:absolute; left:0; top:-22px; font-size:26px; color:#3a3220;} .audio-player{ margin-top:14px; background:rgba(255,255,255,.04); border:1px solid rgba(197,160,89,.3); border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px; } .play-btn{ width:42px; height:42px; border-radius:50%; background:var(--oro); color:#241c0d; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0; } .progress-track{ flex:1; height:5px; background:rgba(255,255,255,.12); border-radius:4px; overflow:hidden; } .progress-fill{ height:100%; width:0%; background:var(--oro-claro); transition:width .2s linear; } .audio-time{ font-size:10.5px; color:#a99568; min-width:64px; text-align:right; } @keyframes pulseband{ 0%,100%{box-shadow:0 0 0 0 rgba(230,201,136,.6);} 50%{box-shadow:0 0 0 10px rgba(230,201,136,0);} } .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; } /* Tablón */ .tag{ display:inline-block; font-size:9.5px; padding:2px 8px; border-radius:8px; margin-bottom:6px; } .tag.urgente{ background:rgba(180,60,60,.25); color:#f0a3a3; } .tag.info{ background:rgba(90,140,190,.25); color:#a3c9f0; } /* Formulario */ .form-block{ margin-top:6px; } textarea{ width:100%; padding:12px 14px; border-radius:10px; min-height:90px; resize:vertical; background:rgba(255,255,255,.04); border:1px solid rgba(197,160,89,.35); color:#f1e6c9; font-size:13.5px; font-family:inherit; outline:none; } .file-drop{ border:1.5px dashed rgba(197,160,89,.5); border-radius:12px; padding:22px 12px; text-align:center; color:#a99568; font-size:12.5px; margin-top:6px; cursor:pointer; } .file-drop.has-file{ border-style:solid; color:var(--oro-claro); } /* Toast */ #toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:rgba(20,16,10,.95); color:var(--oro-claro); border:1px solid var(--oro); padding:12px 20px; border-radius:30px; font-size:13px; z-index:999; opacity:0; transition:.3s; pointer-events:none; box-shadow:0 8px 20px rgba(0,0,0,.5); max-width:86%; text-align:center; } #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* Modal */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:50; display:none; align-items:flex-end; justify-content:center; } .modal-overlay.active{ display:flex; } .modal-sheet{ width:100%; max-width:480px; background:#151109; border-top-left-radius:22px; border-top-right-radius:22px; border:1px solid rgba(197,160,89,.4); border-bottom:none; padding:20px 18px 26px; max-height:82vh; overflow-y:auto; animation:sheetUp .25s ease; } @keyframes sheetUp{ from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;} } .modal-handle{ width:40px; height:4px; background:rgba(197,160,89,.5); border-radius:4px; margin:0 auto 16px; } .modal-sheet h3{ color:var(--oro-claro); margin:0 0 14px; font-size:16px; text-align:center; } h2,h3,h4{ font-family:Georgia,serif; } ::-webkit-scrollbar{ width:0; } /* ---------- ADMIN (Dirección / Comité de Banda) ---------- */ .admin-only{ display:none !important; } body.admin-mode .admin-only{ display:flex !important; } body.admin-mode .admin-only.block{ display:block !important; } body.admin-mode .admin-only.inline{ display:inline-flex !important; } .direccion-only{ display:none !important; } body.role-direccion .direccion-only{ display:flex !important; } body.role-direccion .direccion-only.block{ display:block !important; } .mayordomia-only{ display:none !important; } body.role-mayordomia .mayordomia-only{ display:flex !important; } body.role-mayordomia .mayordomia-only.block{ display:block !important; } body.role-direccion .mayordomia-only{ display:flex !important; } body.role-direccion .mayordomia-only.block{ display:block !important; } /* Escolta: mismos permisos que Músico, salvo Repertorio (sin partituras) */ body.role-escolta .sin-repertorio-escolta{ display:none !important; } /* Multirrol Universal: Vista Músico oculta todos los paneles de gestión sin cambiar el rol real */ body.vista-musico .admin-only, body.vista-musico .direccion-only, body.vista-musico .mayordomia-only{ display:none !important; } .not-musico-only{ display:none; } body.role-jefe .not-musico-only, body.role-mayordomia .not-musico-only, body.role-direccion .not-musico-only{ display:flex; } .vista-toggle{ display:flex; gap:8px; margin:14px 0; } .vt-btn{ flex:1; text-align:center; padding:10px 6px; border-radius:10px; font-size:11px; font-weight:bold; letter-spacing:.3px; border:1.5px solid rgba(197,160,89,.4); color:#b7a67e; cursor:pointer; transition:.2s; } .vt-btn.active{ background:linear-gradient(180deg, var(--oro-claro), var(--oro)); color:#221a0e; box-shadow:0 3px 10px rgba(197,160,89,.35); } .admin-tag{ display:inline-block; font-size:9px; letter-spacing:1px; padding:2px 8px; border-radius:8px; background:rgba(122,31,43,.28); color:#f0a3a3; border:1px solid rgba(122,31,43,.5); margin-left:6px; vertical-align:middle; } .fab-add{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border-radius:12px; margin-bottom:16px; background:linear-gradient(180deg, rgba(197,160,89,.22), rgba(197,160,89,.08)); border:1.5px dashed rgba(197,160,89,.55); color:var(--oro-claro); font-size:13.5px; font-weight:bold; letter-spacing:.5px; cursor:pointer; } .fab-add:active{ transform:scale(.98); } .row-actions{ display:flex; gap:6px; flex-shrink:0; } .mini-btn{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; border:1px solid rgba(197,160,89,.35); background:rgba(255,255,255,.04); color:#e6d9b3; } .mini-btn.danger{ border-color:rgba(180,60,60,.5); color:#e08a8a; background:rgba(180,60,60,.1); } .mini-btn:active{ transform:scale(.92); } .form-actions{ display:flex; gap:10px; margin-top:6px; } .form-actions .btn-gold{ flex:1; } /* ---------- ENCUESTAS ---------- */ .enc-banner{ display:none; align-items:center; gap:10px; cursor:pointer; background:linear-gradient(155deg, rgba(197,160,89,.22), rgba(122,31,43,.18)); border:1px solid rgba(197,160,89,.5); border-radius:14px; padding:12px 14px; margin:0 0 16px; font-size:12.5px; color:#f1e6c9; box-shadow:0 6px 16px rgba(0,0,0,.35); animation:pulseband 2.4s infinite; } .enc-banner .enc-banner-ico{ font-size:20px; flex-shrink:0; } .enc-banner b{ color:var(--oro-claro); } /* ---------- BANNER DE PERMISO DE NOTIFICACIONES ---------- */ .notif-permiso-banner{ display:flex; align-items:center; gap:12px; background:linear-gradient(155deg, rgba(90,140,190,.22), rgba(197,160,89,.15)); border:1px solid rgba(90,140,190,.5); border-radius:14px; padding:12px 14px; margin:0 0 16px; font-size:12px; color:#f1e6c9; box-shadow:0 6px 16px rgba(0,0,0,.35); } .notif-permiso-banner p{ margin:4px 0 0; color:#c9bd9c; font-size:11px; line-height:1.4; } .enc-option-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px; border:1px solid rgba(197,160,89,.3); border-radius:10px; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .enc-option-row:active{ background:rgba(197,160,89,.1); } .enc-option-row input{ width:auto; accent-color:var(--oro); } .enc-option-row span{ font-size:12.5px; color:#f1e6c9; } .enc-opt-input-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; } .enc-opt-input-row input{ flex:1; } .enc-bar-row{ margin:10px 0; } .enc-bar-label{ display:flex; justify-content:space-between; font-size:12px; color:#f1e6c9; margin-bottom:4px; } .enc-bar-label small{ color:#a99568; } .enc-bar-track{ width:100%; height:10px; border-radius:6px; background:rgba(197,160,89,.15); overflow:hidden; } .enc-bar-fill{ height:100%; background:linear-gradient(90deg,var(--oro),var(--oro-claro)); border-radius:6px; transition:width .4s ease; } .enc-filter-row{ display:flex; gap:8px; margin-bottom:14px; } .enc-filter-row select{ flex:1; } body.light-mode .enc-option-row{ border-color:rgba(107,79,29,.3); } body.light-mode .enc-option-row span{ color:#3a3220; } body.light-mode .enc-bar-label{ color:#3a3220; } /* ---------- ALMACÉN / STOCK (Mayordomía) ---------- */ .stock-table-wrap{ overflow-x:auto; margin-top:6px; } .stock-table{ width:100%; border-collapse:collapse; font-size:11.5px; min-width:420px; } .stock-table th{ text-align:left; color:#a99568; font-weight:normal; padding:8px 6px; border-bottom:1px solid rgba(197,160,89,.3); font-size:10px; text-transform:uppercase; letter-spacing:.5px; } .stock-table td{ padding:9px 6px; border-bottom:1px solid rgba(197,160,89,.14); color:#f1e6c9; } .stock-table td.stock-low{ color:#e08a8a; font-weight:bold; } body.light-mode .stock-table td{ color:#3a3220; } body.light-mode .stock-table th{ color:#6b5c3d; } .stock-card{ padding:14px; } .stock-card-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; } .stock-card-title{ display:flex; align-items:center; gap:6px; font-size:13px; color:#f1e6c9; } .stock-expand-arrow{ color:var(--oro-claro); font-size:11px; } .stock-card-summary{ display:flex; gap:12px; align-items:center; font-size:10.5px; color:#a99568; flex-wrap:wrap; } .stock-card-summary .stock-low{ color:#e08a8a; font-weight:bold; } .talla-breakdown{ margin-top:12px; padding-top:10px; border-top:1px dashed rgba(197,160,89,.25); } .talla-input{ width:52px; padding:5px 4px; text-align:center; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(197,160,89,.35); color:#f1e6c9; font-family:inherit; font-size:11.5px; } .talla-input:disabled{ opacity:.4; } body.light-mode .stock-card-title{ color:#3a3220; } body.light-mode .talla-input{ color:#3a3220; } .btn-outline{ width:100%; padding:13px; border-radius:12px; text-align:center; font-size:14px; font-weight:bold; background:transparent; border:1.5px solid rgba(197,160,89,.45); color:var(--oro-claro); cursor:pointer; font-family:inherit; } .switch{ width:44px; height:24px; border-radius:14px; background:rgba(255,255,255,.15); position:relative; cursor:pointer; flex-shrink:0; border:1px solid rgba(197,160,89,.4); } .switch.on{ background:var(--oro); } .switch .knob{ position:absolute; top:1px; left:1px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.4); } .switch.on .knob{ left:21px; } .dl-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px; font-size:11.5px; font-weight:bold; border:1.5px solid rgba(197,160,89,.45); color:var(--oro-claro); background:transparent; text-decoration:none; font-family:inherit; cursor:pointer; } .dl-btn.locked{ opacity:.42; cursor:not-allowed; border-style:dashed; } body.light-mode .dl-btn{ color:#6b4f1d; } .month-nav{ display:flex; align-items:center; gap:8px; margin-bottom:16px; } .month-nav-btn{ flex-shrink:0; padding:9px 12px; border-radius:10px; font-size:11.5px; font-weight:bold; background:rgba(197,160,89,.12); border:1px solid rgba(197,160,89,.4); color:var(--oro-claro); cursor:pointer; white-space:nowrap; } .month-nav-btn:active{ transform:scale(.96); } .month-nav-select{ flex:1; display:flex; gap:6px; } .month-nav-select select{ flex:1; padding:9px 8px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(197,160,89,.35); color:#f1e6c9; font-size:12px; font-family:inherit; outline:none; } /* ---------- MODO CLARO (ajustable desde Ajustes) ---------- */ body.light-mode{ background:#f3ede0; color:#3a3220; } body.light-mode #screen-splash{ background:#000; } body.light-mode #screen-login{ background:radial-gradient(ellipse at top,#eee3c8 0%,#d8cba8 75%); } body.light-mode .login-title h1{ color:#6b4f1d; } body.light-mode .login-title span{ color:#7a6a45; } body.light-mode .field input, body.light-mode .field select, body.light-mode textarea, body.light-mode .search-box{ background:rgba(0,0,0,.04); color:#3a3220; border-color:rgba(107,79,29,.35); } body.light-mode .sub-screen{ background:linear-gradient(180deg,#f3ede0,#e8dcc0 60%); } body.light-mode .sub-header{ background:rgba(243,237,224,.94); border-bottom-color:rgba(107,79,29,.3); } body.light-mode .sub-header h2{ color:#6b4f1d; } body.light-mode .back-btn{ color:#6b4f1d; background:rgba(107,79,29,.1); border-color:rgba(107,79,29,.3); } body.light-mode .card{ background:rgba(0,0,0,.03); border-color:rgba(107,79,29,.25); } body.light-mode .card h3{ color:#6b4f1d; } body.light-mode .card p{ color:#5a5138; } body.light-mode .list-row .lr-text b{ color:#3a3220; } body.light-mode .list-row{ border-bottom-color:rgba(107,79,29,.15); } body.light-mode .topbar{ background:rgba(243,237,224,.9); border-bottom-color:rgba(107,79,29,.3); } body.light-mode .topbar .tb-title b{ color:#6b4f1d; } body.light-mode .bottombar{ background:rgba(243,237,224,.94); border-top-color:rgba(107,79,29,.3); } body.light-mode .folder-3d{ background:linear-gradient(155deg,#fff9ea,#eee0c0 60%,#e0d1a8); border-color:rgba(107,79,29,.35); } body.light-mode .folder-3d span{ color:#3a3220; } body.light-mode .modal-sheet{ background:#f3ede0; border-color:rgba(107,79,29,.35); } body.light-mode .modal-sheet h3{ color:#6b4f1d; }
/* ---------- AJUSTES VISUALES 09/10 ---------- */
/* Login: separación entre el subtítulo "BANDA DE CORNETAS Y TAMBORES" y el campo de correo (antes se tocaban). */
.login-title{ margin-bottom:26px; }
/* Aviso emergente: se sube por encima de la barra inferior (antes la tapaba en la pantalla de inicio). */
#toast{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Marco decorativo de Control de Asistencia: la raya queda quieta (el escáner real se abre con el botón) */
#scanFrame .scan-line{ animation:none; top:14%; opacity:.35; }

/* =========================================================
   NUEVA IMAGEN 09/10 — Login + Inicio (solo aspecto; no cambia ninguna función)
   ========================================================= */
#screen-main, #screen-login{ font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ---- Barra superior ---- */
.topbar .tb-title b{ font-family:'Cormorant Garamond', Georgia, serif; font-size:21px; font-weight:700; letter-spacing:.3px; }
.topbar .tb-title small{ font-size:11.5px; }
.tb-icon{ width:42px; height:42px; background:linear-gradient(160deg, rgba(236,214,156,.16), rgba(197,160,89,.06)); border:1px solid rgba(236,214,156,.45); color:var(--oro-claro); box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.tb-icon svg{ width:20px; height:20px; }

/* ---- Tarjeta de bienvenida / próxima cita ---- */
body:not(.light-mode) .welcome-line{ text-align:left; position:relative; margin:4px 0 20px; padding:18px 18px 16px; border-radius:22px; border:1px solid rgba(236,214,156,.5); background:radial-gradient(130% 120% at 100% 0%, #5a2030 0%, #2b1217 38%, #120d0b 85%); box-shadow:0 16px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(236,214,156,.22); }
body:not(.light-mode) .welcome-line b{ display:block; font-family:'Cormorant Garamond', Georgia, serif; font-size:29px; line-height:1.05; font-weight:700; color:#f6ecd2; }
body:not(.light-mode) .welcome-line b span{ display:inline; font-size:inherit; color:var(--oro-claro); margin:0; }
body:not(.light-mode) .welcome-line > span{ font-size:13.5px; color:#d6c8a6; margin-top:8px; }
.hero-qr{ margin-top:16px; width:100%; height:52px; border:0; border-radius:14px; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:.1em; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; box-shadow:0 8px 24px rgba(212,175,106,.28), inset 0 1px 0 rgba(255,255,255,.45); }
.hero-qr svg{ width:20px; height:20px; }
.hero-qr:active{ transform:translateY(2px); }
body.light-mode .welcome-line{ padding:14px 16px; }

/* ---- Carpetas del inicio ---- */
.grid-3d{ gap:12px; }
body:not(.light-mode) .grid-3d .folder-3d{ align-items:flex-start; text-align:left; gap:10px; padding:14px 14px 15px; min-height:128px; border-radius:20px; border:1px solid rgba(236,214,156,.38); background:radial-gradient(120% 90% at 0% 0%, #34261b 0%, #18110d 58%, #100b09 100%); box-shadow:0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(236,214,156,.18); }
.grid-3d .folder-3d .wm{ position:absolute; right:-16px; bottom:-18px; width:104px; height:104px; stroke:#ecd69c; stroke-width:1; opacity:.09; pointer-events:none; z-index:0; }
.grid-3d .folder-3d .ico{ position:relative; z-index:1; width:46px; height:46px; background:linear-gradient(145deg,#f6e6b4,#b88d46); box-shadow:0 6px 14px rgba(212,175,106,.3), inset 0 1px 0 rgba(255,255,255,.55); }
.grid-3d .folder-3d .ico svg{ width:24px; height:24px; stroke:#2a1c0c; stroke-width:1.8; }
.grid-3d .folder-3d > span, .grid-3d .folder-3d > small, .grid-3d .folder-3d .ft{ position:relative; z-index:1; text-align:left; }
body:not(.light-mode) .grid-3d .folder-3d > span, body:not(.light-mode) .grid-3d .folder-3d .ft span{ font-family:'Cormorant Garamond', Georgia, serif; font-size:21px; line-height:1.05; font-weight:700; letter-spacing:0; color:#f6ecd2; }
.grid-3d .folder-3d > small, .grid-3d .folder-3d .ft small{ font-size:12px; color:#b3a584; margin-top:-4px; }
.grid-3d .folder-3d .ft{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.grid-3d .folder-3d .ft small{ margin-top:0; display:block; }
.grid-3d .folder-3d .badge{ z-index:2; top:12px; right:12px; min-width:24px; height:24px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0 7px; border-radius:99px; font-size:12px; background:linear-gradient(180deg,#e0645b,#b0332c); box-shadow:0 3px 8px rgba(176,51,44,.5); }
.grid-3d .folder-3d .badge[style*="display:none"], .grid-3d .folder-3d .badge[style*="display: none"]{ display:none !important; }

/* Gestión (Dirección / Mayordomía): tono burdeos */
body:not(.light-mode) .grid-3d .folder-gestion{ border-color:rgba(214,150,150,.45); background:radial-gradient(120% 90% at 0% 0%, #4d1c26 0%, #1e0f12 60%, #120a0c 100%); }
/* Mayordomía: tarjeta ancha */
.grid-3d .folder-wide, .grid-3d .folder-perfil{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:16px; padding:18px; min-height:0; }
.grid-3d .folder-wide .ico{ width:58px; height:58px; flex-shrink:0; }
.grid-3d .folder-wide .ico svg{ width:30px; height:30px; }
body:not(.light-mode) .grid-3d .folder-wide .ft span{ font-size:26px; }
.grid-3d .folder-perfil .ico{ width:46px; height:46px; }
.grid-3d .folder-wide .wm{ width:140px; height:140px; right:-24px; bottom:-34px; }
.grid-3d .folder-wide .chev{ position:relative; z-index:1; width:20px; height:20px; color:var(--oro-claro); flex-shrink:0; }
/* Mi Perfil: fila ancha */
.grid-3d .folder-perfil{ flex-direction:row; align-items:center; gap:16px; padding:14px 18px; min-height:0; }
.grid-3d .folder-perfil .chev{ position:relative; z-index:1; width:20px; height:20px; color:var(--oro-claro); flex-shrink:0; }
body:not(.light-mode) .grid-3d .folder-perfil .ft span{ font-size:23px; }
.grid-3d .folder-perfil .wm{ width:90px; height:90px; }

/* ---- Barra inferior ---- */
.bottombar{ padding:10px 4px calc(10px + env(safe-area-inset-bottom, 0px)); }
.bb-item{ font-size:11px; font-weight:600; }
.bb-item .bi{ display:flex; justify-content:center; margin-bottom:3px; }
.bb-item .bi svg{ width:24px; height:24px; }
.bb-item.active{ font-weight:700; }
.bb-item.bb-qr .bi{ width:50px; height:50px; margin:-22px auto 3px; border-radius:50%; align-items:center; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; border:4px solid #0c0a09; box-shadow:0 6px 20px rgba(212,175,106,.35); box-sizing:border-box; }
.bb-item.bb-qr .bi svg{ width:24px; height:24px; }
.bb-item.bb-qr{ color:var(--oro-claro); }

/* ---- Login ---- */
#screen-login{ background:radial-gradient(90% 45% at 50% 16%, #3a1a1f 0%, #1a110e 45%, #0a0807 80%); }
.login-badge{ width:140px; height:140px; padding:3px; box-sizing:border-box; background:linear-gradient(150deg,#ecd69c,#6b4e22 50%,#d4af6a); border:0; box-shadow:0 0 60px rgba(212,175,106,.22), 0 8px 24px rgba(0,0,0,.6); margin-top:34px; }
.login-badge img{ width:100%; height:100%; border:4px solid #0c0a09; box-sizing:border-box; background:#f2e8d0; }
.login-title h1{ font-family:'Cormorant Garamond', Georgia, serif; font-size:40px; font-weight:700; line-height:1; letter-spacing:.5px; }
.login-title span{ font-size:11.5px; font-weight:600; letter-spacing:.3em; }
.login-title{ margin-bottom:34px; }
.field label{ font-size:12px; font-weight:700; letter-spacing:.12em; color:#a39478; }
.field input, .field select{ height:54px; padding:0 16px; border-radius:14px; background:#14100d; border:1px solid #3a2f24; font-size:16px; }
.field input:focus, .field select:focus{ border-color:var(--oro-claro); box-shadow:0 0 0 3px rgba(212,175,106,.15); }
#screen-login .btn-gold{ height:56px; border-radius:14px; font-size:15px; font-weight:700; letter-spacing:.14em; background:linear-gradient(180deg,#ecd69c,#c59d52); box-shadow:0 8px 28px rgba(212,175,106,.28), inset 0 1px 0 rgba(255,255,255,.45); margin-top:6px; }
.login-toggle{ font-size:14px; color:#a39478; margin-top:18px; }
/* Ajuste de prioridad para las tarjetas anchas (Mayordomía y Mi Perfil) */
body .grid-3d .folder-3d.folder-wide, body .grid-3d .folder-3d.folder-perfil{ flex-direction:row; align-items:center; gap:16px; min-height:0; }
body .grid-3d .folder-3d.folder-wide{ padding:18px; }
body .grid-3d .folder-3d.folder-perfil{ padding:14px 18px; }
.grid-3d .folder-3d .ft span, .grid-3d .folder-3d .ft small{ text-align:left; }

/* =========================================================
   NUEVA IMAGEN 09/10 (fase 2) — pantallas interiores, mismo estilo que el Inicio
   Solo aspecto. Todo cuelga de .sub-screen y no afecta al modo claro (body.light-mode).
   ========================================================= */
.sub-screen{ font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body:not(.light-mode) .sub-screen{ background:radial-gradient(120% 40% at 50% 0%, #2a1a14 0%, #0c0a09 70%); }
body:not(.light-mode) #screen-main .main-bg-fixed::after{ background:linear-gradient(180deg, rgba(8,6,5,.86) 0%, rgba(8,6,5,.93) 45%, rgba(8,6,5,.97) 100%); }

/* Cabecera de cada pantalla */
.sub-header{ background:transparent; border-bottom:0; gap:12px; padding-bottom:6px; }
body:not(.light-mode) .sub-header{ background:linear-gradient(180deg, rgba(12,10,9,.96), rgba(12,10,9,.7)); backdrop-filter:blur(6px); }
.sub-header h2{ font-family:'Cormorant Garamond', Georgia, serif; font-size:28px; font-weight:600; line-height:1.05; letter-spacing:0; }
.back-btn{ width:44px; height:44px; font-size:26px; line-height:1; padding-bottom:3px; box-sizing:border-box; }
body:not(.light-mode) .back-btn{ background:#16120f; border:1px solid #3a2f24; color:#d4af6a; }
.sub-body{ padding:14px 20px 70px; }

/* Tarjetas */
body:not(.light-mode) .sub-body .card{ border-radius:20px; border:1px solid rgba(236,214,156,.38); background:radial-gradient(120% 90% at 0% 0%, #2e2118 0%, #17110d 60%, #100b09 100%); box-shadow:0 12px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(236,214,156,.16); padding:16px; margin-bottom:14px; }
.sub-body .card h3{ font-family:'Cormorant Garamond', Georgia, serif; font-size:22px; font-weight:700; line-height:1.1; margin:0 0 6px; }
body:not(.light-mode) .sub-body .card h3{ color:#f6ecd2; }
.sub-body .card p{ font-size:14px; line-height:1.5; }

/* Filas de lista */
.list-row{ padding:14px 4px; gap:14px; min-height:48px; }
.list-row .lr-text b{ font-size:16px; font-weight:700; }
body:not(.light-mode) .list-row .lr-text b{ color:#f6ecd2; }
.list-row .lr-text small{ font-size:13px; display:block; margin-top:2px; }
body:not(.light-mode) .list-row .lr-ico{ width:44px; height:44px; border-radius:50%; border:0; background:linear-gradient(145deg,#f6e6b4,#b88d46); box-shadow:0 4px 10px rgba(212,175,106,.25); }

/* Botones y campos */
.btn-gold{ border-radius:14px; padding:16px; background:linear-gradient(180deg,#ecd69c,#c59d52); box-shadow:0 8px 24px rgba(212,175,106,.25), inset 0 1px 0 rgba(255,255,255,.45); }
body:not(.light-mode) .btn-outline{ border-radius:14px; padding:15px; border:1px solid #4a3a26; background:#16120f; color:#ecd69c; }
.mini-btn{ width:44px; height:44px; border-radius:12px; font-size:16px; }
.sub-body select, .sub-body input:not([type=checkbox]):not([type=radio]):not([type=file]){ min-height:48px; border-radius:14px !important; font-size:15px !important; }
.sub-body textarea{ border-radius:14px !important; font-size:15px !important; }
.pill{ font-size:12.5px; padding:5px 12px; }
.admin-tag{ font-size:11px; padding:3px 9px; }

/* Letra pequeña: nada por debajo de 12,5 px en las pantallas interiores */
.sub-screen [style*="font-size:8.5px"],
.sub-screen [style*="font-size: 8.5px"],
.sub-screen [style*="font-size:9px"],
.sub-screen [style*="font-size: 9px"],
.sub-screen [style*="font-size:9.5px"],
.sub-screen [style*="font-size: 9.5px"],
.sub-screen [style*="font-size:10px"],
.sub-screen [style*="font-size: 10px"],
.sub-screen [style*="font-size:10.5px"],
.sub-screen [style*="font-size: 10.5px"],
.sub-screen [style*="font-size:11px"],
.sub-screen [style*="font-size: 11px"],
.sub-screen [style*="font-size:11.5px"],
.sub-screen [style*="font-size: 11.5px"]{ font-size:12.5px !important; }
.sub-screen small{ font-size:12.5px; }

/* QR personal */
.qr-box{ width:236px; height:236px; padding:16px; border-radius:24px; border:3px solid #d4af6a; box-sizing:border-box; box-shadow:0 0 50px rgba(212,175,106,.2), 0 10px 26px rgba(0,0,0,.5); }
.qr-name{ font-family:'Cormorant Garamond', Georgia, serif; font-size:28px; line-height:1.05; text-align:center; margin-top:6px; }
.qr-sub{ font-size:14px; margin-top:4px; }

/* Barra superior del Inicio: más compacta, con la etiqueta ADMIN en la misma línea */
.topbar .tb-title b{ font-size:22px; line-height:1.05; }
.topbar .tb-title small{ display:flex; align-items:center; flex-wrap:nowrap; gap:6px; font-size:12px; white-space:nowrap; }
.topbar .tb-title small .admin-tag{ margin-left:0; }

/* ===== FASE 3 — estructura igual que la maqueta ===== */
.topbar .tb-icon{ flex:0 0 42px; width:42px; min-width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.topbar .tb-actions, .topbar .tb-right{ flex-shrink:0; }

/* Mi código QR */
#screen-qr .qr-screen{ display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:6px 20px 30px; }
#screen-qr .qr-head{ text-align:center; }
#screen-qr .qr-kicker{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; color:#d4af6a; }
#screen-qr .qr-hint{ font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:600; color:#f6ecd2; margin-top:4px; line-height:1.1; }
#screen-qr .qr-frame{ align-self:center; padding:1px; border-radius:26px; background:linear-gradient(145deg,#f6e6b4,#b88d46); box-shadow:0 0 50px rgba(212,175,106,.18),0 12px 28px rgba(0,0,0,.55); }
#screen-qr .qr-box{ width:236px; height:236px; padding:18px; margin:0; border:0; border-radius:25px; background:#f6ecd2; box-shadow:none; box-sizing:border-box; }
#screen-qr .qr-timer{ font-family:'Manrope',sans-serif; }
#screen-qr .qr-timer-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:#a39478; margin-bottom:8px; }
#screen-qr .qr-timer-row b{ font-size:16px; color:#ecd69c; }
#screen-qr .qr-bar{ height:6px; border-radius:99px; background:#2c231b; overflow:hidden; }
#screen-qr .qr-bar i{ display:block; height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,#c59d52,#ecd69c); transition:width 1s linear; }
#screen-qr .qr-user{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:20px; border:1px solid rgba(236,214,156,.38); background:radial-gradient(120% 90% at 0% 0%,#2e2118,#17110d 60%,#100b09); box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(236,214,156,.16); }
#screen-qr .qr-avatar{ width:52px; height:52px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#2b1217; border:1px solid #d4af6a; font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:22px; color:#ecd69c; }
#screen-qr .qr-user-txt{ min-width:0; }
#screen-qr .qr-user .qr-name{ font-family:'Manrope',sans-serif; font-size:17px; font-weight:700; color:#f6ecd2; text-align:left; margin:0; line-height:1.2; }
#screen-qr .qr-user .qr-sub{ font-size:13px; color:#a39478; margin-top:2px; }
#screen-qr .qr-info{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; border:1px solid #3a2f24; background:#14100d; font-size:13px; line-height:1.45; color:#a39478; }
#screen-qr .qr-info svg{ flex-shrink:0; margin-top:1px; }
#screen-qr .qr-next{ text-align:center; }
#screen-qr .qr-next p{ margin:6px 0 0; font-size:14px; color:#f2e8d0; }
body.light-mode #screen-qr .qr-hint, body.light-mode #screen-qr .qr-user .qr-name{ color:#2a1c0c; }

/* Filas de miembros (Voz) */
.list-row.voz-row{ gap:10px; padding:12px 14px; }
.voz-row .lr-ico.lr-ini{ width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:#2b1217; border:1px solid #d4af6a; color:#ecd69c; font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:19px; display:flex; align-items:center; justify-content:center; }
.voz-row .lr-text{ min-width:0; flex:1 1 auto; }
.voz-row .lr-text b{ font-size:15.5px; line-height:1.2; word-break:normal; overflow-wrap:anywhere; }
.voz-row .row-actions{ display:flex; gap:6px; flex-shrink:0; }
.voz-row .mini-btn{ width:36px; height:36px; min-width:36px; font-size:15px; }
#screen-qr .qr-screen{ padding-top:18px; }

/* ===== FASE 3 — componentes de la maqueta (m-*) ===== */
.sub-screen .sub-body{ display:flex; flex-direction:column; gap:16px; padding:6px 20px 36px; }
.sub-screen .sub-body > *{ flex-shrink:0; }
.sub-header .hd-add{ margin-left:auto; height:44px; padding:0 16px; border-radius:99px; border:0; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; font:700 13px 'Manrope',sans-serif; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.m-card{ border-radius:20px; border:1px solid rgba(236,214,156,.38); background:radial-gradient(120% 90% at 0% 0%,#2e2118,#17110d 60%,#100b09); box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(236,214,156,.16); padding:16px; display:flex; flex-direction:column; gap:12px; color:#f2e8d0; font-family:'Manrope',sans-serif; }
.m-card.bur{ border-color:rgba(214,150,150,.45); background:radial-gradient(120% 90% at 0% 0%,#4d1c26,#1e0f12 60%,#120a0c); }
.m-card.m-center{ align-items:center; text-align:center; }
.m-card.m-list{ padding:6px 16px; gap:0; }
.m-card.m-link{ flex-direction:row; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; }
.m-h2{ font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:700; color:#f6ecd2; line-height:1.05; }
.m-name{ font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:700; line-height:1.08; color:#f6ecd2; overflow-wrap:anywhere; }
.m-name2{ font-size:15.5px; font-weight:700; color:#f6ecd2; line-height:1.2; overflow-wrap:anywhere; }
.m-mu{ font-size:13px; color:#a39478; line-height:1.4; }
.m-mu.warn{ color:#e8a85a; }
.m-body{ font-size:14.5px; line-height:1.5; color:#d6c8a6; overflow-wrap:anywhere; }
.m-kick{ font-size:11px; font-weight:700; letter-spacing:.14em; color:#d4af6a; }
.m-lb{ font:700 12px 'Manrope',sans-serif; letter-spacing:.14em; color:#a39478; margin-top:6px; }
.m-empty{ text-align:center; color:#a39478; font-size:14px; padding:14px 0; margin:0; }
.m-foot-note{ text-align:center; font-size:12px; color:#7d7058; margin-top:8px; }
.m-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-top b{ font-size:15px; color:#f6ecd2; }
.m-row0{ display:flex; align-items:center; gap:12px; }
.m-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #2c231b; cursor:pointer; }
.m-row:last-child{ border-bottom:0; }
.m-card:not(.m-list) > .m-row{ padding:10px 0; border-bottom:0; border-top:1px solid #2c231b; }
.m-row .m-name{ font-size:21px; }
.md{ width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg,#f6e6b4,#b88d46); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(212,175,106,.28),inset 0 1px 0 rgba(255,255,255,.55); }
.m-avatar{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#2b1217; border:1px solid #d4af6a; font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:19px; color:#ecd69c; }
.m-avatar.sm{ width:42px; height:42px; font-size:17px; }
.m-mini-av{ width:30px; height:30px; border-radius:50%; background:#2b1217; border:1px solid #d4af6a; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#ecd69c; }
.m-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.m-pill{ display:inline-flex; align-items:center; font-size:12px; font-weight:600; color:#ecd69c; border:1px solid #4a3a26; border-radius:99px; padding:4px 10px; white-space:nowrap; }
.m-pill.gold{ background:#d4af6a; color:#0c0a09; border-color:#d4af6a; font-weight:700; }
.m-pill.pend{ background:#d4af6a; color:#0c0a09; border-color:#d4af6a; font-weight:700; }
.m-pill.ok{ background:rgba(123,196,127,.18); color:#a9dcab; border-color:rgba(123,196,127,.5); }
.m-pill.rej{ color:#f2b8b2; border-color:#6b3a42; background:#2b1217; font-weight:700; }
.m-btn-gold{ height:54px; border-radius:14px; border:0; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; font:700 14px 'Manrope',sans-serif; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 8px 24px rgba(212,175,106,.25),inset 0 1px 0 rgba(255,255,255,.45); width:100%; cursor:pointer; text-align:center; }
.m-btn-out{ min-height:50px; padding:0 14px; border-radius:14px; border:1px solid #4a3a26; background:#16120f; color:#ecd69c; font:600 14px 'Manrope',sans-serif; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; cursor:pointer; text-align:center; }
.m-btn-sm{ height:40px; padding:0 14px; border-radius:99px; border:0; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; font:700 12.5px 'Manrope',sans-serif; display:flex; align-items:center; gap:6px; flex-shrink:0; cursor:pointer; }
.m-ib{ width:40px; height:40px; min-width:40px; border-radius:12px; border:1px solid #3a2f24; background:#16120f; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; color:#d4af6a; font-size:15px; flex-shrink:0; }
.m-ib.danger{ border-color:#5a2a30; }
.m-col{ display:flex; flex-direction:column; gap:8px; }
.m-col-h{ display:flex; gap:8px; margin-left:auto; }
.row-actions{ display:flex; gap:6px; flex-shrink:0; }
.m-two{ display:flex; gap:10px; }
.m-two > button{ flex:1; }
.m-reject{ flex:1; height:52px; border-radius:14px; border:1px solid #6b3a42; background:#2b1217; color:#f2b8b2; font:700 14px 'Manrope',sans-serif; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; }
.m-reject.big{ width:100%; height:56px; letter-spacing:.06em; }
.m-approve{ flex:1; height:52px; border-radius:14px; border:0; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; font:700 14px 'Manrope',sans-serif; letter-spacing:.06em; cursor:pointer; }
.m-search{ height:52px; border-radius:14px; border:1px solid #3a2f24; background:#14100d; display:flex; align-items:center; gap:10px; padding:0 16px; }
.m-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:#f2e8d0; font:15px 'Manrope',sans-serif; height:100%; padding:0; }
.m-seg{ display:flex; gap:10px; }
.m-seg button{ flex:1; min-height:52px; padding:6px 10px; border-radius:14px; border:1px solid #3a2f24; background:#16120f; color:#ecd69c; font:600 13.5px 'Manrope',sans-serif; cursor:pointer; }
.m-seg button.active{ background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; border-color:transparent; font-weight:700; }
.m-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.m-stats:empty{ display:none; }
.m-stat{ border-radius:20px; border:1px solid rgba(236,214,156,.38); background:radial-gradient(120% 90% at 0% 0%,#2e2118,#17110d 60%,#100b09); padding:14px 8px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
.m-stat.bur{ border-color:rgba(214,150,150,.45); }
.m-num{ font-family:'Cormorant Garamond',Georgia,serif; font-size:32px; font-weight:700; color:#ecd69c; line-height:1; }
.m-num.red{ color:#e0645b; } .m-num.light{ color:#f6ecd2; }
.m-pct{ font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; font-weight:700; color:#ecd69c; line-height:1; }
.m-big{ font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; font-weight:700; color:#ecd69c; padding:0 4px; }
.m-bar{ height:8px; border-radius:99px; background:#2c231b; overflow:hidden; flex:1; }
.m-bar.big{ flex:none; }
.m-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#c59d52,#ecd69c); }
.m-bar-row{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.m-bar-name{ width:112px; font-size:14px; line-height:1.15; display:flex; flex-direction:column; flex-shrink:0; }
.m-bar-name small{ font-size:11px; color:#a39478; }
.m-bar-row b{ width:42px; text-align:right; font-size:14px; color:#ecd69c; }
.m-res{ display:flex; flex-direction:column; gap:6px; }
.m-res-top{ display:flex; justify-content:space-between; gap:10px; font-size:15px; }
.m-res-top b{ color:#ecd69c; }
.m-opt{ display:flex; align-items:center; gap:12px; min-height:50px; padding:0 14px; border-radius:14px; border:1px solid #3a2f24; background:#14100d; font-size:15px; cursor:pointer; margin-bottom:8px; }
.m-opt input{ position:absolute; opacity:0; pointer-events:none; }
.m-ra{ width:20px; height:20px; border-radius:50%; border:2px solid #6b5a3c; flex-shrink:0; }
.m-opt input:checked + .m-ra{ border-color:#d4af6a; background:radial-gradient(circle,#d4af6a 0 4px,transparent 5px); }
.m-opt:has(input:checked){ border-color:#d4af6a; background:#1f1812; }
.m-link{ cursor:pointer; }
.m-card .m-link{ font-size:12.5px; color:#d4af6a; font-weight:600; }
.m-card.m-link .m-link{ font-size:inherit; }
.m-select{ flex:1; min-width:0; height:40px; border-radius:12px; border:1px solid #3a2f24; background:#14100d; color:#f2e8d0; font:13px 'Manrope',sans-serif; padding:0 10px; }
.m-inc{ border-top:1px solid rgba(214,150,150,.25); padding-top:12px; display:flex; flex-direction:column; gap:10px; }
.m-inc-actions{ display:flex; gap:8px; align-items:center; }
.m-sub{ border-top:1px solid #2c231b; padding-top:10px; }
.m-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.m-chip{ height:30px; padding:0 10px; border-radius:99px; border:1px solid #4a3a26; background:#16120f; color:#ecd69c; font:600 12px 'Manrope',sans-serif; cursor:pointer; }
.m-falta{ height:44px; padding:0 14px; border-radius:12px; border:1px solid #6b3a42; background:#2b1217; color:#f2b8b2; font:700 13px 'Manrope',sans-serif; flex-shrink:0; cursor:pointer; }
.m-ok{ width:44px; height:44px; border-radius:12px; border:0; background:linear-gradient(180deg,#ecd69c,#c59d52); display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; padding:0; }
.m-attach{ display:flex; align-items:center; gap:8px; min-height:44px; border-radius:12px; border:1px dashed #4a3a26; padding:0 12px; font-size:13.5px; color:#cdbf9f; text-decoration:none; }
/* actuaciones */
.m-ev-row{ display:flex; gap:14px; align-items:flex-start; }
.m-date{ width:64px; flex-shrink:0; border-radius:16px; background:linear-gradient(160deg,#5a2030,#2b1217); border:1px solid rgba(236,214,156,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0; }
.m-mes{ font-size:11px; font-weight:700; letter-spacing:.14em; color:#d4af6a; }
.m-dia{ font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; font-weight:700; line-height:1; color:#f6ecd2; }
/* perfil */
.m-hero{ border-radius:22px; padding:1px; background:linear-gradient(150deg,#d4af6a,#4a3520 45%,#d4af6a); }
.m-hero-in{ border-radius:21px; padding:20px; background:radial-gradient(130% 120% at 100% 0%,#5a2030 0%,#2b1217 38%,#120d0b 85%); display:flex; align-items:center; gap:16px; }
.m-hero-av{ width:72px; height:72px; border-radius:50%; background:#2b1217; border:2px solid #d4af6a; display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:30px; color:#ecd69c; flex-shrink:0; }
.m-hero-name{ font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; font-weight:700; line-height:1.05; color:#f6ecd2; overflow-wrap:anywhere; }
/* ajustes */
.m-card.m-set{ padding:4px 16px; gap:0; }
.m-rw{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #2c231b; min-height:44px; cursor:pointer; }
.m-rw:last-child{ border-bottom:0; }
.m-rw.danger .m-name2{ color:#f2b8b2; }
.switch{ width:52px; height:30px; border-radius:99px; background:#2c231b; border:1px solid #3a2f24; }
.switch.on{ background:linear-gradient(180deg,#ecd69c,#c59d52); border-color:transparent; }
.switch .knob{ top:3px; left:3px; width:22px; height:22px; background:#f6ecd2; }
.switch.on .knob{ left:27px; }
/* escáner de asistencia */
#screen-asistencia .scan-frame{ width:200px; height:200px; border-radius:22px; border:2px solid #d4af6a; background:rgba(212,175,106,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:0 auto; padding:10px; }
#screen-asistencia .scan-frame span{ font-size:12px; color:#a39478; text-align:center; }
/* vista músico/gestión */
.vista-toggle{ display:flex; gap:10px; }
.vista-toggle .vt-btn{ flex:1; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font:600 14px 'Manrope',sans-serif; }
/* selects y labels del resto de formularios */
.sub-screen .field{ margin:0; }
.sub-screen textarea{ border-radius:14px; background:#14100d; border:1px solid #3a2f24; color:#f2e8d0; padding:12px 16px; font-size:15px; }
/* modo claro */
body.light-mode .m-card, body.light-mode .m-stat{ background:#fffaf0; border-color:rgba(160,120,50,.4); box-shadow:0 6px 18px rgba(0,0,0,.08); }
body.light-mode .m-card.bur{ background:#f6e3e0; }
body.light-mode .m-h2, body.light-mode .m-name, body.light-mode .m-name2, body.light-mode .m-hero-name, body.light-mode .m-top b{ color:#2a1c0c; }
body.light-mode .m-body{ color:#4a3a26; }
body.light-mode .m-search, body.light-mode .m-opt, body.light-mode .m-select, body.light-mode .m-ib, body.light-mode .m-btn-out{ background:#f2e8d0; color:#2a1c0c; }
body.light-mode .m-search input{ color:#2a1c0c; }
#actuacionesBody,#tablonBody,#notificacionesBody,#justificantesBody,#encuestasBody,#solicitudesBody,#almacenBody,#busquedaComponenteBody,#seccionesList,#materialAsignadoBody,#mayordomiaIncidenciasBody,#encResultsBody,#miUniformidadBody,#misIncidenciasBody,#controlEnsayoBody,#repList,#ajustesBody,#vozBody:not(.m-list){ display:flex; flex-direction:column; gap:14px; }
#statsBandaBody,#statsVozBody,#encResultsBody{ display:flex; flex-direction:column; gap:10px; }
#screen-voz #vozBody{ padding:6px 4px; gap:0; }
.m-foot{ display:flex; align-items:center; gap:8px; margin-top:2px; }
#screen-asistencia .m-list#attendLog{ padding:6px 16px; }
.m-card.block:not(.admin-only):not(.direccion-only):not(.mayordomia-only), body.admin-mode .m-card.admin-only.block, body.role-direccion .m-card.direccion-only.block, body.role-mayordomia .m-card.direccion-only.block, body.role-mayordomia .m-card.mayordomia-only.block, body.role-direccion .m-card.mayordomia-only.block{ display:flex !important; flex-direction:column; gap:12px; }
.m-card.m-list.block:not(.admin-only):not(.direccion-only):not(.mayordomia-only), body.admin-mode .m-card.m-list.admin-only.block, body.role-direccion .m-card.m-list.direccion-only.block, body.role-mayordomia .m-card.m-list.mayordomia-only.block, body.role-direccion .m-card.m-list.mayordomia-only.block{ display:flex !important; gap:0; }
.m-card > *{ flex-shrink:0; }
.m-reject.big{ flex:none; }
.m-btn-gold, .m-btn-out{ flex-shrink:0; }
body:not(.light-mode) .list-row.voz-row .lr-ico.lr-ini{ background:#2b1217; border:1px solid #d4af6a; box-shadow:none; color:#ecd69c; }
#screen-asistencia .m-center .scan-frame{ flex-shrink:0; }

/* ===== Calendario, Justificar, Marcha/Partitura ===== */
.month-nav{ display:flex; align-items:center; gap:10px; margin:0; }
.month-nav .month-nav-btn{ width:44px; height:44px; padding:0; border-radius:50%; background:#16120f; border:1px solid #3a2f24; display:flex; align-items:center; justify-content:center; }
.month-nav-select select{ height:44px; border-radius:12px; background:#14100d; border:1px solid #3a2f24; color:#f2e8d0; font:600 14px 'Manrope',sans-serif; padding:0 10px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal-dow{ text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; color:#8c7f66; }
.cal-day{ border-radius:12px; font-size:14px; font-weight:700; }
.m-legend{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:#a39478; }
.m-legend span{ display:flex; align-items:center; gap:6px; }
.m-legend .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.file-drop{ height:64px; border-radius:14px; border:1px dashed #6b5a3c; background:rgba(212,175,106,.05); display:flex; align-items:center; justify-content:center; color:#ecd69c; font:600 15px 'Manrope',sans-serif; cursor:pointer; }
#screen-justificar textarea{ min-height:130px; }
.voice-chip{ height:40px; padding:0 14px; border-radius:99px; border:1px solid #4a3a26; background:#16120f; color:#ecd69c; font:600 13px 'Manrope',sans-serif; margin:0 8px 8px 0; }
.voice-chip.mine{ background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; border-color:transparent; font-weight:700; }
#voicesChips{ display:flex; flex-wrap:wrap; }
.pdf-viewer{ border-radius:20px; border:1px solid rgba(236,214,156,.38); margin:0; }
.audio-player{ margin:0; border-radius:20px; border:1px solid rgba(236,214,156,.38); background:radial-gradient(120% 90% at 0% 0%,#2e2118,#17110d 60%,#100b09); padding:16px; }
.play-btn{ width:46px; height:46px; background:linear-gradient(145deg,#f6e6b4,#b88d46); }
.progress-fill{ background:linear-gradient(90deg,#c59d52,#ecd69c); }
#miembroBody,#miembroUniformidadBody{ display:flex; flex-direction:column; gap:14px; }

/* ===== LOGIN — igual que la maqueta ===== */
#screen-login{ padding:0; justify-content:flex-start; align-items:stretch; background:radial-gradient(90% 45% at 50% 18%,#3a1a1f 0%,#1a110e 45%,#0c0a09 80%); }
#screen-login #loginView, #screen-login #registerView{ box-sizing:border-box; padding:0 28px; min-height:100%; position:relative; align-items:stretch; }
#screen-login #registerConfirm{ padding:60px 28px; }
#screen-login .login-badge{ align-self:center; width:132px; height:132px; margin-top:72px; flex-shrink:0; }
#screen-login #registerView .login-badge{ margin-top:48px; }
#screen-login .login-title{ margin:22px 0 0; text-align:center; }
#screen-login .login-title h1{ font-family:'Cormorant Garamond',Georgia,serif; font-size:38px; font-weight:700; line-height:1; color:#ecd69c; letter-spacing:0; text-shadow:none; }
#screen-login .login-title span{ margin-top:10px; font-size:11.5px; font-weight:600; letter-spacing:.3em; color:#a39478; }
#screen-login .login-form{ max-width:none; margin-top:40px; display:flex; flex-direction:column; gap:16px; }
#screen-login .login-form .field{ margin:0; display:flex; flex-direction:column; gap:8px; }
#screen-login .field label{ font-size:12px; font-weight:700; letter-spacing:.12em; color:#a39478; }
#screen-login .field input, #screen-login .field select{ height:54px; border-radius:14px; border:1px solid #3a2f24; background:#14100d; color:#f2e8d0; font-size:16px; padding:0 16px; outline:0; box-sizing:border-box; width:100%; }
#screen-login .field input::placeholder{ color:#7d7058; }
#screen-login .pass-wrap input{ padding-right:52px !important; }
#screen-login .pass-toggle{ right:16px; opacity:1; display:flex; }
#screen-login .login-toggle{ margin-top:0; font-size:14px; color:#a39478; }
#screen-login .login-form + .login-toggle{ margin-top:26px; }
#screen-login .login-toggle + .login-toggle{ margin-top:14px; }
#screen-login .login-toggle b{ color:#ecd69c; font-weight:700; }
.login-foot{ position:absolute; left:0; right:0; bottom:28px; text-align:center; font-size:12px; color:#7d7058; letter-spacing:.06em; }
body.light-mode .login-foot{ color:#7a6a45; }

/* Control de Ensayo: voces plegables */
.m-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
.m-acc-head .m-h2{ flex:1; min-width:0; }
.m-acc-chev{ transition:transform .2s; display:flex; }
.m-acc.open .m-acc-chev{ transform:rotate(90deg); }
.m-acc-body{ display:none; flex-direction:column; }
.m-acc.open .m-acc-body{ display:flex; }

#toast.has-undo{ pointer-events:auto; display:flex; align-items:center; gap:14px; padding-right:10px; }
#toast.has-undo button{ height:34px; padding:0 14px; border-radius:99px; border:0; background:linear-gradient(180deg,#ecd69c,#c59d52); color:#1a120a; font:700 12px 'Manrope',sans-serif; letter-spacing:.08em; cursor:pointer; }

/* ===== INICIO (maqueta) ===== */
#screen-main{background:radial-gradient(120% 28% at 50% 0%,#2a1a14 0%,#0c0a09 70%) !important;font-family:'Manrope',system-ui,sans-serif;color:#f2e8d0}
#screen-main .main-bg-fixed{display:none !important}
#screen-main .main-content{padding:20px 20px 110px;display:flex;flex-direction:column;gap:18px}
.mh-top{display:flex;align-items:center;gap:12px}
.mh-esc{width:46px;height:46px;border-radius:50%;border:1.5px solid #d4af6a;background:#f2e8d0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.mh-esc img{width:100%;height:100%;object-fit:cover}
.mh-who{flex:1;min-width:0}
.mh-hi{font-size:12px;color:#a39478}
.mh-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;line-height:1.05;color:#ecd69c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-out{width:44px;height:44px;border-radius:50%;border:1px solid #3a2f24;background:#16120f;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
#screen-main .enc-banner{background:#2b1217;border:1px solid #5a2630;border-radius:14px;padding:12px 14px;margin:0;gap:12px;font-size:13.5px;line-height:1.35;color:#f2e8d0;box-shadow:none}
#screen-main .enc-banner b{color:#ecd69c}
#screen-main .enc-banner svg{flex-shrink:0}
.mh-next{border-radius:22px;padding:1px;background:linear-gradient(150deg,#d4af6a,#4a3520 45%,#d4af6a)}
.mh-next-in{border-radius:21px;padding:18px 18px 16px;background:radial-gradient(130% 120% at 100% 0%,#5a2030 0%,#2b1217 35%,#15100e 80%);box-shadow:inset 0 1px 0 rgba(236,214,156,.2),0 16px 34px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px}
.mh-next-top{display:flex;justify-content:space-between;align-items:center}
.mh-kick{font-size:11px;font-weight:700;letter-spacing:.16em;color:#d4af6a}
.mh-pill{font-size:12px;font-weight:600;color:#0c0a09;background:#d4af6a;border-radius:99px;padding:4px 10px}
.mh-next-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:700;line-height:1.05;color:#f6ecd2}
.mh-next-d{margin-top:4px;font-size:14px;color:#cdbf9f}
.mh-fichar{height:52px;border-radius:14px;border:0;background:linear-gradient(180deg,#ecd69c,#c59d52);color:#1a120a;font-size:15px;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 24px rgba(212,175,106,.25);cursor:pointer;font-family:inherit}
.mh-block{display:block}
body.role-mayordomia .mh-block.mayordomia-only.block, body.role-direccion .mh-block.mayordomia-only.block{display:block !important}
.mh-sec{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mh-sec-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:700;letter-spacing:.06em;color:#ecd69c}
.mh-rule{flex:1;height:1px;background:linear-gradient(90deg,#6b4e22,transparent)}
.mh-sec-s{font-size:11.5px;color:#8c7f66}
.mh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.role-direccion .mh-grid.direccion-only.block, body.role-mayordomia .mh-grid.direccion-only.block{display:grid !important}
.mh-card{position:relative;text-align:left;border-radius:20px;padding:1px;background:linear-gradient(160deg,rgba(236,214,156,.6),rgba(90,66,36,.3) 42%,rgba(236,214,156,.28));box-shadow:0 12px 26px rgba(0,0,0,.55);color:#f2e8d0;cursor:pointer;display:block}
.mh-card.admin-only{display:none}
body.admin-mode .mh-card.admin-only{display:block}
.mh-card.bur{background:linear-gradient(160deg,rgba(214,150,150,.55),rgba(90,38,48,.35) 42%,rgba(214,150,150,.25))}
.mh-in{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;border-radius:19px;padding:14px;min-height:128px;box-sizing:border-box;background:radial-gradient(120% 90% at 0% 0%,#34261b 0%,#18110d 58%,#100b09 100%);box-shadow:inset 0 1px 0 rgba(236,214,156,.18)}
.mh-card.bur .mh-in{background:radial-gradient(120% 90% at 0% 0%,#4d1c26 0%,#1e0f12 60%,#120a0c 100%)}
.mh-wm{position:absolute;right:-14px;bottom:-18px;width:96px;height:96px;opacity:.1;pointer-events:none}
.mh-wm.big{width:120px;height:120px}
.mh-md{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#f6e6b4,#b88d46);box-shadow:0 6px 14px rgba(212,175,106,.3),inset 0 1px 0 rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mh-md.lg{width:58px;height:58px}
.mh-tx{position:relative;display:block}
.mh-tx.grow{flex:1}
.mh-nm{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:700;line-height:1.05;color:#f6ecd2}
.mh-nm.lg{font-size:26px;line-height:1}
.mh-sb{display:block;margin-top:3px;font-size:12.5px;color:#b3a584}
.mh-badge{position:absolute;top:12px;right:12px;min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:99px;background:linear-gradient(180deg,#e0645b,#b0332c);color:#fff;font-size:12px;font-weight:700;padding:0 7px;box-sizing:border-box;box-shadow:0 3px 8px rgba(176,51,44,.5)}
.mh-wide{position:relative;display:block;border-radius:22px;padding:1px;background:linear-gradient(160deg,rgba(214,150,150,.6),rgba(90,38,48,.35) 42%,rgba(236,214,156,.4));box-shadow:0 14px 30px rgba(0,0,0,.6);margin-bottom:10px;cursor:pointer}
.mh-wide.mayordomia-only{display:none}
body.role-mayordomia .mh-wide.mayordomia-only,body.role-direccion .mh-wide.mayordomia-only{display:block}
.mh-wide-in{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;border-radius:21px;padding:18px;background:radial-gradient(120% 140% at 0% 0%,#5a2030 0%,#220f14 62%,#130a0c 100%);box-shadow:inset 0 1px 0 rgba(236,214,156,.2)}
.mh-wide .mh-sb{font-size:13px;color:#c2b391}
.mh-perfil{background:#16120f;border:1px solid #2c231b;border-radius:18px;padding:14px;display:flex;align-items:center;gap:14px;cursor:pointer}
.mh-perfil-ic{width:42px;height:42px;border-radius:12px;background:#1f1812;border:1px solid #4a3a26;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mh-perfil-t{display:block;font-size:15px;font-weight:700;color:#f6ecd2}
.mh-perfil-s{display:block;margin-top:2px;font-size:12.5px;color:#a39478}

/* ===== LOGIN con foto ===== */
#screen-login{background:#0c0a09 !important}
#screen-login .login-bg{position:absolute;inset:0;z-index:0}
#screen-login .login-bg::after{background:linear-gradient(180deg,rgba(8,6,5,.45) 0%,rgba(8,6,5,.6) 45%,rgba(8,6,5,.92) 100%) !important}
#screen-login #loginView,#screen-login #registerView,#screen-login .login-foot{position:relative;z-index:2}
#screen-login .login-foot{position:absolute}

/* ===== Control de ensayo: iconos de estado ===== */
.m-st{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid #4a3d2c;background:#1f1812;color:#8c7f66}
.m-st svg{width:18px;height:18px}
.m-st.presente{background:rgba(70,170,110,.18);border-color:#46aa6e;color:#6fd197}
.m-st.medio{background:rgba(224,170,60,.18);border-color:#e0aa3c;color:#f0c35c}
.m-st.justificada{background:rgba(90,150,230,.18);border-color:#5a96e6;color:#8fbaf5}
.m-st.falta{background:rgba(224,100,91,.18);border-color:#e0645b;color:#f08a82}
.m-st.pend{opacity:.7}
.m-name2.sm{font-size:14px}
.st-presente{color:#6fd197 !important}.st-medio{color:#f0c35c !important}.st-justificada{color:#8fbaf5 !important}.st-falta{color:#f08a82 !important}
#screen-login .login-bg{transform:scale(1.5);transform-origin:50% 50%;overflow:hidden}
#screen-login .login-bg::after{background:linear-gradient(180deg,rgba(8,6,5,.35) 0%,rgba(8,6,5,.45) 40%,rgba(8,6,5,.8) 100%) !important}
.mh-card,.mh-card.admin-only{display:flex}
.mh-card.admin-only{display:none}
body.admin-mode .mh-card.admin-only{display:flex}
.mh-in{flex:1}
#screen-login .login-sub,#screen-login .login-badge+h1+*{color:#cdbf9f !important}
body.role-direccion:not(.vista-musico) .mh-block .mh-grid.direccion-only.block{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
.m-ce{display:flex;align-items:center;gap:10px}
.m-ce .m-txt{flex:1;min-width:0}
.m-ce .m-name2.sm{font-size:14px;line-height:1.2}
.m-acts{display:flex;gap:6px;flex-shrink:0}
.m-act{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;background:transparent;border:1.5px solid}
.m-act svg{width:17px;height:17px}
.m-act.presente{border-color:#46aa6e;color:#6fd197}.m-act.medio{border-color:#e0aa3c;color:#f0c35c}.m-act.justificada{border-color:#5a96e6;color:#8fbaf5}.m-act.falta{border-color:#e0645b;color:#f08a82}
.m-act:active{background:rgba(255,255,255,.12)}
.m-ce .m-st{width:34px;height:34px}

/* ===== FORMULARIOS EMERGENTES (maqueta) ===== */
.modal-overlay{background:rgba(6,4,3,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-sheet{max-width:520px;max-height:88vh;padding:12px 20px 28px;border-radius:26px 26px 0 0;border:1px solid rgba(236,214,156,.38);border-bottom:none;background:radial-gradient(120% 60% at 50% 0%,#2a1a14 0%,#17110d 45%,#0f0b09 100%);box-shadow:0 -20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(236,214,156,.2);font-family:'Manrope',system-ui,sans-serif;color:#f2e8d0}
.modal-handle{width:44px;height:4px;background:rgba(236,214,156,.4);margin:0 auto 14px}
.modal-sheet h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:700;line-height:1.1;color:#ecd69c;text-align:left;margin:0 0 18px}
.modal-sheet .field{margin:0 0 14px}
.modal-sheet .field label{font-size:11px;font-weight:700;letter-spacing:.14em;color:#a39478;margin-bottom:7px}
.modal-sheet .field input,.modal-sheet .field select,.modal-sheet .field textarea,.modal-sheet textarea,.modal-sheet input[type=text],.modal-sheet input[type=date],.modal-sheet input[type=time],.modal-sheet input[type=number],.modal-sheet input[type=email],.modal-sheet input[type=password],.modal-sheet select{width:100%;box-sizing:border-box;min-height:50px;padding:0 14px;border-radius:14px;background:#16120f;border:1px solid #3a2f24;color:#f2e8d0;font-size:15px;font-family:inherit;outline:none}
.modal-sheet .field textarea,.modal-sheet textarea{min-height:100px;padding:12px 14px;resize:vertical}
.modal-sheet .field input:focus,.modal-sheet .field select:focus,.modal-sheet .field textarea:focus,.modal-sheet textarea:focus{border-color:#d4af6a;box-shadow:0 0 0 3px rgba(212,175,106,.15)}
.modal-sheet ::placeholder{color:#6f6450}
.modal-sheet .btn-gold{height:54px;padding:0;border-radius:14px;background:linear-gradient(180deg,#ecd69c,#c59d52);color:#1a120a;font-size:15px;font-weight:700;letter-spacing:.08em;box-shadow:0 8px 24px rgba(212,175,106,.25);font-family:inherit}
.modal-sheet .btn-outline{height:50px;padding:0;border-radius:14px;border:1px solid rgba(236,214,156,.4);color:#ecd69c;background:transparent;font-weight:600;font-family:inherit}
.modal-sheet .btn-red,.modal-sheet .btn-danger{height:50px;border-radius:14px;background:#2b1217;border:1px solid #5a2630;color:#f2a8a2;font-weight:700;font-family:inherit}
.modal-sheet .form-actions{gap:10px;margin-top:10px}
.modal-sheet p,.modal-sheet small{color:#a39478}
.modal-sheet b{color:#ecd69c}
.modal-sheet small{font-size:12px}
/* modales: tipografía sans en todo el contenido (solo el título va en serif) */
.modal-sheet,.modal-sheet label,.modal-sheet input,.modal-sheet select,.modal-sheet textarea,.modal-sheet button,.modal-sheet p,.modal-sheet small,.modal-sheet div,.modal-sheet span,.modal-sheet option{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important}
.modal-sheet h3{font-family:'Cormorant Garamond',Georgia,serif !important}
.modal-sheet input::placeholder,.modal-sheet textarea::placeholder{font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.modal-sheet .field input,.modal-sheet .field select{text-overflow:ellipsis}

/* Sonpas: el interruptor Vista Músico/Gestión no debe verlo un músico (la regla .vista-toggle{display:flex} anulaba .not-musico-only) */
.vista-toggle.not-musico-only{ display:none; }
body.role-jefe .vista-toggle.not-musico-only, body.role-mayordomia .vista-toggle.not-musico-only, body.role-direccion .vista-toggle.not-musico-only{ display:flex; }

/* Textos largos dentro de tarjetas y filas de menú: que se ajusten en vez de salirse (chevron y texto) */
.m-card.m-link > svg, .m-rw > svg, .m-card.m-link .md{ flex:none; }
.m-card.m-link .m-txt, .m-rw .m-txt{ flex:1 1 0; min-width:0; }
.m-mu, .m-name2{ overflow-wrap:anywhere; }