Videoclips - Iván Guadarrama | Fotógrafo Cinematográfico

); for (let d = 1; d <= diasDelMes; d++) { const f = año + “-” + String(mes + 1).padStart(2, “0”) + “-” + String(d).padStart(2, “0”); const datos = resumen[f] || { conteo: {}, violaciones: [] }; const esHoy = f === hoyStr; const tieneAlerta = datos.violaciones.length > 0; let claseFondo = “border-gray-200 bg-white hover:bg-gray-50 active:bg-gray-100”; if (esHoy) claseFondo = “border-indigo-400 bg-indigo-50”; else if (tieneAlerta) claseFondo = “border-red-300 bg-red-50”; const claseNumero = esHoy ? “text-indigo-700” : “text-gray-500”; ``` celdas.push(

setDiaAbierto(f)} className={"min-h-[60px] sm:min-h-[80px] p-1.5 rounded-lg cursor-pointer border transition hover:shadow-md " + claseFondo}>

{d} {tieneAlerta && ⚠}

{Object.keys(datos.conteo).map((t) => (

{datos.conteo[t]}

))}

); ``` } return (

{MESES[mes]} {año}

{DIAS_CORTOS.map((d) =>

{d}

)}

{celdas}

{Object.keys(TURNOS).map((k) => ( {TURNOS[k].label} ))} ⚠ Mínimo incumplido

{diaAbierto && ( setDiaAbierto(null)} /> )}

); } function ModalDia({ fecha, colaboradores, equipos, asignaciones, setAsignaciones, violaciones, obtenerTurno, onClose }) { const [busqueda, setBusqueda] = useState(””); const [filtroEq, setFiltroEq] = useState(””); const d = strToFecha(fecha); function cambiarTurno(colId, turno) { const clave = colId + “_” + fecha; const nuevo = { …asignaciones }; if (turno) nuevo[clave] = turno; else delete nuevo[clave]; setAsignaciones(nuevo); } const lista = colaboradores.filter((c) => { if (busqueda && !c.nombre.toLowerCase().includes(busqueda.toLowerCase())) return false; if (filtroEq && c.eqId !== filtroEq) return false; return true; }); const titulo = DIAS_LARGOS[d.getDay()] + “ “ + d.getDate() + “ “ + MESES[d.getMonth()] + “ “ + d.getFullYear(); return ( {violaciones.length > 0 && (

⚠️ {violaciones.map((v) => { const rolStr = v.rol !== “todos” ? “ (” + v.rol + “)” : “”; return TURNOS[v.turno].label + “: “ + v.actual + “/” + v.cantidad + rolStr; }).join(” · “)}

)}

setBusqueda(e.target.value)} placeholder=“Buscar…” className=“border border-gray-300 rounded-lg px-2 py-2 text-sm flex-1” />

{lista.map((col) => { const turno = obtenerTurno(col.id, fecha); const tieneOverride = !!asignaciones[col.id + “_” + fecha]; const eq = equipos.find((e) => e.id === col.eqId); const claseFondo = tieneOverride ? “bg-amber-50 border border-amber-200” : “hover:bg-gray-50 border border-transparent”; const subtexto = [col.rol, eq ? eq.nombre : null].filter(Boolean).join(” · “); return (

{col.nombre.slice(0, 2).toUpperCase()}

{col.nombre}

{subtexto}

cambiarTurno(col.id, t)} /> {tieneOverride && ( )}

); })} {lista.length === 0 &&

Sin colaboradores

}

); } function TabColaboradores({ colaboradores, setColaboradores, equipos, ciclos, aplicaciones, setAplicaciones }) { const [busqueda, setBusqueda] = useState(””); const [filtroEq, setFiltroEq] = useState(””); const [filtroRol, setFiltroRol] = useState(””); const [formAbierto, setFormAbierto] = useState(false); const [editando, setEditando] = useState(null); const [cicloPara, setCicloPara] = useState(null); const [bulkAbierto, setBulkAbierto] = useState(false); const roles = […new Set(colaboradores.map((c) => c.rol).filter(Boolean))]; const lista = colaboradores.filter((c) => { if (busqueda && !c.nombre.toLowerCase().includes(busqueda.toLowerCase())) return false; if (filtroEq && c.eqId !== filtroEq) return false; if (filtroRol && c.rol !== filtroRol) return false; return true; }); function eliminar(id) { if (!confirm(”¿Eliminar colaborador?”)) return; setColaboradores(colaboradores.filter((c) => c.id !== id)); setAplicaciones(aplicaciones.filter((a) => a.colId !== id)); } return (

👥 Colaboradores ({colaboradores.length})

setBulkAbierto(true)}>📋 Importar { setEditando(null); setFormAbierto(true); }}>+ Agregar

setBusqueda(e.target.value)} placeholder=“Buscar…” className=“border border-gray-300 rounded-lg px-3 py-2 text-sm flex-1 min-w-32” />

{lista.map((col) => { const eq = equipos.find((e) => e.id === col.eqId); const apsCol = aplicaciones.filter((a) => a.colId === col.id).sort((a, b) => b.inicio.localeCompare(a.inicio)); const ap = apsCol[0]; const ciclo = ap ? ciclos.find((c) => c.id === ap.cicloId) : null; return (

{col.nombre.slice(0, 2).toUpperCase()}

{col.nombre}

{col.rol && {col.rol}} {eq && {eq.nombre}} {ciclo && 🔄 {ciclo.nombre}}

setCicloPara(col.id)}>Ciclo { setEditando(col); setFormAbierto(true); }}>✏️ eliminar(col.id)}>🗑

); })} {lista.length === 0 &&

Sin resultados

}

{formAbierto && ( setFormAbierto(false)} /> )} {cicloPara && ( setCicloPara(null)} /> )} {bulkAbierto && ( setBulkAbierto(false)} /> )}

); } function FormColaborador({ item, colaboradores, setColaboradores, equipos, onClose }) { const [nombre, setNombre] = useState(item ? item.nombre : “”); const [rol, setRol] = useState(item ? item.rol : “”); const [eqId, setEqId] = useState(item ? item.eqId : “”); function guardar() { if (!nombre.trim()) return; if (item) { setColaboradores(colaboradores.map((c) => c.id === item.id ? { …c, nombre, rol, eqId } : c)); } else { setColaboradores([…colaboradores, { id: nuevoId(), nombre, rol, eqId }]); } onClose(); } return (

setNombre(e.target.value)} className={ESTILO_INPUT} placeholder=“Nombre completo” /> setRol(e.target.value)} className={ESTILO_INPUT} placeholder=“Ej: Enfermero, Vigilante…” />

{item ? “Guardar” : “Crear”} Cancelar

); } function FormImportar({ colaboradores, setColaboradores, equipos, onClose }) { const [texto, setTexto] = useState(””); const [rol, setRol] = useState(””); const [eqId, setEqId] = useState(””); const nombres = texto.split(”\n”).map((s) => s.trim()).filter((s) => s.length > 0); function guardar() { if (nombres.length === 0) return; setColaboradores([…colaboradores, …nombres.map((n) => ({ id: nuevoId(), nombre: n, rol, eqId }))]); onClose(); } return (

Pega un nombre por línea. El rol y equipo se aplican a todos.

setTexto(e.target.value)} rows={8} className={ESTILO_INPUT} placeholder={“Ana García\nJuan López\nMaría Pérez”} />
</Campo>
<Campo label="Rol (opcional)">
<input value={rol} onChange={(e) => setRol(e.target.value)} className={ESTILO_INPUT} placeholder=“Ej: Enfermero” />
</Campo>
<Campo label="Equipo (opcional)">
<select value={eqId} onChange={(e) => setEqId(e.target.value)} className={ESTILO_INPUT}>
<option value="">Sin equipo</option>
{equipos.map((e) => <option key={e.id} value={e.id}>{e.nombre}</option>)}
</select>
</Campo>
<p className="text-xs font-semibold text-indigo-600">Se agregarán {nombres.length} colaborador(es)</p>
<div className="flex gap-2 pt-2">
<BotonPrimario full onClick={guardar} disabled={nombres.length === 0}>Importar</BotonPrimario>
<BotonSecundario full onClick={onClose}>Cancelar</BotonSecundario>
</div>
</div>
</ModalDialog>
);
}

function FormAsignarCiclo({ colId, colaboradores, ciclos, aplicaciones, setAplicaciones, onClose }) {
const col = colaboradores.find((c) => c.id === colId);
const [cicloId, setCicloId] = useState(””);
const [inicio, setInicio] = useState(fechaToStr(new Date()));

function aplicar() {
if (!cicloId) return;
setAplicaciones([…aplicaciones, { id: nuevoId(), colId, cicloId, inicio }]);
onClose();
}

return (
<ModalDialog title={“Asignar ciclo a “ + (col ? col.nombre : “”)} onClose={onClose}>
<div className="space-y-3">
<Campo label="Ciclo a aplicar">
<select value={cicloId} onChange={(e) => setCicloId(e.target.value)} className={ESTILO_INPUT}>
<option value="">Seleccionar ciclo…</option>
{ciclos.map((c) => <option key={c.id} value={c.id}>{c.nombre} ({c.semanas} sem.)</option>)}
</select>
</Campo>
<Campo label="Fecha de inicio del ciclo">
<input type=“date” value={inicio} onChange={(e) => setInicio(e.target.value)} className={ESTILO_INPUT} />
</Campo>
{ciclos.length === 0 && <p className="text-xs bg-amber-50 text-amber-700 p-2 rounded">Primero crea un ciclo en la pestaña 🔄 Ciclos.</p>}
<div className="flex gap-2 pt-2">
<BotonPrimario full onClick={aplicar} disabled={!cicloId}>Aplicar</BotonPrimario>
<BotonSecundario full onClick={onClose}>Cancelar</BotonSecundario>
</div>
</div>
</ModalDialog>
);
}

function TabEquipos({ colaboradores, setColaboradores, equipos, setEquipos, ciclos, aplicaciones, setAplicaciones }) {
const [formAbierto, setFormAbierto] = useState(false);
const [editando, setEditando] = useState(null);
const [aplicarA, setAplicarA] = useState(null);

function eliminar(id) {
if (!confirm(”¿Eliminar equipo?”)) return;
setEquipos(equipos.filter((e) => e.id !== id));
setColaboradores(colaboradores.map((c) => c.eqId === id ? { …c, eqId: “” } : c));
}

return (
<div>
<div className="flex items-center justify-between mb-3">
<h2 className="font-bold text-gray-700 text-base sm:text-lg">🏷️ Equipos</h2>
<BotonPrimario sm onClick={() => { setEditando(null); setFormAbierto(true); }}>+ Crear equipo</BotonPrimario>
</div>
<div className="space-y-3">
{equipos.map((eq) => {
const miembros = colaboradores.filter((c) => c.eqId === eq.id);
const ciclo = ciclos.find((c) => c.id === eq.cicloId);
return (
<div key={eq.id} className="bg-white border rounded-xl p-4 hover:shadow-sm">
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
<h3 className="font-bold text-gray-800">{eq.nombre}</h3>
<div className="flex gap-2 flex-wrap mt-1">
<span className="text-xs text-gray-500">{miembros.length} miembro(s)</span>
{ciclo && <span className="text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded-full">🔄 {ciclo.nombre}</span>}
</div>
</div>
<div className="flex gap-1 shrink-0">
<BotonSecundario sm onClick={() => setAplicarA(eq.id)}>Aplicar ciclo</BotonSecundario>
<BotonSecundario sm onClick={() => { setEditando(eq); setFormAbierto(true); }}>✏️</BotonSecundario>
<BotonPeligro sm onClick={() => eliminar(eq.id)}>🗑</BotonPeligro>
</div>
</div>
{miembros.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
{miembros.slice(0, 10).map((m) => (
<span key={m.id} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{m.nombre}</span>
))}
{miembros.length > 10 && <span className="text-xs text-gray-400">+{miembros.length - 10} más</span>}
</div>
)}
</div>
);
})}
{equipos.length === 0 && <p className="text-center text-gray-400 py-8">Sin equipos</p>}
</div>
{formAbierto && (
<FormEquipo item={editando} equipos={equipos} setEquipos={setEquipos} ciclos={ciclos} onClose={() => setFormAbierto(false)} />
)}
{aplicarA && (
<FormAplicarCicloEquipo eqId={aplicarA} colaboradores={colaboradores} equipos={equipos} ciclos={ciclos} aplicaciones={aplicaciones} setAplicaciones={setAplicaciones} onClose={() => setAplicarA(null)} />
)}
</div>
);
}

function FormEquipo({ item, equipos, setEquipos, ciclos, onClose }) {
const [nombre, setNombre] = useState(item ? item.nombre : “”);
const [cicloId, setCicloId] = useState(item ? item.cicloId : “”);

return (
<ModalDialog title={item ? “Editar equipo” : “Nuevo equipo”} onClose={onClose}>
<div className="space-y-3">
<Campo label="Nombre del equipo *">
<input value={nombre} onChange={(e) => setNombre(e.target.value)} className={ESTILO_INPUT} placeholder=“Ej: Turno A, Equipo Noche…” />
</Campo>
<Campo label="Ciclo predeterminado">
<select value={cicloId} onChange={(e) => setCicloId(e.target.value)} className={ESTILO_INPUT}>
<option value="">Sin ciclo</option>
{ciclos.map((c) => <option key={c.id} value={c.id}>{c.nombre} ({c.semanas} sem.)</option>)}
</select>
</Campo>
<div className="flex gap-2 pt-2">
<BotonPrimario full onClick={guardar}>{item ? “Guardar” : “Crear”}</BotonPrimario>
<BotonSecundario full onClick={onClose}>Cancelar</BotonSecundario>
</div>
</div>
</ModalDialog>
);
}

function FormAplicarCicloEquipo({ eqId, colaboradores, equipos, ciclos, aplicaciones, setAplicaciones, onClose }) {
const eq = equipos.find((e) => e.id === eqId);
const miembros = colaboradores.filter((c) => c.eqId === eqId);
const [cicloId, setCicloId] = useState(eq && eq.cicloId ? eq.cicloId : “”);
const [inicio, setInicio] = useState(fechaToStr(new Date()));

function aplicar() {
if (!cicloId || miembros.length === 0) return;
setAplicaciones([…aplicaciones, …miembros.map((m) => ({ id: nuevoId(), colId: m.id, cicloId, inicio }))]);
onClose();
}

return (
<ModalDialog title={“Aplicar ciclo a "” + (eq ? eq.nombre : “”) + “"”} onClose={onClose}>
<div className="space-y-3">
<p className="text-xs text-gray-500">Se aplicará a <b>{miembros.length}</b> miembro(s). Los cambios individuales del calendario se conservan.</p>
<Campo label="Ciclo">
<select value={cicloId} onChange={(e) => setCicloId(e.target.value)} className={ESTILO_INPUT}>
<option value="">Seleccionar…</option>
{ciclos.map((c) => <option key={c.id} value={c.id}>{c.nombre} ({c.semanas} sem.)</option>)}
</select>
</Campo>
<Campo label="Fecha de inicio">
<input type=“date” value={inicio} onChange={(e) => setInicio(e.target.value)} className={ESTILO_INPUT} />
</Campo>
{miembros.length === 0 && <p className="text-xs bg-amber-50 text-amber-700 p-2 rounded">Este equipo no tiene miembros todavía.</p>}
<div className="flex gap-2 pt-2">
<BotonPrimario full onClick={aplicar} disabled={!cicloId || miembros.length === 0}>Aplicar a {miembros.length} miembro(s)</BotonPrimario>
<BotonSecundario full onClick={onClose}>Cancelar</BotonSecundario>
</div>
</div>
</ModalDialog>
);
}

function TabCiclos({ ciclos, setCiclos }) {
const [formAbierto, setFormAbierto] = useState(false);
const [editando, setEditando] = useState(null);

function eliminar(id) {
if (!confirm(”¿Eliminar ciclo?”)) return;
setCiclos(ciclos.filter((c) => c.id !== id));
}

return (
<div>
<div className="flex items-center justify-between mb-3">
<h2 className="font-bold text-gray-700 text-base sm:text-lg">🔄 Ciclos</h2>
<BotonPrimario sm onClick={() => { setEditando(null); setFormAbierto(true); }}>+ Crear ciclo</BotonPrimario>
</div>
<div className="space-y-3">
{ciclos.map((ciclo) => {
const filas = [];
for (let w = 0; w < ciclo.semanas; w++) {
const celdas = [];
for (let i = 0; i < 7; i++) {
const t = ciclo.dias[w * 7 + i];
const estilo = t ? { background: TURNOS[t].color + “25”, color: TURNOS[t].color } : { background: “#f3f4f6”, color: “#aaa” };
celdas.push(
<div key={i} className="text-center text-xs py-1.5 rounded font-semibold" style={estilo}>
{t ? TURNOS[t].label.slice(0, 3) : “–”}
</div>
);
}
filas.push(<div key={w} className="grid grid-cols-7 gap-1 mb-1">{celdas}</div>);
}
return (
<div key={ciclo.id} className="bg-white border rounded-xl p-4 hover:shadow-sm">
<div className="flex items-start justify-between mb-3">
<div>
<h3 className="font-bold text-gray-800">{ciclo.nombre}</h3>
<p className="text-xs text-gray-500">{ciclo.semanas} semana(s) · {ciclo.semanas * 7} días</p>
</div>
<div className="flex gap-1">
<BotonSecundario sm onClick={() => { setEditando(ciclo); setFormAbierto(true); }}>✏️</BotonSecundario>
<BotonPeligro sm onClick={() => eliminar(ciclo.id)}>🗑</BotonPeligro>
</div>
</div>
<div className="grid grid-cols-7 gap-1 mb-1">
{DIAS_CORTOS.map((d) => <div key={d} className="text-center text-xs font-bold text-gray-400">{d}</div>)}
</div>
{filas}
</div>
);
})}
{ciclos.length === 0 && <p className="text-center text-gray-400 py-8">Sin ciclos. Crea uno para comenzar.</p>}
</div>
{formAbierto && (
<FormCiclo item={editando} ciclos={ciclos} setCiclos={setCiclos} onClose={() => setFormAbierto(false)} />
)}
</div>
);
}

function FormCiclo({ item, ciclos, setCiclos, onClose }) {
const [nombre, setNombre] = useState(item ? item.nombre : “”);
const [semanas, setSemanas] = useState(item ? item.semanas : 1);
const [dias, setDias] = useState(() => item ? item.dias.slice() : Array(7).fill(null));

function cambiarSemanas(n) {
setSemanas(n);
setDias((prev) => {
const nuevo = Array(n * 7).fill(null);
const max = Math.min(prev.length, nuevo.length);
for (let i = 0; i < max; i++) nuevo[i] = prev[i];
return nuevo;
});
}

function cambiarDia(idx, turno) {
setDias((prev) => {
const nuevo = prev.slice();
nuevo[idx] = turno || null;
return nuevo;
});
}

function guardar() {
if (!nombre.trim()) return;
const cyc = { id: item ? item.id : nuevoId(), nombre, semanas, dias };
if (item) setCiclos(ciclos.map((c) => c.id === item.id ? cyc : c));
else setCiclos([…ciclos, cyc]);
onClose();
}

return (
<ModalDialog title={item ? “Editar ciclo” : “Nuevo ciclo”} onClose={onClose} wide={true}>
<div className="space-y-4">
<div className="flex gap-3">
<div className="flex-1">
<Campo label="Nombre *">
<input value={nombre} onChange={(e) => setNombre(e.target.value)} className={ESTILO_INPUT} placeholder=“Ej: Rotación 2 semanas” />
</Campo>
</div>
<div className="w-28">
<Campo label="Semanas">
<select value={semanas} onChange={(e) => cambiarSemanas(Number(e.target.value))} className={ESTILO_INPUT}>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</select>
</Campo>
</div>
</div>
<div>
<p className="text-xs font-bold text-gray-500 mb-2">Turno de cada día del patrón:</p>
<div className="grid grid-cols-7 gap-1 mb-1">
{DIAS_CORTOS.map((d) => <div key={d} className="text-center text-xs font-bold text-gray-400">{d}</div>)}
</div>
{filasEditor}
</div>
<div className="flex gap-2 pt-2">
<BotonPrimario full onClick={guardar}>{item ? “Guardar cambios” : “Crear ciclo”}</BotonPrimario>
<BotonSecundario full onClick={onClose}>Cancelar</BotonSecundario>
</div>
</div>
</ModalDialog>
);
}

function TabMinimos({ minimos, setMinimos, colaboradores }) {
const [formAbierto, setFormAbierto] = useState(false);
const [editando, setEditando] = useState(null);
const roles = […new Set(colaboradores.map((c) => c.rol).filter(Boolean))];

return (
<div>
<div className="flex items-center justify-between mb-3">
<h2 className="font-bold text-gray-700 text-base sm:text-lg">⚠️ Mínimos de personal</h2>
<BotonPrimario sm onClick={() => { setEditando(null); setFormAbierto(true); }}>+ Agregar regla</BotonPrimario>
</div>
<div className="mb-3 p-3 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-700">
Configura el mínimo de trabajadores por turno, día y rol. Los días que no cumplan se mostrarán en rojo en el calendario.
</div>
<div className="space-y-2">
{minimos.map((m) => {
const diaTexto = m.dia === “todos” ? “Todos los días” : DIAS_LARGOS[m.dia];
const rolTexto = m.rol && m.rol !== “todos” ? “Rol: “ + m.rol : “Todos los roles”;
return (
<div key={m.id} className="bg-white border rounded-xl p-3 flex items-center gap-3">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<Pildora turno={m.turno} />
<span className="text-sm font-semibold text-gray-700">Mínimo: {m.cantidad} persona(s)</span>
</div>
<p className="text-xs text-gray-500 mt-1">{diaTexto} · {rolTexto}</p>
</div>
<div className="flex gap-1 shrink-0">
<BotonSecundario sm onClick={() => { setEditando(m); setFormAbierto(true); }}>✏️</BotonSecundario>
<BotonPeligro sm onClick={() => setMinimos(minimos.filter((x) => x.id !== m.id))}>🗑</BotonPeligro>
</div>
</div>
);
})}
{minimos.length === 0 && <p className="text-center text-gray-400 py-8">Sin reglas configuradas</p>}
</div>
{formAbierto && (
<FormMinimo item={editando} minimos={minimos} setMinimos={setMinimos} roles={roles} onClose={() => setFormAbierto(false)} />
)}
</div>
);
}

function FormMinimo({ item, minimos, setMinimos, roles, onClose }) {
const [turno, setTurno] = useState(item ? item.turno : “mañana”);
const [cantidad, setCantidad] = useState(item ? item.cantidad : 1);
const [dia, setDia] = useState(item && item.dia !== undefined ? item.dia : “todos”);
const [rol, setRol] = useState(item ? item.rol : “todos”);

function guardar() {
const nuevoMin = { id: item ? item.id : nuevoId(), turno, cantidad: Number(cantidad), dia, rol };
if (item) setMinimos(minimos.map((x) => x.id === item.id ? nuevoMin : x));
else setMinimos([…minimos, nuevoMin]);
onClose();
}

return (
<ModalDialog title={item ? “Editar regla” : “Nueva regla de mínimo”} onClose={onClose}>
<div className="space-y-3">
<Campo label="Turno">
<select value={turno} onChange={(e) => setTurno(e.target.value)} className={ESTILO_INPUT}>
{Object.entries(TURNOS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
</select>
</Campo>
<Campo label="Cantidad mínima de personas">
<input type=“number” min=“1” value={cantidad} onChange={(e) => setCantidad(e.target.value)} className={ESTILO_INPUT} />
</Campo>
<Campo label="Día de la semana">
<select value={dia} onChange={(e) => setDia(e.target.value === “todos” ? “todos” : Number(e.target.value))} className={ESTILO_INPUT}>
<option value="todos">Todos los días</option>
{DIAS_LARGOS.map((d, i) => <option key={i} value={i}>{d}</option>)}
</select>
</Campo>
<Campo label="Rol">
<select value={rol} onChange={(e) => setRol(e.target.value)} className={ESTILO_INPUT}>
<option value="todos">Todos los roles</option>
{roles.map((r) => <option key={r} value={r}>{r}</option>)}
</select>
</Campo>
<div className="flex gap-2 pt-2">
<BotonPrimario full onClick={guardar}>{item ? “Guardar” : “Crear regla”}</BotonPrimario>
<BotonSecundario full onClick={onClose}>Cancelar</BotonSecundario>
</div>
</div>
</ModalDialog>
);
}
    <link rel="modulepreload" href="/js/videoclips/index.js">
  </head>
  <body style="font-family:var(--font-family-body);"><header id="global-header" class="code-section fixed top-0 left-0 right-0 z-50 bg-[#000000]/95 backdrop-blur-sm transition-all duration-500">
  <style>
    .header-compact .header-container {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    .header-compact .header-logo {
      transform: scale(0.85);
      margin-bottom: 0 !important;
    }
    .header-compact .header-nav {
      opacity: 0;
      pointer-events: none;
    }
    .header-compact #mobile-nav {
      opacity: 0;
      pointer-events: none;
    }
  </style>
  <div class="max-w-7xl mx-auto px-6 py-6 flex flex-col items-center justify-center header-container transition-all duration-500">
    
    <a href="/" class="flex items-center mb-6 header-logo transition-all duration-500" data-logo="" style="transform-origin: center;">
      <span class="text-xl font-['Outfit'] tracking-widest uppercase"><span class="text-[#c44536]" style="font-weight: 500;">IVÁN</span>
        <span class="text-white" style="font-weight: 500;">GUADARRAMA</span></span>
    </a>

<nav class="hidden lg:flex items-center gap-16 header-nav transition-all duration-500" id="header-nav">
      <a href="/" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-base font-['Roboto'] tracking-widest">Portafolio</a>
      <a href="/coverarts" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-base font-['Roboto'] tracking-widest">CoverArts</a>
      <a href="/videoclips" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-base font-['Roboto'] tracking-widest">Videoclips</a>
      <a href="/contact" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-base font-['Roboto'] tracking-widest">Contacto</a>
    </nav>

<nav class="lg:hidden flex flex-wrap justify-center gap-4 sm:gap-6" id="mobile-nav">
      <a href="/" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-sm font-['Roboto'] tracking-wide">Portafolio</a>
      <a href="/coverarts" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-sm font-['Roboto'] tracking-wide">CoverArts</a>
      <a href="/videoclips" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-sm font-['Roboto'] tracking-wide">Videoclips</a>
      <a href="/contact" class="text-white/70 hover:text-[#c44536] transition-colors duration-300 text-sm font-['Roboto'] tracking-wide">Contacto</a>
    </nav>
  </div>
</header>
<footer id="main-footer" class="code-section bg-[#000000]">
  <div class="max-w-7xl mx-auto px-6 py-16">
    <div class="flex flex-col items-center text-center">
      
      <a href="/" class="inline-block mb-6" data-logo="">
        <span class="text-lg font-['Outfit'] tracking-widest uppercase"><span class="text-[#c44536]" style="font-weight: 500;">Iván</span>
          <span class="text-white" style="font-weight: 500;">GUADARRAMA</span></span>
      </a>

<div class="flex gap-6 mb-8">
        <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="text-[#666666] hover:text-[#c44536] transition-colors duration-300">
          <i class="fa-brands fa-instagram text-xl" aria-hidden="true"></i>
        </a>
        <a href="https://youtube.com" target="_blank" rel="noopener noreferrer" class="text-[#666666] hover:text-[#c44536] transition-colors duration-300">
          <i class="fa-brands fa-youtube text-xl" aria-hidden="true"></i>
        </a>
        <a href="#" class="text-[#666666] hover:text-[#c44536] transition-colors duration-300">
          <i class="fa-solid fa-camera text-xl" aria-hidden="true"></i>
        </a>
      </div>

<div>
        <ul class="space-y-2">
          <li>
            <a href="mailto:hola@ivanguadarrama.com" class="text-[#666666] hover:text-[#c44536] transition-colors duration-300 font-[var(--font-family-body)] text-sm">
              hola@ivanguadarrama.com
            </a>
          </li>
          <li class="text-[#666666] font-[var(--font-family-body)] text-sm">
            +52 55 30 21 72 47
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer><script type="module">
  const __landingsite_initPage = async () => {
    try {
      const module = await import('/js/videoclips/index.js')
      if (module && typeof module.init === 'function') {
        module.init()
      }
    } catch (e) {
      // swallow
    }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', __landingsite_initPage, { once: true })
  } else {
    __landingsite_initPage()
  }
</script><script defer src="https://kit.fontawesome.com/8e98006f77.js" crossorigin="anonymous"></script></body>
</html>

📅 Gestor de Guardias

{MESES[mes]} {año}

👥 Colaboradores ({colaboradores.length})