:root{
  --bg:#0b0f10;
  --bg-2:#0e1415;
  --sidebar:#0b3e43;
  --sidebar-2:#0e4d54;
  --card:#121819;
  --card-2:#172021;
  --card-3:#1d292b;
  --line:rgba(255,255,255,.095);
  --line-strong:rgba(255,255,255,.15);
  --text:#f6f8f8;
  --muted:#a7b4b6;
  --soft:#718084;
  --brand:#3e7176;
  --brand-light:#9ad2d6;
  --ok:#00b686;
  --warn:#f6b042;
  --bad:#ff4d5a;
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --shadow:0 26px 80px rgba(0,0,0,.35);
  --font:"Inter Tight", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}

html,
body,
#app{
  width:100%;
  max-width:100%;
  min-width:0;
}

html,
body{
  overflow-x:clip;
  overscroll-behavior-x:none;
}

@supports not (overflow:clip){
  html,
  body{
    overflow-x:hidden;
  }
}

html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  touch-action:manipulation;
  font-family:var(--font);
  background:
    radial-gradient(circle at 35% -10%, rgba(62,113,118,.25), transparent 35rem),
    radial-gradient(circle at 80% 100%, rgba(0,182,134,.11), transparent 28rem),
    var(--bg);
  color:var(--text);
}
button,input{font:inherit}

button,
a,
input,
select,
textarea,
[role="button"]{
  touch-action:manipulation;
}

body.cfc-app-authenticated{
  overscroll-behavior-y:contain;
}

@media (max-width:800px){
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    font-size:16px !important;
  }
}

/* =========================================================
   GESTO MÓVIL — DESLIZAR PARA ACTUALIZAR
========================================================= */

.cfc-pull-refresh{
  --cfc-pull-offset:0px;

  position:fixed;
  top:max(10px,env(safe-area-inset-top));
  left:50%;
  z-index:29990;

  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;
  border:1px solid rgba(154,210,214,.28);
  border-radius:999px;

  background:rgba(17,31,32,.97);
  color:#f7fbfb;
  box-shadow:0 14px 38px rgba(0,0,0,.42);

  opacity:0;
  pointer-events:none;
  transform:
    translate(
      -50%,
      calc(-100% - 24px + var(--cfc-pull-offset))
    );

  transition:
    transform .22s ease,
    opacity .18s ease,
    border-color .18s ease;
}

.cfc-pull-refresh.is-visible{
  opacity:1;
}

.cfc-pull-refresh.is-tracking{
  transition:opacity .12s ease;
}

.cfc-pull-refresh.is-refreshing,
.cfc-pull-refresh.is-success,
.cfc-pull-refresh.is-error{
  transform:translate(-50%,0);
}

.cfc-pull-refresh.is-armed{
  border-color:rgba(154,210,214,.68);
}

.cfc-pull-refresh.is-success{
  border-color:rgba(0,182,134,.62);
}

.cfc-pull-refresh.is-error{
  border-color:rgba(255,77,90,.62);
}

.cfc-pull-refresh strong{
  white-space:nowrap;
  font-size:14px;
  line-height:1.2;
}

.cfc-pull-refresh-spinner{
  width:20px;
  height:20px;
  flex:0 0 auto;

  border:2px solid rgba(154,210,214,.28);
  border-top-color:var(--brand-light);
  border-radius:50%;

  transform:rotate(0deg);
}

.cfc-pull-refresh.is-refreshing
.cfc-pull-refresh-spinner{
  animation:cfcPullRefreshSpin .72s linear infinite;
}

.cfc-pull-refresh.is-success
.cfc-pull-refresh-spinner{
  border:0;
}

.cfc-pull-refresh.is-success
.cfc-pull-refresh-spinner::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  color:#70e0c3;
  font-weight:900;
}

.cfc-pull-refresh.is-error
.cfc-pull-refresh-spinner{
  border:0;
}

.cfc-pull-refresh.is-error
.cfc-pull-refresh-spinner::before{
  content:"!";
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  color:#ff9898;
  font-weight:900;
}

@keyframes cfcPullRefreshSpin{
  to{
    transform:rotate(360deg);
  }
}

/* =========================================================
   PWA — AVISO DE ACTUALIZACIÓN
========================================================= */

.pwa-update-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30000;

  display:flex;
  justify-content:center;

  width:100%;

  padding:
    16px
    max(16px,env(safe-area-inset-right))
    max(16px,env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left));

  pointer-events:none;
}


.pwa-update-content{
  width:min(680px,100%);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding:16px 18px;

  border:1px solid rgba(154,210,214,.25);
  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      rgba(39,73,77,.98),
      rgba(15,28,29,.98)
    );

  color:#fff;

  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.025) inset;

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);

  pointer-events:auto;

  animation:
    pwaUpdateBannerIn
    .28s
    cubic-bezier(.2,.8,.2,1);
}


.pwa-update-content > div{
  min-width:0;

  display:grid;
  gap:4px;
}


.pwa-update-content strong{
  font-size:15px;
  line-height:1.25;
}


.pwa-update-content span{
  color:rgba(255,255,255,.68);

  font-size:13px;
  line-height:1.4;
}


.pwa-update-button{
  flex:0 0 auto;

  min-height:44px;

  padding:0 18px;

  border:0;
  border-radius:14px;

  background:#9ad2d6;
  color:#102324;

  font-size:13px;
  font-weight:800;

  cursor:pointer;
}


.pwa-update-button:hover{
  background:#b6e4e6;
}


.pwa-update-button:focus-visible{
  outline:3px solid rgba(154,210,214,.32);
  outline-offset:3px;
}


.pwa-update-button:disabled{
  cursor:wait;
  opacity:.72;
}


@keyframes pwaUpdateBannerIn{
  from{
    transform:translateY(22px);
    opacity:0;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }
}


@media (max-width:600px){
  .pwa-update-banner{
    padding:
      12px
      max(12px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
  }


  .pwa-update-content{
    align-items:stretch;
    flex-direction:column;
    gap:14px;

    padding:16px;
    border-radius:18px;
  }


  .pwa-update-button{
    width:100%;
  }
}
button{cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}

.eyebrow{
  margin:0 0 10px;
  color:var(--brand-light);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:600;
}

.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:17px;
  font-weight:400;
  line-height:1.4;
}

/* ================= LOGIN ================= */

.login-screen{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px 1fr;
}

.login-brand-panel,
.sidebar{
  background:linear-gradient(180deg, var(--sidebar), #082e32);
  border-right:1px solid rgba(255,255,255,.12);
}

.login-brand-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-lockup img{
  width:52px;
  height:52px;
  object-fit:contain;
}

.brand-lockup strong{
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
}

.brand-lockup small{
  display:block;
  margin-top:5px;
  color:#c7dddd;
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
}

.support-block{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}

.support-block > span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  color:#d9eeee;
}

.support-block strong{
  display:block;
  font-size:13px;
  font-weight:500;
}

.support-block a{
  color:#bef4f0;
  font-size:13px;
  font-weight:400;
}

.login-content{
  display:grid;
  place-items:center;
  padding:42px;
}

.login-center{
  width:min(850px,100%);
  text-align:center;
}

.welcome-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin:0 auto 26px;
  border-radius:50%;
  border:1px solid rgba(154,210,214,.5);
  background:rgba(62,113,118,.22);
  font-size:36px;
}

.login-center h1{
  margin:0;
  font-size:clamp(48px,6vw,82px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:600;
}

.login-copy{
  max-width:560px;
  margin:18px auto 26px;
  color:var(--muted);
  font-size:18px;
  line-height:1.45;
  font-weight:400;
}

.search{
  width:min(520px,100%);
  height:58px;
  margin:0 auto 28px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}

.search span{
  color:var(--soft);
  font-size:22px;
}

.search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:16px;
  font-weight:400;
}

.people-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.person-option{
  min-height:170px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  color:#fff;
  display:grid;
  place-items:center;
  padding:22px;
  transition:.18s ease;
}

.person-option:hover{
  transform:translateY(-3px);
  border-color:rgba(154,210,214,.55);
  background:linear-gradient(180deg, rgba(62,113,118,.3), rgba(255,255,255,.03));
}

.person-option .avatar{
  margin-bottom:14px;
}

.person-option strong{
  font-size:20px;
  font-weight:500;
  letter-spacing:-.025em;
}

.person-option small{
  margin-top:5px;
  color:var(--muted);
  font-size:14px;
  font-weight:400;
}

.privacy-note{
  margin:26px 0 0;
  color:var(--soft);
  font-size:14px;
  font-weight:400;
}

.access-gateway-grid{
  width:min(720px,100%);
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.access-gateway-card{
  min-height:142px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.access-gateway-card:hover{
  transform:translateY(-3px);
  border-color:rgba(154,210,214,.55);
  background:linear-gradient(180deg,rgba(62,113,118,.3),rgba(255,255,255,.03));
}

.access-gateway-card.primary{
  border-color:rgba(89,211,188,.38);
  background:linear-gradient(145deg,rgba(0,196,154,.19),rgba(62,113,118,.12));
}

.access-gateway-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(113,205,208,.12);
  color:#9fecef;
  font-size:24px;
  font-weight:700;
}

.access-gateway-card.primary .access-gateway-icon{
  background:rgba(0,196,154,.16);
  color:#65e4c9;
}

.access-gateway-card strong,
.access-gateway-card small{
  display:block;
}

.access-gateway-card strong{
  font-size:19px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.02em;
}

.access-gateway-card small{
  margin-top:7px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}

.access-gateway-card b{
  color:#86d9da;
  font-size:25px;
  font-weight:400;
}

.access-entry-panel[hidden],
#accessGateway[hidden]{
  display:none;
}

.access-entry-panel{
  position:relative;
}

.access-back-btn{
  display:flex;
  align-items:center;
  margin:0 auto 30px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font:inherit;
  font-size:14px;
  cursor:pointer;
}

.access-back-btn:hover{
  border-color:rgba(154,210,214,.45);
  color:#fff;
}

.access-request-panel{
  width:min(590px,100%);
  margin:0 auto;
}

.access-request-icon{
  width:64px;
  height:64px;
  margin-bottom:22px;
  font-size:28px;
}

.access-request-form{
  display:grid;
  gap:15px;
  margin:28px auto 0;
  text-align:left;
}

.access-request-form label{
  display:grid;
  gap:8px;
}

.access-request-form label > span{
  color:#c6d7d8;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.access-request-form input{
  width:100%;
  min-height:54px;
  padding:0 17px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  outline:0;
  background:rgba(255,255,255,.035);
  color:#fff;
  font:inherit;
  font-size:16px;
}

.access-request-form input:focus{
  border-color:#62cfd2;
  box-shadow:0 0 0 3px rgba(98,207,210,.1);
}

.access-request-form input::placeholder{
  color:#718485;
}

.access-request-trap{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
}

.access-request-status{
  min-height:20px;
  margin:0;
  color:#f1c76b;
  font-size:14px;
  line-height:1.4;
  text-align:center;
}

.access-request-status.success{
  color:#70e0c3;
}

.access-request-status.error{
  color:#ff9898;
}

.access-request-submit{
  min-height:56px;
  border:0;
  border-radius:16px;
  background:#00c49a;
  color:#041713;
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.access-request-submit:disabled{
  opacity:.62;
  cursor:wait;
}

/* ================= APP LAYOUT ================= */

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:26px 22px;
}

.side-nav{
  display:grid;
  gap:9px;
  margin-top:42px;
}

.nav-btn{
  height:54px;
  display:flex;
  align-items:center;
  gap:14px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#d4e3e4;
  padding:0 18px;
  text-align:left;
  font-size:18px;
  font-weight:500;
}

.nav-btn span{
  width:22px;
  color:#d3f3f0;
  opacity:.9;
}

.nav-btn:hover,
.nav-btn.active{
  color:#fff;
  background:rgba(255,255,255,.12);
}

.sidebar-support{
  margin-top:auto;
  margin-bottom:20px;
}

.user-card{
  width:100%;
  min-height:72px;
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:rgba(255,255,255,.07);
  color:#fff;
  padding:12px;
  text-align:left;
}

.user-card strong{
  display:block;
  font-size:16px;
  font-weight:500;
}

.user-card small{
  color:#c1d7d8;
  font-size:13px;
  font-weight:400;
}

.user-card b{
  font-size:16px;
  color:#cfeaea;
  font-weight:400;
}

.main{
  width:min(1280px,100%);
  margin:0 auto;
  padding:34px clamp(24px,4vw,58px) 52px;
}

.topbar-app{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:28px;
}

.topbar-app h1{
  margin:0;
  font-size:clamp(42px,4.7vw,66px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:600;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.circle-btn,
.profile-chip{
  border:1px solid var(--line);
  background:var(--card-2);
  color:#fff;
  border-radius:999px;
}

.circle-btn{
  position:relative;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:20px;
}

.circle-btn i{
  position:absolute;
  top:-7px;
  right:-5px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#00a9b8;
  color:#fff;
  font-style:normal;
  font-size:12px;
  font-weight:600;
}

.profile-chip{
  height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  font-size:24px;
}

.view{display:none}
.view.active{display:block}

/* ================= CARDS ================= */

.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.8fr);
  gap:20px;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(18,24,25,.88);
  box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.next-card{
  min-height:285px;
  padding:28px;
  background:
    radial-gradient(circle at top left, rgba(62,113,118,.42), transparent 28rem),
    linear-gradient(145deg, rgba(30,45,47,.95), rgba(18,24,25,.92));
}

.next-card h2{
  margin:0;
  max-width:650px;
  font-size:clamp(46px,5.4vw,76px);
  line-height:.9;
  letter-spacing:-.065em;
  font-weight:600;
}


.next-info-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
  max-width:640px;
}

.next-info-item{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;

  background:rgba(255,255,255,.045);
}

.next-info-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;

  border-radius:14px;
  background:rgba(154,210,214,.10);
  border:1px solid rgba(154,210,214,.18);

  color:var(--brand-light);
  font-size:18px;
  line-height:1;
}

.next-info-item small{
  display:block;
  margin-bottom:4px;

  color:var(--muted);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.next-info-item strong{
  display:block;

  color:var(--text);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
}


.my-card{
  padding:26px;
}

.card-title{
  margin:0 0 20px;
  font-size:24px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:600;
}

.my-assignment-empty{
  margin:0 0 22px;
  color:var(--muted);
  font-size:18px;
  line-height:1.45;
  font-weight:400;
}

.action-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;

}

.btn-ok,
.btn-bad,
.btn-muted{
  min-height:48px;
  border:0;
  border-radius:14px;
  padding:0 18px;
  color:#fff;
  font-size:15px;
  font-weight:500;
}

.btn-ok{background:var(--ok)}
.btn-bad{background:var(--bad)}
.btn-muted{background:var(--card-3); color:#d7e4e5; border:1px solid var(--line)}

.teams-preview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.visual-team-card{
  padding:26px;
}

.visual-team-card header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.visual-team-card h3{
  margin:0;
  font-size:25px;
  letter-spacing:-.035em;
  font-weight:600;
}

.team-title-icon{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.team-roster{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

.roster-person{
  width:74px;
  text-align:center;
}

.avatar{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#ffd977,#f0b94f);
  color:#111;
  font-size:34px;
  margin:0 auto;
}

.avatar.small{
  width:48px;
  height:48px;
  font-size:26px;
}

.roster-person strong{
  display:block;
  margin-top:8px;
  font-size:14px;
  line-height:1;
  font-weight:500;
}

.roster-person small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.05;
  font-weight:400;
}

.status-dot{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  margin:8px auto 0;
  border-radius:50%;
  border:2px solid currentColor;
  font-size:10px;
  font-weight:600;
}

.status-dot.confirmed{color:var(--ok)}
.status-dot.pending{color:var(--warn)}
.status-dot.cant{color:var(--bad)}

.more-pill{
  align-self:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#d8e3e3;
  padding:10px 14px;
  font-size:15px;
  font-weight:500;
}

.lower-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.list-card{
  padding:24px;
}

.clean-list{
  display:grid;
  gap:14px;
}

.clean-item{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
}

.clean-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--card-3);
  color:var(--brand-light);
  font-weight:500;
}

.clean-item strong{
  display:block;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.015em;
}

.clean-item small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
  font-weight:400;
}

.badge{
  border-radius:999px;
  padding:8px 11px;
  background:var(--card-3);
  font-size:12px;
  font-weight:500;
}

.badge.confirmed{color:var(--ok)}
.badge.pending{color:var(--warn)}
.badge.cant{color:var(--bad)}

.full-card{
  padding:28px;
}

.section-heading{
  margin:0 0 22px;
}

.section-heading h2{
  margin:0;
  font-size:38px;
  letter-spacing:-.045em;
  font-weight:600;
}

.section-heading p{
  margin:8px 0 0;
  color:var(--muted);
  font-weight:400;
}

.assignment-list{
  display:grid;
  gap:12px;
  margin-top:0;
  padding-top:0;

}

.assignment-row{
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:14px;
  padding:13px;
  border-radius:18px;
  background:var(--card-2);
  border:1px solid var(--line);
}

.assignment-row .avatar{
  width:54px;
  height:54px;
  font-size:28px;
}

.assignment-row strong{
  font-weight:500;
  letter-spacing:-.015em;
}

.assignment-row small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-weight:400;
}

/* ================= MOBILE ================= */

.mobile-nav{display:none}

@media (max-width:800px){
  body{
    background:
      radial-gradient(circle at top, rgba(62,113,118,.24), transparent 22rem),
      var(--bg);
  }

  .login-screen{
    display:block;
  }

  .login-brand-panel{
    display:none;
  }

  .login-content{
    min-height:100vh;
    padding:22px 14px;
    place-items:start;
  }

  .login-center{
    text-align:left;
    margin:0 auto;
  }

  .welcome-icon{
    margin:22px 0 24px;
    width:62px;
    height:62px;
    font-size:30px;
  }

  .login-center h1{
    font-size:54px;
  }

  .login-copy{
    margin:14px 0 22px;
    font-size:16px;
  }

  .search{
    width:100%;
    margin-bottom:16px;
  }

  .people-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .access-gateway-grid{
    grid-template-columns:1fr;
    gap:11px;
    margin-top:25px;
  }

  .access-gateway-card{
    min-height:104px;
    padding:16px;
    border-radius:19px;
  }

  .access-gateway-card:hover{
    transform:none;
  }

  .access-back-btn{
    margin:0 0 24px;
  }

  .access-request-panel .welcome-icon{
    margin-top:0;
  }

  .access-request-form{
    margin-top:22px;
  }

  .person-option{
    min-height:78px;
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:12px;
    place-items:center start;
    text-align:left;
    border-radius:18px;
    padding:12px 14px;
  }

  .person-option .avatar{
    width:52px;
    height:52px;
    font-size:28px;
    margin:0;
  }

  .person-option::after{
    content:"›";
    color:var(--muted);
    font-size:28px;
  }

  .app-shell{
    display:block;
    padding-bottom:92px;
  }

  .sidebar{
    display:none;
  }

  .main{
    padding:20px 14px 24px;
  }

  .topbar-app{
    align-items:center;
    margin-bottom:20px;
  }

  .topbar-app h1{
    font-size:40px;
  }

  .top-actions{
    gap:9px;
  }

  .circle-btn{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  font-size:18px;
}

.profile-chip{
  height:42px;
}

  .dashboard-grid,
  .teams-preview,
  .lower-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .next-card{
    min-height:250px;
    padding:22px;
    border-radius:26px;
  }

  .next-card h2{
    font-size:48px;
  }
  
  .next-info-list{
    grid-template-columns:1fr;
    margin-top:24px;
  }

  .next-info-item{
    min-height:58px;
  }



  .card{
    border-radius:24px;
  }

  .my-card,
  .visual-team-card,
  .list-card,
  .full-card{
    padding:20px;
  }

  .team-roster{
    gap:16px;
  }

  .roster-person{
    width:66px;
  }

  .avatar{
    width:58px;
    height:58px;
    font-size:30px;
  }

  .clean-item,
  .assignment-row{
    grid-template-columns:48px 1fr;
  }

  .clean-item .badge,
  .assignment-row .badge{
    grid-column:2;
    justify-self:start;
  }

  .mobile-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(14,77,84,.96), rgba(8,46,50,.96));
    backdrop-filter:blur(20px);
    box-shadow:0 18px 50px rgba(0,0,0,.38);
  }

  .mobile-nav-btn{
    min-height:54px;
    border:0;
    border-radius:17px;
    background:transparent;
    color:#d5e8e8;
    display:grid;
    place-items:center;
    gap:2px;
    font-weight:500;
  }

  .mobile-nav-btn span{
    font-size:19px;
  }

  .mobile-nav-btn small{
    font-size:10px;
  }

  .mobile-nav-btn.active{
    background:rgba(255,255,255,.13);
    color:#fff;
  }

  /* Emoji picker mobile */

  .emoji-screen{
    padding:14px;
    align-items:start;
  }

  .emoji-card{
    border-radius:28px;
    padding:22px;
    margin-top:10px;
  }

  .emoji-brand{ margin-bottom:38px; }

  .emoji-hero{ text-align:left; }

  .emoji-hero h1{ font-size:54px; }

  .emoji-grid{
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }

  .emoji-option{
    height:66px;
    border-radius:18px;
    font-size:32px;
  }

}


/* ================= EMOJI PICKER ================= */

.emoji-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at top left, rgba(62,113,118,.34), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(0,182,134,.12), transparent 28rem),
    var(--bg);
}

.emoji-card{
  width:min(860px,100%);
  border:1px solid var(--line);
  border-radius:36px;
  background:rgba(18,24,25,.92);
  box-shadow:var(--shadow);
  padding:34px;
}

.emoji-brand{ margin-bottom:46px; }

.emoji-hero{
  text-align:center;
  margin-bottom:28px;
}

.emoji-hero h1{
  margin:0;
  font-size:clamp(46px,6vw,78px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:600;
}

.emoji-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:12px;
  margin:30px auto 22px;
}

.emoji-option{
  height:72px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  font-size:34px;
  transition:.16s ease;
}

.emoji-option:hover{
  transform:translateY(-2px);
  border-color:rgba(154,210,214,.55);
  background:rgba(62,113,118,.28);
}

.skip-btn{
  display:block;
  margin:12px auto 0;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card-2);
  color:var(--muted);
  padding:0 18px;
  font-weight:500;
}

/* ================= CONFIRMO ================= */

.confirmo-date-group{
  margin-top:18px;
  padding-top:0;
}

.confirmo-date-group:first-child{
  margin-top:18px;
}

.confirmo-date-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin:0 0 22px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(122,230,221,.10);
  border:1px solid rgba(122,230,221,.25);
  color:var(--brand-light);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.confirmo-team-group{
  margin-bottom:34px;
}

.confirmo-team-title{
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-size:28px;
  font-weight:700;
  letter-spacing:-.04em;
}

.confirmo-team-title::before{
  content:"";
  display:inline-block;
  width:4px;
  height:24px;
  margin-right:12px;
  border-radius:999px;
  background:var(--brand-light);
  vertical-align:middle;
}

.confirmo-team-group .assignment-list{
  gap:12px;
}

/* =========================================================
   CONFIRMO - SELECTOR DE FECHAS
========================================================= */

.confirmo-date-label{
  margin:26px 0 12px;

  color:var(--muted);

  font-size:13px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.10em;
}

.confirmo-date-tabs{
  display:flex;
  gap:12px;

  margin:0;
  padding:4px 0 0;

  overflow-x:auto;
  flex-wrap:nowrap;

  scrollbar-width:none;
}

.confirmo-date-tabs::-webkit-scrollbar{
  display:none;
}

.confirmo-date-tab{
  flex-shrink:0;

  min-width:128px;
  min-height:64px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:0 20px;

  border-radius:18px;
  border:1px solid rgba(154,210,214,.18);

  background:rgba(255,255,255,.035);
  color:var(--muted);

  font-size:16px;
  font-weight:700;

  cursor:pointer;
  transition:.18s ease;
}

.confirmo-date-tab:hover{
  transform:translateY(-2px);

  border-color:rgba(154,210,214,.38);
  background:rgba(154,210,214,.08);
}

.confirmo-date-tab.active{
  color:#fff;

  background:linear-gradient(
    135deg,
    rgba(62,113,118,.95),
    rgba(84,163,171,.95)
  );

  border-color:rgba(154,210,214,.55);

  box-shadow:0 12px 28px rgba(62,113,118,.28);
}

.confirmo-date-icon{
  font-size:20px;
  line-height:1;
}

/* ---------------- MOBILE ---------------- */

@media (max-width:800px){

  .confirmo-date-label{
    margin-top:22px;
  }

  .confirmo-date-tabs{
    gap:10px;
    margin-bottom:0;
  }

  .confirmo-date-tab{
    min-width:112px;
    min-height:58px;

    padding:0 16px;

    border-radius:16px;

    font-size:15px;
  }

  .confirmo-date-icon{
    font-size:18px;
  }

}

/* =========================================================
   CONFIRMO - HORARIOS POR FECHA
========================================================= */

.confirmo-schedule{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;

  margin:0 0 18px;
}

.confirmo-schedule-item{
  min-width:0;

  display:flex;
  align-items:center;
  gap:10px;

  padding:13px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;

  background:rgba(255,255,255,.025);
}

.confirmo-schedule-item > span{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:rgba(107,189,196,.12);
}

.confirmo-schedule-item div{
  min-width:0;

  display:grid;
  gap:3px;
}

.confirmo-schedule-item small{
  color:var(--muted);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.06em;
}

.confirmo-schedule-item strong{
  overflow-wrap:anywhere;

  font-size:13px;
  line-height:1.25;
}

@media (max-width:800px){

  .confirmo-schedule{
    grid-template-columns:1fr 1fr;
    margin-bottom:18px;
  }

}

@media (max-width:480px){

  .confirmo-schedule{
    grid-template-columns:1fr;
  }

}

/* ================= LOADER / SPLASH SCREEN ================= */

/*
  FUENTE DEL BRANDING DEL LOADER
  Subí tu archivo webfont a:
  /assets/fonts/TTTravelsNextTrialVariable.woff2

  Si usás otro nombre/ruta, cambiá solamente la URL de abajo.
*/
@font-face{
  font-family:"TT Travels Next Trial";
  src:url("/assets/fonts/TT Travels Next Trial Medium.ttf") format("truetype");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

@font-face{
  font-family:"TT Travels Next Trial";
  src:url("/assets/fonts/TT Travels Next Trial Black.ttf") format("truetype");
  font-style:normal;
  font-weight:900;
  font-display:swap;
}

.app-loading{
  position:relative;

  width:100%;
  min-height:100vh;
  min-height:100dvh;
  height:100vh;
  height:100dvh;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    calc(24px + env(safe-area-inset-top))
    24px
    calc(28px + env(safe-area-inset-bottom));

  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(62,113,118,.22),
      transparent 34rem
    ),
    radial-gradient(
      circle at 50% 110%,
      rgba(14,77,84,.34),
      transparent 32rem
    ),
    #081011;

  color:#fff;
  text-align:center;
}

.loader-main{
  width:min(330px,76vw);

  display:flex;
  flex-direction:column;
  align-items:center;

  transform:translateY(-7vh);
}

.loader-logo{
  width:136px;
  height:136px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 20px 45px
      rgba(0,0,0,.28)
    );

  animation:
    loaderLogoEnter .65s ease-out both,
    loaderLogoFloat 3s ease-in-out .65s infinite;
}

.loader-bar{
  position:relative;

  width:250px;
  max-width:68vw;
  height:8px;

  margin-top:30px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.075);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035);
}

.loader-fill{
  width:0%;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #3e7176 0%,
      #78b9be 48%,
      #d5f5f3 100%
    );

  box-shadow:
    0 0 16px
    rgba(154,210,214,.25);

  transition:
    width .18s linear;
}

/*
  app.js sigue actualizando loaderPercent,
  pero visualmente no lo mostramos.
*/
.loader-percent{
  position:absolute;

  width:1px;
  height:1px;

  overflow:hidden;

  clip:rect(0 0 0 0);
  clip-path:inset(50%);

  white-space:nowrap;
}

.loader-branding{
  position:absolute;

  left:50%;

  bottom:
    calc(
      62px +
      env(safe-area-inset-bottom)
    );

  transform:translateX(-50%);

  width:min(300px,76vw);

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:12px;

  text-align:center;

  animation:
    loaderBrandEnter
    .7s
    .15s
    ease-out
    both;
}

.loader-app-name{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  margin:0;

  color:#fff;

  font-family:
    "TT Travels Next Trial",
    var(--font);

  font-size:31px;
  line-height:1;
  letter-spacing:-.045em;

  font-weight:900;
}

.loader-app-name span{
  color:inherit;
  font-size:inherit;

  font-family:
    "TT Travels Next Trial",
    var(--font);

  font-weight:500;
  letter-spacing:-.04em;
}

.loader-full-logo{
  width:155px;
  max-width:60vw;
  height:auto;

  object-fit:contain;

  opacity:.88;
}

@keyframes loaderLogoEnter{
  from{
    opacity:0;
    transform:
      scale(.86)
      translateY(10px);
  }

  to{
    opacity:1;
    transform:
      scale(1)
      translateY(0);
  }
}

@keyframes loaderLogoFloat{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }
}

@keyframes loaderBrandEnter{
  from{
    opacity:0;
    transform:translate(-50%,10px);
  }

  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

/* Mobile: splash totalmente fija, sin scrollbar ni desplazamiento */
@media (max-width:1024px){

  html:has(.app-loading),
  body:has(.app-loading){
    width:100%;
    height:100%;
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  body:has(.app-loading){
    position:fixed;
    inset:0;
  }

  .app-loading{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;

    overflow:hidden !important;
    overscroll-behavior:none;

    touch-action:none;
  }
}

@media (max-width:600px){

  .loader-main{
    width:min(310px,76vw);
    transform:translateY(-8vh);
  }

  .loader-logo{
    width:122px;
    height:122px;
  }

  .loader-bar{
    width:235px;
    max-width:66vw;
    height:8px;
    margin-top:28px;
  }

  .loader-branding{
    bottom:
      calc(
        52px +
        env(safe-area-inset-bottom)
      );
  }

  .loader-app-name{
    font-size:29px;
  }

  .loader-full-logo{
    width:150px;
  }
}


/* ================= VER TODAS LAS FECHAS ================= */

.all-dates-btn{
  width:100%;
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border:none;
  border-radius:18px;

  background:linear-gradient(
    135deg,
    rgba(62,113,118,.95),
    rgba(84,163,171,.95)
  );

  color:#fff;

  font-size:16px;
  font-weight:700;

  cursor:pointer;
  transition:.2s;
}

.all-dates-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(84,163,171,.25);
}

.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:999;

  transform:translateX(-50%);
  padding:14px 18px;
  border-radius:999px;

  background:rgba(18,24,25,.96);
  border:1px solid rgba(154,219,214,.24);
  color:#fff;

  font-size:15px;
  font-weight:700;

  box-shadow:0 18px 50px rgba(0,0,0,.35);

  animation:toastIn .25s ease;
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translate(-50%,20px);
  }

  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

.assignment-date{
  display:block;
  margin-top:4px;

  color:var(--brand-light);

  font-size:12px;
  font-weight:600;
}

.clickable-assignment{
  cursor:pointer;
  transition:.18s;
}

.clickable-assignment:hover{
  transform:translateY(-2px);
  border-color:rgba(154,219,214,.35);
}

.assignment-confirm-actions{
  display:flex;
  gap:10px;
}

.mini-confirm,
.mini-cant{
  width:44px;
  height:44px;

  border:none;
  border-radius:14px;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  font-weight:700;

  transition:.18s;
}

.mini-confirm{
  background:rgba(0,182,134,.16);
  color:#00d6a0;
}

.mini-confirm:hover{
  background:#00b686;
  color:white;
  transform:translateY(-2px);
}

.mini-cant{
  background:rgba(255,91,91,.16);
  color:#ff5b5b;
}

.mini-cant:hover{
  background:#ff5b5b;
  color:white;
  transform:translateY(-2px);
}

.summary-assignment-row{
  grid-template-columns:54px 1fr auto;
}

.summary-assignment-row .badge{
  grid-column:auto;
  justify-self:end;
}

@media (max-width:800px){
  .summary-assignment-row{
    grid-template-columns:54px 1fr auto;
  }

  .summary-assignment-row .badge{
    grid-column:auto;
    justify-self:end;
  }
}

.quick-btn{
  width:100%;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.quick-btn strong{
  color:#fff;
}

.quick-btn small{
  color:rgba(205,232,236,.85);
}

.quick-btn:hover{
  border-color:rgba(154,219,214,.35);
  transform:translateY(-2px);
}

.btn-muted,
.more-pill{
  cursor:pointer;
}

.admin-card #sendConvocationEmailsBtn {
  margin-top: 6px;
}

#convocationEmailStatus {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
}

.admin-summary {
  margin: 14px 0 16px;
}

.summary-main {
  margin-bottom: 12px;
}

.summary-main span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.summary-main strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  letter-spacing: -.03em;
}

.summary-main small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.summary-stats div {
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.summary-stats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.summary-stats strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
}

.summary-mode {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.summary-mode.test {
  color: var(--warn);
  background: rgba(246,176,66,.12);
}

.summary-mode.live {
  color: var(--ok);
  background: rgba(0,182,134,.12);
}

.notifications-panel {
  position: absolute;
  top: 92px;
  right: 120px;
  z-index: 90;

  width: min(360px, calc(100vw - 28px));

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;

  background: rgba(18,24,25,.98);
  box-shadow: 0 28px 80px rgba(0,0,0,.45);

  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transition: .18s ease;
}

.notifications-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  border-bottom: 1px solid rgba(255,255,255,.08);
}

.notifications-header strong {
  font-size: 18px;
  font-weight: 700;
}

.notifications-header button {
  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 50%;

  background: rgba(255,255,255,.06);
  color: var(--text);

  font-size: 22px;
  line-height: 1;
}

.notifications-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.notification-item {
  width: 100%;

  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: flex-start;
  gap: 12px;

  padding: 12px;

  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;

  background: rgba(255,255,255,.025);
  color: var(--text);

  text-align: left;
}

.notification-item:hover {
  background: rgba(154,210,214,.08);
  border-color: rgba(154,210,214,.22);
}

.notification-item > span {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 14px;
  background: rgba(109,221,230,.12);

  font-size: 22px;
}

.notification-item strong {
  display: block;
  margin-bottom: 4px;

  font-size: 15px;
  font-weight: 700;
}

.notification-item small {
  display: block;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.notification-empty {
  padding: 18px;
  text-align: center;
}

.notification-empty strong {
  display: block;
  margin-bottom: 5px;

  font-size: 16px;
}

.notification-empty small {
  color: var(--muted);
}

@media (max-width:800px){

  .top-actions{
    flex-shrink:0;
  }

  .notifications-panel{
    top:82px;
    left:14px;
    right:14px;
    width:auto;
  }
}

/* ================= CRONOGRAMA ================= */

#view-cronograma {
  display: none;
}

#view-cronograma.active {
  display:block;
}

.cronograma-experience{
  --cronograma-line:rgba(154,210,214,.13);
  --cronograma-soft:rgba(154,210,214,.06);

  display:grid;
  gap:20px;
}

.cronograma-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  align-items:end;
  gap:clamp(28px,5vw,70px);

  min-height:310px;
  padding:clamp(28px,4vw,48px);

  border:1px solid rgba(154,210,214,.13);
  border-radius:30px;

  background:
    radial-gradient(circle at 86% 18%,rgba(109,221,230,.18),transparent 18rem),
    radial-gradient(circle at 8% 112%,rgba(14,77,84,.65),transparent 27rem),
    linear-gradient(135deg,#111b1c 0%,#0c1415 68%,#0d191a 100%);

  box-shadow:0 28px 80px rgba(0,0,0,.22);
}

.cronograma-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-98px;
  right:-76px;
  width:310px;
  height:310px;
  border:1px solid rgba(154,210,214,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 52px rgba(154,210,214,.025),
    0 0 0 104px rgba(154,210,214,.018);
}

.cronograma-hero-copy{
  min-width:0;
}

.cronograma-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;

  color:var(--brand-light);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.cronograma-kicker i,
.cronograma-live-pill i{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:#6ddde6;
  box-shadow:0 0 0 5px rgba(109,221,230,.1);
}

.cronograma-hero-copy h2{
  margin:0;
  max-width:640px;

  color:var(--text);
  font-size:clamp(46px,6.1vw,78px);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.065em;
}

.cronograma-hero-copy h2 em{
  color:var(--brand-light);
  font-style:normal;
  font-weight:500;
}

.cronograma-hero-copy p{
  max-width:520px;
  margin:22px 0 0;

  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

.cronograma-hero-summary{
  min-width:0;
  padding:24px;

  border:1px solid rgba(255,255,255,.1);
  border-radius:23px;
  background:rgba(8,15,16,.55);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}

.cronograma-hero-summary > span{
  display:block;
  margin-bottom:9px;
  color:var(--brand-light);
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}

.cronograma-hero-summary > strong{
  display:block;
  color:var(--text);
  font-size:clamp(21px,2.3vw,30px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.cronograma-summary-stats{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(84px,.5fr);
  gap:10px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.cronograma-summary-stats div{
  display:grid;
  gap:6px;
}

.cronograma-summary-stats small{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}

.cronograma-summary-stats b{
  color:var(--text);
  font-size:14px;
  font-weight:700;
}

.cronograma-layout{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(310px,.78fr);
  align-items:start;
  gap:20px;
}

.cronograma-program-panel,
.cronograma-announcements-panel{
  min-width:0;
  padding:clamp(22px,3vw,32px);

  border:1px solid rgba(255,255,255,.075);
  border-radius:26px;
  background:
    linear-gradient(155deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),
    #101718;
}

.cronograma-announcements-panel{
  position:sticky;
  top:24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(109,221,230,.08),transparent 18rem),
    linear-gradient(155deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),
    #101718;
}

.cronograma-panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.cronograma-panel-heading > div{
  min-width:0;
}

.cronograma-panel-heading > div > span{
  display:block;
  margin-bottom:6px;
  color:var(--brand-light);
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}

.cronograma-panel-heading h3{
  margin:0;
  color:var(--text);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1;
  letter-spacing:-.045em;
}

.cronograma-live-pill{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:9px 12px;
  border:1px solid rgba(109,221,230,.14);
  border-radius:999px;
  background:rgba(109,221,230,.055);
  color:var(--brand-light);
  font-size:10px;
  font-weight:700;
}

.cronograma-live-pill i{
  width:5px;
  height:5px;
  box-shadow:none;
}

.cronograma-arrivals{
  margin-top:26px;
  padding:20px;
  border:1px solid var(--cronograma-line);
  border-radius:20px;
  background:var(--cronograma-soft);
}

.cronograma-mini-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.cronograma-mini-heading span{
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.cronograma-mini-heading small{
  color:var(--muted);
  font-size:10px;
}

.cronograma-arrivals-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.cronograma-arrival-card{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  background:rgba(8,15,16,.42);
}

.cronograma-arrival-icon{
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(109,221,230,.1);
  color:var(--brand-light);
  font-size:16px;
}

.cronograma-arrival-copy{
  min-width:0;
  display:grid;
  gap:3px;
}

.cronograma-arrival-copy small{
  color:var(--brand-light);
  font-size:11px;
  font-weight:800;
}

.cronograma-arrival-copy strong{
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:14px;
  line-height:1.25;
}

.cronograma-arrival-copy span{
  overflow-wrap:anywhere;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
}

.cronograma-timeline{
  display:grid;
  gap:4px;
  margin-top:28px;
}

.cronograma-step{
  min-width:0;
  display:grid;
  grid-template-columns:66px 46px minmax(0,1fr);
  align-items:start;
  gap:13px;
  padding:10px 6px;
  border-radius:17px;
  transition:background .16s ease,transform .16s ease;
}

@media (hover:hover){
  .cronograma-step:hover{
    background:rgba(154,210,214,.035);
    transform:translateX(2px);
  }
}

.cronograma-step time{
  padding-top:12px;
  color:var(--brand-light);
  font-size:13px;
  font-weight:800;
  letter-spacing:-.01em;
}

.cronograma-step-rail{
  position:relative;
  min-height:52px;
}

.cronograma-step-rail > span{
  position:relative;
  z-index:1;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(109,221,230,.12);
  border-radius:14px;
  background:#152223;
  font-size:17px;
  box-shadow:0 0 0 5px #101718;
}

.cronograma-step:not(:last-child) .cronograma-step-rail::after{
  content:"";
  position:absolute;
  top:42px;
  bottom:-20px;
  left:20px;
  width:1px;
  background:linear-gradient(var(--cronograma-line),rgba(154,210,214,.03));
}

.cronograma-step-copy{
  min-width:0;
  display:grid;
  gap:4px;
  padding:8px 0 11px;
}

.cronograma-step-copy small{
  color:rgba(154,210,214,.56);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

.cronograma-step-copy strong{
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:17px;
  line-height:1.2;
}

.cronograma-step-copy span{
  overflow-wrap:anywhere;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}

.cronograma-announcements-icon{
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid rgba(109,221,230,.14);
  border-radius:14px;
  background:rgba(109,221,230,.06);
  color:var(--brand-light);
  font-size:19px;
}

.cronograma-announcements-intro{
  margin:14px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.cronograma-announcements-list{
  display:grid;
  gap:11px;
  margin-top:22px;
}

.cronograma-announcement-card{
  min-width:0;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:14px;
  padding:15px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}

@media (hover:hover){
  .cronograma-announcement-card:hover{
    border-color:rgba(109,221,230,.17);
    background:rgba(109,221,230,.04);
    transform:translateY(-1px);
  }
}

.cronograma-announcement-date{
  height:60px;
  display:grid;
  place-content:center;
  text-align:center;
  border:1px solid rgba(109,221,230,.12);
  border-radius:15px;
  background:rgba(109,221,230,.075);
}

.cronograma-announcement-date strong{
  color:var(--text);
  font-size:20px;
  line-height:1;
}

.cronograma-announcement-date span{
  margin-top:4px;
  color:var(--brand-light);
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
}

.cronograma-announcement-copy{
  min-width:0;
  display:grid;
  align-content:center;
  gap:5px;
}

.cronograma-announcement-copy small{
  overflow-wrap:anywhere;
  color:var(--brand-light);
  font-size:9px;
  font-weight:700;
  letter-spacing:.035em;
}

.cronograma-announcement-copy strong{
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:14px;
  line-height:1.25;
}

.cronograma-announcement-copy p{
  margin:0;
  overflow-wrap:anywhere;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.cronograma-empty-state{
  display:grid;
  place-items:center;
  min-height:210px;
  padding:28px;
  border:1px dashed rgba(154,210,214,.13);
  border-radius:19px;
  text-align:center;
}

.cronograma-empty-state--compact{
  min-height:170px;
}

.cronograma-empty-state > span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:10px;
  border-radius:14px;
  background:rgba(109,221,230,.08);
  color:var(--brand-light);
  font-size:20px;
}

.cronograma-empty-state strong{
  color:var(--text);
  font-size:15px;
}

.cronograma-empty-state p{
  max-width:340px;
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.cronograma-loading-state,
.cronograma-error-state{
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:32px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:28px;
  background:#101718;
  text-align:left;
}

.cronograma-loading-state div,
.cronograma-error-state div{
  display:grid;
  gap:4px;
}

.cronograma-loading-state strong,
.cronograma-error-state strong{
  color:var(--text);
  font-size:16px;
}

.cronograma-loading-state small,
.cronograma-error-state p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.cronograma-loading-orb{
  width:34px;
  height:34px;
  flex:none;
  border:3px solid rgba(109,221,230,.15);
  border-top-color:var(--brand-light);
  border-radius:50%;
  animation:cronograma-spin .8s linear infinite;
}

.cronograma-error-state > span{
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,116,116,.1);
  color:#ff9b9b;
  font-weight:800;
}

.cronograma-error-state .btn-muted{
  margin-left:10px;
}

@keyframes cronograma-spin{
  to{transform:rotate(360deg)}
}

@media (max-width:1100px){
  .cronograma-hero{
    grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);
  }

  .cronograma-layout{
    grid-template-columns:1fr;
  }

  .cronograma-announcements-panel{
    position:static;
  }

  .cronograma-announcements-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:800px){
  .cronograma-experience{
    gap:14px;
  }

  .cronograma-hero{
    grid-template-columns:1fr;
    min-height:0;
    gap:28px;
    border-radius:24px;
  }

  .cronograma-hero-copy h2{
    font-size:clamp(44px,12vw,65px);
  }

  .cronograma-program-panel,
  .cronograma-announcements-panel{
    border-radius:22px;
  }
}

@media (max-width:600px){
  .cronograma-hero{
    padding:24px 20px;
  }

  .cronograma-hero-copy h2{
    font-size:clamp(42px,13vw,56px);
  }

  .cronograma-hero-copy p{
    margin-top:18px;
    font-size:13px;
  }

  .cronograma-hero-summary{
    padding:19px;
  }

  .cronograma-program-panel,
  .cronograma-announcements-panel{
    padding:20px 16px;
  }

  .cronograma-panel-heading h3{
    font-size:25px;
  }

  .cronograma-live-pill{
    padding:8px 10px;
    font-size:9px;
  }

  .cronograma-arrivals{
    padding:15px;
  }

  .cronograma-mini-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .cronograma-arrivals-grid,
  .cronograma-announcements-list{
    grid-template-columns:1fr;
  }

  .cronograma-step{
    grid-template-columns:53px 40px minmax(0,1fr);
    gap:8px;
    padding-inline:0;
  }

  .cronograma-step time{
    font-size:12px;
  }

  .cronograma-step-rail > span{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:15px;
  }

  .cronograma-step:not(:last-child) .cronograma-step-rail::after{
    top:38px;
    left:18px;
  }

  .cronograma-step-copy{
    padding-top:6px;
  }

  .cronograma-step-copy strong{
    font-size:15px;
  }

  .cronograma-error-state{
    align-items:center;
    flex-direction:column;
    text-align:center;
  }

  .cronograma-error-state .btn-muted{
    margin:8px 0 0;
  }
}

/* ================= ADMIN EDITOR ================= */

.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.admin-form label {
  display: grid;
  gap: 7px;
}

.admin-form label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-form input,
.admin-form select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  padding: 0 14px;
  outline: 0;
}

.admin-form button {
  align-self: end;
}

.admin-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
}

.admin-list-header h3 {
  margin: 0;
  font-size: 24px;
}

.admin-edit-list {
  display: grid;
  gap: 10px;
}

.admin-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.admin-edit-row strong {
  display: block;
  font-size: 16px;
}

.admin-edit-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

@media (max-width:800px) {
  .admin-form {
    grid-template-columns: 1fr;
  }

  .admin-list-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-edit-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ================= SETLIST ================= */

.setlist-grid {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.setlist-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
}

.setlist-number {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(147, 221, 226, .16);
  color: var(--brand-light);
  font-weight: 800;
  font-size: 18px;
}

.setlist-card strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.setlist-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.setlist-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width:800px) {
  .setlist-card {
    grid-template-columns: 44px 1fr;
    padding: 16px;
  }

  .setlist-card strong {
    font-size: 19px;
  }
}

/* =========================================================
   SETLIST
========================================================= */

.setlist-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.setlist-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;

    border-radius:999px;
    background:rgba(255,255,255,.07);

    color:var(--muted);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.setlist-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
}

.setlist-share-btn{
    min-height:34px;
    margin:0;
    padding:0 13px;

    border:1px solid rgba(147,221,226,.25);
    border-radius:999px;

    background:rgba(147,221,226,.08);
    color:var(--brand-light);

    font:inherit;
    font-size:13px;
    font-weight:750;
    white-space:nowrap;

    cursor:pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.setlist-share-btn:hover,
.setlist-share-btn:focus-visible{
    border-color:rgba(147,221,226,.55);
    background:rgba(147,221,226,.16);
    outline:none;
    transform:translateY(-1px);
}

.playlist-button{
    width:100%;
    margin:22px 0 28px;
    padding:18px 22px;

    border:none;
    border-radius:18px;

    background:linear-gradient(
        90deg,
        var(--brand),
        var(--brand-light)
    );

    color:#fff;
    font-size:17px;
    font-weight:700;
    letter-spacing:.4px;

    cursor:pointer;
    transition:.25s;
}

.playlist-button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(0,0,0,.28);
}

.setlist-card{
    grid-template-columns:46px minmax(0,1fr);
}

.setlist-card-with-lyrics{
    grid-template-columns:46px minmax(0,1fr) auto;
}

.setlist-number{
    width:38px;
    height:38px;
    border-radius:14px;
    font-size:16px;
}

.setlist-content strong{
    display:block;
}

.song-lyrics-chip.setlist-lyrics-btn{
    flex:none;
    align-self:center;
    justify-self:center;
    min-height:34px;
    padding:0 11px;
    font-size:12px;
}

.setlist-artist{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
}

.setlist-lead{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;

    color:var(--muted);
    font-size:14px;
    font-weight:500;
}

.setlist-lead span{
    color:var(--muted);
    font-weight:700;
}

.setlist-lead strong{
    font-size:18px;
    color:var(--text);
}

.setlist-card-manageable{
    grid-template-columns:46px minmax(0,1fr) 44px;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}

.setlist-card-manageable.setlist-card-with-lyrics{
    grid-template-columns:46px minmax(0,1fr) auto 44px;
}

.setlist-drag-handle{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    padding:0;
    border:1px solid rgba(147,221,226,.18);
    border-radius:14px;

    background:rgba(147,221,226,.08);
    color:var(--brand-light);

    font-size:20px;
    line-height:1;

    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.setlist-drag-handle:hover,
.setlist-drag-handle:focus-visible{
    border-color:rgba(147,221,226,.5);
    background:rgba(147,221,226,.16);
    outline:none;
}

.setlist-drag-handle:active{
    cursor:grabbing;
}

.setlist-drag-handle:disabled{
    cursor:wait;
    opacity:.5;
}

.setlist-card.is-dragging{
    z-index:2;
    opacity:.55;
    border-color:rgba(147,221,226,.55);
    background:rgba(147,221,226,.1);
    transform:scale(.985);
}

.setlist-grid.is-reordering{
    user-select:none;
    -webkit-user-select:none;
}

.setlist-management{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
}

.setlist-reorder-help{
    margin:0 0 14px;
    color:var(--muted);
    font-size:13px;
    font-weight:650;
    line-height:1.4;
}

.setlist-management-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.setlist-management-actions button{
    min-height:46px;
    margin:0;
    padding:0 20px;
}

.setlist-management-actions button:disabled{
    cursor:not-allowed;
    opacity:.48;
}

.confirm-setlist-copy{
    margin:0 0 20px;
    color:var(--muted);
    font-size:15px;
    line-height:1.55;
}

@media (max-width:800px){
    .setlist-heading{
        display:block;
    }

    .setlist-count{
        margin-top:12px;
    }

    .setlist-header-actions{
        justify-content:flex-start;
        margin-top:12px;
    }

    .setlist-header-actions .setlist-count{
        margin-top:0;
    }

    .setlist-card{
        grid-template-columns:40px minmax(0,1fr);
        gap:11px;
    }

    .setlist-card-with-lyrics{
        grid-template-columns:40px minmax(0,1fr) auto;
    }

    .setlist-card-manageable{
        grid-template-columns:40px minmax(0,1fr) 40px;
        gap:11px;
    }

    .setlist-card-manageable.setlist-card-with-lyrics{
        grid-template-columns:40px minmax(0,1fr) auto 40px;
    }

    .setlist-drag-handle{
        width:40px;
        height:40px;
        border-radius:13px;
    }

    .song-lyrics-chip.setlist-lyrics-btn{
        min-height:34px;
        padding:0 10px;
        font-size:12px;
    }

    .setlist-management-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .setlist-management-actions button{
        width:100%;
    }
}

/* =========================================================
   CANCIONES TABS / CANCIONERO
========================================================= */

.songs-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;

    width:100%;
    max-width:420px;

    padding:6px;
    margin:0 0 22px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.035);
}


.songs-tab{
    min-height:42px;
    padding:0 16px;
    border:none;
    border-radius:13px;
    background:transparent;
    color:var(--muted);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}


.songs-tab.active{
    background:rgba(147,221,226,.16);
    color:var(--brand-light);
}

.coming-soon-card{
    margin-top:24px;
    padding:34px 24px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:rgba(255,255,255,.035);

    text-align:center;
}

.coming-soon-card span{
    display:block;
    font-size:42px;
    margin-bottom:14px;
}

.coming-soon-card h3{
    margin:0 0 8px;
    font-size:26px;
}

.coming-soon-card p{
    max-width:520px;
    margin:0 auto;
    color:var(--muted);
    font-size:16px;
    line-height:1.45;
}

@media (max-width:800px){
    .songs-tabs{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }
}

/* =========================================================
   EQUIPOS — MOBILE
========================================================= */

.roster-person small{
  min-height:32px;
}

.roster-person .status-dot{
  margin-top:8px;
}

@media (max-width:800px){

  .team-roster{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px 8px;
    align-items:start;
  }

  .roster-person{
    width:100%;
    min-width:0;
  }

  .roster-person strong{
    min-height:28px;
  }

  .roster-person small{
    min-height:20px;
  }

  .roster-person .status-dot{
    margin-top:4px;
  }

  .more-pill{
    width:74px;
    height:42px;
    justify-self:center;
    align-self:center;
    padding:0;
  }
}

/* =========================================================
   EMOJI PICKER — MOBILE
========================================================= */

@media (max-width:800px){

  .emoji-screen{
    display:block;
    min-height:100vh;
    padding:calc(env(safe-area-inset-top) + 18px) 14px 28px;
    overflow-x:hidden;
  }

  .emoji-card{
    width:100%;
    padding:20px 16px 24px;
    border-radius:28px;
    margin:0 auto;
    overflow:hidden;
  }

  .emoji-brand{
    margin-bottom:26px;
  }

  .emoji-brand img{
    width:46px;
    height:46px;
  }

  .emoji-brand strong{
    font-size:24px;
  }

  .emoji-hero{
    text-align:left;
    margin-bottom:20px;
  }

  .emoji-hero h1{
    font-size:42px;
    line-height:.95;
    letter-spacing:-.055em;
  }

  .emoji-hero .login-copy{
    margin:12px 0 20px;
    font-size:15px;
    line-height:1.35;
  }

  .emoji-grid{
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:18px 0 20px;
  }

  .emoji-option{
    width:100%;
    height:64px;
    border-radius:18px;
    font-size:31px;
  }

  .skip-btn{
    display:block;

    margin:36px auto 12px;

    min-width:210px;
    height:50px;

    border:1px solid var(--line);
    border-radius:999px;

    background:var(--card-2);
    color:var(--muted);

    font-weight:600;
}
}

/* =========================================================
   CONFIRMO — ACCIONES MOBILE
========================================================= */

@media (max-width:800px){

  .assignment-row{
    grid-template-columns:54px minmax(0,1fr) auto !important;
    align-items:center;
  }

  .assignment-row .badge{
    grid-column:3 !important;
    justify-self:end;
  }

  .assignment-confirm-actions{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end;

    display:flex;
    align-items:center;
    gap:8px;
  }

  .mini-confirm,
  .mini-cant{
    width:42px;
    height:42px;
    border-radius:14px;
  }
}

/* =========================================================
   SETLIST BLOQUEADO
========================================================= */

.locked-setlist-wrapper{
    position:relative;
    margin-top:24px;
}

.locked-setlist{

    max-height:360px;
    overflow:hidden;

    filter:blur(10px);
    opacity:.20;

    pointer-events:none;
    user-select:none;

    transition:.25s;
}

.locked-setlist-overlay{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:min(520px,90%);

    padding:34px 36px;

    border-radius:24px;

    background:rgba(18,23,25,.92);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 18px 50px rgba(0,0,0,.45);

    text-align:center;
}

.locked-message{
    max-width:460px;
    margin:auto;
}

.locked-message .icon{
    display:block;
    font-size:52px;
    margin-bottom:14px;
}

.locked-message h3{
    margin:0 0 14px;
    font-size:2rem;
    letter-spacing:-.03em;
}

.locked-message p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
    font-size:16px;
}

.locked-message strong{
    display:block;
    margin-top:18px;
    color:var(--text);
    font-size:17px;
    line-height:1.5;
}

/* ---------------- MOBILE ---------------- */

@media (max-width:800px){

    .locked-setlist{

        max-height:280px;
        filter:blur(8px);
    }

    .locked-setlist-overlay{

    position:relative;

    top:auto;
    left:auto;

    transform:none;

    width:100%;

    margin-top:-260px;

    padding:28px 24px;

    background:transparent;
    backdrop-filter:none;

    border:none;
    box-shadow:none;
}

    .locked-message .icon{
        font-size:44px;
    }

    .locked-message h3{
        font-size:1.7rem;
    }

    .locked-message p{
        font-size:15px;
    }

    .locked-message strong{
        font-size:16px;
    }
    
    .locked-message{

    background:rgba(20,25,27,.92);

    border:1px solid rgba(255,255,255,.05);

    border-radius:22px;

    padding:28px 22px;
}
}

/* =========================================================
   DESKTOP ONLY LINE BREAKS
========================================================= */

.desktop-break{
    display:none;
}

@media (min-width:801px){

    .desktop-break{
        display:inline;
    }
}

/* =========================================================
   ADMIN - GESTIÓN DE CONVOCATORIAS
========================================================= */

.admin-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.admin-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.admin-page-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.admin-convocations-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.admin-convocation-card{
  padding:20px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;

  background:rgba(255,255,255,.035);
}

.admin-convocation-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
}

.admin-convocation-main h3{
  margin:10px 0 6px;
  font-size:26px;
  letter-spacing:-.035em;
}

.admin-convocation-main p{
  margin:0;
  color:var(--text);
  font-size:16px;
}

.admin-convocation-main small{
  display:block;
  margin-top:5px;
  color:var(--muted);
}

.admin-convocation-status{
  display:inline-flex;
  align-items:center;

  min-height:28px;
  padding:0 10px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.admin-convocation-status.active{
  color:var(--ok);
  background:rgba(0,182,134,.12);
}

.admin-convocation-status.inactive{
  color:var(--muted);
  background:rgba(255,255,255,.06);
}

.admin-convocation-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(82px,1fr));
  gap:8px;
}

.admin-convocation-stats div{
  padding:10px 12px;

  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;

  background:rgba(255,255,255,.025);
}

.admin-convocation-stats span{
  display:block;

  color:var(--muted);

  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.admin-convocation-stats strong{
  display:block;
  margin-top:3px;
  font-size:22px;
}

.admin-convocation-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;

  margin-top:16px;
  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.07);
}

.admin-empty-state{
  padding:54px 24px;
  text-align:center;
}

.admin-empty-state > span{
  display:block;
  margin-bottom:14px;
  font-size:46px;
}

.admin-empty-state h3{
  margin:0 0 8px;
  font-size:26px;
}

.admin-empty-state p{
  margin:0 0 20px;
  color:var(--muted);
}

.admin-convocation-form{
  margin-top:22px;
}

.admin-convocation-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.admin-field{
  display:grid;
  gap:7px;
}

.admin-field-wide{
  grid-column:span 2;
}

.admin-field > span,
.admin-checkbox-field > span{
  color:var(--muted);

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.07em;
}

.admin-field input,
.admin-field select{
  width:100%;
  min-height:48px;

  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;

  background:#172021;
  color:var(--text);

  padding:0 14px;
  outline:0;
}

.admin-field input:focus,
.admin-field select:focus{
  border-color:rgba(154,210,214,.45);
}

.admin-checkbox-field{
  min-height:48px;

  display:flex;
  align-items:center;
  gap:10px;

  padding:0 14px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;

  background:rgba(255,255,255,.025);
}

.admin-checkbox-field input{
  width:18px;
  height:18px;
}

.admin-assignments-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  margin-top:34px;
  margin-bottom:14px;
}

.admin-assignments-header h3{
  margin:0;
  font-size:26px;
}

.admin-assignments-header p{
  margin:4px 0 0;
  color:var(--muted);
}

.admin-assignments-editor{
  display:grid;
  gap:10px;
}

.admin-assignment-editor-row{
  display:grid;
  grid-template-columns:minmax(190px,1.4fr) minmax(150px,.8fr) minmax(190px,1fr) 48px;
  align-items:end;
  gap:10px;

  padding:14px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;

  background:rgba(255,255,255,.025);
}

.admin-assignment-editor-row .btn-bad{
  width:48px;
  height:48px;
  padding:0;
}

.admin-empty-assignments{
  padding:30px;

  border:1px dashed rgba(255,255,255,.12);
  border-radius:18px;

  color:var(--muted);
  text-align:center;
}

.admin-editor-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  margin-top:24px;
  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.08);
}

.admin-editor-footer small{
  color:var(--muted);
}

/* ---------------- MOBILE ---------------- */

@media (max-width:800px){

  .admin-page-header{
    display:block;
  }

  .admin-page-actions{
    justify-content:flex-start;
    margin-bottom:20px;
  }

  .admin-convocation-main{
    grid-template-columns:1fr;
  }

  .admin-convocation-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .admin-convocation-actions{
    justify-content:stretch;
  }

  .admin-convocation-actions button{
    flex:1;
  }

  .admin-convocation-fields{
    grid-template-columns:1fr;
  }

  .admin-field-wide{
    grid-column:auto;
  }

  .admin-assignments-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .admin-assignments-header button{
    width:100%;
  }

  .admin-assignment-editor-row{
    grid-template-columns:1fr;
  }

  .admin-assignment-editor-row .btn-bad{
    width:100%;
  }

  .admin-editor-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .admin-editor-footer button{
    width:100%;
  }

}

/* =========================================================
   ADMIN - PERÍODO DE EMAILS DE CONVOCATORIAS
========================================================= */

.convocation-email-period-control{
  display:grid;
  gap:7px;

  margin:18px 0 4px;
}

.convocation-email-period-control label{
  color:var(--muted);

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.convocation-email-period-control select{
  width:100%;
  min-height:48px;

  padding:0 14px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;

  background:var(--card-2);
  color:var(--text);

  outline:0;
  cursor:pointer;
}

.convocation-email-period-control select:focus{
  border-color:rgba(154,210,214,.45);
}

.summary-error{
  padding:14px;

  border:1px solid rgba(246,176,66,.18);
  border-radius:14px;

  background:rgba(246,176,66,.08);
  color:var(--warn);

  font-size:14px;
  line-height:1.4;
}

/* ---------------- MOBILE ---------------- */

@media (max-width:800px){

  .convocation-email-period-control{
    margin-top:16px;
  }

  .admin-card-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .admin-card-actions button{
    width:100%;
  }

}

/* =========================================================
   INSTALACIÓN PWA
========================================================= */

.cfc-install-prompt{
  position:fixed;

  left:50%;
  bottom:
    calc(
      92px +
      env(safe-area-inset-bottom)
    );

  z-index:16000;

  width:min(
    500px,
    calc(100vw - 28px)
  );

  transform:
    translateX(-50%);

  animation:
    cfcInstallEnter
    .28s
    cubic-bezier(.2,.8,.2,1);
}


.cfc-install-card{
  position:relative;

  display:grid;

  grid-template-columns:
    58px
    1fr;

  gap:14px;

  padding:18px;

  overflow:hidden;

  border:
    1px solid
    rgba(154,210,214,.2);

  border-radius:22px;

  background:
    radial-gradient(
      circle at top left,
      rgba(84,163,171,.17),
      transparent 15rem
    ),
    rgba(12,22,23,.985);

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.5);

  backdrop-filter:
    blur(20px);
}


.cfc-install-close{
  position:absolute;

  top:10px;
  right:10px;

  width:32px;
  height:32px;

  border:0;
  border-radius:50%;

  background:
    rgba(255,255,255,.055);

  color:
    rgba(255,255,255,.7);

  font-size:21px;

  cursor:pointer;
}


.cfc-install-icon{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:
    rgba(154,210,214,.08);

  border:
    1px solid
    rgba(154,210,214,.14);
}


.cfc-install-icon img{
  width:45px;
  height:45px;

  object-fit:contain;
}


.cfc-install-copy{
  min-width:0;

  padding-right:26px;
}


.cfc-install-copy > span{
  display:block;

  margin-bottom:4px;

  color:var(--brand-light);

  font-size:10px;
  font-weight:800;

  letter-spacing:.13em;
}


.cfc-install-copy strong{
  display:block;

  color:#fff;

  font-size:19px;
  line-height:1.15;
}


.cfc-install-copy p{
  margin:6px 0 0;

  color:
    rgba(255,255,255,.62);

  font-size:13px;
  line-height:1.4;
}


.cfc-install-actions{
  grid-column:
    1 / -1;

  display:flex;
  justify-content:flex-end;

  gap:9px;

  margin-top:3px;
}


.cfc-install-actions button{
  min-height:42px;

  padding:0 16px;

  border-radius:13px;

  font-family:inherit;
  font-weight:700;

  cursor:pointer;
}


.cfc-install-later{
  border:
    1px solid
    rgba(255,255,255,.1);

  background:
    rgba(255,255,255,.045);

  color:
    rgba(255,255,255,.78);
}


.cfc-install-action{
  border:0;

  background:
    linear-gradient(
      135deg,
      #3e7176,
      #65abb1
    );

  color:#fff;
}


/* MODAL IOS */

.cfc-install-modal-backdrop{
  position:fixed;

  inset:0;

  z-index:17000;

  display:grid;
  place-items:end center;

  padding:
    20px
    16px
    calc(
      18px +
      env(safe-area-inset-bottom)
    );

  background:
    rgba(0,0,0,.68);

  backdrop-filter:
    blur(10px);

  animation:
    cfcInstallBackdrop
    .2s
    ease;
}


.cfc-install-modal{
  position:relative;

  width:min(
    480px,
    100%
  );

  padding:
    30px
    22px
    22px;

  border:
    1px solid
    rgba(154,210,214,.17);

  border-radius:28px;

  background:
    radial-gradient(
      circle at top center,
      rgba(62,113,118,.22),
      transparent 20rem
    ),
    #10191a;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.65);

  animation:
    cfcInstallModalEnter
    .3s
    cubic-bezier(.2,.8,.2,1);
}


.cfc-install-modal-close{
  position:absolute;

  top:13px;
  right:13px;

  width:36px;
  height:36px;

  border:0;
  border-radius:50%;

  background:
    rgba(255,255,255,.055);

  color:
    rgba(255,255,255,.75);

  font-size:23px;

  cursor:pointer;
}


.cfc-install-modal-icon{
  width:72px;
  height:72px;

  margin:
    0 auto
    18px;

  display:grid;
  place-items:center;
}


.cfc-install-modal-icon img{
  width:72px;
  height:72px;

  object-fit:contain;
}


.cfc-install-modal-eyebrow{
  display:block;

  color:var(--brand-light);

  font-size:10px;
  font-weight:800;

  letter-spacing:.14em;

  text-align:center;
}


.cfc-install-modal h2{
  margin:
    6px 0
    24px;

  color:#fff;

  font-size:29px;
  line-height:1;

  text-align:center;
}


.cfc-install-steps{
  display:grid;

  gap:10px;
}


.cfc-install-steps > div{
  display:grid;

  grid-template-columns:
    38px
    1fr;

  align-items:center;

  gap:12px;

  min-height:64px;

  padding:12px 14px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:17px;

  background:
    rgba(255,255,255,.03);
}


.cfc-install-steps b{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(154,210,214,.11);

  color:var(--brand-light);

  font-size:13px;
}


.cfc-install-steps p{
  margin:0;

  color:
    rgba(255,255,255,.7);

  font-size:14px;
  line-height:1.35;
}


.cfc-install-steps strong{
  color:#fff;
}


.cfc-share-symbol{
  display:inline-grid;

  place-items:center;

  width:22px;
  height:22px;

  margin-left:3px;

  border:
    1px solid
    rgba(154,210,214,.2);

  border-radius:7px;

  color:var(--brand-light);
}


.cfc-install-browser-note{
  display:flex;

  gap:13px;
  align-items:flex-start;

  padding:16px;

  border:
    1px solid
    rgba(154,210,214,.13);

  border-radius:18px;

  background:
    rgba(154,210,214,.055);
}


.cfc-install-browser-note > span{
  font-size:27px;
}


.cfc-install-browser-note p{
  margin:0;

  color:
    rgba(255,255,255,.68);

  font-size:14px;
  line-height:1.5;
}


.cfc-install-browser-note strong{
  color:#fff;
}


.cfc-install-modal-done{
  width:100%;
  min-height:50px;

  margin-top:18px;

  border:0;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #3e7176,
      #65abb1
    );

  color:#fff;

  font-family:inherit;

  font-size:15px;
  font-weight:800;

  cursor:pointer;
}


@keyframes cfcInstallEnter{

  from{
    opacity:0;

    transform:
      translate(-50%,16px)
      scale(.97);
  }

  to{
    opacity:1;

    transform:
      translate(-50%,0)
      scale(1);
  }

}


@keyframes cfcInstallBackdrop{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}


@keyframes cfcInstallModalEnter{

  from{
    opacity:0;

    transform:
      translateY(32px)
      scale(.97);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}


@media (min-width:801px){

  .cfc-install-prompt{
    bottom:28px;
  }


  .cfc-install-modal-backdrop{
    place-items:center;
  }

}


@media (max-width:480px){

  .cfc-install-prompt{
    bottom:
      calc(
        86px +
        env(safe-area-inset-bottom)
      );
  }


  .cfc-install-card{
    grid-template-columns:
      50px
      1fr;

    padding:15px;
  }


  .cfc-install-icon{
    width:50px;
    height:50px;

    border-radius:15px;
  }


  .cfc-install-icon img{
    width:39px;
    height:39px;
  }


  .cfc-install-copy strong{
    font-size:17px;
  }


  .cfc-install-actions{
    justify-content:stretch;
  }


  .cfc-install-actions button{
    flex:1;
  }

}

/* =========================================================
   AUTH — MODALES DE LOGIN / CONTRASEÑA
========================================================= */

.auth-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:20000;

  display:grid;
  place-items:center;

  padding:
    calc(20px + env(safe-area-inset-top))
    20px
    calc(20px + env(safe-area-inset-bottom));

  background:rgba(0,0,0,.72);

  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);

  overflow-y:auto;

  animation:authBackdropIn .18s ease;
}


.auth-modal{
  position:relative;

  width:min(460px,100%);

  max-height:
    calc(
      100dvh -
      40px -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
    );

  overflow-y:auto;
  overscroll-behavior:contain;

  padding:26px;

  border:
    1px solid
    rgba(154,210,214,.16);

  border-radius:28px;

  background:
    radial-gradient(
      circle at top left,
      rgba(62,113,118,.22),
      transparent 22rem
    ),
    #101819;

  color:var(--text);

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.65);

  animation:
    authModalIn
    .24s
    cubic-bezier(.2,.8,.2,1);
}


/* ================= HEADER ================= */

.auth-modal-header{
  display:grid;

  grid-template-columns:
    54px
    minmax(0,1fr)
    38px;

  align-items:start;

  gap:14px;

  margin-bottom:24px;
}


.auth-modal-icon{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border-radius:17px;

  border:
    1px solid
    rgba(154,210,214,.16);

  background:
    rgba(62,113,118,.18);

  font-size:25px;
}


.auth-modal-header .eyebrow{
  margin:
    2px 0
    7px;
}


.auth-modal-header h2{
  margin:0;

  color:#fff;

  font-size:28px;
  line-height:1.05;

  letter-spacing:-.04em;

  font-weight:650;
}


.auth-modal-header p:not(.eyebrow){
  margin:7px 0 0;

  color:var(--muted);

  font-size:14px;
  line-height:1.4;
}


.auth-modal-close{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;

  background:
    rgba(255,255,255,.045);

  color:
    rgba(255,255,255,.72);

  font-size:24px;
  line-height:1;

  cursor:pointer;
}


.auth-modal-close:hover{
  background:
    rgba(255,255,255,.09);

  color:#fff;
}


/* =========================================================
   SELECTOR DE PERFIL
========================================================= */

.login-profile-options{
  display:grid;

  gap:10px;

  margin-top:6px;
}


.login-profile-option{
  width:100%;

  min-height:72px;

  display:grid;

  grid-template-columns:
    46px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:13px;

  padding:12px 14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:18px;

  background:
    rgba(255,255,255,.035);

  color:#fff;

  text-align:left;

  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}


.login-profile-option:hover{
  transform:translateY(-2px);

  border-color:
    rgba(154,210,214,.35);

  background:
    rgba(62,113,118,.16);
}


.login-profile-option-icon{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    rgba(154,210,214,.09);

  font-size:22px;
}


.login-profile-option-copy{
  min-width:0;
}


.login-profile-option-copy strong{
  display:block;

  overflow:hidden;

  color:#fff;

  font-size:16px;
  font-weight:650;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.login-profile-option-copy small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:13px;
}


.login-profile-option > b{
  color:var(--brand-light);

  font-size:27px;

  font-weight:400;
}


/* =========================================================
   CAMPOS DE CONTRASEÑA
========================================================= */

.auth-field{
  display:grid;

  gap:8px;

  margin-bottom:16px;
}


.auth-field > span{
  color:var(--muted);

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.08em;
}


.auth-field > input{
  width:100%;
  height:54px;

  padding:0 15px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:15px;
  outline:none;

  background:#172021;
  color:#fff;

  font-size:18px;
  letter-spacing:.18em;

  -webkit-appearance:none;
  appearance:none;
}


.auth-field > input::placeholder{
  color:rgba(255,255,255,.32);
  letter-spacing:normal;
}


.auth-field > input:focus{
  border-color:rgba(154,210,214,.55);

  box-shadow:
    0 0 0 3px
    rgba(154,210,214,.08);
}


.auth-field > small{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}


.auth-password-control{
  position:relative;
}


.auth-password-control input{
  width:100%;
  height:54px;

  padding:
    0
    54px
    0
    15px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:15px;

  outline:none;

  background:#172021;

  color:#fff;

  font-size:16px;

  -webkit-appearance:none;
  appearance:none;
}


.auth-password-control input::placeholder{
  color:
    rgba(255,255,255,.32);
}


.auth-password-control input:focus{
  border-color:
    rgba(154,210,214,.55);

  box-shadow:
    0 0 0 3px
    rgba(154,210,214,.08);
}


.auth-password-toggle{
  position:absolute;

  top:50%;
  right:8px;

  transform:
    translateY(-50%);

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:12px;

  background:transparent;

  color:#fff;

  font-size:18px;
}


.auth-password-rules{
  display:grid;

  gap:5px;

  margin:
    -2px 0
    18px;

  padding:13px 14px;

  border-radius:14px;

  background:
    rgba(154,210,214,.055);

  color:var(--muted);

  font-size:12px;
}


.auth-remember-device{
  display:flex;
  align-items:flex-start;
  gap:12px;

  margin:2px 0 16px;
  padding:14px;

  border:1px solid rgba(154,210,214,.12);
  border-radius:15px;

  background:rgba(154,210,214,.045);

  cursor:pointer;
}


.auth-remember-device input{
  width:20px;
  height:20px;
  flex:none;

  margin:1px 0 0;

  accent-color:var(--brand-light);
}


.auth-remember-device > span{
  min-width:0;
  display:grid;
  gap:3px;
}


.auth-remember-device strong{
  color:var(--text);
  font-size:13px;
  line-height:1.3;
}


.auth-remember-device small{
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}


.auth-remember-device:has(input:focus-visible){
  border-color:rgba(154,210,214,.42);

  box-shadow:
    0 0 0 3px
    rgba(154,210,214,.07);
}


.auth-modal-error{
  min-height:0;

  margin-bottom:12px;

  color:var(--bad);

  font-size:13px;
  line-height:1.4;
}


.auth-modal-error:empty{
  display:none;
}


/* ================= ACTIONS ================= */

.auth-modal-actions{
  display:flex;

  justify-content:flex-end;

  gap:10px;

  margin-top:20px;
}


.auth-modal-actions button{
  min-height:46px;
}


/* ================= ANIMACIONES ================= */

@keyframes authBackdropIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


@keyframes authModalIn{
  from{
    opacity:0;

    transform:
      translateY(12px)
      scale(.98);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   AUTH — MOBILE
========================================================= */

@media (max-width:800px){

  .auth-modal-backdrop{
    place-items:center;

    padding:
      calc(14px + env(safe-area-inset-top))
      14px
      calc(14px + env(safe-area-inset-bottom));
  }


  .auth-modal{
    width:100%;

    max-height:
      calc(
        100dvh -
        28px -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
      );

    padding:20px;

    border-radius:24px;
  }


  .auth-modal-header{
    grid-template-columns:
      48px
      minmax(0,1fr)
      36px;

    gap:11px;

    margin-bottom:20px;
  }


  .auth-modal-icon{
    width:48px;
    height:48px;

    border-radius:15px;

    font-size:22px;
  }


  .auth-modal-header h2{
    font-size:24px;
  }


  .auth-modal-close{
    width:36px;
    height:36px;

    font-size:22px;
  }


  .login-profile-option{
    min-height:68px;

    grid-template-columns:
      44px
      minmax(0,1fr)
      auto;

    padding:11px 12px;

    border-radius:17px;
  }


  .login-profile-option-icon{
    width:44px;
    height:44px;

    border-radius:14px;

    font-size:21px;
  }


  .auth-modal-actions{
    display:grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .auth-modal-actions button{
    width:100%;
  }

}

/* =========================================================
   AUTH LOADING
   Loader después de ingresar contraseña
========================================================= */

.auth-loading-overlay {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(14, 77, 84, 0.18),
      transparent 42%
    ),
    rgba(5, 13, 14, 0.96);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  animation: authLoadingFadeIn 0.2s ease-out;
}


.auth-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 22px;

  padding: 32px 38px;

  color: #ffffff;

  text-align: center;
}


.auth-loading-card strong {
  font-family: "Inter Tight", sans-serif;
  font-size: 18px;
  font-weight: 600;

  letter-spacing: -0.01em;

  color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   RELOJ / SPINNER
========================================================= */

.auth-loading-spinner {
  position: relative;

  display: block;

  width: 52px;
  height: 52px;

  border-radius: 50%;

  border: 3px solid rgba(157, 220, 224, 0.16);
  border-top-color: #9ddce0;
  border-right-color: #5aa7ad;

  animation:
    authLoadingSpin 0.85s linear infinite;

  box-shadow:
    0 0 28px rgba(90, 167, 173, 0.14);
}


/* Puntito interior para darle un poco más de personalidad */

.auth-loading-spinner::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #bcebee;

  top: 3px;
  left: 50%;

  transform: translateX(-50%);

  box-shadow:
    0 0 10px rgba(188, 235, 238, 0.75);
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes authLoadingSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


@keyframes authLoadingFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .auth-loading-card {
    gap: 20px;
    padding: 28px;
  }

  .auth-loading-spinner {
    width: 48px;
    height: 48px;
  }

  .auth-loading-card strong {
    font-size: 17px;
  }

}

/* =========================================================
   SONG STUDIO
========================================================= */


.song-studio-page,
.song-studio-editor-page{
  min-height:620px;
}

.song-studio-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:14px;
  margin:6px 0 24px;
}

.song-studio-search{
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 17px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}

.song-studio-search > span{
  color:var(--soft);
  font-size:22px;
}

.song-studio-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:16px;
}

.song-studio-filter{
  display:grid;
  gap:7px;
}

.song-studio-filter > span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.song-studio-filter select,
.song-studio-field select{
  width:100%;
  min-height:46px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  outline:0;
  background:var(--card-2);
  color:#fff;
  padding:0 14px;
}

.song-studio-library-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:28px 0 12px;
}

.song-studio-library-header strong{
  font-size:20px;
}

.song-studio-library-header span{
  color:var(--muted);
  font-size:14px;
}

.song-studio-library{
  display:grid;
  gap:10px;
}

.song-studio-library-row{
  width:100%;
  min-height:86px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto 24px;
  align-items:center;
  gap:15px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--card-2);
  color:#fff;
  text-align:left;
  transition:.16s ease;
}

.song-studio-library-row:hover{
  transform:translateY(-2px);
  border-color:rgba(154,210,214,.42);
  background:rgba(62,113,118,.20);
}

.song-studio-song-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(154,210,214,.10);
  font-size:23px;
}

.song-studio-song-info strong{
  display:block;
  font-size:18px;
  font-weight:600;
}

.song-studio-song-info small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
}

.song-studio-song-metadata{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}

.song-studio-song-metadata span{
  padding:7px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#c9d8d9;
  font-size:12px;
  white-space:nowrap;
}

.song-studio-row-arrow{
  color:var(--muted);
  font-size:28px;
}

.song-studio-loading,
.song-studio-empty{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  text-align:center;
  color:var(--muted);
}

.song-studio-loading > span,
.song-studio-empty > span{
  font-size:42px;
}

.song-studio-empty h3{
  margin:5px 0 0;
  color:#fff;
  font-size:24px;
}

.song-studio-empty p{
  margin:0 0 10px;
}

.song-studio-form{
  display:grid;
  gap:18px;
}

.song-studio-form-section{
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.025);
}

.song-studio-form-section-title{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:20px;
}

.song-studio-form-section-title > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(154,210,214,.10);
  font-size:20px;
}

.song-studio-form-section-title h3{
  margin:0;
  font-size:21px;
}

.song-studio-form-section-title p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
}

.song-studio-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.song-studio-field{
  display:grid;
  gap:8px;
}

.song-studio-field-wide{
  grid-column:1 / -1;
}

.song-studio-field > span{
  color:#dfe7e8;
  font-size:13px;
  font-weight:600;
}

.song-studio-field > span b{
  color:var(--bad);
}

.song-studio-field input,
.song-studio-field textarea{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:14px;
  outline:0;
  background:var(--card-2);
  color:#fff;
  padding:13px 14px;
  resize:vertical;
}

.song-studio-field input{
  min-height:48px;
}

.song-studio-field input:focus,
.song-studio-field textarea:focus,
.song-studio-field select:focus{
  border-color:rgba(154,210,214,.62);
  box-shadow:0 0 0 3px rgba(154,210,214,.08);
}

.song-studio-form-status{
  min-height:24px;
  color:var(--muted);
  font-size:14px;
  text-align:right;
}

.song-studio-form-status.success{
  color:var(--ok);
}

.song-studio-form-status.error{
  color:var(--bad);
}

.song-studio-mobile-actions{
  display:none;
}


@media (max-width:800px){

  .song-studio-toolbar{
    grid-template-columns:1fr;
  }

  .song-studio-library-row{
    grid-template-columns:48px minmax(0,1fr) 20px;
    min-height:78px;
    padding:12px;
  }

  .song-studio-song-metadata{
    grid-column:2;
    justify-content:flex-start;
  }

  .song-studio-row-arrow{
    grid-column:3;
    grid-row:1 / span 2;
  }

  .song-studio-fields{
    grid-template-columns:1fr;
  }

  .song-studio-field-wide{
    grid-column:auto;
  }

  .song-studio-form-section{
    padding:17px;
    border-radius:19px;
  }

  .song-studio-editor-page
  .admin-page-actions
  #saveSongStudioBtn{
    display:none;
  }

  .song-studio-mobile-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .song-studio-mobile-actions button{
    width:100%;
  }

}

/* =========================================================
   SONG STUDIO — IMPORTADOR CSV
========================================================= */

.song-csv-import-page{
  min-height:650px;
}

.song-csv-section,
.song-csv-analysis,
.song-csv-progress-section{
  margin-top:24px;
}

.song-csv-upload-box{
  min-height:150px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:24px;
  border:1px dashed rgba(154,210,214,.35);
  border-radius:24px;
  background:rgba(154,210,214,.035);
}

.song-csv-upload-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(154,210,214,.11);
  font-size:30px;
}

.song-csv-upload-box h3{
  margin:0;
  font-size:22px;
}

.song-csv-upload-box p{
  margin:7px 0 0;
  color:var(--muted);
}

.song-csv-file-button{
  display:flex;
  align-items:center;
  justify-content:center;
}

.song-csv-file-status{
  margin-top:12px;
  min-height:48px;
  display:flex;
  align-items:center;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
}

.song-csv-file-status.loading{
  color:var(--brand-light);
}

.song-csv-file-status.success{
  color:var(--ok);
}

.song-csv-file-status.error{
  color:var(--bad);
}

.song-csv-analysis{
  padding:22px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.02);
}

.song-csv-analysis-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}

.song-csv-analysis-header h3{
  margin:0;
  font-size:26px;
}

.song-csv-compatible-badge{
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.song-csv-compatible-badge.success{
  background:rgba(0,182,134,.13);
  color:var(--ok);
}

.song-csv-compatible-badge.error{
  background:rgba(255,77,90,.13);
  color:var(--bad);
}

.song-csv-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.song-csv-stat-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card-2);
}

.song-csv-stat-card > span{
  font-size:22px;
}

.song-csv-stat-card strong{
  display:block;
  margin-top:12px;
  font-size:28px;
}

.song-csv-stat-card small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.song-csv-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.song-csv-detail-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

.song-csv-detail-card h4,
.song-csv-preview-list h4{
  margin:0 0 14px;
  font-size:17px;
}

.song-csv-detail-card dl{
  margin:0;
  display:grid;
  gap:10px;
}

.song-csv-detail-card dl div{
  display:flex;
  justify-content:space-between;
  gap:18px;
}

.song-csv-detail-card dt{
  color:var(--muted);
}

.song-csv-detail-card dd{
  margin:0;
  font-weight:600;
}

.song-csv-warning{
  margin-top:10px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(246,176,66,.08);
  color:var(--warn);
  line-height:1.45;
}

.song-csv-warning.success{
  background:rgba(0,182,134,.08);
  color:var(--ok);
}

.song-csv-warning.error{
  background:rgba(255,77,90,.08);
  color:var(--bad);
}

.song-csv-details{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}

.song-csv-details summary{
  padding:14px 16px;
  cursor:pointer;
  font-weight:600;
}

.song-csv-details.error summary{
  color:var(--bad);
}

.song-csv-details-content{
  display:grid;
  gap:8px;
  padding:0 16px 15px;
}

.song-csv-details-content p{
  margin:0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:9px 0;
  border-top:1px solid var(--line);
}

.song-csv-details-content span{
  color:var(--muted);
}

.song-csv-preview-list{
  margin-top:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
}

.song-csv-preview-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-top:1px solid var(--line);
}

.song-csv-preview-row strong,
.song-csv-preview-row small{
  display:block;
}

.song-csv-preview-row small{
  margin-top:3px;
  color:var(--muted);
}

.song-csv-preview-row b{
  color:var(--brand-light);
  font-size:12px;
}

.song-csv-more{
  margin:12px 0 0;
  color:var(--muted);
}

.song-csv-import-warning{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(246,176,66,.2);
  border-radius:15px;
  background:rgba(246,176,66,.06);
  color:#e6d6b6;
  line-height:1.5;
}

.song-csv-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.song-csv-progress-card,
.song-csv-result-card{
  min-height:360px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.025);
}

.song-csv-progress-icon,
.song-csv-result-icon{
  font-size:48px;
}

.song-csv-progress-card h3,
.song-csv-result-card h3{
  margin:8px 0;
  font-size:30px;
}

.song-csv-progress-card > p{
  color:var(--muted);
}

.song-csv-progress-bar{
  width:min(620px,100%);
  height:16px;
  margin-top:20px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.song-csv-progress-fill{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    var(--brand),
    var(--ok)
  );
  transition:width .25s ease;
}

.song-csv-progress-numbers{
  width:min(620px,100%);
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}

.song-csv-progress-numbers span{
  color:var(--muted);
}

.song-csv-result-stats{
  width:min(520px,100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:20px 0;
}

.song-csv-result-stats div{
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
}

.song-csv-result-stats strong{
  display:block;
  font-size:28px;
}

.song-csv-result-stats span{
  color:var(--muted);
  font-size:13px;
}

@media (max-width:800px){

  .song-csv-upload-box{
    grid-template-columns:52px 1fr;
  }

  .song-csv-file-button{
    grid-column:1 / -1;
    width:100%;
  }

  .song-csv-stats,
  .song-csv-details-grid{
    grid-template-columns:1fr 1fr;
  }

  .song-csv-analysis{
    padding:16px;
  }

  .song-csv-analysis-header{
    display:grid;
  }

  .song-csv-compatible-badge{
    width:fit-content;
  }

  .song-csv-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .song-csv-actions button{
    width:100%;
  }

  .song-csv-result-stats{
    grid-template-columns:1fr;
  }

}

@media (max-width:480px){

  .song-csv-stats{
    grid-template-columns:1fr;
  }

  .song-csv-details-grid{
    grid-template-columns:1fr;
  }

}

/* ---------- CONTROLES ---------- */

.cronograma-field input,
.cronograma-field select,
.admin-setting-select,
.admin-confirmations-toolbar select{
  width:100%;
  min-width:0;
  min-height:50px;

  border:1px solid var(--line-strong);
  border-radius:14px;
  outline:0;

  background:var(--card-2);
  color:var(--text);

  padding:0 14px;
  font:inherit;

  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.cronograma-field input:focus,
.cronograma-field select:focus,
.admin-setting-select:focus,
.admin-confirmations-toolbar select:focus{
  border-color:rgba(154,210,214,.55);
  box-shadow:0 0 0 3px rgba(154,210,214,.08);
  background:#192426;
}


/* =========================================================
   ADMIN — CRONOGRAMA
========================================================= */

.cronograma-admin-page{
  min-width:0;
}

.cronograma-admin-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.cronograma-back-btn{
  flex:0 0 auto;
}

.cronograma-admin-layout{
  display:grid;
  grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);
  gap:18px;

  margin-top:24px;
}

.cronograma-editor-card,
.cronograma-timeline-card{
  min-width:0;

  padding:22px;

  border:1px solid var(--line);
  border-radius:22px;

  background:rgba(255,255,255,.025);
}

.cronograma-panel-heading{
  display:flex;
  align-items:flex-start;
  gap:14px;

  margin-bottom:22px;
}

.cronograma-panel-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;

  display:grid;
  place-items:center;

  border-radius:14px;
  border:1px solid rgba(154,210,214,.16);

  background:rgba(154,210,214,.09);
  color:var(--brand-light);

  font-size:24px;
  line-height:1;
}

.cronograma-panel-heading small,
.cronograma-timeline-heading small{
  display:block;

  color:var(--brand-light);
  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.10em;
}

.cronograma-panel-heading h3,
.cronograma-timeline-heading h3{
  margin:5px 0 0;

  font-size:23px;
  line-height:1.08;
  letter-spacing:-.025em;
}

.cronograma-panel-heading p,
.cronograma-timeline-heading p{
  margin:7px 0 0;

  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

.cronograma-editor-form{
  display:grid;
  gap:18px;
}

.cronograma-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,.56fr);
  gap:14px;
}

.cronograma-field{
  min-width:0;

  display:grid;
  gap:7px;
}

.cronograma-field-wide{
  grid-column:1 / -1;
}

.cronograma-field > span{
  color:#dce6e7;

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.065em;
}

.cronograma-field input::placeholder{
  color:var(--soft);
}

.cronograma-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.07);
}

.cronograma-form-footer > small{
  max-width:260px;

  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.cronograma-save-btn{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  min-height:48px;
}

.cronograma-timeline-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;

  margin-bottom:18px;
}

.cronograma-count{
  min-width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:1px solid rgba(154,210,214,.18);
  border-radius:14px;

  background:rgba(154,210,214,.08);
  color:var(--brand-light);

  font-size:16px;
  font-weight:800;
}

.cronograma-admin-timeline{
  display:grid;
  gap:10px;
}

.cronograma-loading-state,
.cronograma-empty-state{
  min-height:220px;

  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;

  padding:28px;

  border:1px dashed rgba(255,255,255,.10);
  border-radius:18px;

  color:var(--muted);
  text-align:center;
}

.cronograma-loading-state .auth-loading-spinner{
  width:38px;
  height:38px;
}

.cronograma-empty-state > span{
  font-size:38px;
}

.cronograma-empty-state h4{
  margin:2px 0 0;

  color:var(--text);
  font-size:19px;
}

.cronograma-empty-state p{
  max-width:360px;
  margin:0;

  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.cronograma-empty-state.error{
  border-color:rgba(255,77,90,.20);
}

.cronograma-timeline-item{
  min-width:0;

  display:grid;
  grid-template-columns:46px minmax(0,1fr) 40px;
  align-items:start;
  gap:13px;

  padding:15px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;

  background:rgba(255,255,255,.025);

  transition:.16s ease;
}

.cronograma-timeline-item:hover{
  border-color:rgba(154,210,214,.24);
  background:rgba(154,210,214,.045);
}

.cronograma-timeline-marker{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:14px;
  background:rgba(154,210,214,.09);

  font-size:20px;
}

.cronograma-timeline-content{
  min-width:0;
}

.cronograma-item-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin-bottom:7px;
}

.cronograma-time-block{
  display:flex;
  align-items:baseline;
  gap:9px;
}

.cronograma-time-block strong{
  color:var(--brand-light);
  font-size:18px;
  line-height:1;
}

.cronograma-time-block small{
  color:var(--soft);

  font-size:9px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.cronograma-type-chip{
  flex:0 0 auto;

  padding:6px 9px;

  border-radius:999px;
  background:rgba(255,255,255,.055);

  color:#cbd8da;
  font-size:11px;
  font-weight:700;
}

.cronograma-timeline-content h4{
  margin:0;

  font-size:17px;
  line-height:1.25;
}

.cronograma-item-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 12px;

  margin-top:8px;

  color:var(--muted);
  font-size:12px;
}

.cronograma-delete-btn{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,77,90,.14);
  border-radius:12px;

  background:rgba(255,77,90,.07);
  color:#ff8d96;

  cursor:pointer;
}

.cronograma-delete-btn:hover{
  background:rgba(255,77,90,.14);
}


/* =========================================================
   ADMIN — CONFIGURACIÓN
========================================================= */

.admin-settings-content{
  margin-top:24px;
}

.admin-settings-loading{
  min-height:180px;

  display:grid;
  place-items:center;

  color:var(--muted);
}

.admin-settings-form{
  display:grid;
  gap:12px;
}

.admin-setting-row{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) minmax(150px,190px);
  align-items:center;
  gap:16px;

  padding:18px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:19px;

  background:rgba(255,255,255,.025);
}

.admin-setting-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:15px;
  border:1px solid rgba(154,210,214,.14);

  background:rgba(154,210,214,.08);

  font-size:23px;
}

.admin-setting-copy{
  min-width:0;
}

.admin-setting-copy strong{
  display:block;

  font-size:17px;
  font-weight:700;
  line-height:1.2;
}

.admin-setting-copy p{
  margin:5px 0 0;

  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}

.admin-setting-select{
  min-height:48px;
}

.admin-settings-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;

  margin-top:8px;
  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.07);
}

.admin-settings-footer .song-studio-form-status{
  margin-right:auto;
  text-align:left;
}


/* =========================================================
   ADMIN — CONFIRMACIONES
========================================================= */

.admin-confirmations-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;

  margin-top:22px;
}

.admin-confirmations-toolbar label{
  width:min(440px,100%);

  display:grid;
  gap:7px;
}

.admin-confirmations-toolbar label > span{
  color:var(--muted);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.admin-confirmations-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;

  margin-top:18px;
}

.admin-confirmation-stat{
  min-width:0;

  padding:16px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;

  background:rgba(255,255,255,.025);
}

.admin-confirmation-stat span{
  display:block;

  color:var(--muted);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.075em;
}

.admin-confirmation-stat strong{
  display:block;
  margin-top:7px;

  font-size:30px;
  line-height:1;
}

.admin-confirmation-stat.confirmed strong{
  color:var(--ok);
}

.admin-confirmation-stat.pending strong{
  color:var(--warn);
}

.admin-confirmation-stat.cant strong{
  color:var(--bad);
}

.admin-confirmations-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:14px;

  margin-top:18px;
}

.admin-confirmation-group{
  min-width:0;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;

  background:rgba(255,255,255,.025);
}

.admin-confirmation-group-header{
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:12px 14px;

  border-bottom:1px solid rgba(255,255,255,.07);
}

.admin-confirmation-group-header > div{
  display:flex;
  align-items:center;
  gap:9px;

  min-width:0;
}

.admin-confirmation-group-header strong{
  font-size:15px;
}

.admin-confirmation-group-header b{
  min-width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:999px;

  background:rgba(255,255,255,.065);
  color:var(--text);

  font-size:12px;
}

.admin-confirmation-group.confirmed
.admin-confirmation-group-header b{
  color:var(--ok);
}

.admin-confirmation-group.pending
.admin-confirmation-group-header b{
  color:var(--warn);
}

.admin-confirmation-group.cant
.admin-confirmation-group-header b{
  color:var(--bad);
}

.admin-confirmation-list{
  display:grid;
  gap:7px;

  padding:9px;
}

.admin-confirmation-person{
  min-width:0;

  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px;

  padding:10px;

  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;

  background:rgba(255,255,255,.022);
}

.admin-confirmation-avatar{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:rgba(154,210,214,.07);

  font-size:21px;
}

.admin-confirmation-person-copy{
  min-width:0;
}

.admin-confirmation-person-copy strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:14px;
}

.admin-confirmation-person-copy small{
  display:block;
  margin-top:3px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--muted);
  font-size:11px;
}

.admin-confirmation-empty{
  min-height:100px;

  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;

  color:var(--soft);
  text-align:center;
}

.admin-confirmation-empty > span{
  font-size:22px;
}

.admin-confirmation-empty small{
  font-size:12px;
}


/* =========================================================
   RESPONSIVE — ADMIN
========================================================= */

@media (max-width:1000px){

  .cronograma-admin-layout{
    grid-template-columns:1fr;
  }

  .admin-confirmations-columns{
    grid-template-columns:1fr;
  }
}

@media (max-width:800px){

  .cronograma-admin-header{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }

  .cronograma-back-btn{
    width:100%;
  }

  .cronograma-admin-layout{
    margin-top:18px;
  }

  .cronograma-editor-card,
  .cronograma-timeline-card{
    padding:17px;
    border-radius:19px;
  }

  .cronograma-form-grid{
    grid-template-columns:1fr;
  }

  .cronograma-field-wide{
    grid-column:auto;
  }

  .cronograma-form-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .cronograma-form-footer > small{
    max-width:none;
  }

  .cronograma-save-btn{
    width:100%;
  }

  .cronograma-timeline-item{
    grid-template-columns:42px minmax(0,1fr) 36px;
    gap:10px;
    padding:12px;
  }

  .cronograma-timeline-marker{
    width:40px;
    height:40px;
  }

  .cronograma-item-topline{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }

  .cronograma-type-chip{
    align-self:flex-start;
  }

  .admin-setting-row{
    grid-template-columns:44px minmax(0,1fr);
    align-items:start;
    gap:12px;
    padding:15px;
  }

  .admin-setting-icon{
    width:44px;
    height:44px;
  }

  .admin-setting-select{
    grid-column:1 / -1;
    width:100%;
  }

  .admin-settings-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .admin-settings-footer .song-studio-form-status{
    width:100%;
    min-height:0;
    text-align:left;
  }

  .admin-settings-footer button{
    width:100%;
  }

  .admin-confirmations-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .admin-confirmations-columns{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){

  .admin-confirmation-stat{
    padding:14px;
  }

  .admin-confirmation-stat strong{
    font-size:26px;
  }

  .cronograma-editor-card,
  .cronograma-timeline-card{
    padding:14px;
  }
}

/* =====================================================================
   CFC APP — SISTEMA VISUAL
   Cancionero, modal de letras y consistencia responsive
   ===================================================================== */

/* ---------- Accesibilidad / consistencia ---------- */

button,
input,
select,
textarea{
  font-family:var(--font);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(154,210,214,.72);
  outline-offset:2px;
}

button{
  -webkit-tap-highlight-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =====================================================================
   CANCIONERO — TOOLBAR
   ===================================================================== */

.cancionero-page{
  min-width:0;
}

.cancionero-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(220px,.88fr);
  gap:14px;
  align-items:end;

  margin:24px 0;
}

.cancionero-search{
  width:100%;
  min-width:0;
  height:52px;
  min-height:52px;

  display:flex;
  align-items:center;
  gap:11px;

  padding:0 16px;

  border:1px solid var(--line-strong);
  border-radius:16px;

  background:var(--card-2);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.cancionero-search:focus-within{
  border-color:rgba(154,210,214,.45);
  background:#192426;
  box-shadow:0 0 0 3px rgba(154,210,214,.07);
}

.cancionero-search > span{
  flex:0 0 auto;
  color:var(--muted);
  font-size:20px;
  line-height:1;
}

.cancionero-search input{
  width:100%;
  min-width:0;

  border:0;
  outline:0;

  background:transparent;
  color:var(--text);

  font-size:15px;
}

.cancionero-search input::placeholder{
  color:var(--soft);
}

.cancionero-filter,
.cancionero-category{
  width:100%;
  min-width:0;

  display:grid;
  gap:6px;
}

.cancionero-filter > span,
.cancionero-category > span,
.cancionero-category > label{
  margin:0;

  color:var(--muted);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.cancionero-filter select,
.cancionero-category select{
  width:100%;
  min-width:0;
  height:52px;
  min-height:52px;

  padding:0 14px;

  border:1px solid var(--line-strong);
  border-radius:16px;
  outline:0;

  background:var(--card-2);
  color:var(--text);

  font-size:15px;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.cancionero-filter select:focus,
.cancionero-category select:focus{
  border-color:rgba(154,210,214,.45);
  background:#192426;
  box-shadow:0 0 0 3px rgba(154,210,214,.07);
}


/* =====================================================================
   CANCIONERO — CARDS
   ===================================================================== */

.cancionero-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.cancionero-song-card{
  min-width:0;

  display:grid;
  gap:18px;

  padding:20px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;

  background:rgba(255,255,255,.025);

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

@media (hover:hover){
  .cancionero-song-card:hover{
    border-color:rgba(154,210,214,.18);
    background:rgba(255,255,255,.034);
  }
}

.cancionero-song-main{
  min-width:0;

  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:14px;

  padding:0;
}

.cancionero-song-icon{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:rgba(107,189,196,.13);
  color:var(--brand-light);

  font-size:21px;
  line-height:1;
}

.cancionero-song-copy{
  width:100%;
  min-width:0;

  margin:0;
  padding:0;
}

.cancionero-song-title-row{
  width:100%;
  min-width:0;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}

.cancionero-song-title-row > div:first-child{
  min-width:0;
}

.cancionero-song-copy h3{
  margin:0;
  padding:0;

  color:var(--text);

  font-size:20px;
  font-weight:700;
  line-height:1.12;

  letter-spacing:-.025em;

  overflow-wrap:normal;
  word-break:normal;
}

.cancionero-song-copy p{
  margin:6px 0 0;
  padding:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.35;
}

.cancionero-song-badges{
  width:100%;

  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:14px;
  padding:0;
}

.cancionero-song-badges span{
  display:inline-flex;
  align-items:center;

  min-height:30px;

  padding:0 10px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;

  background:rgba(255,255,255,.035);
  color:var(--muted);

  font-size:12px;
  font-weight:700;
  line-height:1;
}


/* ---------- Botón LETRA ---------- */

.song-lyrics-chip,
.view-song-lyrics-btn{
  position:static;

  width:auto;
  min-width:max-content;
  min-height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  align-self:start;
  justify-self:end;

  margin:0;
  padding:0 13px;

  appearance:none;
  -webkit-appearance:none;

  border:1px solid rgba(0,182,134,.48);
  border-radius:999px;

  background:rgba(0,182,134,.075);
  color:var(--brand-light);

  font-size:13px;
  font-weight:750;
  line-height:1;

  white-space:nowrap;

  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.song-lyrics-chip:hover,
.view-song-lyrics-btn:hover{
  transform:translateY(-1px);

  border-color:rgba(0,182,134,.75);
  background:rgba(0,182,134,.14);

  color:#fff;
}


/* ---------- Footer de card ---------- */

.cancionero-song-footer{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.07);
}

.cancionero-resources{
  min-width:0;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.song-no-resources{
  color:var(--muted);

  font-size:13px;
  line-height:1.35;
}

.song-resource-btn{
  min-height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 12px;

  border:1px solid var(--line);
  border-radius:11px;

  background:transparent;
  color:var(--text);

  font-size:13px;
  font-weight:650;

  cursor:pointer;
}

.song-resource-btn:hover{
  border-color:rgba(154,210,214,.25);
  background:rgba(154,210,214,.07);
}

.add-song-to-setlist-btn{
  flex:0 0 auto;

  min-height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  padding:0 16px;

  border:0;
  border-radius:13px;

  background:var(--ok);
  color:#fff;

  font-size:14px;
  font-weight:800;

  white-space:nowrap;

  cursor:pointer;

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease;
}

.add-song-to-setlist-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 10px 26px rgba(0,182,134,.16);
}

.add-song-to-setlist-btn span{
  font-size:19px;
  line-height:1;
}


/* =====================================================================
   MODAL DE LETRA — ESTADO / OVERLAY
   ===================================================================== */

body.lyrics-modal-open{
  overflow:hidden;
}

#cancioneroLyricsModal[hidden]{
  display:none !important;
}

#cancioneroLyricsModal:not([hidden]){
  position:fixed;
  inset:0;
  z-index:999999;

  width:100vw;
  height:100dvh;

  display:grid;
  place-items:center;

  padding:22px;

  overflow:hidden;

  background:rgba(0,0,0,.74);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#cancioneroLyricsModal .lyrics-modal{
  position:relative;

  width:min(760px,100%);
  max-height:min(88dvh,900px);

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;

  background:#101818;
  color:var(--text);

  box-shadow:
    0 34px 110px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* ---------- Header modal ---------- */

#cancioneroLyricsModal .lyrics-modal-header{
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:20px;

  padding:24px 26px 21px;

  border-bottom:1px solid var(--line);
}

#cancioneroLyricsModal .lyrics-modal-header > div:first-child{
  min-width:0;
}

#cancioneroLyricsModal .lyrics-modal-header .eyebrow{
  margin:0 0 10px;

  color:var(--brand-light);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.14em;
}

#cancioneroLyricsModal .lyrics-modal-header h2{
  margin:0;

  font-size:clamp(28px,4vw,38px);
  font-weight:700;
  line-height:1.05;

  letter-spacing:-.04em;
}

#cancioneroLyricsModal .lyrics-modal-artist{
  margin:9px 0 0;

  color:var(--muted);

  font-size:16px;
  line-height:1.35;
}


/* ---------- Acciones modal: Copiar + cerrar ---------- */

#cancioneroLyricsModal .lyrics-modal-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

#cancioneroLyricsModal .lyrics-copy-button,
#cancioneroLyricsModal .lyrics-modal-close{
  width:44px;
  height:44px;

  flex:0 0 44px;

  display:grid;
  place-items:center;

  padding:0;

  appearance:none;
  -webkit-appearance:none;

  border:1px solid var(--line-strong);
  border-radius:14px;

  background:var(--card-2);
  color:#fff;

  box-shadow:none;

  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

#cancioneroLyricsModal .lyrics-copy-button{
  color:var(--brand-light);
}

#cancioneroLyricsModal .lyrics-copy-button:hover,
#cancioneroLyricsModal .lyrics-modal-close:hover{
  transform:translateY(-1px);

  border-color:rgba(154,210,214,.42);
  background:rgba(154,210,214,.09);
}

#cancioneroLyricsModal .lyrics-copy-button svg{
  width:20px;
  height:20px;

  display:block;

  fill:none !important;
  stroke:currentColor !important;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#cancioneroLyricsModal .lyrics-copy-button svg *{
  fill:none !important;
  stroke:currentColor !important;
}

#cancioneroLyricsModal .lyrics-copy-button:empty::before{
  content:"⧉";

  font-size:20px;
  font-weight:500;
  line-height:1;
}

#cancioneroLyricsModal .lyrics-modal-close{
  font-size:24px;
  line-height:1;
}


/* ---------- Cuerpo / letra ---------- */

#cancioneroLyricsModal .lyrics-modal-body{
  min-height:0;
  flex:1 1 auto;

  overflow-y:auto;
  overscroll-behavior:contain;

  padding:28px 30px 32px;

  scrollbar-width:thin;
  scrollbar-color:rgba(154,210,214,.28) transparent;

  -webkit-overflow-scrolling:touch;
}

#cancioneroLyricsModal .lyrics-modal-body::-webkit-scrollbar{
  width:8px;
}

#cancioneroLyricsModal .lyrics-modal-body::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(154,210,214,.22);
}

#cancioneroLyricsModal .lyrics-modal-body pre{
  margin:0;

  white-space:pre-wrap;
  overflow-wrap:anywhere;

  font-family:
    "Inter Tight",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:17px;
  font-weight:450;
  line-height:1.72;

  letter-spacing:.002em;

  color:#eef3f3;
}


/* ---------- Footer modal ---------- */

#cancioneroLyricsModal .lyrics-modal-footer{
  flex:0 0 auto;

  min-height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:13px 20px;

  border-top:1px solid var(--line);

  background:rgba(16,24,24,.98);
}

#cancioneroLyricsModal .lyrics-copy-status{
  min-width:0;

  color:var(--ok);

  font-size:13px;
  line-height:1.3;
}

#cancioneroLyricsModal .lyrics-modal-footer .btn-muted{
  flex:0 0 auto;

  min-height:44px;

  padding:0 18px;

  border-radius:14px;

  font-size:14px;
  font-weight:700;
}


/* =====================================================================
   SONG STUDIO — PEQUEÑO POLISH SEGURO
   ===================================================================== */

.song-studio-search,
.song-studio-filter select,
.song-studio-field input,
.song-studio-field select,
.song-studio-field textarea{
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.song-studio-search:focus-within,
.song-studio-filter select:focus,
.song-studio-field input:focus,
.song-studio-field select:focus,
.song-studio-field textarea:focus{
  border-color:rgba(154,210,214,.45);
  box-shadow:0 0 0 3px rgba(154,210,214,.07);
}

.song-studio-library-row,
.admin-card,
.cronograma-editor-card,
.cronograma-timeline-card,
.admin-setting-row,
.admin-confirmation-group{
  min-width:0;
}


/* =====================================================================
   MOBILE / TABLET
   ===================================================================== */

@media (max-width:800px){

  /* Más aire antes de la barra inferior fija */
  .app-shell{
    padding-bottom:
      calc(
        116px +
        env(safe-area-inset-bottom)
      );
  }

  .main{
    width:100%;
    min-width:0;

    padding:
      20px
      14px
      calc(
        34px +
        env(safe-area-inset-bottom)
      );
  }

  .full-card{
    min-width:0;
  }

  .cancionero-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .cancionero-song-card{
    width:100%;
    min-width:0;

    padding:18px;

    border-radius:20px;
  }

  .cancionero-song-main{
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
  }

  .cancionero-song-title-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }

  .cancionero-song-copy h3{
    font-size:20px;
  }

  .song-lyrics-chip,
  .view-song-lyrics-btn{
    min-height:38px;
    padding:0 13px;
    font-size:13px;
  }

  .cancionero-song-footer{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  .cancionero-resources{
    width:100%;
  }

  .song-no-resources{
    display:block;
    width:100%;
  }

  .add-song-to-setlist-btn{
    width:100%;
    min-height:46px;

    padding:0 14px;
  }


  /* Modal como bottom sheet */
  #cancioneroLyricsModal:not([hidden]){
    align-items:end;
    padding:0;
  }

  #cancioneroLyricsModal .lyrics-modal{
    width:100%;
    max-width:none;

    max-height:90dvh;

    border-radius:26px 26px 0 0;
    border-bottom:0;

    box-shadow:0 -20px 80px rgba(0,0,0,.55);
  }

  #cancioneroLyricsModal .lyrics-modal-header{
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;

    padding:21px 18px 18px;
  }

  #cancioneroLyricsModal .lyrics-modal-header h2{
    font-size:29px;
  }

  #cancioneroLyricsModal .lyrics-modal-artist{
    margin-top:8px;
    font-size:16px;
  }

  #cancioneroLyricsModal .lyrics-modal-header-actions{
    gap:7px;
  }

  #cancioneroLyricsModal .lyrics-copy-button,
  #cancioneroLyricsModal .lyrics-modal-close{
    width:42px;
    height:42px;

    flex-basis:42px;

    border-radius:13px;
  }

  #cancioneroLyricsModal .lyrics-modal-body{
    padding:24px 20px 28px;
  }

  #cancioneroLyricsModal .lyrics-modal-body pre{
    font-size:17px;
    line-height:1.68;
  }

  #cancioneroLyricsModal .lyrics-modal-footer{
    min-height:68px;

    padding:
      12px
      18px
      calc(
        12px +
        env(safe-area-inset-bottom)
      );
  }

  /* Song Studio */
  .song-studio-toolbar{
    grid-template-columns:1fr;
  }
}


@media (max-width:700px){

  /*
    Buscar queda apenas más ancho que Categoría,
    pero ambos tienen la misma altura y peso visual.
  */
  .cancionero-toolbar{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:12px;

    margin:22px 0;
  }

  .cancionero-search,
  .cancionero-filter select,
  .cancionero-category select{
    height:52px;
    min-height:52px;
  }

  .cancionero-filter,
  .cancionero-category{
    min-width:0;
  }
}


@media (max-width:480px){

  .cancionero-toolbar{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:10px;
  }

  .cancionero-search{
    padding:0 13px;
  }

  .cancionero-search > span{
    font-size:18px;
  }

  .cancionero-search input,
  .cancionero-filter select,
  .cancionero-category select{
    font-size:14px;
  }

  .cancionero-filter select,
  .cancionero-category select{
    padding:0 11px;
  }

  .cancionero-song-card{
    padding:16px;
  }

  .cancionero-song-main{
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
  }

  .cancionero-song-icon{
    width:44px;
    height:44px;

    font-size:20px;
  }

  .cancionero-song-title-row{
    gap:8px;
  }

  .cancionero-song-copy h3{
    font-size:19px;
  }

  .song-lyrics-chip,
  .view-song-lyrics-btn{
    min-height:36px;

    padding:0 11px;

    font-size:12px;
  }

  #cancioneroLyricsModal .lyrics-modal-header{
    padding:20px 16px 17px;
  }

  #cancioneroLyricsModal .lyrics-modal-header h2{
    font-size:27px;
  }

  #cancioneroLyricsModal .lyrics-copy-button,
  #cancioneroLyricsModal .lyrics-modal-close{
    width:40px;
    height:40px;

    flex-basis:40px;
  }

  #cancioneroLyricsModal .lyrics-modal-body{
    padding:22px 18px 26px;
  }

  #cancioneroLyricsModal .lyrics-modal-body pre{
    font-size:16.5px;
    line-height:1.68;
  }
}

/* =====================================================================
   SONG STUDIO — CABECERA RESPONSIVE
   ===================================================================== */

@media (max-width:800px){

  .song-studio-page .admin-page-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px 12px;
    margin-bottom:18px;
  }

  .song-studio-page .admin-page-header .section-heading{
    display:contents;
  }

  .song-studio-page .admin-page-header .section-heading .eyebrow{
    grid-column:1 / -1;
    grid-row:1;
    margin:0 0 2px;
  }

  .song-studio-page .admin-page-header .section-heading h2{
    grid-column:1;
    grid-row:2;
    margin:0;
  }

  .song-studio-page .admin-page-header .section-heading > p:not(.eyebrow){
    grid-column:1 / -1;
    grid-row:3;
    margin:2px 0 4px;
  }

  .song-studio-page .admin-page-actions{
    display:contents;
  }

  #newSongStudioSongBtn{
    grid-column:2;
    grid-row:2;
    align-self:center;
    justify-self:end;

    min-height:42px;
    width:auto;
    margin:0;
    padding:0 10px;

    border:0;
    background:transparent;
    color:#68cf75;

    font-size:16px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:none;
  }

  #newSongStudioSongBtn:hover{
    background:transparent;
    transform:none;
  }

  #importSongCsvBtn,
  #backFromSongStudioBtn{
    min-width:0;
    width:100%;
    min-height:46px;
    margin:0;
    padding:0 12px;
    border-radius:14px;
    font-size:13px;
    font-weight:650;
    white-space:nowrap;
  }

  #importSongCsvBtn{
    grid-column:1;
    grid-row:4;
  }

  #backFromSongStudioBtn{
    grid-column:2;
    grid-row:4;
  }

  .song-studio-toolbar{
    margin-top:0;
    padding-top:0;
  }
}

/* =====================================================================
   ADMIN — PANEL CONSOLIDADO
   Convocatorias + Song Studio + cards secundarias + responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   RESUMEN DESPLEGABLE DE CONVOCATORIAS
   --------------------------------------------------------------------- */

.convocation-summary-details{
  width:100%;
  min-width:0;
  margin:0;
}

.convocation-summary-details > summary{
  width:100%;
  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:0 14px;

  list-style:none;
  cursor:pointer;

  border:1px solid var(--line-strong);
  border-radius:14px;

  background:var(--card-2);
  color:var(--text);

  font-size:13px;
  font-weight:700;

  transition:
    border-color .16s ease,
    background .16s ease;
}

.convocation-summary-details > summary::-webkit-details-marker{
  display:none;
}

.convocation-summary-details > summary:hover{
  border-color:rgba(154,210,214,.26);
  background:rgba(154,210,214,.055);
}

.convocation-summary-chevron{
  flex:0 0 auto;
  color:var(--brand-light);
  font-size:16px;
  line-height:1;
  transition:transform .18s ease;
}

.convocation-summary-details[open] .convocation-summary-chevron{
  transform:rotate(180deg);
}

.convocation-summary-details-body{
  width:100%;
  min-width:0;

  margin-top:10px;
  padding:14px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;

  background:rgba(255,255,255,.025);
}

.convocation-summary-details-body .admin-summary,
.convocation-summary-details-body .summary-main{
  margin-top:0;
}


/* ---------------------------------------------------------------------
   PANEL ADMIN — ESTRUCTURA GENERAL
   --------------------------------------------------------------------- */

.admin-panel{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
}

.admin-panel > .section-heading{
  max-width:720px;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
  margin-top:24px;
}

.admin-card{
  min-width:0;

  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:start;
  gap:16px;

  padding:20px;

  border:1px solid rgba(255,255,255,.085);
  border-radius:22px;

  background:rgba(23,32,33,.88);

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

@media (hover:hover){
  .admin-card:hover{
    border-color:rgba(154,210,214,.16);
    background:rgba(26,37,38,.92);
  }
}

.admin-card-icon{
  width:46px;
  height:46px;
  flex:none;

  display:grid;
  place-items:center;

  border-radius:14px;
  background:rgba(109,221,230,.11);

  font-size:22px;
}

.admin-card-content{
  width:100%;
  min-width:0;
}

.admin-card h3{
  margin:1px 0 5px;

  font-size:21px;
  line-height:1.1;
  letter-spacing:-.025em;
}

.admin-card .admin-card-content > p{
  margin:0 0 14px;

  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}

.admin-card button{
  max-width:100%;
}


/* ---------------------------------------------------------------------
   CONVOCATORIAS — DESKTOP
   Cerrado: matriz 2x2.
   Abierto: resumen baja sin romper la card.
   --------------------------------------------------------------------- */

.admin-card:has(#convocationEmailPeriod) .admin-card-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto;
  column-gap:12px;
  row-gap:10px;
  align-content:start;
}

.admin-card:has(#convocationEmailPeriod) h3{
  grid-column:1 / -1;
  grid-row:1;
}

.admin-card:has(#convocationEmailPeriod) .admin-card-content > p{
  grid-column:1 / -1;
  grid-row:2;
  margin-bottom:6px;
}

.admin-card:has(#convocationEmailPeriod) .convocation-email-period-control{
  grid-column:1;
  grid-row:3;

  width:100%;
  min-width:0;
  margin:0;
}

.admin-card:has(#convocationEmailPeriod) .convocation-email-period-control label{
  display:none;
}

.admin-card:has(#convocationEmailPeriod) #convocationEmailPeriod{
  width:100%;
  height:46px;
  min-height:46px;

  margin:0;
  padding:0 14px;

  border:1px solid var(--line-strong);
  border-radius:14px;

  background:var(--card-2);
  color:var(--text);
}

.admin-card:has(#convocationEmailPeriod) .convocation-summary-details{
  grid-column:2;
  grid-row:3;

  width:100%;
  min-width:0;
  margin:0;
}

.admin-card:has(#convocationEmailPeriod) .convocation-summary-details > summary{
  height:46px;
  min-height:46px;
  margin:0;
}

.admin-card:has(#convocationEmailPeriod) .admin-card-actions{
  grid-column:1 / -1;
  grid-row:4;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;

  width:100%;
  margin:0;
  padding:0;
  border:0;
}

.admin-card:has(#convocationEmailPeriod) #manageConvocationsBtn,
.admin-card:has(#convocationEmailPeriod) #sendConvocationEmailsBtn{
  width:100%;
  height:46px;
  min-height:46px;

  margin:0;
  padding:0 12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  font-size:13px;
  font-weight:700;
}

.admin-card:has(#convocationEmailPeriod) #convocationEmailStatus{
  grid-column:1 / -1;
  grid-row:5;
  margin-top:2px;
}

.admin-card:has(#convocationEmailPeriod) #convocationEmailStatus:empty{
  display:none;
}

/* Al abrir, el details ocupa todo el ancho y el cuerpo queda debajo. */
.admin-card:has(#convocationEmailPeriod)
.convocation-summary-details[open]{
  grid-column:1 / -1;
  grid-row:3;

  display:block;
}

.admin-card:has(#convocationEmailPeriod)
.convocation-summary-details[open] > summary{
  width:100%;
}

.admin-card:has(#convocationEmailPeriod)
.convocation-summary-details[open] .convocation-summary-details-body{
  width:100%;
  margin-top:10px;
}

.admin-card:has(#convocationEmailPeriod)
.convocation-summary-details[open] + .admin-card-actions{
  grid-row:4;
}


/* Resumen interno */
.admin-card:has(#convocationEmailPeriod) .summary-main{
  margin:0 0 12px;
}

.admin-card:has(#convocationEmailPeriod) .summary-main span{
  font-size:10px;
}

.admin-card:has(#convocationEmailPeriod) .summary-main strong{
  margin-top:3px;
  font-size:20px;
  line-height:1.08;
}

.admin-card:has(#convocationEmailPeriod) .summary-main small{
  font-size:11px;
}

.admin-card:has(#convocationEmailPeriod) .summary-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.admin-card:has(#convocationEmailPeriod) .summary-stats > div{
  min-width:0;
  padding:9px 10px;
  border-radius:12px;
}

.admin-card:has(#convocationEmailPeriod) .summary-stats span{
  font-size:8px;
}

.admin-card:has(#convocationEmailPeriod) .summary-stats strong{
  font-size:18px;
}

.admin-card:has(#convocationEmailPeriod) .summary-mode{
  margin-top:10px;
  padding:6px 9px;
  font-size:11px;
}


/* ---------------------------------------------------------------------
   SONG STUDIO — HERO CARD
   --------------------------------------------------------------------- */

.song-studio-admin-card{
  position:relative;

  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(0,182,134,.14),
      transparent 19rem
    ),
    linear-gradient(
      145deg,
      rgba(18,42,40,.98),
      rgba(16,25,26,.96)
    );
}

.song-studio-admin-card > .admin-card-icon{
  display:none;
}

.song-studio-admin-card .admin-card-content{
  width:100%;
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:12px 4px;

  text-align:center;
}

.song-studio-admin-brand{
  display:flex;
  flex-direction:column;
  align-items:center;

  margin-bottom:18px;
}

.song-studio-admin-brand > strong{
  display:block;

  margin:0;

  color:#fff;

  font-size:clamp(34px,3.7vw,48px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.055em;
}

.song-studio-cfc-logo{
  width:120px;
  max-width:46%;
  height:auto;

  margin-top:11px;

  object-fit:contain;
  opacity:.95;
}

.song-studio-admin-card .song-studio-admin-features{
  width:fit-content;
  max-width:100%;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin:0 auto 18px;
}

.song-studio-admin-card .song-studio-admin-features span{
  min-height:30px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 11px;

  border:1px solid rgba(0,182,134,.65);
  border-radius:999px;

  background:rgba(0,182,134,.035);
  color:#fff;

  font-size:12px;
  font-weight:700;
  line-height:1;
}

.song-studio-admin-card #manageSongStudioBtn{
  width:auto;
  min-width:180px;
  min-height:46px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin:0 auto;
  padding:0 18px;

  border-radius:14px;

  font-size:13px;
  font-weight:700;
}


/* ---------------------------------------------------------------------
   CARDS SECUNDARIAS
   --------------------------------------------------------------------- */

.admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card){
  min-height:138px;
}

.admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card)
.admin-card-content{
  display:flex;
  min-height:100%;
  flex-direction:column;
  align-items:flex-start;
}

.admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card)
.admin-card-content > p{
  margin-bottom:14px;
}

.admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card)
.admin-card-content > button{
  margin-top:auto;
}


/* ---------------------------------------------------------------------
   PANEL ADMIN — MOBILE
   En mobile se prioriza alineación, lectura y touch targets.
   --------------------------------------------------------------------- */

@media (max-width:800px){

  .admin-panel{
    max-width:none;
  }

  .admin-panel > .section-heading{
    margin-bottom:18px;
  }

  .admin-grid{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:18px;
  }

  /* Quitamos la columna de emojis en mobile para alinear todo. */
  .admin-card{
    display:block;

    min-height:0;
    padding:18px;

    border-radius:20px;
  }

  .admin-card > .admin-card-icon{
    display:none;
  }

  .admin-card-content{
    width:100%;
    min-width:0;
  }

  .admin-card h3{
    margin:0 0 5px;
    font-size:20px;
  }

  .admin-card .admin-card-content > p{
    margin:0 0 14px;

    font-size:14px;
    line-height:1.4;
  }


  /* Convocatorias mobile: una sola columna, sin superposición. */
  .admin-card:has(#convocationEmailPeriod) .admin-card-content{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    gap:0 !important;
  }

  .admin-card:has(#convocationEmailPeriod) h3,
  .admin-card:has(#convocationEmailPeriod) .admin-card-content > p,
  .admin-card:has(#convocationEmailPeriod) .convocation-email-period-control,
  .admin-card:has(#convocationEmailPeriod) .convocation-summary-details,
  .admin-card:has(#convocationEmailPeriod) .admin-card-actions,
  .admin-card:has(#convocationEmailPeriod) #convocationEmailStatus{
    grid-column:1 !important;
    grid-row:auto !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .convocation-email-period-control{
    width:100% !important;
    margin:10px 0 0 !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  #convocationEmailPeriod{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details,
  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details[open]{
    display:block !important;

    width:100% !important;
    min-width:0 !important;

    margin:10px 0 0 !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details > summary{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;

    margin:0 !important;
    padding:0 14px !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details-body{
    position:static !important;

    display:block !important;

    width:100% !important;
    min-width:0 !important;

    margin:10px 0 0 !important;
    padding:14px !important;

    box-sizing:border-box !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .summary-main{
    width:100% !important;
    margin:0 0 13px !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .summary-main strong{
    font-size:20px !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .summary-stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;

    width:100% !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .summary-stats > div{
    width:100% !important;
    min-width:0 !important;

    padding:11px !important;

    box-sizing:border-box !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .summary-mode{
    margin-top:12px !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  .admin-card-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;

    width:100% !important;

    margin:14px 0 0 !important;
  }

  .admin-card:has(#convocationEmailPeriod)
  #manageConvocationsBtn,
  .admin-card:has(#convocationEmailPeriod)
  #sendConvocationEmailsBtn{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
  }


  /* Song Studio mobile */
  .song-studio-admin-card{
    padding:26px 18px;
  }

  .song-studio-admin-card .admin-card-content{
    padding:4px 0;
  }

  .song-studio-admin-brand{
    margin-bottom:20px;
  }

  .song-studio-admin-brand > strong{
    font-size:clamp(36px,11vw,48px);
  }

  .song-studio-cfc-logo{
    width:118px;
    max-width:42%;
    margin-top:12px;
  }

  .song-studio-admin-card .song-studio-admin-features{
    width:100%;
    max-width:520px;

    justify-content:center;

    margin:0 auto 18px;
  }

  .song-studio-admin-card .song-studio-admin-features span{
    min-height:32px;
    padding:0 12px;
  }

  /*
    Botón más chico que la card y visualmente alineado
    con el conjunto de pills.
  */
  .song-studio-admin-card #manageSongStudioBtn{
    width:82% !important;
    max-width:520px !important;
    min-width:0 !important;
    min-height:46px !important;

    align-self:center;

    margin:0 auto !important;
    padding:0 18px !important;
  }


  /* Cards secundarias: todas alineadas y fáciles de tocar. */
  .admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card){
    min-height:0;
  }

  .admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card)
  .admin-card-content{
    min-height:0;
  }

  .admin-grid > .admin-card:not(:has(#convocationEmailPeriod)):not(.song-studio-admin-card)
  .admin-card-content > button{
    width:100%;
    min-height:46px;

    margin-top:2px;
  }
}


/* ---------------------------------------------------------------------
   MOBILE PEQUEÑO
   --------------------------------------------------------------------- */

@media (max-width:420px){

  .admin-card{
    padding:16px;
  }

  .admin-card:has(#convocationEmailPeriod) .summary-stats{
    grid-template-columns:1fr 1fr !important;
  }

  .song-studio-admin-card{
    padding:24px 15px;
  }

  .song-studio-admin-card .song-studio-admin-features{
    gap:7px;
  }

  .song-studio-admin-card .song-studio-admin-features span{
    padding:0 10px;
    font-size:11px;
  }

  .song-studio-admin-card #manageSongStudioBtn{
    width:86% !important;
  }
}

/* =====================================================================
   ADMIN — ANUNCIOS
   Layout completo desktop / tablet / mobile
   ===================================================================== */

.anuncios-admin-page{
  min-width:0;
}


/* ---------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------- */

.anuncios-admin-page .admin-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;

  margin-bottom:24px;
}

.anuncios-admin-page .section-heading{
  min-width:0;
  margin:0;
}

.anuncios-admin-page .section-heading h2{
  margin:0;

  font-size:clamp(34px,4vw,44px);
  line-height:1;

  letter-spacing:-.045em;
}

.anuncios-admin-page .section-heading > p:not(.eyebrow){
  max-width:620px;

  margin:9px 0 0;

  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

.anuncios-admin-page .admin-page-actions{
  flex:0 0 auto;
}


/* ---------------------------------------------------------------------
   LAYOUT PRINCIPAL
   --------------------------------------------------------------------- */

.anuncios-admin-layout{
  display:grid;
  grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);
  align-items:start;
  gap:18px;
}


/* ---------------------------------------------------------------------
   PANELES
   --------------------------------------------------------------------- */

.anuncios-admin-editor,
.anuncios-admin-list-panel{
  min-width:0;

  border:1px solid var(--line);
  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );

  overflow:hidden;
}

.anuncios-admin-editor{
  padding:22px;
}

.anuncios-admin-list-panel{
  padding:22px;
}


/* ---------------------------------------------------------------------
   CABECERA "NUEVO ANUNCIO"
   --------------------------------------------------------------------- */

.anuncios-admin-page .cronograma-panel-heading{
  display:flex;
  align-items:flex-start;
  gap:14px;

  margin:0 0 22px;
}

.anuncios-admin-page .cronograma-panel-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;

  display:grid;
  place-items:center;

  border:1px solid rgba(154,210,214,.16);
  border-radius:14px;

  background:rgba(154,210,214,.08);
  color:var(--brand-light);

  font-size:24px;
  line-height:1;
}

.anuncios-admin-page .cronograma-panel-heading > div:last-child{
  min-width:0;
}

.anuncios-admin-page .cronograma-panel-eyebrow{
  display:block;

  color:var(--brand-light);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.10em;
}

.anuncios-admin-page .cronograma-panel-heading h3{
  margin:5px 0 0;

  font-size:23px;
  line-height:1.08;

  letter-spacing:-.025em;
}

.anuncios-admin-page .cronograma-panel-heading p{
  margin:7px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.4;
}


/* ---------------------------------------------------------------------
   FORMULARIO
   --------------------------------------------------------------------- */

.anuncio-admin-form{
  display:grid;
  gap:16px;
}

.anuncio-admin-form .cronograma-field{
  min-width:0;

  display:grid;
  gap:7px;
}

.anuncio-admin-form .cronograma-field > span{
  color:#d5e1e2;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.anuncio-admin-form input,
.anuncio-admin-form select,
.anuncio-admin-form textarea{
  width:100%;
  min-width:0;

  border:1px solid var(--line-strong);
  outline:0;

  border-radius:14px;

  background:var(--card-2);
  color:var(--text);

  font:inherit;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.anuncio-admin-form input,
.anuncio-admin-form select{
  min-height:48px;
  padding:0 14px;
}

.anuncio-admin-form textarea{
  min-height:112px;

  padding:13px 14px;

  resize:vertical;
  line-height:1.45;
}

.anuncio-admin-form input::placeholder,
.anuncio-admin-form textarea::placeholder{
  color:var(--soft);
}

.anuncio-admin-form input:focus,
.anuncio-admin-form select:focus,
.anuncio-admin-form textarea:focus{
  border-color:rgba(154,210,214,.5);

  background:#192426;

  box-shadow:
    0 0 0 3px
    rgba(154,210,214,.07);
}

.anuncio-admin-date-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}


/* ---------------------------------------------------------------------
   FOOTER DEL FORM
   --------------------------------------------------------------------- */

.anuncio-admin-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  margin-top:2px;
  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.07);
}

.anuncio-admin-form-footer small{
  max-width:300px;

  color:var(--muted);

  font-size:12px;
  line-height:1.4;
}

#saveAnuncioAdminBtn{
  flex:0 0 auto;

  min-height:46px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 17px;

  border-radius:13px;

  font-size:14px;
  font-weight:700;
}

#anuncioAdminStatus{
  min-height:0;
  margin:0;
}

#anuncioAdminStatus:empty{
  display:none;
}


/* ---------------------------------------------------------------------
   LISTADO — HEADER
   --------------------------------------------------------------------- */

.anuncios-admin-list-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;

  margin:0;
}

.anuncios-admin-list-header > div:first-child{
  min-width:0;
}

.anuncios-admin-list-header .cronograma-panel-eyebrow{
  display:block;

  color:var(--brand-light);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.10em;
}

.anuncios-admin-list-header h3{
  margin:5px 0 0;

  font-size:23px;
  line-height:1.1;

  letter-spacing:-.025em;
}

#anunciosAdminCount{
  margin:7px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.35;
}

.cronograma-count-badge{
  min-width:40px;
  height:40px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  padding:0 10px;

  border:1px solid rgba(154,210,214,.16);
  border-radius:13px;

  background:rgba(154,210,214,.08);
  color:var(--brand-light);

  font-size:15px;
  font-weight:800;
}

.anuncios-admin-divider{
  height:1px;

  margin:18px 0;

  background:rgba(255,255,255,.07);
}


/* ---------------------------------------------------------------------
   LISTA
   --------------------------------------------------------------------- */

.anuncios-admin-list{
  display:grid;
  gap:10px;
}

.anuncios-admin-loading{
  min-height:210px;

  display:grid;
  place-items:center;

  border:1px dashed rgba(255,255,255,.09);
  border-radius:18px;

  color:var(--muted);

  font-size:14px;
}


/* ---------------------------------------------------------------------
   CARD / FILA DE ANUNCIO
   --------------------------------------------------------------------- */

.anuncio-admin-row{
  min-width:0;

  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:start;
  gap:13px;

  padding:14px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:17px;

  background:rgba(255,255,255,.022);

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

@media (hover:hover){
  .anuncio-admin-row:hover{
    border-color:rgba(154,210,214,.20);

    background:rgba(154,210,214,.035);

    transform:translateY(-1px);
  }
}

.anuncio-admin-row-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:rgba(154,210,214,.08);

  font-size:21px;
  line-height:1;
}

.anuncio-admin-row-copy{
  min-width:0;
}

.anuncio-admin-row-title{
  min-width:0;

  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.anuncio-admin-row-title strong{
  min-width:0;

  font-size:16px;
  font-weight:700;
  line-height:1.25;

  letter-spacing:-.015em;
}

.anuncio-status-badge{
  min-height:25px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 9px;

  border-radius:999px;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.055em;
}

.anuncio-status-badge.visible{
  border:1px solid rgba(0,182,134,.22);

  background:rgba(0,182,134,.10);
  color:#65d7b6;
}

.anuncio-status-badge.hidden{
  border:1px solid rgba(255,255,255,.10);

  background:rgba(255,255,255,.045);
  color:var(--muted);
}

.anuncio-admin-date{
  display:block;

  margin-top:6px;

  color:var(--brand-light);

  font-size:12px;
  font-weight:650;
}

.anuncio-admin-row-copy p{
  margin:8px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.45;
}

.anuncio-admin-delete{
  min-height:38px;

  padding:0 12px;

  border-radius:11px;

  color:#ff9da5;

  font-size:12px;
  font-weight:700;
}

.anuncio-admin-delete:hover{
  border-color:rgba(255,77,90,.24);

  background:rgba(255,77,90,.09);
  color:#ffc1c6;
}


/* ---------------------------------------------------------------------
   EMPTY / ERROR
   --------------------------------------------------------------------- */

.anuncios-admin-empty{
  min-height:210px;

  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;

  padding:28px;

  border:1px dashed rgba(255,255,255,.09);
  border-radius:18px;

  text-align:center;
}

.anuncios-admin-empty > span{
  font-size:34px;
}

.anuncios-admin-empty strong{
  font-size:17px;
}

.anuncios-admin-empty p{
  max-width:340px;

  margin:0;

  color:var(--muted);

  font-size:13px;
  line-height:1.4;
}

.anuncios-admin-empty.error{
  border-color:rgba(255,77,90,.20);
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width:1050px){

  .anuncios-admin-layout{
    grid-template-columns:1fr;
  }

  .anuncios-admin-editor,
  .anuncios-admin-list-panel{
    padding:20px;
  }
}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width:800px){

  .anuncios-admin-page .admin-page-header{
    display:grid;
    grid-template-columns:1fr;

    gap:14px;

    margin-bottom:18px;
  }

  .anuncios-admin-page .admin-page-actions{
    width:100%;
  }

  #backFromAnunciosBtn{
    width:100%;
  }

  .anuncios-admin-layout{
    gap:14px;
  }

  .anuncios-admin-editor,
  .anuncios-admin-list-panel{
    padding:16px;

    border-radius:19px;
  }

  .anuncios-admin-page .cronograma-panel-heading{
    gap:12px;

    margin-bottom:18px;
  }

  .anuncios-admin-page .cronograma-panel-icon{
    width:42px;
    height:42px;

    flex-basis:42px;

    border-radius:13px;
  }

  .anuncios-admin-page .cronograma-panel-heading h3,
  .anuncios-admin-list-header h3{
    font-size:21px;
  }

  .anuncio-admin-date-grid{
    grid-template-columns:1fr;
  }

  .anuncio-admin-form-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .anuncio-admin-form-footer small{
    max-width:none;
  }

  #saveAnuncioAdminBtn{
    width:100%;
  }

  .anuncio-admin-row{
    grid-template-columns:42px minmax(0,1fr);

    gap:11px;

    padding:13px;
  }

  .anuncio-admin-row-icon{
    width:42px;
    height:42px;
  }

  .anuncio-admin-delete{
    grid-column:2;

    justify-self:start;

    margin-top:3px;
  }
}


/* =====================================================================
   MOBILE PEQUEÑO
   ===================================================================== */

@media (max-width:480px){

  .anuncios-admin-editor,
  .anuncios-admin-list-panel{
    padding:14px;
  }

  .anuncio-admin-form{
    gap:14px;
  }

  .anuncio-admin-form input,
  .anuncio-admin-form select{
    min-height:46px;
  }

  .anuncio-admin-form textarea{
    min-height:104px;
  }

  .anuncios-admin-list-header{
    gap:10px;
  }

  .cronograma-count-badge{
    min-width:38px;
    height:38px;

    border-radius:12px;
  }
}

/* =========================================================
   DESKTOP — CONVOCATORIAS ORDEN DEFINITIVO
========================================================= */

@media (min-width:801px){

  .admin-card:has(#convocationEmailPeriod)
  .admin-card-content{
    display:grid !important;

    grid-template-columns:minmax(0,1fr) 190px !important;
    grid-template-rows:auto auto auto auto !important;

    column-gap:14px !important;
    row-gap:10px !important;

    align-items:start !important;
  }


  /* TÍTULO — ARRIBA IZQUIERDA */
  .admin-card:has(#convocationEmailPeriod) h3{
    grid-column:1 !important;
    grid-row:1 !important;

    align-self:center !important;

    margin:0 !important;
  }


  /* PRÓXIMOS 15 DÍAS — ARRIBA DERECHA */
  .admin-card:has(#convocationEmailPeriod)
  .convocation-email-period-control{
    grid-column:2 !important;
    grid-row:1 !important;

    width:190px !important;

    margin:0 !important;

    align-self:center !important;

    visibility:visible !important;
    pointer-events:auto !important;
  }


  .admin-card:has(#convocationEmailPeriod)
  .convocation-email-period-control label{
    display:none !important;
  }


  .admin-card:has(#convocationEmailPeriod)
  #convocationEmailPeriod{
    width:100% !important;

    height:42px !important;
    min-height:42px !important;

    margin:0 !important;
    padding:0 12px !important;

    border-radius:12px !important;
  }


  /* DESCRIPCIÓN */
  .admin-card:has(#convocationEmailPeriod)
  .admin-card-content > p{
    grid-column:1 / -1 !important;
    grid-row:2 !important;

    margin:0 !important;
  }


  /* =========================================
     VER RESUMEN — TODO EL ANCHO
  ========================================= */

  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details,
  
  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details[open]{
    grid-column:1 / -1 !important;
    grid-row:3 !important;

    display:block !important;

    width:100% !important;
    min-width:0 !important;

    margin:2px 0 0 !important;
  }


  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details > summary{
    width:100% !important;

    height:46px !important;
    min-height:46px !important;

    margin:0 !important;
    padding:0 14px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    border-radius:14px !important;
  }


  /* RESUMEN ABIERTO: DATOS DEBAJO */
  .admin-card:has(#convocationEmailPeriod)
  .convocation-summary-details[open]
  .convocation-summary-details-body{
    position:static !important;

    display:block !important;

    width:100% !important;

    margin:10px 0 0 !important;
  }


  /* =========================================
     BOTONES ABAJO
  ========================================= */

  .admin-card:has(#convocationEmailPeriod)
  .admin-card-actions{
    grid-column:1 / -1 !important;
    grid-row:4 !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:12px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }


  .admin-card:has(#convocationEmailPeriod)
  #manageConvocationsBtn,

  .admin-card:has(#convocationEmailPeriod)
  #sendConvocationEmailsBtn{
    width:100% !important;

    height:46px !important;
    min-height:46px !important;

    margin:0 !important;
  }

}

/* =========================================================
   INICIO — BALANCE DESKTOP V2
   Solo desktop. Mobile conserva su layout actual.
========================================================= */

@media (min-width:801px){

  /* -----------------------------------------------------
     GRILLA PRINCIPAL
     ----------------------------------------------------- */

  .dashboard-grid{
    grid-template-columns:minmax(0,1.58fr) minmax(360px,.92fr);
    gap:18px;
    align-items:stretch;
  }

  .dashboard-grid > .card{
    height:100%;
  }


  /* -----------------------------------------------------
     PRÓXIMA REUNIÓN
     ----------------------------------------------------- */

  .next-card{
    min-height:310px;
    height:100%;

    display:flex;
    flex-direction:column;

    padding:28px 30px 26px;
  }

  .next-card .eyebrow{
    width:100%;
    margin:0 0 10px;

    text-align:center;
  }

  .next-card h2{
    width:100%;
    max-width:none;

    margin:0;

    text-align:left;

    font-size:clamp(58px,5.25vw,76px);
    line-height:.88;
    letter-spacing:-.064em;
  }

  /* Mensaje: centrado respecto de toda la card */
  .next-card .subtitle,
  .next-card > p{
    width:100%;
    max-width:none;

    margin:14px 0 0;

    text-align:center;
  }

  /* Horario: bloque centrado y con ancho contenido */
  .next-info-list{
    width:min(300px,100%);
    max-width:300px;

    grid-template-columns:1fr;

    margin:22px auto 0;
  }

  .next-info-item{
    width:100%;
    min-height:62px;
  }


  /* -----------------------------------------------------
     PRÓXIMAS ASIGNACIONES
     ----------------------------------------------------- */

  .my-card{
    min-height:310px;
    height:100%;

    display:flex;
    flex-direction:column;

    padding:28px 24px 26px;
  }

  .my-card .card-title{
    margin:0 0 18px;

    font-size:23px;
    line-height:1.05;
  }

  /* El texto y CTA se leen como una unidad */
  .my-card .my-assignment-empty{
    max-width:100%;

    margin:0 0 18px;

    font-size:17px;
    line-height:1.45;
  }

  .my-card .all-dates-btn{
    width:100%;
    min-height:50px;

    margin:0;
  }

  /* Si hubiera contenido adicional, no empujar el CTA al azar */
  .my-card .action-row{
    width:100%;
  }

}


/* ---------------------------------------------------------
   DESKTOP INTERMEDIO
   Evita que la fecha quede demasiado grande entre 801–1050px
   --------------------------------------------------------- */

@media (min-width:801px) and (max-width:1050px){

  .dashboard-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);
  }

  .next-card h2{
    font-size:clamp(52px,6vw,68px);
  }

  .next-card,
  .my-card{
    min-height:300px;
  }

}

/* =========================================================
   CFC APP — CRONOGRAMA PÚBLICO
   Desktop + Mobile
========================================================= */

.public-cronograma-mode{
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(14,77,84,.20),
      transparent 28rem
    ),
    radial-gradient(
      circle at 85% 18%,
      rgba(109,221,230,.08),
      transparent 26rem
    ),
    #0b1112;
}

.public-cronograma-screen{
  min-height:100dvh;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:32px 18px 48px;
}

.public-cronograma-loading-screen{
  align-items:center;
}

.public-cronograma-loading-screen .public-cronograma-loading{
  width:100%;
}

.public-cronograma-shell{
  width:min(100%,980px);

  overflow:hidden;

  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(20,30,31,.96),
      rgba(13,20,21,.98)
    );

  box-shadow:
    0 30px 90px rgba(0,0,0,.36);
}


/* =========================================================
   HEADER
========================================================= */

.public-cronograma-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;

  padding:30px 34px;

  border-bottom:1px solid rgba(255,255,255,.075);

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(14,77,84,.25),
      transparent 22rem
    );
}

.public-cronograma-brand{
  min-width:0;

  display:flex;
  align-items:center;
}

.public-cronograma-brand-logo{
  display:block;

  width:150px;
  max-width:100%;
  height:auto;

  object-fit:contain;
}

.public-cronograma-date{
  min-width:0;

  text-align:right;
}

.public-cronograma-date small{
  display:block;

  margin-bottom:6px;

  color:var(--brand-light);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.12em;
}

.public-cronograma-date h1{
  margin:0;

  color:var(--text);

  font-size:clamp(26px,3vw,38px);
  font-weight:800;
  line-height:1;

  letter-spacing:-.045em;
}


/* =========================================================
   BODY
========================================================= */

.public-cronograma-body{
  display:grid;
  gap:30px;

  padding:32px 34px 36px;
}

.public-cronograma-section{
  min-width:0;
}

.public-cronograma-section-title{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:14px;
}

.public-cronograma-section-title::after{
  content:"";

  height:1px;
  flex:1;

  background:
    linear-gradient(
      90deg,
      rgba(154,210,214,.18),
      rgba(154,210,214,0)
    );
}

.public-cronograma-section-title span{
  flex:none;

  color:var(--brand-light);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.11em;
}


/* =========================================================
   LISTA DEL CRONOGRAMA
========================================================= */

.public-cronograma-list{
  display:grid;
  gap:9px;
}

.public-cronograma-row{
  min-width:0;

  display:grid;
  grid-template-columns:78px 42px minmax(0,1fr);
  align-items:center;
  gap:13px;

  padding:14px 16px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:17px;

  background:rgba(255,255,255,.026);

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

@media (hover:hover){
  .public-cronograma-row:hover{
    border-color:rgba(154,210,214,.18);
    background:rgba(154,210,214,.04);

    transform:translateY(-1px);
  }
}

.public-cronograma-time{
  color:var(--brand-light);

  font-size:16px;
  font-weight:800;
  line-height:1;

  letter-spacing:-.02em;
}

.public-cronograma-marker{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:rgba(109,221,230,.10);

  font-size:18px;
}

.public-cronograma-copy{
  min-width:0;

  display:grid;
  gap:4px;
}

.public-cronograma-copy strong{
  overflow-wrap:anywhere;

  color:var(--text);

  font-size:16px;
  font-weight:700;
  line-height:1.2;
}

.public-cronograma-copy small{
  overflow-wrap:anywhere;

  color:var(--muted);

  font-size:12px;
  line-height:1.3;
}


/* =========================================================
   PRÓXIMAS ACTIVIDADES
========================================================= */

.public-announcements-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.public-announcement-card{
  min-width:0;

  display:grid;
  gap:7px;

  padding:17px 18px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.018)
    );
}

.public-announcement-card strong{
  color:var(--text);

  font-size:16px;
  font-weight:700;
  line-height:1.2;

  overflow-wrap:anywhere;
}

.public-announcement-card small{
  color:var(--brand-light);

  font-size:11px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.06em;
}

.public-announcement-card p{
  margin:2px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.45;

  overflow-wrap:anywhere;
}


/* =========================================================
   ESTADOS VACÍO / CARGA / ERROR
========================================================= */

.public-cronograma-empty,
.public-cronograma-loading,
.public-cronograma-error{
  min-height:280px;

  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;

  padding:28px;

  text-align:center;
}

.public-cronograma-empty{
  min-height:180px;

  border:1px dashed rgba(255,255,255,.09);
  border-radius:18px;

  background:rgba(255,255,255,.018);
}

.public-cronograma-empty > span,
.public-cronograma-error > span{
  font-size:36px;
}

.public-cronograma-empty strong,
.public-cronograma-loading strong{
  color:var(--text);

  font-size:17px;
}

.public-cronograma-empty p,
.public-cronograma-error p{
  max-width:420px;
  margin:0;

  color:var(--muted);

  font-size:13px;
  line-height:1.45;
}

.public-cronograma-logo img{
  width:72px;
  height:auto;
  object-fit:contain;
}


/* =========================================================
   FOOTER
========================================================= */

.public-cronograma-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:18px 34px;

  border-top:1px solid rgba(255,255,255,.07);

  background:rgba(255,255,255,.012);
}

.public-cronograma-footer span{
  color:var(--text);

  font-size:13px;
  font-weight:700;
}

.public-cronograma-footer small{
  color:var(--muted);

  font-size:11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:800px){

  .public-cronograma-screen{
    padding:18px 12px 30px;
  }

  .public-cronograma-shell{
    border-radius:22px;
  }

  .public-cronograma-header{
    grid-template-columns:1fr;
    gap:18px;

    padding:24px 22px;
  }

  .public-cronograma-brand{
    justify-content:center;
  }

  .public-cronograma-brand-logo{
    width:138px;
  }

  .public-cronograma-date{
    text-align:center;
  }

  .public-cronograma-body{
    gap:26px;

    padding:24px 20px 28px;
  }

  .public-announcements-grid{
    grid-template-columns:1fr;
  }

  .public-cronograma-footer{
    padding:16px 20px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:520px){

  .public-cronograma-screen{
    padding:0;
  }

  .public-cronograma-shell{
    width:100%;

    border-left:0;
    border-right:0;
    border-radius:0;
  }

  .public-cronograma-header{
    padding:
      calc(22px + env(safe-area-inset-top))
      16px
      22px;
  }

  .public-cronograma-brand-logo{
    width:126px;
  }

  .public-cronograma-date small{
    font-size:10px;
  }

  .public-cronograma-date h1{
    font-size:clamp(26px,8vw,34px);
  }

  .public-cronograma-body{
    gap:24px;

    padding:22px 14px 26px;
  }

  .public-cronograma-section-title{
    margin-bottom:12px;
  }

  .public-cronograma-section-title span{
    font-size:10px;
  }

  .public-cronograma-row{
    grid-template-columns:62px 38px minmax(0,1fr);
    gap:10px;

    padding:12px;

    border-radius:15px;
  }

  .public-cronograma-time{
    font-size:14px;
  }

  .public-cronograma-marker{
    width:36px;
    height:36px;

    border-radius:11px;

    font-size:16px;
  }

  .public-cronograma-copy strong{
    font-size:15px;
  }

  .public-cronograma-copy small{
    font-size:11px;
  }

  .public-announcement-card{
    padding:15px;
  }

  .public-cronograma-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;

    padding:
      16px
      16px
      calc(18px + env(safe-area-inset-bottom));
  }
}


/* =====================================================================
   CFC APP — ADMIN V2
   Rediseño visual aislado. No afecta subpantallas de Admin.
   ===================================================================== */

.admin-panel.admin-v2{
  --admin-v2-border:rgba(154,210,214,.14);
  --admin-v2-border-strong:rgba(154,210,214,.23);
  --admin-v2-surface:rgba(16,24,25,.78);
  --admin-v2-surface-2:rgba(22,33,34,.82);
  --admin-v2-glow:rgba(0,182,134,.18);

  position:relative;
  isolation:isolate;

  width:100%;
  max-width:1220px;

  margin:0 auto;
  padding:34px 36px 22px;

  overflow:hidden;

  border:1px solid var(--admin-v2-border);
  border-radius:30px;

  background:
    radial-gradient(
      circle at 92% -5%,
      rgba(0,182,134,.20),
      transparent 25rem
    ),
    radial-gradient(
      circle at 6% 12%,
      rgba(62,113,118,.16),
      transparent 23rem
    ),
    linear-gradient(
      150deg,
      rgba(13,20,21,.98),
      rgba(9,16,17,.98)
    );

  box-shadow:
    0 30px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.018);
}

.admin-panel.admin-v2::before{
  content:"";

  position:absolute;
  inset:0;
  z-index:-1;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.02),
      transparent 22%,
      transparent 78%,
      rgba(0,182,134,.025)
    );
}


/* ---------- Header ---------- */

.admin-v2-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  margin-bottom:26px;
}

.admin-v2-heading{
  min-width:0;
}

.admin-v2-heading > .eyebrow{
  margin-bottom:7px;
}

.admin-v2-title-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.admin-v2-title-row h2{
  margin:0;

  color:#fff;

  font-size:clamp(40px,4.2vw,58px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.055em;
}

.admin-v2-security-badge{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:1px solid rgba(0,214,174,.42);
  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      rgba(0,182,134,.13),
      rgba(0,182,134,.04)
    );

  color:#2bdcb9;

  box-shadow:
    inset 0 0 22px rgba(0,182,134,.05);
}

.admin-v2-intro{
  max-width:640px;
  margin:10px 0 0;

  color:var(--muted);

  font-size:16px;
  line-height:1.4;
}


/* ---------- Main grid ---------- */

.admin-v2-grid{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  grid-template-areas:
    "convocations songstudio"
    "tools tools";
  gap:18px;
  align-items:stretch;
}

.admin-v2-card,
.admin-v2-tool-card{
  min-width:0;

  border:1px solid rgba(154,210,214,.13);
  background:
    linear-gradient(
      145deg,
      rgba(22,32,33,.84),
      rgba(13,21,22,.82)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}

.admin-v2-card{
  border-radius:24px;
}


/* ---------- Shared icon system ---------- */

.admin-v2-card-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;

  background:rgba(255,255,255,.04);
}

.admin-v2-icon-cyan{
  color:#78dce1;
  background:
    linear-gradient(
      145deg,
      rgba(51,161,169,.18),
      rgba(51,161,169,.08)
    );
}

.admin-v2-icon-pink{
  color:#ff71af;
  background:
    linear-gradient(
      145deg,
      rgba(255,74,145,.19),
      rgba(255,74,145,.07)
    );
}

.admin-v2-icon-violet{
  color:#bda9ff;
  background:
    linear-gradient(
      145deg,
      rgba(139,111,238,.20),
      rgba(139,111,238,.07)
    );
}


/* =====================================================================
   CONVOCATORIAS
   ===================================================================== */

.admin-v2-convocations{
  grid-area:convocations;

  display:flex;
  flex-direction:column;

  min-height:330px;
  padding:24px;
}

.admin-v2-card-top{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) minmax(170px,206px);
  align-items:center;
  gap:15px;
}

.admin-v2-card-title{
  min-width:0;
}

.admin-v2-card-title h3{
  margin:0 0 6px;

  color:#fff;

  font-size:23px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.035em;
}

.admin-v2-card-title p{
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.35;
}

.admin-v2 .admin-v2-period{
  width:100%;
  min-width:0;
  margin:0;
}

.admin-v2 .admin-v2-period label{
  display:none;
}

.admin-v2 .admin-v2-period #convocationEmailPeriod{
  width:100%;
  height:48px;
  min-height:48px;

  margin:0;
  padding:0 38px 0 14px;

  border:1px solid rgba(154,210,214,.17);
  border-radius:14px;

  background:rgba(24,36,37,.92);
  color:#fff;

  font-size:13px;
  font-weight:600;

  outline:none;
}

.admin-v2 .admin-v2-period #convocationEmailPeriod:focus{
  border-color:rgba(42,220,185,.48);
  box-shadow:0 0 0 3px rgba(0,182,134,.07);
}


/* Details */

.admin-v2 .admin-v2-summary{
  width:100%;
  min-width:0;

  margin:20px 0 0;
}

.admin-v2 .admin-v2-summary > summary{
  width:100%;
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  margin:0;
  padding:0 18px;

  list-style:none;
  cursor:pointer;

  border:1px solid rgba(154,210,214,.15);
  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(29,44,45,.86),
      rgba(22,34,35,.82)
    );

  color:#fff;

  font-size:14px;
  font-weight:700;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.admin-v2 .admin-v2-summary > summary::-webkit-details-marker{
  display:none;
}

@media (hover:hover){
  .admin-v2 .admin-v2-summary > summary:hover{
    border-color:rgba(42,220,185,.32);
    background:
      linear-gradient(
        180deg,
        rgba(32,49,49,.92),
        rgba(24,38,38,.88)
      );
  }
}

.admin-v2 .admin-v2-summary .convocation-summary-chevron{
  color:#46d9bd;
  font-size:24px;
  font-weight:500;
  line-height:1;

  transform:rotate(0deg);
  transition:transform .18s ease;
}

.admin-v2 .admin-v2-summary[open] .convocation-summary-chevron{
  transform:rotate(90deg);
}

.admin-v2 .admin-v2-summary .convocation-summary-details-body{
  width:100%;
  min-width:0;

  margin:10px 0 0;
  padding:15px;

  border:1px solid rgba(154,210,214,.10);
  border-radius:16px;

  background:rgba(255,255,255,.024);
}


/* Summary content generated by JS */

.admin-v2 .admin-summary{
  min-width:0;
}

.admin-v2 .summary-main{
  margin:0 0 12px;
}

.admin-v2 .summary-main span{
  color:var(--brand-light);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}

.admin-v2 .summary-main strong{
  display:block;

  margin-top:4px;

  color:#fff;

  font-size:20px;
  line-height:1.05;
}

.admin-v2 .summary-main small{
  display:block;

  margin-top:3px;

  color:var(--muted);
  font-size:11px;
}

.admin-v2 .summary-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.admin-v2 .summary-stats > div{
  min-width:0;

  padding:10px;

  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;

  background:rgba(255,255,255,.035);
}

.admin-v2 .summary-stats span{
  display:block;

  color:var(--muted);

  font-size:8px;
  font-weight:700;
  letter-spacing:.05em;
}

.admin-v2 .summary-stats strong{
  display:block;

  margin-top:4px;

  color:#fff;

  font-size:18px;
}

.admin-v2 .summary-mode{
  display:inline-flex;
  align-items:center;

  margin-top:10px;
  padding:6px 9px;

  border-radius:999px;

  background:rgba(0,182,134,.12);
  color:#0bd6a0;

  font-size:11px;
  font-weight:700;
}


/* Actions */

.admin-v2-actions{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:12px;

  margin-top:auto;
  padding-top:18px;
}

.admin-v2-actions button{
  width:100%;
  min-height:50px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  margin:0;
  padding:0 16px;

  border-radius:15px;

  font-size:13px;
  font-weight:700;
}

.admin-v2-primary-btn{
  box-shadow:
    0 10px 30px rgba(0,182,134,.10);
}

.admin-v2-secondary-btn{
  background:rgba(27,40,41,.90);
}

.admin-v2-status{
  display:block;

  min-height:0;
  margin-top:9px;
}

.admin-v2-status:empty{
  display:none;
}


/* =====================================================================
   SONG STUDIO HERO
   ===================================================================== */

.admin-v2-songstudio{
  grid-area:songstudio;

  position:relative;
  isolation:isolate;

  min-height:330px;
  padding:26px;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  border-color:rgba(0,214,174,.28);

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(0,182,134,.18),
      transparent 17rem
    ),
    linear-gradient(
      150deg,
      rgba(9,54,49,.92),
      rgba(9,29,29,.94) 62%,
      rgba(11,24,25,.96)
    );
}

.admin-v2-songstudio::after{
  content:"";

  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      115deg,
      rgba(0,224,188,.06),
      transparent 32%,
      transparent 70%,
      rgba(0,224,188,.05)
    );

  pointer-events:none;
}

.admin-v2-songstudio-rings{
  position:absolute;
  left:50%;
  top:42%;

  width:420px;
  height:420px;

  transform:translate(-50%,-50%);

  border:1px solid rgba(0,214,174,.08);
  border-radius:50%;

  pointer-events:none;
}

.admin-v2-songstudio-rings::before,
.admin-v2-songstudio-rings::after{
  content:"";

  position:absolute;

  border:1px solid rgba(0,214,174,.065);
  border-radius:50%;
}

.admin-v2-songstudio-rings::before{
  inset:54px;
}

.admin-v2-songstudio-rings::after{
  inset:108px;
}

.admin-v2-songstudio-content{
  position:relative;
  z-index:1;

  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.admin-v2-songstudio-symbol{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  border:1px solid rgba(45,223,190,.35);
  border-radius:50%;

  background:rgba(0,182,134,.10);
  color:#3ee3c1;
}

.admin-v2-songstudio-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.admin-v2-songstudio-brand > strong{
  margin:0;

  color:#fff;

  font-size:clamp(37px,4vw,52px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.055em;
}

.admin-v2-cfc-logo{
  width:128px;
  max-width:45%;
  height:auto;

  margin-top:11px;

  object-fit:contain;
  opacity:.96;
}

.admin-v2-songstudio-features{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:8px;

  margin:19px 0;
}

.admin-v2-songstudio-features span{
  min-height:30px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 12px;

  border:1px solid rgba(0,214,174,.56);
  border-radius:999px;

  background:rgba(0,182,134,.03);
  color:#fff;

  font-size:11px;
  font-weight:700;
}

.admin-v2-songstudio-btn{
  min-width:250px;
  min-height:50px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  margin:0;
  padding:0 20px;

  border-radius:999px;

  background:#f4f7f6;
  color:#087e69;

  font-size:14px;
  font-weight:800;

  box-shadow:
    0 0 0 1px rgba(41,224,187,.12),
    0 12px 34px rgba(0,0,0,.18);
}

.admin-v2-songstudio-btn span{
  font-size:24px;
  line-height:1;
}


/* =====================================================================
   SECONDARY TOOLS
   ===================================================================== */

.admin-v2-tools{
  grid-area:tools;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.admin-v2-tool-card{
  position:relative;

  min-height:132px;

  display:grid;
  grid-template-columns:50px minmax(0,1fr) 42px;
  align-items:center;
  gap:16px;

  padding:20px 22px;

  border-radius:21px;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

@media (hover:hover){
  .admin-v2-tool-card:hover{
    transform:translateY(-1px);
    border-color:rgba(154,210,214,.23);

    background:
      linear-gradient(
        145deg,
        rgba(25,38,39,.90),
        rgba(15,24,25,.86)
      );
  }
}

.admin-v2-tool-copy{
  min-width:0;
}

.admin-v2-tool-copy h3{
  margin:0 0 6px;

  color:#fff;

  font-size:20px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.025em;
}

.admin-v2-tool-copy p{
  max-width:390px;
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.4;
}

.admin-access-tool-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.admin-access-tool-title h3{
  margin:0;
}

.admin-access-pending-badge{
  min-width:25px;
  height:25px;
  display:inline-grid;
  place-items:center;
  padding:0 7px;
  border-radius:999px;
  background:#00c49a;
  color:#041713;
  font-size:12px;
  font-weight:800;
  box-shadow:0 0 0 4px rgba(0,196,154,.08);
}

.admin-access-pending-badge[hidden]{
  display:none;
}

.admin-v2-tool-action{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  justify-self:end;

  border:1px solid rgba(0,214,174,.14);
  border-radius:50%;

  background:rgba(0,182,134,.055);
  color:#39d9ba;

  font-size:25px;
  font-weight:400;
  line-height:1;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.admin-v2-tool-action:hover{
  background:rgba(0,182,134,.12);
  border-color:rgba(0,214,174,.34);
  transform:translateX(2px);
}

.admin-v2-tool-action:disabled{
  cursor:not-allowed;
  opacity:.4;
}


/* ---------- Footer ---------- */

.admin-v2-footer{
  min-height:52px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;

  margin-top:16px;
  padding:0 16px;

  border:1px solid rgba(154,210,214,.07);
  border-radius:16px;

  background:rgba(255,255,255,.012);
  color:rgba(167,180,182,.62);

  font-size:12px;
}

.admin-v2-footer i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:rgba(154,210,214,.35);
}

.admin-v2-footer-lock{
  color:rgba(154,210,214,.55);
}


/* =====================================================================
   RESPONSIVE — TABLET / MOBILE
   ===================================================================== */

@media (max-width:980px){

  .admin-panel.admin-v2{
    padding:28px 24px 20px;
  }

  .admin-v2-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "convocations"
      "songstudio"
      "tools";
  }

  .admin-v2-convocations,
  .admin-v2-songstudio{
    min-height:0;
  }
}


@media (max-width:800px){

  .admin-panel.admin-v2{
    max-width:none;

    padding:22px 16px 16px;

    border-radius:24px;
  }

  .admin-v2-header{
    margin-bottom:20px;
  }

  .admin-v2-title-row{
    gap:10px;
  }

  .admin-v2-title-row h2{
    font-size:clamp(38px,10vw,52px);
  }

  .admin-v2-security-badge{
    width:42px;
    height:42px;

    border-radius:13px;
  }

  .admin-v2-intro{
    margin-top:8px;
    font-size:14px;
  }

  .admin-v2-grid{
    gap:14px;
  }


  /* Convocatorias */

  .admin-v2-convocations{
    padding:18px;
  }

  .admin-v2-card-top{
    grid-template-columns:1fr;
    gap:12px;
  }

  .admin-v2-card-top > .admin-v2-card-icon{
    display:none;
  }

  .admin-v2-card-title h3{
    font-size:22px;
  }

  .admin-v2-card-title p{
    font-size:14px;
  }

  .admin-v2 .admin-v2-period{
    width:100%;
  }

  .admin-v2 .admin-v2-period #convocationEmailPeriod{
    height:50px;
    min-height:50px;
  }

  .admin-v2 .admin-v2-summary{
    margin-top:10px;
  }

  .admin-v2 .admin-v2-summary > summary{
    min-height:50px;
  }

  .admin-v2 .summary-stats{
    grid-template-columns:1fr 1fr;
  }

  .admin-v2-actions{
    grid-template-columns:1fr;

    padding-top:12px;
  }

  .admin-v2-actions button{
    min-height:50px;
  }


  /* Song Studio */

  .admin-v2-songstudio{
    min-height:360px;

    padding:26px 18px;
  }

  .admin-v2-songstudio-symbol{
    margin-bottom:14px;
  }

  .admin-v2-songstudio-brand > strong{
    font-size:clamp(38px,11vw,52px);
  }

  .admin-v2-cfc-logo{
    width:122px;
  }

  .admin-v2-songstudio-features{
    margin:20px 0 18px;
  }

  .admin-v2-songstudio-btn{
    width:82%;
    min-width:0;
    max-width:430px;
  }


  /* Tools */

  .admin-v2-tools{
    grid-template-columns:1fr;
    gap:12px;
  }

  .admin-v2-tool-card{
    min-height:116px;

    grid-template-columns:46px minmax(0,1fr) 38px;
    gap:13px;

    padding:17px;
  }

  .admin-v2-tool-card .admin-v2-card-icon{
    width:46px;
    height:46px;

    border-radius:14px;
  }

  .admin-v2-tool-copy h3{
    font-size:19px;
  }

  .admin-v2-tool-copy p{
    font-size:13px;
  }

  .admin-v2-tool-action{
    width:36px;
    height:36px;
  }

  .admin-v2-footer{
    margin-top:14px;
    padding:12px;

    text-align:center;
  }
}


@media (max-width:440px){

  .admin-panel.admin-v2{
    padding:20px 14px 14px;
  }

  .admin-v2-title-row h2{
    font-size:38px;
  }

  .admin-v2-security-badge{
    width:39px;
    height:39px;
  }

  .admin-v2-convocations{
    padding:16px;
  }

  .admin-v2-songstudio{
    min-height:340px;
    padding:24px 14px;
  }

  .admin-v2-songstudio-features{
    gap:7px;
  }

  .admin-v2-songstudio-features span{
    padding:0 10px;
    font-size:10px;
  }

  .admin-v2-songstudio-btn{
    width:88%;
  }

  .admin-v2-tool-card{
    grid-template-columns:42px minmax(0,1fr) 34px;
    gap:11px;

    padding:15px;
  }

  .admin-v2-tool-card .admin-v2-card-icon{
    width:42px;
    height:42px;
  }
}


/* =========================================================
   ADMIN — SOLICITUDES DE ACCESO
========================================================= */

.admin-access-page{
  min-height:620px;
}

.admin-access-page-header h2{
  margin:0;
  font-size:clamp(38px,5vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}

.admin-access-page-header .subtitle{
  max-width:720px;
  margin-top:12px;
}

.admin-access-summary{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  align-items:center;
  gap:15px;
  margin-top:28px;
  padding:17px 19px;
  border:1px solid rgba(154,210,214,.13);
  border-radius:18px;
  background:rgba(154,210,214,.035);
}

.admin-access-summary-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(0,196,154,.11);
  font-size:23px;
}

.admin-access-summary strong,
.admin-access-summary small{
  display:block;
}

.admin-access-summary strong{
  color:#fff;
  font-size:18px;
}

.admin-access-summary small{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.admin-access-request-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.admin-access-loading,
.admin-access-empty{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  padding:28px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:20px;
  color:var(--muted);
  text-align:center;
}

.admin-access-loading p,
.admin-access-empty p{
  max-width:450px;
  margin:0;
}

.admin-access-empty > span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(0,196,154,.10);
  color:#60dfc4;
  font-size:27px;
}

.admin-access-empty h3{
  margin:3px 0 0;
  color:#fff;
  font-size:22px;
}

.admin-access-empty.error{
  border-color:rgba(255,89,99,.20);
}

.admin-access-request-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:17px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}

.admin-access-request-row.pending{
  border-color:rgba(0,196,154,.18);
  background:linear-gradient(145deg,rgba(0,196,154,.055),rgba(255,255,255,.02));
}

.admin-access-request-row.resolved{
  opacity:.72;
}

.admin-access-request-avatar{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(154,210,214,.10);
  color:#a5e7e8;
  font-size:22px;
  font-weight:800;
}

.admin-access-request-info{
  min-width:0;
}

.admin-access-request-heading{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.admin-access-request-heading > strong{
  color:#fff;
  font-size:18px;
}

.admin-access-request-info > a{
  display:block;
  width:fit-content;
  max-width:100%;
  margin-top:5px;
  overflow:hidden;
  color:#b9d7d8;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.admin-access-request-info > small{
  display:block;
  margin-top:6px;
  color:var(--soft);
  font-size:12px;
}

.admin-access-status{
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.admin-access-status.pendiente{
  background:rgba(246,176,66,.11);
  color:#f2ca7b;
}

.admin-access-status.aprobada{
  background:rgba(0,196,154,.12);
  color:#65dfc4;
}

.admin-access-status.rechazada{
  background:rgba(255,89,99,.10);
  color:#ff9aa2;
}

.admin-access-request-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.admin-access-request-actions button{
  min-height:43px;
  padding:0 15px;
  border-radius:13px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.admin-access-request-actions button:disabled{
  opacity:.55;
  cursor:wait;
}

.admin-access-reject-btn{
  border:1px solid rgba(255,112,121,.20);
  background:rgba(255,89,99,.055);
  color:#ffabb0;
}

.admin-access-approve-btn{
  border:0;
  background:#00c49a;
  color:#041713;
}

@media (max-width:800px){
  .admin-access-page{
    min-height:0;
    padding:22px 16px;
  }

  .admin-access-page-header .btn-muted{
    width:100%;
    margin-top:18px;
  }

  .admin-access-summary{
    margin-top:20px;
    padding:15px;
  }

  .admin-access-request-row{
    grid-template-columns:46px minmax(0,1fr);
    align-items:start;
    gap:13px;
    padding:15px;
  }

  .admin-access-request-avatar{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .admin-access-request-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .admin-access-request-actions button{
    min-height:48px;
  }
}

@media (max-width:430px){
  .admin-access-page-header h2{
    font-size:39px;
  }

  .admin-access-summary{
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
  }

  .admin-access-summary-icon{
    width:42px;
    height:42px;
  }
}


/* =========================================================
   CFC APP — MODAL AGREGAR CANCIÓN AL SETLIST
========================================================= */
.setlist-modal-backdrop{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(2,10,11,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto;
}
.setlist-modal{
  width:min(100%,560px);max-height:calc(100vh - 48px);overflow-y:auto;padding:26px;
  border:1px solid rgba(151,214,217,.18);border-radius:26px;
  background:radial-gradient(circle at top right,rgba(0,196,154,.10),transparent 34%),#10191a;
  box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.025);color:#f5f8f8;
}
.setlist-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.setlist-modal-header .eyebrow{margin:0 0 5px;color:#79d9dc;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.setlist-modal-header h2{margin:0;color:#fff;font-size:30px;line-height:1;font-weight:700;letter-spacing:-.04em}
.setlist-modal-close{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid rgba(151,214,217,.18);border-radius:13px;background:#192526;color:#d8e4e5;font-size:26px;line-height:1;cursor:pointer}
.setlist-modal-song{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:14px;margin-bottom:22px;padding:14px;border:1px solid rgba(151,214,217,.12);border-radius:17px;background:rgba(255,255,255,.035)}
.setlist-modal-song > span{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(99,213,215,.10);font-size:22px}
.setlist-modal-song strong{display:block;color:#fff;font-size:17px;line-height:1.2;font-weight:650}
.setlist-modal-song small{display:block;margin-top:4px;color:#9eafb0;font-size:14px}
#addSongSetlistForm{display:grid;gap:16px}
.setlist-modal .admin-field{display:grid;gap:7px;margin:0}
.setlist-modal .admin-field > span{color:#b8c8c9;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.setlist-modal .admin-field small{display:block;margin-top:1px;color:#7f9293;font-size:12px;line-height:1.35}
.setlist-modal input,.setlist-modal select{width:100%;min-height:48px;margin:0;padding:0 14px;border:1px solid rgba(151,214,217,.18);border-radius:14px;background:#182324;color:#f3f7f7;font:inherit;font-size:14px;outline:none}
.setlist-modal input::placeholder{color:#667879}
.setlist-modal input:focus,.setlist-modal select:focus{border-color:#46cbd0;background:#1a2829;box-shadow:0 0 0 3px rgba(70,203,208,.10)}
.setlist-modal select:disabled{opacity:.55;cursor:not-allowed}
.setlist-modal-status{min-height:18px;color:#f4c96b;font-size:13px;line-height:1.35}
.setlist-modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:2px}
.setlist-modal-actions button{width:100%;min-height:48px;margin:0;border-radius:14px;font-size:14px;font-weight:650;cursor:pointer}
.setlist-modal-actions .btn-muted{border:1px solid rgba(151,214,217,.18);background:#1b292a;color:#d9e3e4}
.setlist-modal-actions .btn-ok{border:0;background:#00c49a;color:#041713}
.setlist-modal-actions button:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:700px){
  .setlist-modal-backdrop{align-items:flex-end;padding:16px 12px calc(16px + env(safe-area-inset-bottom));background:rgba(2,10,11,.82)}
  .setlist-modal{width:100%;max-height:calc(92dvh - env(safe-area-inset-bottom));padding:20px 18px 18px;border-radius:24px 24px 18px 18px}
  .setlist-modal-header{margin-bottom:17px}.setlist-modal-header h2{font-size:26px}
  .setlist-modal-song{grid-template-columns:44px minmax(0,1fr);padding:12px;margin-bottom:18px}
  .setlist-modal-song > span{width:44px;height:44px;border-radius:12px}
  #addSongSetlistForm{gap:14px}
  .setlist-modal input,.setlist-modal select{min-height:50px;font-size:16px}
  .setlist-modal-actions{grid-template-columns:1fr;gap:9px}
  .setlist-modal-actions .btn-ok{grid-row:1}.setlist-modal-actions .btn-muted{grid-row:2}
}



/* =========================================================
   ADMIN V2 — EDITORES DESKTOP
   Song Studio full width + ajuste visual final
========================================================= */
@media (min-width:981px){
  .admin-v2-grid:not(:has(.admin-v2-convocations)){
    grid-template-columns:1fr !important;
    grid-template-areas:"songstudio" "tools" !important;
    row-gap:14px !important;
  }
  .admin-v2-grid:not(:has(.admin-v2-convocations)) .admin-v2-songstudio{
    grid-area:songstudio !important;width:100% !important;max-width:none !important;
    min-height:270px !important;justify-self:stretch !important;
  }
  .admin-v2-grid:not(:has(.admin-v2-convocations)) .admin-v2-tools{
    grid-area:tools !important;width:100% !important;
  }
}



/* =========================================================
   CFC APP — INICIO V2
   Rediseño encapsulado SOLO para las dos cards superiores.
========================================================= */

.home-v2-dashboard{
  grid-template-columns:minmax(0,1.5fr) minmax(350px,.9fr);
  gap:18px;
  align-items:stretch;
}
.home-v2-dashboard > .card{min-width:0}

.home-v2-next-card{
  position:relative;
  overflow:hidden;
  min-height:390px;
  padding:30px 32px;
  border-color:rgba(73,211,218,.34);
  background:
    radial-gradient(circle at 0% 0%,rgba(55,119,124,.48),transparent 38rem),
    radial-gradient(circle at 88% 82%,rgba(0,190,194,.10),transparent 26rem),
    linear-gradient(145deg,rgba(22,38,40,.98),rgba(13,22,23,.97));
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);
}
.home-v2-next-card::after{
  content:"";
  position:absolute;
  right:-8%;
  bottom:-55%;
  width:88%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(72,213,219,.07);
  box-shadow:0 0 0 42px rgba(72,213,219,.025),0 0 0 84px rgba(72,213,219,.018);
  pointer-events:none;
}
.home-v2-next-heading{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.home-v2-calendar-icon{
  width:66px;height:66px;
  display:grid;place-items:center;
  border:1px solid rgba(56,220,226,.38);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(0,196,205,.15),rgba(0,196,205,.045));
  color:#20d8df;font-size:27px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.12);
}
.home-v2-next-copy{min-width:0}
.home-v2-next-card .home-v2-next-copy .eyebrow{
  width:auto;margin:4px 0 13px;text-align:left;
  color:#50d8de;font-size:12px;letter-spacing:.14em;
}
.home-v2-next-card .home-v2-next-copy h2{
  width:auto;max-width:none;margin:0;text-align:left;
  font-size:clamp(42px,4.3vw,62px);line-height:.96;letter-spacing:-.058em;font-weight:600;
}
.home-v2-next-card .home-v2-next-description{
  width:auto;max-width:none;margin:13px 0 0;text-align:left;
  color:#d7e1e2;font-size:16px;line-height:1.35;
}

.home-v2-steps{
  position:relative;z-index:1;
  width:min(100%,610px);
  display:grid;gap:9px;
  margin:26px 0 0 62px;
  padding-left:38px;
}
.home-v2-steps::before{
  content:"";position:absolute;left:8px;top:28px;bottom:28px;width:1px;
  background:linear-gradient(to bottom,rgba(25,218,226,.12),#24d8df 15%,#24d8df 85%,rgba(25,218,226,.12));
  box-shadow:0 0 13px rgba(23,216,224,.30);
}
.home-v2-step{
  position:relative;min-height:54px;
  display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;
  padding:8px 14px;
  border:1px solid rgba(140,202,205,.18);border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.home-v2-step-dot{
  position:absolute;left:-38px;top:50%;width:12px;height:12px;border-radius:50%;
  background:#22d9e1;border:2px solid rgba(5,47,50,.95);transform:translateY(-50%);
  box-shadow:0 0 0 4px rgba(34,217,225,.11),0 0 15px rgba(34,217,225,.65);
}
.home-v2-step-icon{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(33,216,224,.30);border-radius:12px;
  background:rgba(21,174,182,.08);color:#22d9e1;font-size:18px;
}
.home-v2-step-copy{
  min-width:0;display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.45fr);gap:12px;align-items:center;
}
.home-v2-step-copy small{
  margin:0;color:#dbe7e8;font-size:12px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
}
.home-v2-step-copy strong{
  min-width:0;color:#f6f9f9;font-size:15px;line-height:1.25;font-weight:600;overflow-wrap:anywhere;
}
.home-v2-steps-single{width:min(100%,360px)}

.home-v2-assignments-card{
  min-height:390px;display:flex;flex-direction:column;padding:28px 26px;
  background:radial-gradient(circle at top right,rgba(62,113,118,.11),transparent 24rem),rgba(16,24,25,.96);
}
.home-v2-assignments-header{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.home-v2-small-calendar{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;
  background:rgba(22,198,207,.07);color:#2ad8df;font-size:17px;
}
.home-v2-assignments-card .card-title{margin:0;font-size:22px;line-height:1.05;letter-spacing:-.035em}
.home-v2-assignment-list{display:grid;gap:12px}
.home-v2-assignment{
  width:100%;min-height:102px;
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:15px;border:1px solid rgba(149,205,208,.17);border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.018));
  color:inherit;text-align:left;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.home-v2-assignment:hover{transform:translateY(-1px);border-color:rgba(64,214,220,.33);background:rgba(255,255,255,.05)}
.home-v2-assignment-avatar{
  width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(143,202,206,.30);border-radius:50%;
  color:#2bd7df;font-size:21px;
}
.home-v2-assignment-main{min-width:0}
.home-v2-assignment-main strong{display:block;color:#f5f8f8;font-size:16px;line-height:1.15;font-weight:600}
.home-v2-assignment-main small{display:block;margin-top:3px;color:#9cafb0;font-size:14px}
.home-v2-assignment-date{display:flex;align-items:center;gap:7px;margin-top:8px;color:#93a8aa;font-size:13px}
.home-v2-assignment-date > span{color:#27d5dc}
.home-v2-assignment .badge{
  align-self:center;justify-self:end;padding:8px 12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);
}
.home-v2-empty{
  min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;
  padding:18px 4px;color:#a8b7b8;
}
.home-v2-empty-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(42,214,222,.07);color:#2ad6de}
.home-v2-empty p{max-width:320px;margin:0;font-size:16px;line-height:1.45}
.home-v2-all-dates-wrap{margin-top:auto;padding-top:18px}
.home-v2-all-dates{
  width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;margin:0;
  border:1px solid rgba(31,224,232,.48);background:linear-gradient(115deg,#188a99,#55b9c2);
  color:#f5fbfb;font-size:15px;font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 10px 26px rgba(0,0,0,.12);
}

@media (min-width:801px) and (max-width:1080px){
  .home-v2-dashboard{grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr)}
  .home-v2-next-card{padding:26px}
  .home-v2-next-heading{grid-template-columns:58px minmax(0,1fr);gap:16px}
  .home-v2-calendar-icon{width:56px;height:56px;border-radius:18px}
  .home-v2-next-card .home-v2-next-copy h2{font-size:clamp(38px,4.7vw,52px)}
  .home-v2-steps{margin-left:42px}
  .home-v2-step-copy{grid-template-columns:95px minmax(0,1fr)}
}

/* MOBILE: 4 bloques 2x2, con línea y puntos en ambas columnas */
@media (max-width:800px){
  .home-v2-dashboard{display:grid;grid-template-columns:1fr;gap:10px}
  .home-v2-next-card{
    min-height:0;padding:18px 16px 16px;border-radius:24px;
    background:radial-gradient(circle at 50% -10%,rgba(21,203,212,.13),transparent 23rem),linear-gradient(150deg,rgba(16,37,39,.98),rgba(8,19,20,.98));
  }
  .home-v2-next-card::after{display:none}
  .home-v2-next-heading{display:block}
  .home-v2-calendar-icon{display:none}
  .home-v2-next-copy{width:100%}
  .home-v2-next-card .home-v2-next-copy .eyebrow{margin:0 0 7px;font-size:10px;text-align:left}
  .home-v2-next-card .home-v2-next-copy h2{margin:0;font-size:clamp(28px,8.8vw,38px);line-height:.98;letter-spacing:-.052em;text-align:left}
  .home-v2-next-card .home-v2-next-description{margin:8px 0 0;color:#c1cdce;font-size:13px;line-height:1.35;text-align:left}

  .home-v2-steps{
    width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;
    margin:16px 0 0;padding:0 0 0 27px;
  }
  .home-v2-steps::before{display:none}
  .home-v2-steps-four{position:relative}
  .home-v2-steps-four::before,.home-v2-steps-four::after{
    content:"";display:block;position:absolute;top:28px;bottom:28px;width:1px;
    background:linear-gradient(to bottom,rgba(30,219,226,.16),#26d8df 18%,#26d8df 82%,rgba(30,219,226,.16));
    box-shadow:0 0 10px rgba(35,215,223,.32);pointer-events:none;
  }
  .home-v2-steps-four::before{left:7px}
  .home-v2-steps-four::after{left:calc(50% + 7px)}
  .home-v2-step{
    min-height:100px;grid-template-columns:1fr;justify-items:center;align-content:center;gap:6px;
    padding:11px 8px;border-radius:15px;text-align:center;
    background:linear-gradient(145deg,rgba(25,49,51,.86),rgba(13,27,28,.90));
  }
  .home-v2-step-dot{left:-27px;width:10px;height:10px}
  .home-v2-step:nth-child(even) .home-v2-step-dot{left:-22px}
  .home-v2-step-icon{width:38px;height:38px;border-radius:12px;font-size:18px}
  .home-v2-step-copy{display:block}
  .home-v2-step-copy small{display:block;margin:0 0 5px;color:#2ad9e0;font-size:10px;letter-spacing:.08em}
  .home-v2-step-copy strong{display:block;font-size:13px;line-height:1.25}
  .home-v2-step-copy::after{content:"";display:block;width:48px;height:1px;margin:7px auto 0;background:rgba(37,215,223,.28)}
  .home-v2-steps-single{grid-template-columns:1fr;padding-left:27px}

  .home-v2-assignments-card{min-height:0;padding:15px 13px 13px;border-radius:23px}
  .home-v2-assignments-header{gap:9px;margin-bottom:10px}
  .home-v2-small-calendar{display:none}
  .home-v2-assignments-card .card-title{font-size:18px}
  .home-v2-assignment-list{gap:7px}
  .home-v2-assignment{
    min-height:70px;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 11px;border-radius:14px;
  }
  .home-v2-assignment-avatar{display:none}
  .home-v2-assignment-main strong{font-size:14px}
  .home-v2-assignment-main small{font-size:12px}
  .home-v2-assignment-date{margin-top:5px;font-size:11px}
  .home-v2-assignment .badge{grid-column:2;padding:7px 10px;font-size:11px}
  .home-v2-empty{min-height:90px;padding:8px 2px}
  .home-v2-empty p{font-size:13px}
  .home-v2-all-dates-wrap{padding-top:8px}
  .home-v2-all-dates{min-height:46px;border-radius:13px;font-size:13px}
}


/* =========================================================
   CFC APP — INICIO V2.1
   Ajuste de fidelidad visual respecto del mockup aprobado
========================================================= */

.home-v2-dashboard svg{
  width:1em;
  height:1em;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-v2-calendar-icon svg{
  width:28px;
  height:28px;
}

.home-v2-step-icon svg{
  width:20px;
  height:20px;
}

.home-v2-small-calendar svg{
  width:18px;
  height:18px;
}

.home-v2-assignment-avatar svg{
  width:25px;
  height:25px;
}

.home-v2-assignment-date svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.home-v2-all-dates svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
}


/* Desktop: proporciones y respiración como el mockup */
@media (min-width:801px){

  .home-v2-dashboard{
    grid-template-columns:minmax(0,1.48fr) minmax(360px,.92fr) !important;
    gap:18px !important;
  }

  .home-v2-next-card,
  .home-v2-assignments-card{
    min-height:438px !important;
  }

  .home-v2-next-card{
    padding:30px 28px 26px 30px !important;
  }

  .home-v2-next-heading{
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:22px !important;
  }

  .home-v2-next-card .home-v2-next-copy .eyebrow{
    margin:8px 0 13px !important;
  }

  .home-v2-next-card .home-v2-next-copy h2{
    font-size:clamp(44px,4.1vw,58px) !important;
    line-height:.96 !important;
  }

  .home-v2-next-card .home-v2-next-description{
    margin-top:12px !important;
    font-size:16px !important;
  }

  .home-v2-steps{
    width:min(100%,520px) !important;
    margin:26px 0 0 60px !important;
    padding-left:38px !important;
    gap:9px !important;
  }

  .home-v2-step{
    min-height:55px !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    padding:8px 15px !important;
    border-radius:14px !important;
  }

  .home-v2-step-copy{
    grid-template-columns:minmax(118px,.82fr) minmax(0,1.35fr) !important;
    gap:10px !important;
  }

  .home-v2-step-copy small{
    font-size:12px !important;
  }

  .home-v2-step-copy strong{
    font-size:15px !important;
  }

  .home-v2-assignments-card{
    padding:28px 25px 24px !important;
  }

  .home-v2-assignments-header{
    margin-bottom:20px !important;
  }

  .home-v2-assignments-card .card-title{
    font-size:22px !important;
  }

  .home-v2-assignment{
    min-height:106px !important;
    grid-template-columns:48px minmax(0,1fr) auto !important;
    padding:15px !important;
  }

  .home-v2-all-dates-wrap{
    padding-top:18px !important;
  }

  .home-v2-all-dates{
    min-height:58px !important;
  }

  .home-v2-empty{
    min-height:210px !important;
    justify-content:flex-start !important;
    padding:18px 2px !important;
  }

  .home-v2-empty p{
    margin:0 !important;
    max-width:310px !important;
    color:#c1cecf !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }
}


/* Mobile: conservar 2x2, mejorar alineación de las dos timelines */
@media (max-width:800px){

  .home-v2-next-card{
    padding:17px 14px 15px !important;
  }

  .home-v2-next-card .home-v2-next-copy h2{
    font-size:clamp(27px,8.4vw,36px) !important;
  }

  .home-v2-steps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:18px !important;
    row-gap:8px !important;

    padding-left:28px !important;
  }

  .home-v2-steps-four::before{
    left:7px !important;
  }

  .home-v2-steps-four::after{
    left:calc(50% + 9px) !important;
  }

  .home-v2-step{
    min-height:98px !important;
  }

  .home-v2-step-dot{
    left:-27px !important;
  }

  .home-v2-step:nth-child(even) .home-v2-step-dot{
    left:-27px !important;
  }

  .home-v2-step-icon svg{
    width:20px;
    height:20px;
  }

  .home-v2-assignments-card{
    padding:14px 12px 12px !important;
  }
}

/* =========================================================
   HOME V2 — DESKTOP — NO CONVOCADO
========================================================= */

@media (min-width:801px){

  .home-v2-next-card.home-v2-not-assigned{
    min-height:320px !important;
    height:320px !important;

    display:grid !important;

    grid-template-columns:
      150px
      minmax(0,1fr) !important;

    grid-template-rows:
      auto
      1fr !important;

    column-gap:26px !important;

    padding:28px 32px !important;
  }


  /* -----------------------------------------
     CABECERA
  ----------------------------------------- */

  .home-v2-not-assigned
  .home-v2-next-heading{
    grid-column:1 / -1;
    grid-row:1;

    display:grid !important;

    grid-template-columns:
      150px
      minmax(0,1fr) !important;

    gap:26px !important;

    align-items:center !important;
  }


  /* -----------------------------------------
     ICONO CALENDARIO
  ----------------------------------------- */

  .home-v2-not-assigned
  .home-v2-calendar-icon{
    width:78px !important;
    height:78px !important;

    justify-self:center !important;

    border-radius:50% !important;

    background:
      radial-gradient(
        circle,
        rgba(29,214,221,.13),
        rgba(29,214,221,.035)
      ) !important;

    border:
      1px solid
      rgba(47,217,224,.32) !important;
  }


  .home-v2-not-assigned
  .home-v2-calendar-icon svg{
    width:32px !important;
    height:32px !important;
  }


  /* -----------------------------------------
     TEXTO PRINCIPAL
  ----------------------------------------- */

  .home-v2-not-assigned
  .home-v2-next-copy{
    min-width:0;

    align-self:center !important;
  }


  .home-v2-not-assigned
  .home-v2-next-copy .eyebrow{
    margin:0 0 8px !important;

    text-align:left !important;
  }


  .home-v2-not-assigned
  .home-v2-next-copy h2{
    width:auto !important;
    max-width:none !important;

    margin:0 !important;

    text-align:left !important;

    font-size:
      clamp(44px,4vw,56px) !important;

    line-height:.96 !important;

    letter-spacing:-.05em !important;
  }


  .home-v2-not-assigned
  .home-v2-next-description{
    margin:12px 0 0 !important;

    text-align:left !important;

    font-size:15px !important;
    line-height:1.35 !important;
  }


  /* -----------------------------------------
     BLOQUE REUNIÓN
  ----------------------------------------- */

  .home-v2-not-assigned
  .home-v2-steps-single{
    grid-column:2;
    grid-row:2;

    width:230px !important;
    max-width:230px !important;

    margin:18px 0 0 !important;

    padding:0 !important;

    align-self:start !important;
  }


  .home-v2-not-assigned
  .home-v2-steps-single::before{
    display:none !important;
  }


  .home-v2-not-assigned
  .home-v2-step{
    min-height:58px !important;

    grid-template-columns:
      38px
      minmax(0,1fr) !important;

    gap:12px !important;

    padding:8px 14px !important;

    border-radius:15px !important;
  }


  .home-v2-not-assigned
  .home-v2-step-dot{
    display:none !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy{
    display:block !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy small{
    display:block !important;

    margin:0 0 3px !important;

    font-size:10px !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy strong{
    display:block !important;

    font-size:16px !important;
  }


  /* -----------------------------------------
     CARD DERECHA
     misma altura que la principal
  ----------------------------------------- */

  .home-v2-not-assigned
  + .home-v2-assignments-card{
    min-height:320px !important;
    height:320px !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-empty{
    min-height:auto !important;

    padding:16px 0 0 !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-all-dates-wrap{
    margin-top:auto !important;

    padding-top:18px !important;
  }

}

/* =========================================================
   HOME V2 — MOBILE — NO CONVOCADO
========================================================= */

@media (max-width:800px){

  /* -------------------------------------------------------
     CARD PRINCIPAL MÁS COMPACTA
  ------------------------------------------------------- */

  .home-v2-next-card.home-v2-not-assigned{
    min-height:0 !important;
    height:auto !important;

    padding:18px 16px 16px !important;

    display:block !important;
  }


  /* Sacamos el layout Desktop especial */
  .home-v2-not-assigned
  .home-v2-next-heading{
    display:block !important;
  }


  /* En Mobile no necesitamos el calendario grande */
  .home-v2-not-assigned
  .home-v2-calendar-icon{
    display:none !important;
  }


  /* Texto principal */
  .home-v2-not-assigned
  .home-v2-next-copy{
    width:100% !important;
  }


  .home-v2-not-assigned
  .home-v2-next-copy .eyebrow{
    margin:0 0 7px !important;

    text-align:left !important;

    font-size:10px !important;
    letter-spacing:.13em !important;
  }


  .home-v2-not-assigned
  .home-v2-next-copy h2{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    text-align:left !important;

    font-size:clamp(28px,8.7vw,36px) !important;
    line-height:.98 !important;
    letter-spacing:-.05em !important;
  }


  .home-v2-not-assigned
  .home-v2-next-description{
    margin:9px 0 0 !important;

    text-align:left !important;

    font-size:13px !important;
    line-height:1.35 !important;

    color:#c4d0d1 !important;
  }


  /* -------------------------------------------------------
     ÚNICO BLOQUE REUNIÓN
  ------------------------------------------------------- */

  .home-v2-not-assigned
  .home-v2-steps-single{
    width:100% !important;
    max-width:none !important;

    display:block !important;

    margin:16px 0 0 !important;
    padding:0 !important;
  }


  .home-v2-not-assigned
  .home-v2-steps-single::before{
    display:none !important;
  }


  .home-v2-not-assigned
  .home-v2-step{
    width:100% !important;

    min-height:72px !important;

    display:grid !important;

    grid-template-columns:42px minmax(0,1fr) !important;

    justify-items:start !important;
    align-items:center !important;

    gap:12px !important;

    padding:11px 13px !important;

    text-align:left !important;

    border-radius:15px !important;
  }


  .home-v2-not-assigned
  .home-v2-step-dot{
    display:none !important;
  }


  .home-v2-not-assigned
  .home-v2-step-icon{
    width:42px !important;
    height:42px !important;

    border-radius:12px !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy{
    display:block !important;

    text-align:left !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy small{
    display:block !important;

    margin:0 0 3px !important;

    font-size:10px !important;

    text-align:left !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy strong{
    display:block !important;

    font-size:15px !important;

    text-align:left !important;
  }


  .home-v2-not-assigned
  .home-v2-step-copy::after{
    display:none !important;
  }


  /* -------------------------------------------------------
     CARD "TUS PRÓXIMAS ASIGNACIONES"
  ------------------------------------------------------- */

  .home-v2-not-assigned
  + .home-v2-assignments-card{
    min-height:0 !important;
    height:auto !important;

    padding:15px 14px 13px !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-assignments-header{
    margin-bottom:10px !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-empty{
    min-height:0 !important;

    padding:8px 0 12px !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-empty p{
    max-width:none !important;

    margin:0 !important;

    font-size:13px !important;
    line-height:1.4 !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-all-dates-wrap{
    margin-top:0 !important;

    padding-top:6px !important;
  }


  .home-v2-not-assigned
  + .home-v2-assignments-card
  .home-v2-all-dates{
    min-height:46px !important;

    border-radius:13px !important;

    font-size:13px !important;
  }

}

/* =========================================================
   HOME V2 — MOBILE
   TIMELINE 2x2 FINAL
   Cada columna se posiciona respecto de sus propias cards
========================================================= */

@media (max-width:800px){

  /* -------------------------------------------------------
     GRILLA
  ------------------------------------------------------- */

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-steps{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    column-gap:34px !important;
    row-gap:10px !important;

    width:100% !important;

    margin:16px 0 0 !important;

    /* espacio exclusivo para timeline izquierda */
    padding-left:28px !important;
    padding-right:0 !important;
  }


  /* IMPORTANTE:
     eliminamos completamente las líneas del contenedor */
  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-steps::before,
  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-steps::after{
    display:none !important;
    content:none !important;
  }


  /* -------------------------------------------------------
     CARDS
  ------------------------------------------------------- */

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step{
    position:relative !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    overflow:visible !important;

    z-index:2 !important;
  }


  /* -------------------------------------------------------
     PUNTOS
     Todos quedan exactamente a la misma distancia
     del borde izquierdo de SU card.
  ------------------------------------------------------- */

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step-dot{
    display:block !important;

    position:absolute !important;

    top:50% !important;
    left:-22px !important;
    right:auto !important;

    width:12px !important;
    height:12px !important;

    margin:0 !important;

    border-radius:50% !important;

    background:#29dce4 !important;

    border:
      2px solid
      #0d555a !important;

    box-shadow:
      0 0 0 5px rgba(41,220,228,.10),
      0 0 13px rgba(41,220,228,.72) !important;

    transform:
      translate(-50%,-50%) !important;

    z-index:5 !important;
  }


  /* Anulamos cualquier posición distinta
     que haya quedado para pares/impares */
  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(odd)
  .home-v2-step-dot,

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(even)
  .home-v2-step-dot{
    left:-22px !important;
    right:auto !important;
  }


  /* -------------------------------------------------------
     LÍNEAS VERTICALES

     Las dibujan SOLO las dos cards de arriba:
     1 = Ensayo
     2 = Músicos

     Empiezan en su punto central y terminan exactamente
     en el centro de la card que está debajo.
  ------------------------------------------------------- */

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(1)::before,

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(2)::before{
    content:"" !important;

    position:absolute !important;

    left:-22px !important;
    top:50% !important;

    /*
      altura de una card completa + gap:
      centro card superior → centro card inferior
    */
    height:
      calc(
        100% + 10px
      ) !important;

    width:1px !important;

    background:
      linear-gradient(
        to bottom,
        #27dce4,
        #27dce4
      ) !important;

    box-shadow:
      0 0 8px
      rgba(39,220,228,.35) !important;

    transform:
      translateX(-50%) !important;

    z-index:3 !important;

    pointer-events:none !important;
  }


  /* Las cards inferiores NO dibujan línea */
  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(3)::before,

  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(4)::before{
    display:none !important;
    content:none !important;
  }

}

body.cfc-push-onboarding-open{overflow:hidden}
.cfc-push-onboarding{
  position:fixed;inset:0;z-index:30500;display:grid;place-items:end center;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(2,9,10,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}
.cfc-push-onboarding-card{
  width:min(100%,430px);max-height:calc(100dvh - 36px);overflow:auto;padding:18px;
  border:1px solid rgba(102,218,222,.22);border-radius:20px;
  background:rgba(17,28,29,.98);box-shadow:0 18px 55px rgba(0,0,0,.46);text-align:left
}
.cfc-push-onboarding-card h2{margin:0;color:#fff;font-size:22px;line-height:1.15;letter-spacing:-.025em}
.cfc-push-onboarding-status{margin:12px 0 0;padding:10px 12px;border-radius:11px;background:rgba(0,196,165,.075);color:#b8c7c8;font-size:12px;line-height:1.4}
.cfc-push-onboarding-status[hidden]{display:none}
.cfc-push-onboarding-actions{display:grid;grid-template-columns:1.05fr .95fr;gap:9px;margin-top:16px}
.cfc-push-onboarding-actions button{min-height:44px;border-radius:12px;font-size:13px;font-weight:800}
@media(max-width:600px){
  .cfc-push-onboarding{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .cfc-push-onboarding-card{padding:17px;border-radius:18px}
}

/* Aviso propio al recibir una prueba mientras CFC ya está abierta en iOS. */
.cfc-visible-push-prompt { position:fixed; inset:0; z-index:10050; display:grid; place-items:end center; padding:20px; background:rgba(0,0,0,.46); }
.cfc-visible-push-prompt-card { width:min(100%,460px); padding:22px; border:1px solid rgba(154,210,214,.28); border-radius:22px; background:#142223; box-shadow:0 22px 70px rgba(0,0,0,.5); }
.cfc-visible-push-prompt-card p { margin:0 0 8px; color:#92dfe3; font-size:11px; font-weight:800; letter-spacing:.14em; }
.cfc-visible-push-prompt-card h2 { margin:0; color:#fff; font-size:25px; }
.cfc-visible-push-prompt-card span { display:block; margin-top:8px; color:var(--muted); line-height:1.45; }
.cfc-visible-push-prompt-card div { display:flex; gap:10px; margin-top:20px; }
.cfc-visible-push-prompt-card button { flex:1 1 0; min-height:46px; }

/* Envío manual de notificaciones desde Admin. */
.admin-push-modal{width:min(610px,100%)}
.admin-push-modal .auth-modal-header small{display:block;margin:2px 0 7px;color:#8edee1;font-size:10px;font-weight:800;letter-spacing:.16em}
.admin-push-options{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.admin-push-option{min-height:116px;display:grid;grid-template-columns:38px 1fr;align-content:center;align-items:center;gap:3px 11px;padding:16px;border:1px solid rgba(154,210,214,.14);border-radius:18px;background:rgba(255,255,255,.035);color:#fff;text-align:left;cursor:pointer;transition:.16s ease}
.admin-push-option:hover,.admin-push-option.is-selected{border-color:rgba(0,214,174,.55);background:rgba(0,196,154,.1);transform:translateY(-1px)}
.admin-push-option:disabled{cursor:wait;opacity:.72}
.admin-push-option>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(154,210,214,.1);color:#8edee1;font-size:18px;font-weight:800}
.admin-push-option strong{font-size:14px;line-height:1.25}
.admin-push-option small{color:var(--muted);font-size:11px;line-height:1.35}
.admin-push-status{margin:14px 0 0;padding:11px 13px;border-radius:12px;background:rgba(255,111,117,.08)}
.admin-push-status.is-success{color:#8fe1cb;background:rgba(0,196,154,.09)}
.admin-push-preview{margin-top:15px;padding:17px;border:1px solid rgba(154,210,214,.14);border-radius:17px;background:rgba(0,0,0,.16)}
.admin-push-preview>small{color:#8edee1;font-size:9px;font-weight:800;letter-spacing:.16em}
.admin-push-preview h3{margin:7px 0 4px;color:#fff;font-size:19px;line-height:1.2}
.admin-push-preview>p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.admin-push-reach{display:grid;gap:3px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07)}
.admin-push-reach strong{color:#fff;font-size:13px}
.admin-push-reach span,.admin-push-reach small{color:var(--muted);font-size:11px;line-height:1.4}
.admin-push-actions button[hidden]{display:none}

@media (max-width:600px){
  .admin-push-options{grid-template-columns:1fr}
  .admin-push-option{min-height:88px}
  .admin-push-actions{grid-template-columns:1fr}
}

/* =========================================================
   HOME V2 — MOBILE
   MICROAJUSTE TIMELINE CENTRAL
========================================================= */

@media (max-width:800px){

  /* Puntos de la segunda columna */
  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(even)
  .home-v2-step-dot{
    left:-18px !important;
  }

  /* Línea que conecta Músicos → Reunión */
  .home-v2-next-card:not(.home-v2-not-assigned)
  .home-v2-step:nth-child(2)::before{
    left:-18px !important;
  }

}

/* Distintivo exclusivo del subdominio de pruebas. */
.cfc-testing-badge {
  position: fixed;
  z-index: 100000;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(91, 33, 182, 0.94);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font: 700 10px/1 "Inter Tight", sans-serif;
  letter-spacing: 0.16em;
  pointer-events: none;
}