/* ═══════════════════════════════════════════════
   Calendario de equipo: vista Equipo, modal de convocatoria, ficha del
   evento, Agenda (huecos por horas) y rodajes por confirmar. Solo tokens de
   base.css. El mes, las píldoras y la rejilla de horas viven en calendar.css
   (los comparte el paquete tiempo: no cambiar .rj/.ev/.ahora/.fantasma).
   ═══════════════════════════════════════════════ */
/* Barra: Google + Convocar */
.cal-google-btn{gap:5px}
.cal-google-btn.conectado{color:var(--c-green)}
.cal-google-btn.sin-configurar{color:var(--c-text3)}
.cal-google-btn .ic{font-size:16px}
.cal-conv-wrap{position:relative}
.menu-i.doble{height:auto;align-items:flex-start;padding:8px 10px}
.menu-i.doble>span:last-child{display:flex;flex-direction:column;gap:1px;font-weight:500}
.menu-i.doble small{font-size:11.5px;font-weight:400;color:var(--c-text3)}
.menu-i.doble .ic{margin-top:1px}

/* ── Modal de convocatoria (Convocar / Editar) ───────────────────────────── */
.cal-modal{width:580px}
.cal-seg-group{margin-bottom:14px}
.cal-seg-group .seg-b.on .ic{color:var(--c)}   /* la píldora la pone .seg; el color del tipo, en su icono */
.cv-titulo{display:block;width:100%;height:46px;margin-bottom:16px;padding:0 2px;border:0;border-bottom:1px solid var(--c-border);background:none;outline:0;
  font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:var(--tracking-title,-0.01em);color:var(--c-text);transition:border-color .15s}
.cv-titulo::placeholder{color:var(--c-text3);font-weight:600}
.cv-titulo:focus{border-color:var(--c-text)}
.cv-cuando{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.cv-cuando .form-group{margin-bottom:0}
.cv-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 16px;flex-wrap:wrap}
.cv-fila .form-select{width:auto;min-width:190px}
.gente{display:flex;flex-wrap:wrap;gap:6px}
.gente .avatar{width:22px;height:22px;font-size:8.5px;box-shadow:none}
.cita{display:grid;grid-template-columns:minmax(0,1fr) 150px 104px;align-items:center;gap:8px;margin-bottom:6px}
.cita>span{display:flex;align-items:center;gap:8px;font-size:13px}
#cal-cita{margin-bottom:14px}
#cal-cita>.form-label{display:block;margin-bottom:8px}
#cal-conflictos{margin-bottom:14px}
#cal-conflictos ul{margin:6px 0 0;padding:0 0 0 18px}
.cv-det{margin:8px 0 14px}
.cv-det summary{display:flex;align-items:center;gap:6px;padding:6px 0;font-size:13px;font-weight:600;color:var(--c-text);cursor:pointer;list-style:none}
.cv-det summary::-webkit-details-marker{display:none}
.cv-det summary .ic{font-size:18px;color:var(--c-text3);transition:transform .421s var(--spring-layout)}
.cv-det[open] summary .ic{transform:rotate(90deg)}
.cv-det .form-row{margin:8px 0 6px;align-items:center}
.cv-opts{display:flex;flex-direction:column;gap:10px;margin:2px 0 8px}
.cal-viaje-filas{margin-top:8px}
.cal-disp-horas{margin-top:8px}
.cal-disp-nota{margin-top:8px}
.rod-aj-motivo{flex:2}

/* ── Ficha del evento (popover en escritorio, modal en móvil) ──────────────
   .cal-ficha-h/sq/t/acc/pie los reutiliza también el paquete tiempo
   (timeCalendarPopup.js): no cambiar sus nombres. */
.cal-tipo-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;color:#fff;font-size:11px;font-weight:600;margin-right:6px;vertical-align:middle}
.cal-ficha-row{display:flex;align-items:flex-start;gap:12px;padding:6px 0;font-size:13px;line-height:1.45;color:var(--c-text)}
.cal-ficha-row>.ic{flex-shrink:0;margin-top:1px;font-size:18px;color:var(--c-text3)}
.cal-ficha-row small{display:block;font-size:12px;color:var(--c-text3)}
.cal-ficha-desc{color:var(--c-text2);white-space:pre-wrap}
.cal-ficha-g{margin:8px 0 4px;padding-top:12px;border-top:1px solid var(--c-border)}
.cal-ficha-gh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.cal-ficha-gh small{font-size:12px;color:var(--c-text3)}
.cal-ficha-g ul{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.cal-ficha-asist{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:13px}
.cal-ficha-asist>span:nth-child(2){flex:1;min-width:0}
.cal-ficha-asist small{display:block;font-size:11.5px;color:var(--c-text3)}
.cal-ficha-asist>.material-symbols-rounded{font-size:18px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20;color:var(--c-border2)}
.cal-ficha-asist>.cal-est-pendiente{font-variation-settings:'FILL' 0}
.cal-ficha-asist>.cal-est-acepta{color:var(--c-green)}
.cal-ficha-asist>.cal-est-rechaza{color:var(--c-red)}
.cal-ficha-asist>.cal-est-quizas{color:var(--c-warning)}
.cal-responder{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--c-border);font-size:13px;font-weight:600}
.cal-responder .seg{margin-left:auto}
#cal-pop{position:fixed;z-index:700;width:350px;max-height:calc(100vh - 24px);overflow:auto;padding:14px 12px 14px 16px;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  background:var(--c-surface);box-shadow:var(--shadow-panel);animation:calPopIn .421s var(--spring-layout)}
@keyframes calPopIn{from{opacity:0;transform:scale(.94);filter:blur(4px)}}
/* El «⋯» va en el borde derecho de la ficha: el menú se abre hacia dentro, no se corta */
#cal-pop .menu{left:auto!important;right:0!important;transform-origin:top right!important}
.cal-ficha-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.cal-ficha-sq{flex-shrink:0;width:12px;height:12px;margin-top:6px;border-radius:4px;background:var(--c)}
.cal-ficha-t{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:-0.012em;line-height:1.35;text-wrap:balance;color:var(--c-text)}
.cal-ficha-t small{display:block;font-size:12px;font-weight:500;letter-spacing:0;color:var(--c-text3)}
.cal-ficha-acc{display:flex;align-items:center;gap:2px;margin:-4px -4px 0 0}
.cal-ficha-pie{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid var(--c-border)}

/* ── Vista Equipo (persona × día) ───────────────────────────────────────── */
.eq-wrap{padding:4px 20px 40px}
.eq{display:grid;grid-template-columns:210px repeat(7,minmax(0,1fr))}
.eq-h{position:sticky;top:0;z-index:2;background:var(--c-bg);padding:0 10px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--c-text3)}
.eq-h b{margin-left:4px;font-size:13px;letter-spacing:0;color:var(--c-text)}
.eq-h.hoy{color:var(--c-accent)}
.eq-p,.eq-c{min-height:84px;border-top:1px solid var(--c-border)}
.eq-p{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 0;background:var(--c-bg)}
.eq-p b{display:block;font-size:13px;font-weight:600}
.eq-p small{font-size:11.5px;color:var(--c-text3)}
.eq-c{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:10px 8px;border-left:1px solid var(--c-border)}
.eq-c.finde{background:var(--col-bg)}
.eq-c.fest{background:color-mix(in srgb,var(--c-warning) 5%,var(--c-bg))}
.eq-c>small{font-size:11px;color:var(--c-text3)}
small.libre{display:flex;align-items:center;gap:6px;height:22px;font-size:11.5px;font-weight:600;color:var(--c-green)}
small.libre i{width:6px;height:6px;border-radius:50%;background:currentColor}
.eq-c .pil{height:20px}
.eq-c.mio{cursor:pointer}
@media (hover:hover){.eq-c.mio:hover{background:var(--sb-muted)}}
.eq-ley{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:18px}
/* La bandeja de disponibilidad (calMarcarDia) sigue con su puntito de color */
.cal-eq-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── Agenda: una columna por persona; la cabecera elige con quién ─────────
   La rejilla .rj/.rj.ag es de calendar.css; aquí solo lo propio de la
   Agenda: fondo de fuera-de-jornada/ausencia/hueco y el aviso de arriba. */
.rj.ag .rj-d{gap:3px;padding:8px 4px 10px;border-radius:12px;cursor:pointer;transition:background .15s}
@media (hover:hover){.rj.ag .rj-d:hover{background:var(--col-bg)}}
.rj.ag .rj-d .avatar{width:30px;height:30px;font-size:11px;transition:opacity .2s,filter .2s,box-shadow .2s}
.ag-n{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:600;color:var(--c-text)}
.ag-j{font-size:11px;color:var(--c-text3);font-variant-numeric:tabular-nums}
.rj.ag .rj-d:not(.con) .avatar{opacity:.4;filter:grayscale(.5)}
.rj.ag .rj-d:not(.con) .ag-n{color:var(--c-text3)}
.rj.ag .rj-d.con .avatar{box-shadow:0 0 0 2px var(--c-bg),0 0 0 3.5px var(--c-text)}
.fuera-j{position:absolute;left:0;right:0;pointer-events:none;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c-text) 7%,transparent) 0 1px,transparent 1px 7px)}
.aus{position:absolute;inset:0;z-index:1;display:flex;justify-content:center;padding-top:14px;pointer-events:none;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,#94A3B8 22%,transparent) 0 2px,transparent 2px 8px)}
.aus span{height:22px;padding:0 9px;border-radius:11px;background:var(--c-bg);font-size:11px;font-weight:600;line-height:22px;color:var(--c-text2)}
.ag-hueco{position:absolute;left:2px;right:2px;z-index:1;border-radius:8px;background:color-mix(in srgb,var(--c-green) 9%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c-green) 55%,transparent);
  transform-origin:top;animation:huecoIn .421s var(--spring-layout);pointer-events:none}
.ag-hueco span{position:absolute;top:4px;left:8px;right:4px;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:700;color:var(--c-green);white-space:nowrap}
@keyframes huecoIn{from{opacity:0;transform:scaleY(.85)}}
/* El único aviso de arriba (elige con quién / hueco encontrado / sin hueco) */
.ag-res{margin:0 20px 12px}
.ag-res .aviso{align-items:center}
.ag-res .aviso>div{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;flex:1}
.ag-res .btn:first-of-type{margin-left:auto}
.alt{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:0;border-radius:14px;background:color-mix(in srgb,var(--c-green) 13%,transparent);color:var(--c-green);
  font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,transform .421s var(--spring-layout)}
.alt.on{background:var(--c-green-fill);color:#fff}
.alt:active{transform:scale(.95);transition-duration:.08s}
.ag-scroll{margin:0 20px}
/* Franjas de la semana (chips de paso) */
.ag-barra{display:flex;align-items:center;gap:6px;margin:0 20px 10px}

/* ── Vista de semana de la Agenda: abierta, sin caja ni bandas grises ─────
   (fiel-modulos-04, contradicción: se conserva pero repintada así) */
.ags{border-radius:0;background:none;min-width:max-content}
.ags-fila{display:grid;grid-template-columns:132px repeat(7,minmax(78px,1fr));border-bottom:1px solid var(--c-border)}
.ags-fila:last-child{border-bottom:none}
.ags-head{background:none}
.ags-th{padding:7px 0;text-align:center;border-left:1px solid var(--c-border);line-height:1.25}
.ags-th b{display:block;font-size:11px;font-weight:600;color:var(--c-text3);text-transform:capitalize}
.ags-th span{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ags-hoy span{color:var(--c-accent)}
.ags-finde{background:color-mix(in srgb,var(--c-text3) 5%,transparent)}
.ag-persona{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12.5px;color:var(--c-text);border-right:1px solid var(--c-border);
  background:var(--c-bg);position:sticky;left:0;z-index:2;white-space:nowrap;overflow:hidden;cursor:pointer}
.ag-persona:not(.ag-persona-req)>*{opacity:.55} /* el contenido, no la celda: es sticky y tiene que tapar lo que pasa por debajo */
.ag-corner{background:var(--c-bg);font-size:10.5px;font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--c-text3);cursor:default}
.ag-persona.ag-corner>*{opacity:1}
.ag-persona>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ags-celda{border-left:1px solid var(--c-border);min-height:38px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-text2)}
.ags-mucho{background:color-mix(in srgb,var(--c-green) 16%,transparent);color:var(--c-green)}
.ags-medio{background:color-mix(in srgb,var(--c-green) 8%,transparent)}
.ags-poco{background:color-mix(in srgb,var(--c-warning) 13%,transparent);color:var(--c-warning)}
.ags-lleno{background:color-mix(in srgb,var(--c-red) 12%,transparent);color:var(--c-red)}
.ags-fuera{background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--c-surface2) 4px,var(--c-surface2) 8px);color:var(--c-text3)}
.ags-fila-res{background:none}
.ags-resumen{position:relative;flex-direction:column;gap:2px;font-size:13px;font-weight:700;transition:filter .12s}
.ags-resumen:hover{filter:brightness(.94)}
.ags-todos{background:color-mix(in srgb,var(--c-green) 20%,transparent);color:var(--c-green)}
.ags-nadie{color:var(--c-text3);font-weight:500}
.ags-clic{cursor:pointer}
.ags-clic:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c-accent) 45%,transparent)}
.ags-reservar{position:absolute;bottom:3px;padding:1px 7px;border:none;border-radius:20px;background:var(--c-text);color:var(--c-bg);font-family:var(--font);font-size:10px;font-weight:600;cursor:pointer;opacity:0;transition:opacity var(--tr)}
.ags-resumen:hover .ags-reservar,.ags-reservar:focus-visible{opacity:1}
@media (hover:none){.ags-reservar{opacity:1}}

/* ── Rodajes por confirmar (Mi portal › Mi jornada) ───────────────────────
   Sin caja ni marco: el grupo lo marca un título (rod-grupo-h), las filas
   son .fila (base.css: filete superior continuo) más lo propio de un rodaje. */
.rod-grupo-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;margin-bottom:2px}
.rod-fecha{width:96px;color:var(--c-text2)}
.rod-fecha::first-letter{text-transform:uppercase}
.rod-horas{display:inline-flex;align-items:center;gap:5px}
.rod-horas .form-input{width:auto}
.rod-p{width:70px}
.rod-h{margin-left:auto;font-variant-numeric:tabular-nums}
.rod-acc{display:inline-flex;gap:6px;align-items:center}
.rod-conf-ops{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.rod-conf-op{text-align:left;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);padding:12px 14px;cursor:pointer;font-family:var(--font);transition:var(--tr-colores)}
.rod-conf-op:hover{background:var(--c-surface2)}
.rod-conf-op b{display:block;font-size:13px;color:var(--c-text)}
.rod-conf-op span{display:block;font-size:12px;color:var(--c-text2);margin-top:3px;line-height:1.4}

@media (max-width: 768px), ((hover: none) and (pointer: coarse) and (max-width: 1400px)) {
  .cal-modal{width:100%}
  .cal-seg-group{width:100%}
  .cal-seg-group .seg-b{flex:1;justify-content:center;padding:9px 6px}
  .cv-cuando{grid-template-columns:1fr 1fr}
  .cv-cuando>:first-child{grid-column:1/-1}
  .cv-fila{flex-wrap:wrap}
  .cv-fila .form-select{width:100%}
  .cita{grid-template-columns:1fr 1fr}
  .cita>span{grid-column:1/-1}
  /* Equipo: rejilla deslizable en horizontal, lienzo abierto (movil-03) */
  .eq-wrap{overflow-x:auto;padding:4px 14px 40px}
  .eq{min-width:760px;grid-template-columns:140px repeat(7,minmax(88px,1fr))}
  .eq-p,.eq-h:first-child{position:sticky;left:0;z-index:1;background:var(--c-bg)}
  /* Ficha: hoja desde abajo, como cualquier modal/sheet del sistema */
  #cal-pop{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:82dvh;padding:10px 16px calc(var(--safe-bottom,0px) + 18px);border-radius:22px 22px 0 0;
    transform-origin:bottom center!important;animation:calSheetIn .36s var(--ease-drawer)}
  #cal-pop::before{content:'';display:block;width:36px;height:5px;margin:0 auto 10px;border-radius:3px;background:var(--c-border2)}
  /* El menú «Convocar» declarativo cuelga de .cal-conv-wrap (position:relative
     en escritorio); en móvil el botón que lo abre es el FAB fijo abajo a la
     derecha, así que el menú se repega ahí en vez de junto a la cabecera. */
  .cal-conv-wrap{position:static}
  .cal-conv-wrap .menu{position:fixed;top:auto!important;left:auto!important;right:16px;
    bottom:calc(var(--safe-bottom, 0px) + var(--mtabbar-h, 60px) + 90px);transform-origin:bottom right!important}
  .ag-res,.ag-scroll,.ag-barra{margin-left:12px;margin-right:12px}
  .ags-fila{grid-template-columns:108px repeat(7,minmax(64px,1fr))}
  /* Agenda (Día): columnas legibles. El único scroll es #cal-body (en los dos ejes: así la
     cabecera de personas sigue pegada arriba); el aviso y las franjas no se van de lado */
  .ag-res,.ag-barra{position:sticky;left:12px}
  .rj.ag{--colmin:108px;--gut:44px}
  .rj.ag .rj-col{touch-action:pan-x pan-y} /* timeCalendar.css la deja en pan-y: con dedo no se llegaba a las columnas de la derecha */
  .ag-j{white-space:nowrap}
}
@keyframes calSheetIn{from{transform:translateY(100%)}}