:root { --bg:#0b0b0f; --card:#141620; --ink:#e8e8f0; --muted:#a0a3ad; --accent:#6dd3fb; --danger:#ff6b6b; --line:#23263a; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,Segoe UI,Roboto}
header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:#0d0f18;position:sticky;top:0;z-index:20}
.brand{font-weight:700;letter-spacing:.3px}
.nav{display:flex;gap:8px;align-items:center}
.tab{background:#0f1220;border:1px solid var(--line);color:var(--ink);padding:8px 12px;border-radius:10px;cursor:pointer}
.tab.active{outline:2px solid var(--accent)}
.tab[disabled]{opacity:.5;cursor:not-allowed}

/* ++ más ancho para vista malla */
.container{max-width:1800px;margin:22px auto;padding:0 16px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
h2{margin:0 0 10px;font-size:18px}
h3{margin:0 0 10px;font-size:16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.list{display:grid;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#0e1120;border:1px solid var(--line);border-radius:999px;padding:6px 10px;cursor:pointer}
.pill.active{outline:2px solid var(--accent)}
input,select{background:#0e1120;border:1px solid var(--line);color:var(--ink);padding:8px 10px;border-radius:10px}
button{background:#1e2233;color:var(--ink);border:1px solid #2a2f47;padding:8px 12px;border-radius:10px;cursor:pointer}
button.primary{background:linear-gradient(180deg,#1f9af3,#177bd9);border-color:#1671cf}
button.ghost{background:#0e1120}
button.danger{background:linear-gradient(180deg,#ff8a8a,#ff6b6b);border-color:#e85b5b}
button:disabled{opacity:.6;cursor:not-allowed}
label{font-size:12px;color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.course-item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:10px;background:#0e1120}
.course-meta{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.hidden{display:none}
.subtabs{display:flex;gap:8px;margin:6px 0 12px}
.subtab{background:#0e1120;border:1px solid var(--line);padding:6px 10px;border-radius:10px;cursor:pointer}
.subtab.active{outline:2px solid var(--accent)}
.subtab[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.overlay-disabled{position:relative}
.overlay-disabled::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);border-radius:12px;display:none}
.overlay-disabled.disabled::after{display:block}
.inline{display:flex;align-items:center;gap:8px}

/* ===== Horario ===== */
.sched { padding:12px }
.sched-grid{display:grid;grid-template-columns:80px 1fr;gap:10px;min-height:540px}
.sched-hours{display:flex;flex-direction:column;gap:0;position:relative}
.sched-hours .hour{height:calc((540px) / 14); color:var(--muted);font-size:12px;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px;padding-right:6px}
.sched-days{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.day-col{position:relative;background:#0e1120;border:1px solid var(--line);border-radius:12px;padding-top:26px;overflow:hidden}
.day-label{position:absolute;top:4px;left:8px;color:var(--muted);font-size:12px}
.col-grid{position:relative;height:540px;background:
  linear-gradient(to bottom, transparent 0 calc(100%/14 - 1px), rgba(255,255,255,0.05) calc(100%/14 - 1px) calc(100%/14));
}

/* ====== Horario USM DnD ====== */
.palette{ display:flex;flex-wrap:wrap;gap:8px }
.palette-chip{
  background:#0e1120;border:1px solid var(--line);padding:6px 10px;border-radius:999px;
  cursor:grab; user-select:none
}
.palette-chip:active{cursor:grabbing}

.sched-usm{padding:12px}
.usm-grid{display:grid;grid-template-columns:160px 1fr;gap:10px}
.col-mods{display:flex;flex-direction:column;gap:6px}
.col-days{display:grid;grid-template-rows:auto 1fr;gap:6px}
.days-header{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.days-body{display:flex;flex-direction:column;gap:6px}
.row-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cell{
  background:#0e1120;border:1px solid var(--line);border-radius:12px;min-height:48px;
  display:flex;align-items:center;justify-content:center;padding:6px 8px;text-align:center
}
.cell.header{background:#0f1220;font-weight:700}
.mod{align-items:flex-start;justify-content:flex-start;gap:4px;min-height:48px}
.mod .mod-label{font-weight:700}
.mod .mod-time{font-size:12px;color:var(--muted)}
.lunch{background:rgba(255,255,255,0.04);border-style:dashed}
.lunch-row .cell{background:rgba(255,255,255,0.04);border-style:dashed}
.slot.is-lunch{opacity:.5;pointer-events:none}

/* ====== Horario USM DnD (alineado) ====== */
:root { --rowh: 64px; } /* altura uniforme por fila */

.sched-usm{padding:12px}

/* Grilla unificada: 1 col de módulos + 5 cols de días */
.usm-grid2{
  display:grid;
  grid-template-columns: 160px repeat(5, 1fr);
  gap:6px;
  align-items:stretch;
}
.cell{
  background:#0e1120;border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--rowh); padding:6px 8px;
}
.cell.header{background:#0f1220;font-weight:700;min-height:42px}
.mod{align-items:flex-start;justify-content:flex-start;gap:4px}
.mod .mod-label{font-weight:700}
.mod .mod-time{font-size:12px;color:var(--muted)}
.lunch{background:rgba(255,255,255,0.04);border-style:dashed}

/* ===== Geometría SIMÉTRICA (dos cuadros dentro de la celda) ===== */
.cell.slot{
  position: relative;
  overflow: hidden;
  min-height: var(--rowh);
  --pad: 8px;   /* padding interior */
  --gap: 10px;  /* separación entre bloques */
}

/* Tarjeta colocada: centrada verticalmente y altura mínima legible */
.cell.slot .placed{
  position:absolute;
  display:flex; align-items:center;
  min-height:36px;
  background:linear-gradient(180deg,#1f9af3,#177bd9);
  color:#fff;
  border:1px solid #1671cf;
  border-radius:12px;
  padding:6px 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  cursor:pointer;
}
.placed-title{
  font-weight:700; font-size:13px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Ancho (horizontal) */
.h-single{ left:var(--pad); right:var(--pad); }
.h-left  { left:var(--pad); right:calc(50% + var(--gap)/2); }
.h-right { left:calc(50% + var(--gap)/2); right:var(--pad); }

/* Altura (vertical) – mitad exacta */
.pos-full{   top:var(--pad); bottom:var(--pad); }
.pos-top{    top:var(--pad); height:calc(50% - var(--gap)/2 - var(--pad)); }
.pos-bottom{ bottom:var(--pad); height:calc(50% - var(--gap)/2 - var(--pad)); }

/* ===== Preview / Hints (coinciden con la geometría) ===== */
.cell.slot.over::after{
  content:'';
  position:absolute;
  border:2px dashed rgba(31,154,243,.65);
  background: rgba(31,154,243,.12);
  border-radius:12px;
  pointer-events:none;
  opacity:.9;
  animation: hintPulse 900ms ease-out infinite;
  top:var(--pad); bottom:var(--pad);
  left:var(--pad); right:var(--pad);
}
/* Altura */
.cell.slot.over.hint-top::after{
  top:var(--pad);
  height:calc(50% - var(--gap)/2 - var(--pad));
}
.cell.slot.over.hint-full::after{
  top:var(--pad); bottom:var(--pad);
}
.cell.slot.over.hint-bottom::after{
  bottom:var(--pad);
  height:calc(50% - var(--gap)/2 - var(--pad));
}
/* Ancho */
.cell.slot.over.hint-left::after{   left:var(--pad); right:calc(50% + var(--gap)/2); }
.cell.slot.over.hint-center::after{ left:var(--pad); right:var(--pad); }
.cell.slot.over.hint-right::after{  left:calc(50% + var(--gap)/2); right:var(--pad); }

@keyframes hintPulse {
  0% { box-shadow: 0 0 0 0 rgba(31,154,243,.25); }
  100% { box-shadow: 0 0 0 6px rgba(31,154,243,0); }
}

/* Sub-líneas dentro del bloque módulo (numeración) */
.mod-head{ display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
.mod .mod-label{ font-weight:700 }
.mod .mod-time{ font-size:12px; color:var(--muted) }
.mod-lines{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:2px 10px;
  font-size:12px;
  color:var(--muted);
}
.mod-lines .line-num{ font-weight:700; color:var(--ink); }

/* ===== Notas (grades) ===== */
.gr-table{display:grid;gap:10px}
.gr-row{ border:1px solid var(--line);border-radius:12px;padding:10px;background:#0e1120; }
.gr-row .head{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:8px}
.gr-row label{font-size:12px;color:var(--muted)}
.gr-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.gr-item{display:flex;gap:6px;align-items:center}
.gr-item input[type="number"]{width:90px}
.gr-actions{display:flex;gap:8px}
.gr-id{font-family:ui-monospace,Consolas,Menlo,monospace;font-weight:700;padding:2px 6px;border:1px dashed var(--line);border-radius:6px}
.gr-result{display:flex;gap:16px;flex-wrap:wrap;font-size:16px}
.gr-badge-ok{color:#7dffa4}
.gr-badge-bad{color:#ff8a8a}
.gr-id{background:#0e1120}

/* === Malla (scope: sólo dentro de #page-malla) === */
#page-malla .grid-header{
  display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:auto auto;
  background:#222;color:#fff;font-weight:700;text-align:center;margin-bottom:6px;
  font-size:15px;
}
#page-malla .grid-header .year{grid-row:1;padding:10px 0;background:#333}
#page-malla .grid-header .year:nth-of-type(1){grid-column:1 / span 2}
#page-malla .grid-header .year:nth-of-type(2){grid-column:3 / span 2}
#page-malla .grid-header .year:nth-of-type(3){grid-column:5 / span 2}
#page-malla .grid-header .year:nth-of-type(4){grid-column:7 / span 2}
#page-malla .grid-header .year:nth-of-type(5){grid-column:9 / span 2}
#page-malla .grid-header .sem{grid-row:2;padding:6px 0;background:#444;font-weight:600}



/* Cada ramo */
#page-malla .grid-item{
  position:relative; display:flex;align-items:center;justify-content:center;flex-direction:column;
  border-radius:10px; cursor:pointer; overflow:hidden;
  padding:28px 10px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
}

#page-malla .grid-item::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent 22%, transparent 78%, rgba(0,0,0,0.18));
  pointer-events:none;
}

/* Bandas */
#page-malla .grid-item .top-bar,
#page-malla .grid-item .bottom-bar{
  position:absolute;left:0;width:100%;height:24px;background:rgba(0,0,0,.5);z-index:1;pointer-events:none
}
#page-malla .grid-item .top-bar{top:0}
#page-malla .grid-item .bottom-bar{bottom:0}

/* Código */
#page-malla .grid-item .code-label{
  position:absolute;top:4px;right:4px;width:24px;height:24px;background:#fff;color:#000;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;z-index:2
}

/* Prerrequisitos */
#page-malla .grid-item .prereq-label{
  position:absolute;bottom:3px;top:auto;width:20px;height:20px;background:rgba(255,255,255,.92);color:#000;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.74rem;border:1px solid rgba(0,0,0,.25);z-index:2
}

/* Nombre del ramo */
#page-malla .grid-item .course-name{
  position:relative;z-index:1;color:#fff;text-align:center;padding:0 6px;margin:0;
  line-height:1.28;word-break:break-word;hyphens:auto;
  font-size: clamp(.82rem, 0.9vw + .5rem, 1rem);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}

/* Colores por área – UMayor (MedVet) */
#page-malla .grid-item.area-integrativa{background:#b691d2}
#page-malla .grid-item.area-formacion-basica{background:#FA996C}
#page-malla .grid-item.area-electiva{background:#F3aacb}
#page-malla .grid-item.area-salud-animal{background:#486F99}
#page-malla .grid-item.area-produccion-animal{background:#A5EEA0;color:#000}
#page-malla .grid-item.area-medio-ambiente{background:#88A7D0}
#page-malla .grid-item.area-salud-publica{background:#FF6961}
#page-malla .grid-item.area-transversal{background:#000}

/* Bolitas MedVet */
#page-malla .prereq-label.area-integrativa       { background:#b691d2; }
#page-malla .prereq-label.area-formacion-basica  { background:#FA996C; }
#page-malla .prereq-label.area-electiva          { background:#F3aacb; }
#page-malla .prereq-label.area-salud-animal      { background:#486F99; }
#page-malla .prereq-label.area-produccion-animal { background:#A5EEA0; color:#000; }
#page-malla .prereq-label.area-medio-ambiente    { background:#88A7D0; }
#page-malla .prereq-label.area-salud-publica     { background:#FF6961; }
#page-malla .prereq-label.area-transversal       { background:#000; }

/* Estados */
#page-malla .grid-item.bloqueado{opacity:.35;pointer-events:none}
#page-malla .grid-item.aprobado{opacity:.8;position:relative}
#page-malla .grid-item.aprobado::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(135deg,transparent 48%,rgba(255,0,0,.85) 48%,rgba(255,0,0,.85) 52%,transparent 52%);
  pointer-events:none;z-index:3
}

/* Info inferior */
#page-malla .percentage-display{ text-align:center;color:#e8e8f0; font-size:1.1rem;margin:10px 0 4px }
#page-malla .legend{ text-align:center;margin:8px 0 0; font-size:1rem;color:#a0a3ad }
#page-malla .legend span{display:inline-block;margin:0 12px}
#page-malla .legend-color{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:middle}
#page-malla .legend-color.integrativa{background:#b691d2}
#page-malla .legend-color.salud-animal{background:#486F99}
#page-malla .legend-color.produccion-animal{background:#A5EEA0}
#page-malla .legend-color.salud-publica{background:#FF6961}
#page-malla .legend-color.medio-ambiente{background:#88A7D0}
#page-malla .legend-color.formacion-basica{background:#FA996C}
#page-malla .legend-color.electiva{background:#F3aacb}

/* Evitar colisión: solo aplica el 'vino' a Transversal cuando la carrera es ICTEL */
#page-malla[data-career="ICTEL"] .grid-item.area-transversal { background:#9a4560; }

/* ===== Telemática: sigla, número y créditos ===== */
#page-malla .sigla-label{
  position:absolute; top:2px; left:6px;
  font-weight:700; font-size:.68rem; color:#fff; opacity:.9; z-index:2;
}
#page-malla .code-label{ background:#fff; color:#000; }
#page-malla .credits-badge{
  position:absolute; right:6px; bottom:2px;
  min-width:20px; height:20px; padding:0 6px;
  background:rgba(0,0,0,.65); color:#fff; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:700; z-index:2;
}

/* ===== Telemática: colores por área (scope por carrera) ===== */
#page-malla[data-career="ICTEL"] .grid-item.area-cb            { background:#b6d66e; }
#page-malla[data-career="ICTEL"] .grid-item.area-software      { background:#5e3a8e; }
#page-malla[data-career="ICTEL"] .grid-item.area-fisica        { background:#2f6b76; }
#page-malla[data-career="ICTEL"] .grid-item.area-transversal   { background:#9a4560; }
#page-malla[data-career="ICTEL"] .grid-item.area-fg            { background:#2a4ea4; }
#page-malla[data-career="ICTEL"] .grid-item.area-deportes      { background:#8a8a8a; }
#page-malla[data-career="ICTEL"] .grid-item.area-redes         { background:#c55a54; }
#page-malla[data-career="ICTEL"] .grid-item.area-ingles        { background:#2d82c9; }
#page-malla[data-career="ICTEL"] .grid-item.area-electronica   { background:#7f79a6; }
#page-malla[data-career="ICTEL"] .grid-item.area-telecom       { background:#d5ca59; }
#page-malla[data-career="ICTEL"] .grid-item.area-industrias    { background:#5f89b6; }
#page-malla[data-career="ICTEL"] .grid-item.area-complementarios{ background:#e0cf8a; }

/* Colores para prerequisitos – Telemática (ICTEL) */
#page-malla[data-career="ICTEL"] .prereq-label.area-cb               { background:#b6d66e; }
#page-malla[data-career="ICTEL"] .prereq-label.area-software         { background:#5e3a8e; }
#page-malla[data-career="ICTEL"] .prereq-label.area-fisica           { background:#2f6b76; }
#page-malla[data-career="ICTEL"] .prereq-label.area-transversal      { background:#9a4560; }
#page-malla[data-career="ICTEL"] .prereq-label.area-fg               { background:#2a4ea4; }
#page-malla[data-career="ICTEL"] .prereq-label.area-deportes         { background:#8a8a8a; }
#page-malla[data-career="ICTEL"] .prereq-label.area-redes            { background:#c55a54; }
#page-malla[data-career="ICTEL"] .prereq-label.area-ingles           { background:#2d82c9; }
#page-malla[data-career="ICTEL"] .prereq-label.area-electronica      { background:#7f79a6; }
#page-malla[data-career="ICTEL"] .prereq-label.area-telecom          { background:#d5ca59; }
#page-malla[data-career="ICTEL"] .prereq-label.area-industrias       { background:#5f89b6; }
#page-malla[data-career="ICTEL"] .prereq-label.area-complementarios  { background:#e0cf8a; }

/* Leyenda (burbujas) – ICTL */
#page-malla[data-career="ICTEL"] .legend-color.cb               { background:#b6d66e; }
#page-malla[data-career="ICTEL"] .legend-color.software         { background:#5e3a8e; }
#page-malla[data-career="ICTEL"] .legend-color.fisica           { background:#2f6b76; }
#page-malla[data-career="ICTEL"] .legend-color.transversal      { background:#9a4560; }
#page-malla[data-career="ICTEL"] .legend-color.fg               { background:#2a4ea4; }
#page-malla[data-career="ICTEL"] .legend-color.deportes         { background:#8a8a8a; }
#page-malla[data-career="ICTEL"] .legend-color.redes            { background:#c55a54; }
#page-malla[data-career="ICTEL"] .legend-color.ingles           { background:#2d82c9; }
#page-malla[data-career="ICTEL"] .legend-color.electronica      { background:#7f79a6; }
#page-malla[data-career="ICTEL"] .legend-color.telecom          { background:#d5ca59; }
#page-malla[data-career="ICTEL"] .legend-color.industrias       { background:#5f89b6; }
#page-malla[data-career="ICTEL"] .legend-color.complementarios  { background:#e0cf8a; }

/* === Color picker visible y bonito === */
input[type="color"]{
  appearance: none; padding: 0; width: 48px; height: 32px;
  background: transparent; border-radius: 8px; border: 1px solid var(--line); cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; border-radius: 8px; }
input[type="color"]::-webkit-color-swatch{ border: none; border-radius: 8px; }
input[type="color"]::-moz-color-swatch{ border: none; border-radius: 8px; }

/* ========= PERFIL ========== */
#page-perfil .profile-card { padding: 18px; border-radius: 16px; background: #0e1120; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#page-perfil .section-title { font-size: 22px; font-weight: 700; margin: 0 0 14px; }
#page-perfil .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
#page-perfil .field { display: flex; flex-direction: column; gap: 6px; }
#page-perfil .field label { font-size: 13px; color: var(--muted); }
#page-perfil .field input[type="text"],
#page-perfil .field input[type="date"],
#page-perfil .field select {
  background: #0b0e1a; border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 10px 12px; outline: none;
  transition: box-shadow .15s, border-color .15s, transform .03s;
}
#page-perfil .field input:focus, #page-perfil .field select:focus {
  border-color: #4a7dff; box-shadow: 0 0 0 3px rgba(74,125,255,.15);
}
#page-perfil .color-picker { display: flex; align-items: center; gap: 12px; }
#page-perfil .color-picker input[type="color"]{ width: 44px; height: 28px; border: none; padding: 0; border-radius: 8px; background: transparent; cursor: pointer; }
#page-perfil .color-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 12px; }
#page-perfil .actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 6px; }
#page-perfil .actions .primary { padding: 12px 18px; border-radius: 14px; font-weight: 600; }

/* tarjeta de duo */
#partnerProfileCard { margin-top: 18px; border-radius: 16px; background: #0e1120; border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.25); }
#partnerProfileCard h3{ margin-top: 0; }
#pp-color-swatch{ border-radius: 6px !important; width: 18px !important; height: 18px !important; border: 1px solid rgba(255,255,255,.3) !important; }

/* responsive */
@media (max-width: 920px){
  #page-perfil .form-grid { grid-template-columns: 1fr; }
}

.hidden { display: none !important; }

/* Editor inline para renombrar cursos en el bloque */
.inline-rename{
  font: 700 13px/1.2 system-ui, Segoe UI, Roboto;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 6px 8px;
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(31,154,243,.15);
}
.inline-rename:focus{
  border-color: #1f9af3;
  box-shadow: 0 0 0 3px rgba(31,154,243,.2);
}

/* Horario: título y sala en bloque y centrados */
.placed { text-align: center; }
.placed-title { display: block; font-weight: 600; }
.placed-room  { display: block; margin-top: 4px; font-size: 12px; color: #000; }

.sched-usm .placed{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.sched-usm .placed-title{
  white-space:normal;
  line-height:1.15;
  font-weight:600;
}


.sched-usm .placed-room{
  margin-top: 2px;
  font-size: 12px;
  color: #000 !important;  /* la sala siempre negra */
  line-height: 1.1;
  background: transparent !important;
}

.cell.slot .placed{
  /* pasa de fila a columna y centra */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;                /* separa nombre vs sala */
}

/* ===== Calendario ===== */
.cal-head {
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px;
}
.cal-left { display:flex; align-items:center; gap:8px; }
.cal-grid { display:flex; flex-direction:column; gap:6px; }
.cal-row { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.cal-cell {
  position:relative;
  min-height:110px;
  background:#0e1120;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 6px 24px 6px;
  overflow:hidden;
}
.cal-cell.muted { opacity:.55; }
.cal-today { outline:2px solid #60a5fa; }
.cal-date { font-size:12px; color:var(--muted); }
.cal-events { margin-top:4px; display:flex; flex-direction:column; gap:4px; }
.cal-ev {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; padding:4px 6px; border-radius:6px;
  border:1px solid rgba(0,0,0,.25);
  cursor:pointer;
}
.cal-ev-title { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-ev-time { margin-left:8px; opacity:.9; flex-shrink:0; }
.cal-dow { font-weight:600; text-align:center; background:transparent; border:none; padding:8px 0; }
.cal-add {
  position:absolute; right:6px; bottom:4px;
  font-size:12px; padding:2px 6px; border-radius:6px;
  background:transparent; border:1px dashed var(--line); color:var(--muted);
}
.cal-add:hover { border-style:solid; color:var(--ink); }

/* Modal simple */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:40; }
.modal.hidden { display:none; }
.modal-body {
  width:min(720px, 92vw);
  background:#0a0d1a; border:1px solid var(--line); border-radius:14px; padding:14px;
}
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:800px){ .grid2{ grid-template-columns:1fr; } }
.checkbox input { transform: translateY(1px); }

/* Calendario */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-left{display:flex; align-items:center; gap:8px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.cal-cell{background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px; min-height:92px}
.cal-cell.head{background:transparent; border:none; text-align:center; font-weight:600; color:#9aa4af; min-height:auto; padding:2px}
.cal-cell.empty{background:transparent; border:none}
.cal-daynum{font-size:.9rem; color:#9aa4af; margin-bottom:6px}
.cal-events{display:flex; flex-direction:column; gap:4px}
.cal-evt{font-size:.85rem; padding:4px 6px; border-radius:6px; background:#1f2937; border:1px solid rgba(255,255,255,.08); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Modal genérico */
.modal.hidden{display:none}
.modal{position:fixed; inset:0; z-index:50}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(2px);}
.modal-card{position:relative; max-width:520px; width:92%; margin:10vh auto 0; background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px}
.modal-card label{display:block; font-size:.9rem; color:#9aa4af; margin-bottom:4px}
.modal-card input[type="text"],
.modal-card input[type="date"],
.modal-card input[type="time"],
.modal-card select{
  width:100%; background:#0b0d12; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:8px; color:#e5e7eb;
}
.modal-card .row{display:flex; align-items:flex-end}
.modal-card .primary{background:#2563eb; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer}

/* Subtabs pequeñas */
.tab.small{padding:6px 10px; font-size:.9rem}

/* Calendario base */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-left{display:flex; align-items:center; gap:8px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.cal-cell{background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px; min-height:92px}
.cal-cell.head{background:transparent; border:none; text-align:center; font-weight:600; color:#9aa4af; min-height:auto; padding:2px}
.cal-cell.empty{background:transparent; border:none}
.cal-daynum{font-size:.9rem; color:#9aa4af; margin-bottom:6px}
.cal-events{display:flex; flex-direction:column; gap:4px}
.cal-evt{font-size:.85rem; padding:4px 6px; border-radius:6px; background:#1f2937; border:1px solid rgba(255,255,255,.08); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Modal */
.modal.hidden{display:none}
.modal{position:fixed; inset:0; z-index:50}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(2px);}
.modal-card{position:relative; max-width:520px; width:92%; margin:10vh auto 0; background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px}
.modal-card label{display:block; font-size:.9rem; color:#9aa4af; margin-bottom:4px}
.modal-card input[type="text"],
.modal-card input[type="date"],
.modal-card input[type="time"],
.modal-card select{
  width:100%; background:#0b0d12; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:8px; color:#e5e7eb;
}
.modal-card .row{display:flex; align-items:flex-end}
.modal-card .primary{background:#2563eb; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer}

.nav-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.auth-area { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
#userBadge.hidden { display: none !important; }

/* Click-through hardening */
.welcome-banner::before,
.party-card::before,
.card::before {
  pointer-events: none !important;
}

/* Asegurar el header por encima de overlays */
header {
  position: relative;
  z-index: 1000;
}


.visually-hidden-file {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none; /* opcional: evita focos accidentales */
}

/* Ocultar inputs de archivo */
.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;
}