{"id":26374,"date":"2026-07-14T14:13:36","date_gmt":"2026-07-14T14:13:36","guid":{"rendered":"https:\/\/dancingboulevard.com\/tareas\/"},"modified":"2026-07-20T10:38:57","modified_gmt":"2026-07-20T10:38:57","slug":"tareas","status":"publish","type":"page","link":"https:\/\/dancingboulevard.com\/en\/tareas\/","title":{"rendered":"Tareas"},"content":{"rendered":"\n<div class=\"db-tareas\">\n<style>\n  html, body { background: #1E171B; }\n\n  .db-tareas {\n    --bg: #1E171B;\n    --surface: #292025;\n    --surface-2: #322830;\n    --ink: #F2E9ED;\n    --muted: #A78F9B;\n    --line: #3D3138;\n    --accent: #E06392;\n    --accent-soft: #452834;\n    --accent-ink: #1E171B;\n    --rebe: #A987DB;\n    --rebe-soft: #352945;\n    --manu: #4CBFA0;\n    --manu-soft: #1C3A32;\n    --green: #63BD82;\n    --orange: #EE9A58;\n    --red: #E8756B;\n    --red-soft: #3A2320;\n    --done: #6E5C66;\n    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);\n\n    background: var(--bg);\n    color: var(--ink);\n    font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;\n    line-height: 1.55;\n    min-height: 100vh;\n  }\n  .db-tareas * { box-sizing: border-box; }\n  .db-tareas .wrap {\n    max-width: 760px;\n    margin: 0 auto;\n    padding: 48px 24px 80px;\n  }\n\n  \/* ---------- Cabecera ---------- *\/\n  .db-tareas .eyebrow {\n    text-transform: uppercase;\n    letter-spacing: 0.14em;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent);\n    margin: 0 0 10px;\n  }\n  .db-tareas h1 {\n    font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;\n    font-size: clamp(28px, 5vw, 40px);\n    font-weight: 750;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n    margin: 0 0 8px;\n    color: var(--ink);\n    text-wrap: balance;\n  }\n  .db-tareas .welcome {\n    font-family: Georgia, 'Times New Roman', serif;\n    font-style: italic;\n    font-size: 17px;\n    color: var(--muted);\n    margin: 0 0 24px;\n    max-width: 56ch;\n  }\n\n  \/* ---------- Progreso ---------- *\/\n  .db-tareas .progress-card {\n    background: var(--surface);\n    border: 1px solid var(--line);\n    border-radius: 14px;\n    box-shadow: var(--shadow);\n    padding: 16px 20px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n  .db-tareas .progress-track {\n    flex: 1;\n    height: 10px;\n    border-radius: 999px;\n    background: var(--surface-2);\n    overflow: hidden;\n  }\n  .db-tareas .progress-fill {\n    height: 100%;\n    width: 0%;\n    border-radius: 999px;\n    background: var(--accent);\n    transition: width 0.35s ease;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .db-tareas .progress-fill { transition: none; }\n  }\n  .db-tareas .progress-label {\n    font-variant-numeric: tabular-nums;\n    font-weight: 700;\n    font-size: 15px;\n    white-space: nowrap;\n  }\n  .db-tareas .progress-card.slim { padding: 12px 16px; margin-bottom: 18px; }\n  .db-tareas .progress-card.slim .progress-track { height: 8px; }\n  .db-tareas .progress-card.slim .progress-label { font-size: 14px; }\n\n  \/* ---------- Estado de guardado ---------- *\/\n  .db-tareas .estado {\n    display: flex;\n    align-items: center;\n    gap: 7px;\n    font-size: 12.5px;\n    color: var(--muted);\n    margin: 10px 4px 0;\n    min-height: 20px;\n  }\n  .db-tareas .estado::before {\n    content: \"\";\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: var(--muted);\n    flex-shrink: 0;\n  }\n  .db-tareas .estado.ok::before      { background: var(--green); }\n  .db-tareas .estado.guardando::before { background: var(--orange); }\n  .db-tareas .estado.error {\n    color: var(--red);\n    font-weight: 650;\n    background: var(--red-soft);\n    border-radius: 8px;\n    padding: 6px 10px;\n    margin-left: 0;\n  }\n  .db-tareas .estado.error::before { background: var(--red); }\n\n  \/* ---------- Secciones ---------- *\/\n  .db-tareas section { margin-top: 44px; }\n  .db-tareas h2 {\n    font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;\n    font-size: 20px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    margin: 0 0 4px;\n    color: var(--ink);\n  }\n  .db-tareas .section-note {\n    font-size: 14px;\n    color: var(--muted);\n    margin: 0 0 18px;\n    max-width: 62ch;\n  }\n\n  \/* ---------- Tareas ---------- *\/\n  .db-tareas .tasks,\n  .db-tareas .portales,\n  .db-tareas .anuncios,\n  .db-tareas .salas {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .db-tareas .tasks {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n  .db-tareas .task {\n    background: var(--surface);\n    border: 1px solid var(--line);\n    border-radius: 14px;\n    box-shadow: var(--shadow);\n  }\n  .db-tareas .task label {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    gap: 14px;\n    padding: 16px 18px;\n    cursor: pointer;\n    align-items: start;\n    margin: 0;\n  }\n\n  \/* ---------- Cabecera de tareas con pesta\u00f1as ---------- *\/\n  .db-tareas .tareas-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 4px;\n  }\n  .db-tareas .tabs {\n    display: flex;\n    gap: 2px;\n    background: var(--surface-2);\n    border-radius: 999px;\n    padding: 3px;\n  }\n  .db-tareas .tab {\n    font: inherit;\n    font-size: 13px;\n    font-weight: 650;\n    color: var(--muted);\n    background: transparent;\n    border: 0;\n    border-radius: 999px;\n    padding: 6px 14px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .db-tareas .tab:hover { color: var(--ink); }\n  .db-tareas .tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }\n  .db-tareas .tab.activo {\n    background: var(--surface);\n    color: var(--ink);\n    box-shadow: var(--shadow);\n  }\n  .db-tareas .tab .n {\n    font-variant-numeric: tabular-nums;\n    font-size: 11.5px;\n    font-weight: 700;\n    color: var(--muted);\n    background: var(--bg);\n    border-radius: 999px;\n    padding: 1px 7px;\n  }\n  .db-tareas .tab.activo .n { color: var(--accent); background: var(--accent-soft); }\n\n  \/* ---------- Botones ---------- *\/\n  .db-tareas .btn-nueva {\n    font: inherit;\n    font-size: 14px;\n    font-weight: 650;\n    color: var(--muted);\n    background: transparent;\n    border: 1.5px dashed var(--line);\n    border-radius: 14px;\n    padding: 12px 16px;\n    width: 100%;\n    cursor: pointer;\n    margin-bottom: 12px;\n  }\n  .db-tareas .btn-nueva:hover { color: var(--accent); border-color: var(--accent); }\n  .db-tareas .btn-nueva:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }\n  .db-tareas .btn-pri,\n  .db-tareas .btn-sec {\n    font: inherit;\n    font-size: 13.5px;\n    font-weight: 650;\n    border-radius: 9px;\n    padding: 8px 16px;\n    cursor: pointer;\n    border: 1px solid transparent;\n  }\n  .db-tareas .btn-pri { background: var(--accent); color: var(--accent-ink); }\n  .db-tareas .btn-pri:hover { filter: brightness(1.08); }\n  .db-tareas .btn-pri:disabled { opacity: 0.5; cursor: progress; }\n  .db-tareas .btn-sec { background: transparent; color: var(--muted); border-color: var(--line); }\n  .db-tareas .btn-sec:hover { color: var(--ink); border-color: var(--muted); }\n  .db-tareas .btn-pri:focus-visible,\n  .db-tareas .btn-sec:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }\n\n  \/* ---------- Formulario de tarea ---------- *\/\n  .db-tareas .form-tarea {\n    background: var(--surface);\n    border: 1px solid var(--accent);\n    border-radius: 14px;\n    box-shadow: var(--shadow);\n    padding: 16px 18px;\n    margin-bottom: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n  .db-tareas .form-tarea input[type=\"text\"],\n  .db-tareas .form-tarea textarea,\n  .db-tareas .form-tarea select {\n    font: inherit;\n    font-size: 14px;\n    color: var(--ink);\n    background: var(--bg);\n    border: 1px solid var(--line);\n    border-radius: 9px;\n    padding: 9px 12px;\n    width: 100%;\n    resize: vertical;\n  }\n  .db-tareas .form-tarea input[type=\"text\"] { font-weight: 650; }\n  .db-tareas .form-tarea ::placeholder { color: var(--muted); font-weight: 400; }\n  .db-tareas .form-tarea input:focus,\n  .db-tareas .form-tarea textarea:focus,\n  .db-tareas .form-tarea select:focus {\n    outline: none;\n    border-color: var(--accent);\n    box-shadow: 0 0 0 3px var(--accent-soft);\n  }\n  .db-tareas .form-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    flex-wrap: wrap;\n  }\n  .db-tareas .form-row select { width: auto; min-width: 160px; }\n  .db-tareas .form-btns { display: flex; gap: 8px; margin-left: auto; }\n\n  \/* ---------- Tarea (fila) ---------- *\/\n  .db-tareas .task-main {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: 14px;\n    padding: 16px 18px;\n    align-items: start;\n  }\n  .db-tareas .task-body { min-width: 0; }\n  .db-tareas .task-check { cursor: pointer; }\n  .db-tareas .task-acciones {\n    display: flex;\n    gap: 2px;\n    flex-shrink: 0;\n  }\n  .db-tareas .icono {\n    background: transparent;\n    border: 0;\n    border-radius: 8px;\n    padding: 6px;\n    cursor: pointer;\n    color: var(--muted);\n    display: grid;\n    place-content: center;\n    line-height: 0;\n  }\n  .db-tareas .icono:hover { color: var(--ink); background: var(--surface-2); }\n  .db-tareas .icono.borrar:hover { color: var(--red); background: var(--red-soft); }\n  .db-tareas .icono:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }\n  .db-tareas .icono svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n\n  .db-tareas .vacio {\n    text-align: center;\n    color: var(--muted);\n    font-size: 14px;\n    background: var(--surface);\n    border: 1px dashed var(--line);\n    border-radius: 14px;\n    padding: 28px 20px;\n    margin: 0;\n  }\n  .db-tareas input[type=\"checkbox\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    width: 24px;\n    height: 24px;\n    margin: 2px 0 0;\n    border: 2px solid var(--muted);\n    border-radius: 8px;\n    background: transparent;\n    cursor: pointer;\n    display: grid;\n    place-content: center;\n    flex-shrink: 0;\n  }\n  .db-tareas input[type=\"checkbox\"]:focus-visible {\n    outline: 3px solid var(--accent);\n    outline-offset: 2px;\n  }\n  .db-tareas input[type=\"checkbox\"]:checked {\n    background: var(--accent);\n    border-color: var(--accent);\n  }\n  .db-tareas input[type=\"checkbox\"]:checked::after {\n    content: \"\";\n    width: 12px;\n    height: 7px;\n    border-left: 2.5px solid var(--accent-ink);\n    border-bottom: 2.5px solid var(--accent-ink);\n    transform: rotate(-45deg) translate(1px, -1px);\n  }\n  .db-tareas input[type=\"checkbox\"]:disabled { opacity: 0.45; cursor: progress; }\n  .db-tareas .task-title {\n    font-weight: 650;\n    font-size: 15.5px;\n    line-height: 1.35;\n  }\n  .db-tareas .task-desc {\n    display: block;\n    font-size: 13.5px;\n    color: var(--muted);\n    margin-top: 3px;\n    max-width: 58ch;\n  }\n  .db-tareas .task-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 9px;\n  }\n  .db-tareas .task.done .task-title {\n    text-decoration: line-through;\n    text-decoration-thickness: 1.5px;\n    color: var(--done);\n  }\n  .db-tareas .task.done .task-desc { color: var(--done); }\n\n  .db-tareas .chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 11.5px;\n    font-weight: 650;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    padding: 3px 10px;\n    border-radius: 999px;\n  }\n  .db-tareas .chip::before {\n    content: \"\";\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: currentColor;\n  }\n  .db-tareas .chip.yo   { color: var(--accent); background: var(--accent-soft); }\n  .db-tareas .chip.rebe { color: var(--rebe);   background: var(--rebe-soft); }\n  .db-tareas .chip.manu { color: var(--manu);   background: var(--manu-soft); }\n\n  \/* ---------- Ficha del anuncio ---------- *\/\n  .db-tareas .brief {\n    background: var(--surface);\n    border: 1px solid var(--line);\n    border-left: 4px solid var(--accent);\n    border-radius: 14px;\n    box-shadow: var(--shadow);\n    padding: 18px 20px;\n    margin-bottom: 16px;\n  }\n  .db-tareas .brief h3 {\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--accent);\n    margin: 0 0 10px;\n  }\n  .db-tareas .brief ul {\n    margin: 0;\n    padding-left: 18px;\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .db-tareas .brief li::marker { color: var(--muted); }\n  .db-tareas .datos {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 10px;\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid var(--line);\n  }\n  .db-tareas .dato {\n    background: var(--surface-2);\n    border-radius: 10px;\n    padding: 8px 12px;\n    font-size: 13.5px;\n    line-height: 1.3;\n  }\n  .db-tareas .dato b {\n    display: block;\n    font-size: 10.5px;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--muted);\n    font-weight: 650;\n  }\n  .db-tareas .dato span { font-weight: 600; user-select: all; }\n\n  \/* ---------- Portales ---------- *\/\n  .db-tareas .portales {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n  .db-tareas .portal {\n    background: var(--surface);\n    border: 1px solid var(--line);\n    border-radius: 14px;\n    box-shadow: var(--shadow);\n    padding: 16px 18px;\n    display: grid;\n    grid-template-columns: 200px 1fr;\n    gap: 16px;\n    align-items: start;\n  }\n  @media (max-width: 560px) {\n    .db-tareas .portal { grid-template-columns: 1fr; gap: 10px; }\n  }\n  .db-tareas .portal-name {\n    font-weight: 700;\n    font-size: 15px;\n    line-height: 1.3;\n    word-break: break-all;\n  }\n  .db-tareas .portal-name a {\n    color: var(--ink);\n    text-decoration: none;\n    border-bottom: 1px solid var(--line);\n  }\n  .db-tareas .portal-name a:hover { color: var(--accent); border-color: var(--accent); }\n  .db-tareas .portal-count {\n    display: block;\n    font-size: 11.5px;\n    font-weight: 650;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--muted);\n    font-variant-numeric: tabular-nums;\n    margin-top: 4px;\n  }\n  .db-tareas .anuncios {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .db-tareas .anuncio label {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 7px 10px;\n    border-radius: 10px;\n    cursor: pointer;\n    font-size: 14.5px;\n    font-weight: 600;\n    margin: 0;\n  }\n  .db-tareas .anuncio label:hover { background: var(--surface-2); }\n  .db-tareas .anuncio input[type=\"checkbox\"] {\n    width: 20px;\n    height: 20px;\n    border-radius: 6px;\n    margin: 0;\n  }\n  .db-tareas .anuncio input[type=\"checkbox\"]:checked::after {\n    width: 10px;\n    height: 6px;\n    border-left-width: 2px;\n    border-bottom-width: 2px;\n  }\n  .db-tareas .anuncio.done label {\n    color: var(--done);\n    text-decoration: line-through;\n    text-decoration-thickness: 1.5px;\n  }\n\n  \/* ---------- Enlace de cada anuncio ---------- *\/\n  .db-tareas .enlace {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 2px 0 0 42px;\n  }\n  .db-tareas .enlace input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--ink);\n    background: var(--bg);\n    border: 1px solid var(--line);\n    border-radius: 8px;\n    padding: 6px 10px;\n  }\n  .db-tareas .enlace input::placeholder { color: var(--muted); font-weight: 400; }\n  .db-tareas .enlace input:hover { border-color: var(--muted); }\n  .db-tareas .enlace input:focus {\n    outline: none;\n    border-color: var(--accent);\n    box-shadow: 0 0 0 3px var(--accent-soft);\n  }\n  .db-tareas .enlace input:disabled { opacity: 0.45; }\n  .db-tareas .enlace input.guardado { border-color: var(--green); }\n  .db-tareas .enlace input.fallo { border-color: var(--red); }\n  .db-tareas .enlace-abrir {\n    font-size: 12px;\n    font-weight: 650;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: var(--accent);\n    text-decoration: none;\n    white-space: nowrap;\n    padding: 5px 9px;\n    border-radius: 8px;\n    background: var(--accent-soft);\n  }\n  .db-tareas .enlace-abrir:hover { color: var(--ink); }\n  .db-tareas .enlace-abrir:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }\n  .db-tareas .enlace-abrir[hidden] { display: none; }\n\n  \/* ---------- Salas ---------- *\/\n  .db-tareas .salas {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n    gap: 14px;\n  }\n  .db-tareas .sala {\n    background: var(--surface);\n    border: 1px solid var(--line);\n    border-radius: 14px;\n    box-shadow: var(--shadow);\n    overflow: hidden;\n  }\n  .db-tareas .sala-foto {\n    position: relative;\n    aspect-ratio: 4 \/ 3;\n    background: var(--surface-2);\n  }\n  .db-tareas .sala-foto img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n  .db-tareas .sala-num {\n    position: absolute;\n    top: 10px;\n    left: 10px;\n    width: 36px;\n    height: 36px;\n    border-radius: 10px;\n    display: grid;\n    place-content: center;\n    font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;\n    font-weight: 750;\n    font-size: 17px;\n    background: var(--surface);\n    color: var(--ink);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\n  }\n  .db-tareas .sala-num.verde   { background: var(--green);  color: #FFFFFF; }\n  .db-tareas .sala-num.naranja { background: var(--orange); color: #FFFFFF; }\n  .db-tareas .sala-body { padding: 12px 14px 14px; }\n  .db-tareas .sala-name {\n    display: block;\n    font-weight: 650;\n    font-size: 14.5px;\n    line-height: 1.3;\n  }\n  .db-tareas .sala-hint {\n    display: block;\n    font-size: 12.5px;\n    color: var(--muted);\n    margin-top: 2px;\n  }\n\n  \/* ---------- Pie ---------- *\/\n  .db-tareas footer {\n    margin-top: 52px;\n    padding-top: 20px;\n    border-top: 1px solid var(--line);\n    font-size: 13px;\n    color: var(--muted);\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n<\/style>\n\n<div class=\"wrap\">\n  <header>\n    <p class=\"eyebrow\">Dancing Boulevard \u00b7 Recepci\u00f3n<\/p>\n    <h1>Plan de onboarding \u2014 nueva recepcionista<\/h1>\n    <p class=\"welcome\">Todo lo que necesita aprender en sus primeras semanas: formaci\u00f3n, anuncios en portales y organizaci\u00f3n de las salas. Marca cada tarea al completarla.<\/p>\n    <div class=\"progress-card\">\n      <div class=\"progress-track\"><div class=\"progress-fill\" id=\"db-fill\"><\/div><\/div>\n      <div class=\"progress-label\" id=\"db-count\">\u2014 \/ 9<\/div>\n    <\/div>\n    <p class=\"estado\" id=\"db-estado\">Cargando el progreso\u2026<\/p>\n  <\/header>\n\n  <section>\n    <div class=\"tareas-head\">\n      <h2>Tareas de formaci\u00f3n<\/h2>\n      <div class=\"tabs\" role=\"tablist\">\n        <button type=\"button\" class=\"tab activo\" data-vista=\"pendientes\" role=\"tab\">Pendientes <span class=\"n\" id=\"db-n-pend\">\u2014<\/span><\/button>\n        <button type=\"button\" class=\"tab\" data-vista=\"completadas\" role=\"tab\">Completadas <span class=\"n\" id=\"db-n-comp\">\u2014<\/span><\/button>\n      <\/div>\n    <\/div>\n    <p class=\"section-note\">Cada tarea tiene un responsable de prepararla o ense\u00f1arla. Sin etiqueta, la formaci\u00f3n se hace en recepci\u00f3n durante el d\u00eda a d\u00eda. Al completar una tarea desaparece de aqu\u00ed y pasa a \u00abCompletadas\u00bb.<\/p>\n\n    <div id=\"db-zona-nueva\"><\/div>\n    <button type=\"button\" class=\"btn-nueva\" id=\"db-btn-nueva\">+ Nueva tarea<\/button>\n\n    <ul class=\"tasks\" id=\"db-lista-tareas\"><\/ul>\n    <p class=\"vacio\" id=\"db-vacio\" hidden><\/p>\n  <\/section>\n\n  <section>\n    <h2>Anuncios en portales<\/h2>\n    <p class=\"section-note\">Cada portal lleva sus propios anuncios: uno por estilo. Marca cada anuncio seg\u00fan lo vayas publicando y pega debajo su enlace, para tenerlos todos localizados.<\/p>\n\n    <div class=\"progress-card slim\">\n      <div class=\"progress-track\"><div class=\"progress-fill\" id=\"db-fill-anuncios\"><\/div><\/div>\n      <div class=\"progress-label\" id=\"db-count-anuncios\">\u2014 \/ 17<\/div>\n    <\/div>\n\n    <div class=\"brief\">\n      <h3>C\u00f3mo escribir cada anuncio<\/h3>\n      <ul>\n        <li><strong>No pongas horarios<\/strong> \u2014 los vamos modificando y el anuncio se queda desactualizado.<\/li>\n        <li>La informaci\u00f3n de cada baile la tienes en el <strong>WhatsApp de la escuela<\/strong>.<\/li>\n        <li>Incluye siempre tel\u00e9fono, direcci\u00f3n y correo (aqu\u00ed abajo, listos para copiar).<\/li>\n        <li>A\u00f1ade lo que encaje con ese estilo en concreto: nivel, para qui\u00e9n es, qu\u00e9 se aprende, ambiente de la clase.<\/li>\n      <\/ul>\n      <div class=\"datos\">\n        <div class=\"dato\"><b>Tel\u00e9fono<\/b><span>+34 634 12 50 52<\/span><\/div>\n        <div class=\"dato\"><b>Direcci\u00f3n<\/b><span>Calle de Andorra 65, 28043 Madrid<\/span><\/div>\n        <div class=\"dato\"><b>Correo<\/b><span>escuela@dancingboulevard.com<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <ul class=\"portales\">\n      <li class=\"portal\">\n        <div class=\"portal-name\">\n          <a href=\"https:\/\/www.milanuncios.com\" target=\"_blank\" rel=\"noopener nofollow\">milanuncios.com<\/a>\n          <span class=\"portal-count\" data-portal-count>0 \/ 3<\/span>\n        <\/div>\n        <ul class=\"anuncios\">\n          <li class=\"anuncio\" data-id=\"mil-latinos\"><label><input type=\"checkbox\" disabled><span>Ritmos latinos<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Ritmos latinos\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"mil-swing\"><label><input type=\"checkbox\" disabled><span>Swing &amp; Lindy Hop<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Swing y Lindy Hop\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"mil-nupciales\"><label><input type=\"checkbox\" disabled><span>Bailes nupciales<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Bailes nupciales\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/li>\n      <li class=\"portal\">\n        <div class=\"portal-name\">\n          <a href=\"https:\/\/www.eanuncios.com\" target=\"_blank\" rel=\"noopener nofollow\">eanuncios.com<\/a>\n          <span class=\"portal-count\" data-portal-count>0 \/ 3<\/span>\n        <\/div>\n        <ul class=\"anuncios\">\n          <li class=\"anuncio\" data-id=\"ea-kizomba\"><label><input type=\"checkbox\" disabled><span>Kizomba<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Kizomba\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"ea-urbano\"><label><input type=\"checkbox\" disabled><span>Urbano<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Urbano\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"ea-pilates\"><label><input type=\"checkbox\" disabled><span>Pilates<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Pilates\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/li>\n      <li class=\"portal\">\n        <div class=\"portal-name\">\n          <a href=\"https:\/\/www.tablondeanuncios.com\" target=\"_blank\" rel=\"noopener nofollow\">tablondeanuncios.com<\/a>\n          <span class=\"portal-count\" data-portal-count>0 \/ 3<\/span>\n        <\/div>\n        <ul class=\"anuncios\">\n          <li class=\"anuncio\" data-id=\"tab-kpop\"><label><input type=\"checkbox\" disabled><span>K-Pop<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de K-Pop\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"tab-shuffle\"><label><input type=\"checkbox\" disabled><span>Shuffle<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Shuffle\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"tab-kungfu\"><label><input type=\"checkbox\" disabled><span>Kung Fu<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Kung Fu\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/li>\n      <li class=\"portal\">\n        <div class=\"portal-name\">\n          <a href=\"https:\/\/www.anunciosparatodos.es\" target=\"_blank\" rel=\"noopener nofollow\">anunciosparatodos.es<\/a>\n          <span class=\"portal-count\" data-portal-count>0 \/ 3<\/span>\n        <\/div>\n        <ul class=\"anuncios\">\n          <li class=\"anuncio\" data-id=\"apt-zumba\"><label><input type=\"checkbox\" disabled><span>Zumba<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Zumba\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"apt-team\"><label><input type=\"checkbox\" disabled><span>Team Building<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Team Building\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"apt-defensa\"><label><input type=\"checkbox\" disabled><span>Defensa personal<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Defensa personal\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/li>\n      <li class=\"portal\">\n        <div class=\"portal-name\">\n          <a href=\"https:\/\/www.locanto.es\" target=\"_blank\" rel=\"noopener nofollow\">locanto.es<\/a>\n          <span class=\"portal-count\" data-portal-count>0 \/ 3<\/span>\n        <\/div>\n        <ul class=\"anuncios\">\n          <li class=\"anuncio\" data-id=\"loc-break\"><label><input type=\"checkbox\" disabled><span>Breakdance<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Breakdance\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"loc-particulares\"><label><input type=\"checkbox\" disabled><span>Clases particulares<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Clases particulares\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"loc-jujitsu\"><label><input type=\"checkbox\" disabled><span>Jujitsu<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Jujitsu\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/li>\n      <li class=\"portal\">\n        <div class=\"portal-name\">\n          <a href=\"https:\/\/anuncios.es\/\" target=\"_blank\" rel=\"noopener nofollow\">anuncios.es<\/a>\n          <span class=\"portal-count\" data-portal-count>0 \/ 2<\/span>\n        <\/div>\n        <ul class=\"anuncios\">\n          <li class=\"anuncio\" data-id=\"anu-flamenco\"><label><input type=\"checkbox\" disabled><span>Flamenco &amp; Sevillanas<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Flamenco y Sevillanas\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n          <li class=\"anuncio\" data-id=\"anu-online\"><label><input type=\"checkbox\" disabled><span>Clases online<\/span><\/label>\n            <div class=\"enlace\">\n              <input type=\"url\" inputmode=\"url\" placeholder=\"Pega aqu\u00ed el enlace del anuncio\" aria-label=\"Enlace del anuncio de Clases online\" disabled>\n              <a class=\"enlace-abrir\" href=\"#\" target=\"_blank\" rel=\"noopener nofollow\" hidden>Abrir<\/a>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/li>\n    <\/ul>\n  <\/section>\n\n  <section>\n    <h2>Organizaci\u00f3n de salas<\/h2>\n    <p class=\"section-note\">Tiene que aprenderse qu\u00e9 sala es cada una. Esta es la chuleta, con foto:<\/p>\n    <ul class=\"salas\">\n      <li class=\"sala\">\n        <div class=\"sala-foto\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-1-recepcion-izquierda.jpg\" alt=\"Sala 1, la de recepci\u00f3n a la izquierda: paredes turquesa y suelo de madera clara\" loading=\"lazy\" width=\"900\" height=\"1200\">\n          <span class=\"sala-num\">1<\/span>\n        <\/div>\n        <div class=\"sala-body\">\n          <span class=\"sala-name\">Recepci\u00f3n \u2014 izquierda<\/span>\n          <span class=\"sala-hint\">La de la izquierda seg\u00fan entras<\/span>\n        <\/div>\n      <\/li>\n      <li class=\"sala\">\n        <div class=\"sala-foto\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-2-recepcion-derecha.jpg\" alt=\"Sala 2, la de recepci\u00f3n a la derecha: paredes turquesa con espejos y el logo de la escuela\" loading=\"lazy\" width=\"900\" height=\"675\">\n          <span class=\"sala-num\">2<\/span>\n        <\/div>\n        <div class=\"sala-body\">\n          <span class=\"sala-name\">Recepci\u00f3n \u2014 derecha<\/span>\n          <span class=\"sala-hint\">La de la derecha seg\u00fan entras<\/span>\n        <\/div>\n      <\/li>\n      <li class=\"sala\">\n        <div class=\"sala-foto\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-3-la-del-codigo.jpg\" alt=\"Sala 3, la del c\u00f3digo: sala grande con columnas y suelo de madera clara\" loading=\"lazy\" width=\"900\" height=\"1200\">\n          <span class=\"sala-num\">3<\/span>\n        <\/div>\n        <div class=\"sala-body\">\n          <span class=\"sala-name\">La del c\u00f3digo<\/span>\n          <span class=\"sala-hint\">Se abre con c\u00f3digo<\/span>\n        <\/div>\n      <\/li>\n      <li class=\"sala\">\n        <div class=\"sala-foto\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-4-la-verde.jpg\" alt=\"Sala 4, la verde: suelo verde, l\u00e1mparas colgantes y ventana al fondo\" loading=\"lazy\" width=\"900\" height=\"1200\">\n          <span class=\"sala-num verde\">4<\/span>\n        <\/div>\n        <div class=\"sala-body\">\n          <span class=\"sala-name\">La sala verde<\/span>\n          <span class=\"sala-hint\">Se reconoce por el color<\/span>\n        <\/div>\n      <\/li>\n      <li class=\"sala\">\n        <div class=\"sala-foto\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-5-la-naranja-de-abajo.jpg\" alt=\"Sala 5, la naranja de abajo: suelo naranja, columnas y espejos\" loading=\"lazy\" width=\"900\" height=\"675\">\n          <span class=\"sala-num naranja\">5<\/span>\n        <\/div>\n        <div class=\"sala-body\">\n          <span class=\"sala-name\">La naranja de abajo<\/span>\n          <span class=\"sala-hint\">Planta de abajo<\/span>\n        <\/div>\n      <\/li>\n      <li class=\"sala\">\n        <div class=\"sala-foto\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-6-la-pequena.jpg\" alt=\"Sala 6, la peque\u00f1a: pared magenta con espejo y suelo granate\" loading=\"lazy\" width=\"900\" height=\"675\">\n          <span class=\"sala-num\">6<\/span>\n        <\/div>\n        <div class=\"sala-body\">\n          <span class=\"sala-name\">La peque\u00f1a<\/span>\n          <span class=\"sala-hint\">La sala m\u00e1s peque\u00f1a<\/span>\n        <\/div>\n      <\/li>\n    <\/ul>\n  <\/section>\n\n  <footer>\n    <span>Dancing Boulevard \u00b7 Calle de Andorra 65, Madrid<\/span>\n    <span>Responsables: Yo \u00b7 Rebe \u00b7 Manu<\/span>\n  <\/footer>\n<\/div>\n<\/div>\n\n<script>\n(function () {\n  var API = \"\/wp-json\/db-tareas\/v1\/estado\";\n  var API_ENLACE = \"\/wp-json\/db-tareas\/v1\/enlace\";\n  var API_TAREAS = \"\/wp-json\/db-tareas\/v1\/tareas\";\n  var TOKEN = \"db-tareas-2026-recepcion\";\n\n  var RESPONSABLES = { yo: \"Yo\", rebe: \"Rebe\", manu: \"Manu\" };\n\n  var estado = document.getElementById(\"db-estado\");\n  var lista = document.getElementById(\"db-lista-tareas\");\n  var vacio = document.getElementById(\"db-vacio\");\n  var zonaNueva = document.getElementById(\"db-zona-nueva\");\n  var btnNueva = document.getElementById(\"db-btn-nueva\");\n  var tabs = [].slice.call(document.querySelectorAll(\".db-tareas .tab\"));\n\n  var anuncios = [].slice.call(document.querySelectorAll(\".db-tareas .anuncio\"));\n  var portales = [].slice.call(document.querySelectorAll(\".db-tareas .portal\"));\n\n  var tareas = [];\n  var vista = \"pendientes\";\n  var pendientes = 0;\n\n  function aviso(texto, clase) {\n    estado.textContent = texto;\n    estado.className = \"estado\" + (clase ? \" \" + clase : \"\");\n  }\n\n  function cabeceras() {\n    return { \"Content-Type\": \"application\/json\", \"X-DB-Tareas-Token\": TOKEN };\n  }\n\n  \/* ---------------- Anuncios: casillas y enlaces ---------------- *\/\n\n  function medirAnuncios() {\n    var hechos = anuncios.filter(function (a) { return a.classList.contains(\"done\"); }).length;\n    document.getElementById(\"db-fill-anuncios\").style.width = (hechos \/ anuncios.length * 100) + \"%\";\n    document.getElementById(\"db-count-anuncios\").textContent = hechos + \" \/ \" + anuncios.length;\n    portales.forEach(function (portal) {\n      var propios = [].slice.call(portal.querySelectorAll(\".anuncio\"));\n      var n = propios.filter(function (a) { return a.classList.contains(\"done\"); }).length;\n      portal.querySelector(\"[data-portal-count]\").textContent = n + \" \/ \" + propios.length;\n    });\n  }\n\n  function guardarAnuncio(item, casilla) {\n    var marcada = casilla.checked;\n    item.classList.toggle(\"done\", marcada);\n    medirAnuncios();\n\n    pendientes++;\n    aviso(\"Guardando\u2026\", \"guardando\");\n\n    fetch(API, {\n      method: \"POST\",\n      headers: cabeceras(),\n      body: JSON.stringify({ id: item.getAttribute(\"data-id\"), marcada: marcada })\n    })\n      .then(function (r) {\n        if (!r.ok) { throw new Error(r.status); }\n        pendientes--;\n        if (pendientes === 0) { aviso(\"Guardado. Lo ve todo el equipo.\", \"ok\"); }\n      })\n      .catch(function () {\n        pendientes--;\n        casilla.checked = !marcada;\n        item.classList.toggle(\"done\", !marcada);\n        medirAnuncios();\n        aviso(\"No se ha podido guardar. Revisa la conexi\u00f3n y vuelve a marcarla.\", \"error\");\n      });\n  }\n\n  function pintarEnlace(campo, abrir, url) {\n    if (url) {\n      campo.value = url;\n      abrir.href = url;\n      abrir.hidden = false;\n    } else {\n      abrir.hidden = true;\n    }\n  }\n\n  function guardarEnlace(item, campo, abrir) {\n    var url = campo.value.trim();\n\n    \/\/ `change` y `blur` se disparan juntos al salir del campo: guarda una sola vez.\n    if (url === campo.getAttribute(\"data-guardado\") || url === campo.getAttribute(\"data-enviando\")) { return; }\n    campo.setAttribute(\"data-enviando\", url);\n\n    pendientes++;\n    aviso(\"Guardando\u2026\", \"guardando\");\n    campo.classList.remove(\"guardado\", \"fallo\");\n\n    fetch(API_ENLACE, {\n      method: \"POST\",\n      headers: cabeceras(),\n      body: JSON.stringify({ id: item.getAttribute(\"data-id\"), url: url })\n    })\n      .then(function (r) {\n        return r.json().then(function (datos) {\n          if (!r.ok) { throw new Error(datos.message || \"Error\"); }\n          return datos;\n        });\n      })\n      .then(function (datos) {\n        pendientes--;\n        campo.removeAttribute(\"data-enviando\");\n        campo.setAttribute(\"data-guardado\", datos.url);\n        pintarEnlace(campo, abrir, datos.url);\n        campo.classList.add(\"guardado\");\n        setTimeout(function () { campo.classList.remove(\"guardado\"); }, 1500);\n        if (pendientes === 0) { aviso(\"Guardado. Lo ve todo el equipo.\", \"ok\"); }\n      })\n      .catch(function (e) {\n        pendientes--;\n        campo.removeAttribute(\"data-enviando\");\n        campo.classList.add(\"fallo\");\n        aviso(e.message || \"No se ha podido guardar el enlace.\", \"error\");\n      });\n  }\n\n  \/* ---------------- Tareas: crear, editar, completar y borrar ---------------- *\/\n\n  \/\/ El servidor tarda ~2 s en responder: marcar y borrar se pintan al momento\n  \/\/ y `revertir` deshace el cambio si la petici\u00f3n acaba fallando.\n  function mutar(url, metodo, cuerpo, revertir) {\n    pendientes++;\n    aviso(\"Guardando\u2026\", \"guardando\");\n\n    return fetch(url, {\n      method: metodo,\n      headers: cabeceras(),\n      body: cuerpo ? JSON.stringify(cuerpo) : undefined\n    })\n      .then(function (r) {\n        return r.json().then(function (datos) {\n          if (!r.ok) { throw new Error(datos.message || \"No se ha podido guardar.\"); }\n          return datos;\n        });\n      })\n      .then(function (datos) {\n        pendientes--;\n        tareas = datos.tareas || [];\n        pintarTareas();\n        if (pendientes === 0) { aviso(\"Guardado. Lo ve todo el equipo.\", \"ok\"); }\n        return datos;\n      })\n      .catch(function (e) {\n        pendientes--;\n        if (revertir) { revertir(); }\n        pintarTareas();\n        aviso(e.message || \"No se ha podido guardar.\", \"error\");\n        throw e;\n      });\n  }\n\n  function formulario(valores, alGuardar, alCancelar) {\n    var f = document.createElement(\"form\");\n    f.className = \"form-tarea\";\n    f.innerHTML =\n      '<input class=\"f-titulo\" type=\"text\" maxlength=\"200\" placeholder=\"T\u00edtulo de la tarea\" required>' +\n      '<textarea class=\"f-desc\" maxlength=\"1000\" rows=\"2\" placeholder=\"Descripci\u00f3n (opcional)\"><\/textarea>' +\n      '<div class=\"form-row\">' +\n        '<select class=\"f-resp\" aria-label=\"Responsable\">' +\n          '<option value=\"\">Sin responsable<\/option>' +\n          '<option value=\"yo\">Yo<\/option>' +\n          '<option value=\"rebe\">Rebe<\/option>' +\n          '<option value=\"manu\">Manu<\/option>' +\n        '<\/select>' +\n        '<div class=\"form-btns\">' +\n          '<button type=\"button\" class=\"btn-sec f-cancelar\">Cancelar<\/button>' +\n          '<button type=\"submit\" class=\"btn-pri\">Guardar<\/button>' +\n        '<\/div>' +\n      '<\/div>';\n\n    f.querySelector(\".f-titulo\").value = valores.titulo || \"\";\n    f.querySelector(\".f-desc\").value = valores.desc || \"\";\n    f.querySelector(\".f-resp\").value = valores.resp || \"\";\n\n    f.addEventListener(\"submit\", function (ev) {\n      ev.preventDefault();\n      var titulo = f.querySelector(\".f-titulo\").value.trim();\n      if (!titulo) { f.querySelector(\".f-titulo\").focus(); return; }\n      var boton = f.querySelector(\".btn-pri\");\n      boton.disabled = true;\n      boton.textContent = \"Guardando\u2026\";\n      alGuardar({\n        titulo: titulo,\n        desc: f.querySelector(\".f-desc\").value.trim(),\n        resp: f.querySelector(\".f-resp\").value\n      }, f);\n    });\n\n    f.querySelector(\".f-cancelar\").addEventListener(\"click\", alCancelar);\n    return f;\n  }\n\n  var ICONO_EDITAR = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\"\/><\/svg>';\n  var ICONO_BORRAR = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 6h18\"\/><path d=\"M8 6V4h8v2\"\/><path d=\"M19 6l-1 14H6L5 6\"\/><path d=\"M10 11v6M14 11v6\"\/><\/svg>';\n\n  function nodoTarea(t) {\n    var li = document.createElement(\"li\");\n    li.className = \"task\" + (t.completada ? \" done\" : \"\");\n    li.setAttribute(\"data-id\", t.id);\n\n    var main = document.createElement(\"div\");\n    main.className = \"task-main\";\n\n    var casilla = document.createElement(\"input\");\n    casilla.type = \"checkbox\";\n    casilla.className = \"task-check\";\n    casilla.checked = !!t.completada;\n    casilla.setAttribute(\"aria-label\", (t.completada ? \"Marcar como pendiente: \" : \"Marcar como completada: \") + t.titulo);\n\n    var body = document.createElement(\"div\");\n    body.className = \"task-body\";\n\n    var titulo = document.createElement(\"span\");\n    titulo.className = \"task-title\";\n    titulo.textContent = t.titulo;\n    body.appendChild(titulo);\n\n    if (t.desc) {\n      var desc = document.createElement(\"span\");\n      desc.className = \"task-desc\";\n      desc.textContent = t.desc;\n      body.appendChild(desc);\n    }\n\n    if (t.resp && RESPONSABLES[t.resp]) {\n      var meta = document.createElement(\"span\");\n      meta.className = \"task-meta\";\n      var chip = document.createElement(\"span\");\n      chip.className = \"chip \" + t.resp;\n      chip.textContent = RESPONSABLES[t.resp];\n      meta.appendChild(chip);\n      body.appendChild(meta);\n    }\n\n    var acciones = document.createElement(\"div\");\n    acciones.className = \"task-acciones\";\n\n    var btnEditar = document.createElement(\"button\");\n    btnEditar.type = \"button\";\n    btnEditar.className = \"icono editar\";\n    btnEditar.title = \"Editar\";\n    btnEditar.setAttribute(\"aria-label\", \"Editar: \" + t.titulo);\n    btnEditar.innerHTML = ICONO_EDITAR;\n\n    var btnBorrar = document.createElement(\"button\");\n    btnBorrar.type = \"button\";\n    btnBorrar.className = \"icono borrar\";\n    btnBorrar.title = \"Eliminar\";\n    btnBorrar.setAttribute(\"aria-label\", \"Eliminar: \" + t.titulo);\n    btnBorrar.innerHTML = ICONO_BORRAR;\n\n    acciones.appendChild(btnEditar);\n    acciones.appendChild(btnBorrar);\n\n    main.appendChild(casilla);\n    main.appendChild(body);\n    main.appendChild(acciones);\n    li.appendChild(main);\n\n    casilla.addEventListener(\"change\", function () {\n      var antes = t.completada;\n      t.completada = casilla.checked;\n      pintarTareas();\n      mutar(API_TAREAS + \"\/\" + t.id, \"POST\", { completada: antes ? false : true }, function () {\n        t.completada = antes;\n      })[\"catch\"](function () {});\n    });\n\n    btnEditar.addEventListener(\"click\", function () {\n      if (li.querySelector(\".form-tarea\")) { return; }\n      var f = formulario(t, function (datos, form) {\n        mutar(API_TAREAS + \"\/\" + t.id, \"POST\", datos)[\"catch\"](function () {\n          var b = form.querySelector(\".btn-pri\");\n          b.disabled = false;\n          b.textContent = \"Guardar\";\n        });\n      }, function () { pintarTareas(); });\n      main.hidden = true;\n      li.appendChild(f);\n      f.querySelector(\".f-titulo\").focus();\n    });\n\n    btnBorrar.addEventListener(\"click\", function () {\n      if (!window.confirm(\"\u00bfEliminar \u00ab\" + t.titulo + \"\u00bb?\\n\\nEsto la borra para todo el equipo y no se puede deshacer.\")) { return; }\n      var posicion = tareas.indexOf(t);\n      if (posicion > -1) { tareas.splice(posicion, 1); }\n      pintarTareas();\n      mutar(API_TAREAS + \"\/\" + t.id, \"DELETE\", null, function () {\n        if (posicion > -1) { tareas.splice(posicion, 0, t); }\n      })[\"catch\"](function () {});\n    });\n\n    return li;\n  }\n\n  function pintarTareas() {\n    var comp = tareas.filter(function (t) { return t.completada; });\n    var pend = tareas.filter(function (t) { return !t.completada; });\n\n    document.getElementById(\"db-n-pend\").textContent = pend.length;\n    document.getElementById(\"db-n-comp\").textContent = comp.length;\n\n    document.getElementById(\"db-fill\").style.width =\n      (tareas.length ? comp.length \/ tareas.length * 100 : 0) + \"%\";\n    document.getElementById(\"db-count\").textContent = comp.length + \" \/ \" + tareas.length;\n\n    var mostrar = (vista === \"completadas\" ? comp : pend).slice().sort(function (a, b) {\n      return (a.orden - b.orden) || (a.creada - b.creada);\n    });\n\n    lista.innerHTML = \"\";\n    mostrar.forEach(function (t) { lista.appendChild(nodoTarea(t)); });\n\n    vacio.hidden = mostrar.length > 0;\n    vacio.textContent = vista === \"completadas\"\n      ? \"Todav\u00eda no hay ninguna tarea completada.\"\n      : \"No queda ninguna tarea pendiente. Pulsa \u00abNueva tarea\u00bb para a\u00f1adir otra.\";\n  }\n\n  function cambiarVista(v) {\n    vista = v;\n    tabs.forEach(function (b) {\n      var activo = b.getAttribute(\"data-vista\") === v;\n      b.classList.toggle(\"activo\", activo);\n      b.setAttribute(\"aria-selected\", activo ? \"true\" : \"false\");\n    });\n    pintarTareas();\n  }\n\n  tabs.forEach(function (b) {\n    b.addEventListener(\"click\", function () { cambiarVista(b.getAttribute(\"data-vista\")); });\n  });\n\n  btnNueva.addEventListener(\"click\", function () {\n    if (zonaNueva.firstChild) {\n      zonaNueva.querySelector(\".f-titulo\").focus();\n      return;\n    }\n    var f = formulario({}, function (datos, form) {\n      mutar(API_TAREAS, \"POST\", datos)\n        .then(function () {\n          zonaNueva.innerHTML = \"\";\n          cambiarVista(\"pendientes\");\n        })[\"catch\"](function () {\n          var b = form.querySelector(\".btn-pri\");\n          b.disabled = false;\n          b.textContent = \"Guardar\";\n        });\n    }, function () { zonaNueva.innerHTML = \"\"; });\n\n    zonaNueva.appendChild(f);\n    f.querySelector(\".f-titulo\").focus();\n  });\n\n  \/* ---------------- Carga inicial ---------------- *\/\n\n  fetch(API, { headers: { \"X-DB-Tareas-Token\": TOKEN }, cache: \"no-store\" })\n    .then(function (r) {\n      if (!r.ok) { throw new Error(r.status); }\n      return r.json();\n    })\n    .then(function (datos) {\n      var marcados = datos.estado || {};\n      var enlaces = datos.enlaces || {};\n\n      anuncios.forEach(function (item) {\n        var id = item.getAttribute(\"data-id\");\n        var casilla = item.querySelector(\"input[type=checkbox]\");\n        if (marcados[id]) {\n          casilla.checked = true;\n          item.classList.add(\"done\");\n        }\n        casilla.disabled = false;\n        casilla.addEventListener(\"change\", function () { guardarAnuncio(item, casilla); });\n\n        var campo = item.querySelector(\".enlace input\");\n        if (!campo) { return; }\n        var abrir = item.querySelector(\".enlace-abrir\");\n        var url = enlaces[id] || \"\";\n        campo.setAttribute(\"data-guardado\", url);\n        pintarEnlace(campo, abrir, url);\n        campo.disabled = false;\n        campo.addEventListener(\"change\", function () { guardarEnlace(item, campo, abrir); });\n        campo.addEventListener(\"blur\", function () { guardarEnlace(item, campo, abrir); });\n        campo.addEventListener(\"keydown\", function (ev) {\n          if (ev.key === \"Enter\") { ev.preventDefault(); campo.blur(); }\n        });\n      });\n\n      medirAnuncios();\n\n      tareas = datos.tareas || [];\n      cambiarVista(\"pendientes\");\n\n      aviso(\"Todo lo que marques, escribas o pegues se guarda aqu\u00ed y lo ve todo el equipo.\", \"ok\");\n    })\n    [\"catch\"](function () {\n      aviso(\"No se ha podido cargar el progreso. Recarga la p\u00e1gina.\", \"error\");\n    });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Dancing Boulevard \u00b7 Recepci\u00f3n Plan de onboarding \u2014 nueva recepcionista Todo lo que necesita aprender en sus primeras semanas: formaci\u00f3n, anuncios en portales y organizaci\u00f3n de las salas. Marca cada tarea al completarla. \u2014 \/ 9 Cargando el progreso\u2026 Tareas de formaci\u00f3n Pendientes \u2014 Completadas \u2014 Cada tarea tiene un [&hellip;]<\/p>\n","protected":false},"author":20916,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-26374","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tareas - Dancing Boulevard<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dancingboulevard.com\/en\/tareas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tareas - Dancing Boulevard\" \/>\n<meta property=\"og:description\" content=\"Dancing Boulevard \u00b7 Recepci\u00f3n Plan de onboarding \u2014 nueva recepcionista Todo lo que necesita aprender en sus primeras semanas: formaci\u00f3n, anuncios en portales y organizaci\u00f3n de las salas. Marca cada tarea al completarla. \u2014 \/ 9 Cargando el progreso\u2026 Tareas de formaci\u00f3n Pendientes \u2014 Completadas \u2014 Cada tarea tiene un [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dancingboulevard.com\/en\/tareas\/\" \/>\n<meta property=\"og:site_name\" content=\"Dancing Boulevard\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Dancing-Boulevard\/1425357731107040?fref=ts\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-20T10:38:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-1-recepcion-izquierda.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tareas - Dancing Boulevard","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dancingboulevard.com\/en\/tareas\/","og_locale":"en_US","og_type":"article","og_title":"Tareas - Dancing Boulevard","og_description":"Dancing Boulevard \u00b7 Recepci\u00f3n Plan de onboarding \u2014 nueva recepcionista Todo lo que necesita aprender en sus primeras semanas: formaci\u00f3n, anuncios en portales y organizaci\u00f3n de las salas. Marca cada tarea al completarla. \u2014 \/ 9 Cargando el progreso\u2026 Tareas de formaci\u00f3n Pendientes \u2014 Completadas \u2014 Cada tarea tiene un [&hellip;]","og_url":"https:\/\/dancingboulevard.com\/en\/tareas\/","og_site_name":"Dancing Boulevard","article_publisher":"https:\/\/www.facebook.com\/pages\/Dancing-Boulevard\/1425357731107040?fref=ts","article_modified_time":"2026-07-20T10:38:57+00:00","og_image":[{"url":"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-1-recepcion-izquierda.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dancingboulevard.com\/tareas\/","url":"https:\/\/dancingboulevard.com\/tareas\/","name":"Tareas - Dancing Boulevard","isPartOf":{"@id":"https:\/\/dancingboulevard.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dancingboulevard.com\/tareas\/#primaryimage"},"image":{"@id":"https:\/\/dancingboulevard.com\/tareas\/#primaryimage"},"thumbnailUrl":"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-1-recepcion-izquierda.jpg","datePublished":"2026-07-14T14:13:36+00:00","dateModified":"2026-07-20T10:38:57+00:00","breadcrumb":{"@id":"https:\/\/dancingboulevard.com\/tareas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dancingboulevard.com\/tareas\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dancingboulevard.com\/tareas\/#primaryimage","url":"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-1-recepcion-izquierda.jpg","contentUrl":"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2026\/07\/sala-1-recepcion-izquierda.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/dancingboulevard.com\/tareas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/dancingboulevard.com\/"},{"@type":"ListItem","position":2,"name":"Tareas"}]},{"@type":"WebSite","@id":"https:\/\/dancingboulevard.com\/#website","url":"https:\/\/dancingboulevard.com\/","name":"Dancing Boulevard","description":"ESCUELA DE BAILE","publisher":{"@id":"https:\/\/dancingboulevard.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dancingboulevard.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/dancingboulevard.com\/#organization","name":"Dancing Boulevard","url":"https:\/\/dancingboulevard.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dancingboulevard.com\/#\/schema\/logo\/image\/","url":"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2020\/04\/DancinBoulevard.png","contentUrl":"https:\/\/dancingboulevard.com\/wp-content\/uploads\/2020\/04\/DancinBoulevard.png","width":1990,"height":803,"caption":"Dancing Boulevard"},"image":{"@id":"https:\/\/dancingboulevard.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/Dancing-Boulevard\/1425357731107040?fref=ts","https:\/\/www.instagram.com\/dancingboulevard\/"]}]}},"_links":{"self":[{"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/pages\/26374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/users\/20916"}],"replies":[{"embeddable":true,"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/comments?post=26374"}],"version-history":[{"count":5,"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/pages\/26374\/revisions"}],"predecessor-version":[{"id":26507,"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/pages\/26374\/revisions\/26507"}],"wp:attachment":[{"href":"https:\/\/dancingboulevard.com\/en\/wp-json\/wp\/v2\/media?parent=26374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}