/* =========================================================
   Circuito Sur — UI base (Spotify dark + neon glass)
   Mobile-first · Accesible · Sin frameworks
   ========================================================= */

:root{
  --cs-bg:#0a0a0a;
  --cs-card:rgba(255,255,255,0.04);
  --cs-border:rgba(255,255,255,0.08);
  --cs-text:#eaeaea;
  --cs-text-dim:#b9b9b9;
  --cs-accent:#00ff80;
  --cs-accent-600:#00e573;
  --cs-accent-700:#00cc66;
  --cs-danger:#ff3b3b;
  --cs-focus:0 0 0 3px rgba(0,255,128,.35);
  --cs-glass:blur(10px);
  --cs-radius:14px;
  --cs-radius-lg:20px;
  --cs-shadow:0 10px 30px rgba(0,0,0,.45);
  --cs-glow:0 0 12px rgba(0,255,128,.25);
  --cs-fast:200ms;
  --cs-ease:cubic-bezier(.2,.8,.2,1);
}

/* Base */
.cs-calendar-wrap,
.cs-create-event{
  color:var(--cs-text);
  font:normal 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}
.cs-calendar-wrap{
  background:var(--cs-bg);
}
.cs-calendar-wrap *{ box-sizing:border-box; }
.cs-calendar-wrap a{ color:var(--cs-accent); text-decoration:none; }
.cs-calendar-wrap a:hover{ text-decoration:underline; }

/* -----------------------------
   NAV: flechas glass + título mes centrado
--------------------------------*/
.cs-calendar-nav{
  position:sticky; top:0; z-index:5;
  display:grid; grid-template-columns:48px 1fr 48px; align-items:center;
  gap:12px; padding:12px 8px; margin-bottom:12px;
  background:linear-gradient(to bottom, rgba(10,10,10,.9), rgba(10,10,10,.6));
  backdrop-filter:var(--cs-glass);
  -webkit-backdrop-filter:var(--cs-glass);
  border-bottom:1px solid var(--cs-border);
}
.cs-month-title{
  margin:0; text-align:center; font-weight:700; letter-spacing:.2px;
  font-size:1.15rem; color:var(--cs-text);
}
.cs-nav-btn{
  width:48px; height:48px; display:grid; place-items:center;
  background:linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02) );
  border:1px solid var(--cs-border);
  border-radius:50%;
  box-shadow:var(--cs-glow);
  transition:transform var(--cs-fast) var(--cs-ease), box-shadow var(--cs-fast) var(--cs-ease), background var(--cs-fast) var(--cs-ease);
  cursor:pointer;
}
.cs-nav-btn svg{ width:22px; height:22px; fill:var(--cs-accent); }
.cs-nav-btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 2px rgba(0,255,128,.2), var(--cs-glow); }
.cs-nav-btn:active{ transform:translateY(0); }
.cs-nav-btn:focus-visible{ outline:none; box-shadow:var(--cs-focus), var(--cs-glow); }

/* -----------------------------
   GRID Calendario 7×N
--------------------------------*/
.cs-calendar-grid{
  --cell: minmax(44px,1fr);
  display:grid;
  grid-template-columns:repeat(7, var(--cell));
  gap:6px;
  padding:8px;
}
.cs-day{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--cs-border);
  border-radius:12px;
  background:linear-gradient( to bottom right, rgba(255,255,255,.025), rgba(255,255,255,.01) );
  backdrop-filter:var(--cs-glass);
  -webkit-backdrop-filter:var(--cs-glass);
  box-shadow:var(--cs-shadow);
  padding:6px;
  overflow:hidden;
  transition:background var(--cs-fast) var(--cs-ease), border-color var(--cs-fast) var(--cs-ease), transform var(--cs-fast) var(--cs-ease);
}
.cs-day:hover{ background:rgba(255,255,255,.04); transform:translateY(-1px); }
.cs-day:focus-visible{ outline:none; box-shadow:var(--cs-focus); }
.cs-day.is-today{ border-color:rgba(0,255,128,.4); }
.cs-day.is-out{
  opacity:.5;
}
.cs-day .cs-num{
  position:absolute; top:6px; right:8px; font-size:.9rem; color:var(--cs-text-dim);
}
.cs-day .cs-dots{
  position:absolute; left:6px; bottom:6px; display:flex; gap:4px; flex-wrap:wrap; max-width:80%;
}
.cs-day .cs-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--cs-accent); box-shadow:0 0 6px rgba(0,255,128,.6);
}

/* Tooltip glass (hover/tap) */
.cs-tooltip{
  position:absolute; inset:auto 6px 6px 6px;
  background:linear-gradient( to bottom right, rgba(0,0,0,.75), rgba(20,20,20,.85) );
  border:1px solid var(--cs-border);
  border-radius:12px;
  padding:10px 12px;
  color:var(--cs-text);
  font-size:.85rem;
  box-shadow:var(--cs-shadow), var(--cs-glow);
  opacity:0; transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition:opacity var(--cs-fast) var(--cs-ease), transform var(--cs-fast) var(--cs-ease);
}
.cs-day.show-tip .cs-tooltip{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cs-tooltip .cs-tip-title{ font-weight:700; margin:0 0 4px; }
.cs-tooltip .cs-tip-meta{ color:var(--cs-text-dim); font-size:.8rem; }

/* -----------------------------
   Lista de tarjetas (debajo)
--------------------------------*/
.cs-events-list{
  padding:8px 8px 24px;
  display:grid; gap:10px;
}
.cs-card{
  display:grid; grid-template-columns:76px 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius);
  background:linear-gradient( to bottom right, rgba(255,255,255,.03), rgba(255,255,255,.015) );
  backdrop-filter:var(--cs-glass);
  -webkit-backdrop-filter:var(--cs-glass);
  box-shadow:var(--cs-shadow);
  padding:10px;
  transition:transform var(--cs-fast) var(--cs-ease), border-color var(--cs-fast) var(--cs-ease), background var(--cs-fast) var(--cs-ease);
}
.cs-card:hover{ transform:translateY(-1px); background:rgba(255,255,255,.05); }
.cs-card:focus-within{ border-color:rgba(0,255,128,.35); }

.cs-date-badge{
  display:grid; place-items:center;
  width:72px; height:72px;
  border-radius:16px;
  border:1px solid var(--cs-border);
  background:linear-gradient( to bottom right, rgba(255,255,255,.04), rgba(255,255,255,.015) );
}
.cs-date-badge .d{ font-size:1.4rem; font-weight:800; }
.cs-date-badge .m{ font-size:.8rem; text-transform:lowercase; color:var(--cs-text-dim); margin-top:-2px; }

.cs-card-main{
  min-width:0;
}
.cs-card-title{
  margin:0; font-size:1.05rem; font-weight:700; line-height:1.2;
}
.cs-card-title a{ color:var(--cs-text); text-decoration:none; }
.cs-card-title a:hover{ color:var(--cs-accent); }
.cs-card-meta{
  margin-top:4px; color:var(--cs-text-dim); font-size:.9rem;
}
.cs-card-roles{
  margin-top:6px; font-size:.85rem; color:#cfe; opacity:.9;
}

.cs-card-actions{ display:flex; gap:8px; }

/* Botones */
.cs-btn{
  --pad:10px 14px;
  display:inline-flex; align-items:center; gap:8px;
  padding:var(--pad);
  border-radius:14px;
  border:1px solid var(--cs-border);
  background:linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02) );
  color:var(--cs-text);
  font-weight:600; text-decoration:none;
  cursor:pointer;
  transition:transform var(--cs-fast) var(--cs-ease), background var(--cs-fast) var(--cs-ease), box-shadow var(--cs-fast) var(--cs-ease);
}
.cs-btn:focus-visible{ outline:none; box-shadow:var(--cs-focus); }
.cs-btn:hover{ transform:translateY(-1px); }
.cs-btn:active{ transform:translateY(0); }

.cs-btn-green{
  border-color:rgba(0,255,128,.35);
  color:#081d13;
  background:
    radial-gradient( 120% 120% at 20% 0%, rgba(0,255,128,.35), transparent 55% ),
    linear-gradient( to bottom right, rgba(0,255,128,.9), rgba(0,230,120,.85) );
  box-shadow:var(--cs-glow);
}
.cs-btn-green:hover{ box-shadow:0 0 0 2px rgba(0,255,128,.25), var(--cs-glow); }
.cs-btn-secondary{
  color:var(--cs-text);
}

/* -----------------------------
   Modal “Postularme”
--------------------------------*/
.cs-modal[hidden]{ display:none !important; }
.cs-modal{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
.cs-modal-content{
  width:min(720px, 92vw);
  background:linear-gradient( to bottom right, rgba(20,20,20,.92), rgba(10,10,10,.92) );
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius-lg);
  box-shadow:var(--cs-shadow), var(--cs-glow);
  padding:18px;
  animation:cs-pop var(--cs-fast) var(--cs-ease);
}
@keyframes cs-pop{
  from{ transform:translateY(8px) scale(.98); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
.cs-modal h3{ margin:0 0 10px; color:var(--cs-accent); }

.cs-apply-form label,
.cs-create-event label{ display:block; margin:10px 0; }
.cs-apply-form span,
.cs-create-event span{ display:block; margin-bottom:6px; color:var(--cs-text-dim); font-size:.95rem; }

.cs-apply-form input[type="text"],
.cs-apply-form input[type="email"],
.cs-apply-form select,
.cs-apply-form textarea,
.cs-create-event input[type="text"],
.cs-create-event input[type="url"],
.cs-create-event input[type="date"],
.cs-create-event input[type="time"],
.cs-create-event textarea{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--cs-border);
  border-radius:12px;
  color:var(--cs-text);
  padding:10px 12px;
  transition:border-color var(--cs-fast) var(--cs-ease), box-shadow var(--cs-fast) var(--cs-ease), background var(--cs-fast) var(--cs-ease);
}
.cs-apply-form textarea,
.cs-create-event textarea{ resize:vertical; }

.cs-apply-form input:focus-visible,
.cs-apply-form select:focus-visible,
.cs-apply-form textarea:focus-visible,
.cs-create-event input:focus-visible,
.cs-create-event select:focus-visible,
.cs-create-event textarea:focus-visible{
  outline:none; box-shadow:var(--cs-focus);
  border-color:rgba(0,255,128,.35);
}

.cs-modal-actions{ display:flex; gap:10px; margin-top:12px; }

/* -----------------------------
   Formulario “Crear evento”
--------------------------------*/
.cs-form-title{ margin:0 0 8px; color:var(--cs-accent); font-size:1.2rem; }
.cs-create-event{
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius);
  background:linear-gradient( to bottom right, rgba(255,255,255,.03), rgba(255,255,255,.015) );
  padding:14px;
  box-shadow:var(--cs-shadow);
}
.cs-grid-2{
  display:grid; grid-template-columns:1fr; gap:10px;
}
@media (min-width:720px){
  .cs-grid-2{ grid-template-columns:1fr 1fr; }
}
.cs-roles-needed{ margin:10px 0; border:1px dashed var(--cs-border); padding:10px; border-radius:12px; }
.cs-roles-needed legend{ padding:0 6px; color:var(--cs-text-dim); }
.cs-checkbox{ display:inline-flex; align-items:center; gap:8px; margin:6px 10px 6px 0; }
.cs-checkbox input{ width:18px; height:18px; accent-color:var(--cs-accent); }
.cs-file input[type="file"]{
  display:block; width:100%;
  border:1px dashed var(--cs-border);
  border-radius:12px; padding:10px; background:rgba(255,255,255,.02);
}
.cs-actions{ margin-top:10px; }

/* Mensajes de estado */
.cs-toast[hidden]{ display:none !important; }
.cs-toast{
  margin-top:10px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--cs-border);
  background:linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02) );
  color:var(--cs-text);
}
.cs-toast.ok{ border-color:rgba(0,255,128,.35); box-shadow:var(--cs-glow); }
.cs-toast.err{ border-color:rgba(255,59,59,.35); }

/* Estados de error/accesibilidad */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color:rgba(255,59,59,.55) !important;
  box-shadow:0 0 0 2px rgba(255,59,59,.2);
}
label .cs-error{
  display:block; color:#ff8a8a; font-size:.85rem; margin-top:4px;
}

/* -----------------------------
   Utilidades
--------------------------------*/
.u-hidden{ display:none !important; }
.u-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* SVG icon use */
svg{ display:block; }

/* -----------------------------
   Responsivo
--------------------------------*/
@media (min-width:880px){
  .cs-month-title{ font-size:1.25rem; }
  .cs-card{ grid-template-columns:92px 1fr auto; padding:14px; }
  .cs-date-badge{ width:84px; height:84px; border-radius:18px; }
  .cs-date-badge .d{ font-size:1.6rem; }
}

/* -----------------------------
   Reduce motion
--------------------------------*/
@media (prefers-reduced-motion: reduce){
  .cs-nav-btn,
  .cs-day,
  .cs-tooltip,
  .cs-card,
  .cs-modal-content{
    transition:none !important;
    animation:none !important;
  }
}