{"id":24,"date":"2026-10-13T14:46:31","date_gmt":"2026-10-13T14:46:31","guid":{"rendered":"https:\/\/algoritmodelalma.com\/?page_id=24"},"modified":"2026-10-13T15:48:26","modified_gmt":"2026-10-13T15:48:26","slug":"la-rueda-de-la-vida","status":"publish","type":"page","link":"https:\/\/algoritmodelalma.com\/?page_id=24","title":{"rendered":"La rueda de la vida"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Test La rueda de la vida<\/title>\n  <style>\n    :root {\n      --bg-cream: #F7F1EA;\n      --white: #FFFFFF;\n      --brown-soft: #5C4033;\n      --beige: #E8DED2;\n      --rose-old: #C88EA7;\n      --lilac-soft: #C4B5FD;\n      --terracotta: #B86B4B;\n      --text-dark: #1F1B16;\n      --gray: #6B7280;\n      --gray-light: #F3ECE2;\n      --green-soft: #7A9A80;\n      --shadow-sm: 0 4px 12px rgba(31, 27, 22, 0.05);\n      --shadow-md: 0 8px 24px rgba(92, 64, 51, 0.08);\n      --shadow-lg: 0 12px 36px rgba(92, 64, 51, 0.12);\n      --radius-sm: 10px;\n      --radius-md: 16px;\n      --radius-lg: 24px;\n    }\n\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    body {\n      background-color: var(--bg-cream);\n      color: var(--text-dark);\n      padding: 20px 15px 40px;\n      display: flex;\n      justify-content: center;\n      min-height: 100vh;\n      line-height: 1.5;\n    }\n\n    .app-container {\n      max-width: 1040px;\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    header {\n      background: var(--white);\n      padding: 24px 20px 18px;\n      border-radius: var(--radius-lg);\n      box-shadow: var(--shadow-md);\n      text-align: center;\n      position: relative;\n      overflow: hidden;\n      border: 1px solid rgba(232, 222, 210, 0.6);\n    }\n\n    header::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 6px;\n      background: linear-gradient(90deg, var(--terracotta), var(--rose-old), var(--lilac-soft), var(--brown-soft));\n    }\n\n    h1 {\n      color: var(--brown-soft);\n      font-size: clamp(1.5rem, 4vw, 2.2rem);\n      font-weight: 800;\n      letter-spacing: -0.02em;\n      margin-bottom: 4px;\n    }\n\n    .subtitle {\n      color: var(--terracotta);\n      font-size: clamp(0.9rem, 2.5vw, 1.1rem);\n      font-weight: 600;\n      margin-bottom: 16px;\n    }\n\n    .disclaimer {\n      background-color: #FFF9F2;\n      border: 1px solid #F3E3D3;\n      border-left: 5px solid var(--terracotta);\n      padding: 12px 16px;\n      border-radius: var(--radius-sm);\n      font-size: 0.86rem;\n      color: var(--text-dark);\n      text-align: left;\n      line-height: 1.45;\n      box-shadow: var(--shadow-sm);\n    }\n\n    .disclaimer strong {\n      color: var(--terracotta);\n      display: inline-block;\n      margin-right: 4px;\n    }\n\n    .step-stepper {\n      display: flex;\n      justify-content: center;\n      gap: 6px;\n      background: var(--beige);\n      padding: 6px;\n      border-radius: 30px;\n      width: fit-content;\n      margin: 0 auto;\n      flex-wrap: wrap;\n    }\n\n    .step-btn {\n      padding: 8px 16px;\n      border-radius: 20px;\n      border: none;\n      background: transparent;\n      color: var(--brown-soft);\n      font-weight: 700;\n      font-size: 0.85rem;\n      cursor: pointer;\n      transition: all 0.25s ease;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .step-btn.active {\n      background: var(--white);\n      color: var(--brown-soft);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .step-number {\n      background: rgba(92, 64, 51, 0.12);\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 0.75rem;\n    }\n\n    .step-btn.active .step-number {\n      background: var(--brown-soft);\n      color: var(--white);\n    }\n\n    .card-panel {\n      background: var(--white);\n      border-radius: var(--radius-lg);\n      padding: 24px;\n      box-shadow: var(--shadow-md);\n      border: 1px solid rgba(232, 222, 210, 0.6);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      padding-bottom: 12px;\n      border-bottom: 2px solid var(--gray-light);\n      flex-wrap: wrap;\n      gap: 10px;\n    }\n\n    .panel-title {\n      font-size: 1.15rem;\n      font-weight: 700;\n      color: var(--brown-soft);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .setup-instructions {\n      font-size: 0.92rem;\n      color: var(--gray);\n      margin-bottom: 16px;\n      line-height: 1.45;\n    }\n\n    .suggestions-box {\n      background: var(--bg-cream);\n      padding: 16px;\n      border-radius: var(--radius-md);\n      margin-bottom: 20px;\n      border: 1px solid var(--beige);\n    }\n\n    .suggestions-header {\n      font-size: 0.88rem;\n      font-weight: 700;\n      color: var(--brown-soft);\n      margin-bottom: 10px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .chips-wrapper {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n\n    .chip-btn {\n      background: var(--white);\n      border: 1.5px solid var(--beige);\n      color: var(--text-dark);\n      padding: 6px 14px;\n      border-radius: 20px;\n      font-size: 0.83rem;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      user-select: none;\n    }\n\n    .chip-btn:hover {\n      border-color: var(--rose-old);\n      background: #FFF9F5;\n      transform: translateY(-1px);\n    }\n\n    .chip-btn.used {\n      background: var(--beige);\n      color: var(--brown-soft);\n      border-color: var(--brown-soft);\n      opacity: 0.85;\n    }\n\n    .chip-btn .chip-plus {\n      color: var(--terracotta);\n      font-weight: 800;\n      font-size: 0.95rem;\n    }\n\n    .chip-btn.used .chip-plus {\n      color: var(--green-soft);\n    }\n\n    .setup-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n      gap: 12px;\n      margin-bottom: 20px;\n    }\n\n    .setup-item {\n      background: var(--bg-cream);\n      border: 1.5px solid var(--beige);\n      border-radius: var(--radius-md);\n      padding: 10px 14px;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      transition: all 0.2s ease;\n      position: relative;\n    }\n\n    .setup-item.focused {\n      border-color: var(--brown-soft);\n      background: var(--white);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .setup-item.highlight-anim {\n      animation: pulseHighlight 0.6s ease;\n    }\n\n    @keyframes pulseHighlight {\n      0% { transform: scale(1); }\n      50% { transform: scale(1.03); border-color: var(--terracotta); }\n      100% { transform: scale(1); }\n    }\n\n    .area-badge-index {\n      width: 26px;\n      height: 26px;\n      border-radius: 50%;\n      background: var(--beige);\n      color: var(--brown-soft);\n      font-weight: 800;\n      font-size: 0.82rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .color-picker-dot {\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      border: 2px solid var(--white);\n      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);\n      flex-shrink: 0;\n      cursor: pointer;\n      position: relative;\n    }\n\n    .color-input-hidden {\n      position: absolute;\n      opacity: 0;\n      width: 100%;\n      height: 100%;\n      cursor: pointer;\n      top: 0;\n      left: 0;\n    }\n\n    .input-text-custom {\n      border: none;\n      background: transparent;\n      font-size: 0.95rem;\n      font-weight: 700;\n      color: var(--text-dark);\n      width: 100%;\n      outline: none;\n    }\n\n    .clear-field-btn {\n      background: transparent;\n      border: none;\n      color: var(--gray);\n      font-size: 1.1rem;\n      cursor: pointer;\n      padding: 0 4px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: color 0.15s;\n    }\n\n    .clear-field-btn:hover {\n      color: var(--terracotta);\n    }\n\n    .question-banner {\n      background: linear-gradient(135deg, var(--brown-soft), #4A3329);\n      color: var(--white);\n      padding: 16px 20px;\n      border-radius: var(--radius-md);\n      text-align: center;\n      box-shadow: var(--shadow-md);\n      margin-bottom: 20px;\n    }\n\n    .question-banner h2 {\n      font-size: 1.1rem;\n      font-weight: 700;\n      margin-bottom: 4px;\n    }\n\n    .question-banner p {\n      font-size: 0.88rem;\n      opacity: 0.92;\n    }\n\n    .main-grid {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 24px;\n    }\n\n    @media (min-width: 900px) {\n      .main-grid {\n        grid-template-columns: 1.05fr 0.95fr;\n      }\n    }\n\n    .wheel-wrapper {\n      position: relative;\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      user-select: none;\n    }\n\n    .svg-container {\n      width: 100%;\n      max-width: 320px;\n      height: auto;\n      aspect-ratio: 1 \/ 1;\n      position: relative;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n      touch-action: manipulation;\n    }\n\n    .ring-sector {\n      cursor: pointer;\n      transition: opacity 0.15s ease, filter 0.15s ease;\n    }\n\n    .ring-sector:hover {\n      opacity: 0.9 !important;\n      filter: brightness(1.05);\n    }\n\n    .wheel-label {\n      font-size: 10px;\n      font-weight: 700;\n      fill: var(--text-dark);\n      text-anchor: middle;\n      dominant-baseline: central;\n      pointer-events: none;\n    }\n\n    .wheel-hint {\n      margin-top: 14px;\n      font-size: 0.82rem;\n      color: var(--gray);\n      text-align: center;\n      background: var(--bg-cream);\n      padding: 6px 14px;\n      border-radius: 20px;\n    }\n\n    .areas-list {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .area-card {\n      background: var(--bg-cream);\n      border: 1.5px solid var(--beige);\n      border-radius: var(--radius-md);\n      padding: 12px 14px;\n      transition: all 0.2s ease;\n    }\n\n    .area-card:focus-within, .area-card:hover {\n      border-color: var(--rose-old);\n      background: #FAF6F0;\n      box-shadow: var(--shadow-sm);\n    }\n\n    .area-top-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 10px;\n      margin-bottom: 8px;\n    }\n\n    .area-title-group {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex: 1;\n    }\n\n    .score-display {\n      background: var(--white);\n      color: var(--brown-soft);\n      font-weight: 800;\n      font-size: 1rem;\n      width: 34px;\n      height: 34px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid var(--beige);\n      box-shadow: var(--shadow-sm);\n      flex-shrink: 0;\n    }\n\n    .slider-container {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .slider-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 0.7rem;\n      color: var(--gray);\n      margin-top: 3px;\n      font-weight: 600;\n    }\n\n    input[type=\"range\"] {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 100%;\n      height: 8px;\n      border-radius: 4px;\n      background: var(--beige);\n      outline: none;\n    }\n\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      background: var(--brown-soft);\n      cursor: pointer;\n      border: 2px solid var(--white);\n      box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n      transition: transform 0.15s ease;\n    }\n\n    input[type=\"range\"]::-webkit-slider-thumb:hover {\n      transform: scale(1.15);\n    }\n\n    .metrics-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n      gap: 12px;\n      margin-bottom: 20px;\n    }\n\n    .metric-card {\n      background: var(--bg-cream);\n      padding: 14px;\n      border-radius: var(--radius-md);\n      text-align: center;\n      border: 1px solid var(--beige);\n    }\n\n    .metric-value {\n      font-size: 1.5rem;\n      font-weight: 800;\n      color: var(--brown-soft);\n    }\n\n    .metric-label {\n      font-size: 0.75rem;\n      color: var(--gray);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .reflection-item {\n      background: var(--bg-cream);\n      border-radius: var(--radius-md);\n      padding: 14px 16px;\n      margin-bottom: 12px;\n      border-left: 4px solid var(--terracotta);\n    }\n\n    .reflection-title {\n      font-weight: 700;\n      font-size: 0.95rem;\n      color: var(--brown-soft);\n      margin-bottom: 6px;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    textarea.action-input {\n      width: 100%;\n      border: 1px solid var(--beige);\n      border-radius: var(--radius-sm);\n      padding: 10px 12px;\n      font-size: 0.88rem;\n      color: var(--text-dark);\n      background: var(--white);\n      resize: vertical;\n      min-height: 54px;\n      outline: none;\n    }\n\n    textarea.action-input:focus {\n      border-color: var(--brown-soft);\n    }\n\n    .actions-bar {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      justify-content: center;\n      margin-top: 10px;\n    }\n\n    .btn {\n      padding: 10px 20px;\n      border-radius: 30px;\n      border: none;\n      font-size: 0.88rem;\n      font-weight: 700;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      box-shadow: var(--shadow-sm);\n    }\n\n    .btn:active {\n      transform: translateY(1px);\n    }\n\n    .btn-primary {\n      background-color: var(--brown-soft);\n      color: var(--white);\n    }\n\n    .btn-primary:hover {\n      background-color: #473127;\n      box-shadow: var(--shadow-md);\n    }\n\n    .btn-secondary {\n      background-color: var(--beige);\n      color: var(--brown-soft);\n    }\n\n    .btn-secondary:hover {\n      background-color: #dcd0c0;\n    }\n\n    .btn-outline {\n      background-color: transparent;\n      color: var(--brown-soft);\n      border: 1.5px solid var(--brown-soft);\n    }\n\n    .btn-outline:hover {\n      background-color: var(--bg-cream);\n    }\n\n    .history-list {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      max-height: 350px;\n      overflow-y: auto;\n      padding-right: 4px;\n    }\n\n    .history-card {\n      background: var(--bg-cream);\n      padding: 14px 18px;\n      border-radius: var(--radius-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--beige);\n    }\n\n    .history-date {\n      font-weight: 700;\n      color: var(--brown-soft);\n      font-size: 0.92rem;\n    }\n\n    .history-meta {\n      font-size: 0.82rem;\n      color: var(--gray);\n    }\n\n    .toast {\n      position: fixed;\n      bottom: 24px;\n      left: 50%;\n      transform: translateX(-50%) translateY(100px);\n      background: var(--text-dark);\n      color: var(--white);\n      padding: 10px 20px;\n      border-radius: 30px;\n      font-size: 0.86rem;\n      font-weight: 600;\n      box-shadow: var(--shadow-lg);\n      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      z-index: 1000;\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    .toast.show {\n      transform: translateX(-50%) translateY(0);\n      opacity: 1;\n    }\n\n    .tab-content {\n      display: none;\n    }\n\n    .tab-content.active {\n      display: block;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"app-container\">\n    <header>\n      <h1>Test La rueda de la vida<\/h1>\n      <p class=\"subtitle\">Eval\u00faa tus \u00e1reas m\u00e1s importantes en la vida<\/p>\n\n      <div class=\"disclaimer\">\n        <strong>AVISO IMPORTANTE:<\/strong> Esta app es una herramienta de bienestar y autocuidado. No reemplaza atenci\u00f3n psicol\u00f3gica, m\u00e9dica ni tratamiento profesional. Si sientes que puedes hacerte da\u00f1o o est\u00e1s en peligro, busca ayuda inmediata.\n      <\/div>\n    <\/header>\n\n    <div class=\"step-stepper\">\n      <button class=\"step-btn active\" id=\"tabNav-setup\" onclick=\"switchTab('setup')\">\n        <span class=\"step-number\">1<\/span>\n        Definir 8 \u00c1reas\n      <\/button>\n      <button class=\"step-btn\" id=\"tabNav-wheel\" onclick=\"switchTab('wheel')\">\n        <span class=\"step-number\">2<\/span>\n        Ponderar Rueda\n      <\/button>\n      <button class=\"step-btn\" id=\"tabNav-reflection\" onclick=\"switchTab('reflection')\">\n        <span class=\"step-number\">3<\/span>\n        Plan de Acci\u00f3n\n      <\/button>\n      <button class=\"step-btn\" id=\"tabNav-history\" onclick=\"switchTab('history')\">\n        <span class=\"step-number\">4<\/span>\n        Historial\n      <\/button>\n    <\/div>\n\n    <div id=\"tab-setup\" class=\"tab-content active\">\n      <div class=\"card-panel\">\n        <p class=\"setup-instructions\" style=\"margin-top: 4px;\">\n          Escribe el nombre de tus \u00e1reas m\u00e1s importantes en las 8 casillas o toca cualquiera de las opciones sugeridas a continuaci\u00f3n para ir complet\u00e1ndolas r\u00e1pidamente.\n        <\/p>\n\n        <!-- SUGGESTION CHIPS -->\n        <div class=\"suggestions-box\">\n          <div class=\"suggestions-header\">\n            \ud83d\udca1 Ideas recomendadas (haz clic en una para usarla):\n          <\/div>\n          <div class=\"chips-wrapper\" id=\"chipsContainer\"><\/div>\n        <\/div>\n\n        <!-- 8 AREA INPUT CARDS -->\n        <div class=\"setup-grid\" id=\"setupGrid\"><\/div>\n\n        <div class=\"actions-bar\">\n          <button class=\"btn btn-outline\" onclick=\"clearAllAreas()\">\n            \ud83e\uddf9 Vaciar todo\n          <\/button>\n          <button class=\"btn btn-primary\" onclick=\"confirmAreasAndGoToWheel()\">\n            Continuar a Ponderar Rueda\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"tab-wheel\" class=\"tab-content\">\n      <div class=\"question-banner\">\n        <h2>Pregunta de evaluaci\u00f3n:<\/h2>\n        <p>\u00bfC\u00f3mo est\u00e1 esa \u00e1rea en funci\u00f3n a c\u00f3mo deseo que est\u00e9? (0: Muy desatendida \u2014 10: Plenitud total)<\/p>\n      <\/div>\n\n      <div class=\"main-grid\">\n        <div class=\"card-panel\">\n          <div class=\"panel-header\">\n            <span class=\"panel-title\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><\/svg>\n              Tu Rueda de la Vida\n            <\/span>\n            <button class=\"btn btn-outline\" style=\"padding: 5px 12px; font-size: 0.78rem;\" onclick=\"switchTab('setup')\">\n              Editar nombres\n            <\/button>\n          <\/div>\n\n          <div class=\"wheel-wrapper\">\n            <div class=\"svg-container\">\n              <svg id=\"wheelSvg\" viewBox=\"-165 -165 330 330\"><\/svg>\n            <\/div>\n            <p class=\"wheel-hint\">\ud83d\udca1 Haz clic en los niveles de la rueda (0 a 10) para colorear cada \u00e1rea.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"card-panel\">\n          <div class=\"panel-header\" style=\"flex-direction: column; align-items: flex-start; gap: 4px;\">\n            <span class=\"panel-title\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"\/><line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"\/><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"\/><line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"\/><line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"\/><line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"\/><line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"\/><line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"\/><\/svg>\n              Ponderar del 0 al 10\n            <\/span>\n            <p style=\"font-size: 0.85rem; color: var(--gray); font-weight: 500; margin-top: 2px; line-height: 1.4;\">\n              De acuerdo a la siguiente pregunta: <strong>\u00bfC\u00f3mo est\u00e1 esa \u00e1rea en funci\u00f3n a c\u00f3mo deseo que est\u00e9?<\/strong> (0: Muy desatendida &#8211; 10: Plenitud Total)\n            <\/p>\n          <\/div>\n\n          <div class=\"areas-list\" id=\"areasContainer\"><\/div>\n\n          <div class=\"actions-bar\" style=\"margin-top: 18px;\">\n            <button class=\"btn btn-primary\" onclick=\"saveEvaluationSnapshot()\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"\/><polyline points=\"17 21 17 13 7 13 7 21\"\/><polyline points=\"7 3 7 8 15 8\"\/><\/svg>\n              Guardar evaluaci\u00f3n\n            <\/button>\n            <button class=\"btn btn-secondary\" onclick=\"switchTab('reflection')\">\n              Ver Plan de Acci\u00f3n\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"tab-reflection\" class=\"tab-content\">\n      <div class=\"card-panel\">\n        <div class=\"panel-header\">\n          <span class=\"panel-title\">An\u00e1lisis y Plan de Acci\u00f3n<\/span>\n        <\/div>\n\n        <div class=\"metrics-grid\" id=\"metricsSummary\"><\/div>\n\n        <h3 style=\"color: var(--brown-soft); font-size: 0.98rem; margin-bottom: 12px;\">Plan de acci\u00f3n para cada una de tus \u00e1reas:<\/h3>\n        <div id=\"reflectionList\"><\/div>\n\n        <div class=\"actions-bar\" style=\"margin-top: 16px;\">\n          <button class=\"btn btn-primary\" onclick=\"saveNotes()\">\n            Guardar Plan de Acci\u00f3n\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"tab-history\" class=\"tab-content\">\n      <div class=\"card-panel\">\n        <div class=\"panel-header\">\n          <span class=\"panel-title\">Historial de Evaluaciones<\/span>\n          <button class=\"btn btn-secondary\" style=\"padding: 5px 12px; font-size: 0.78rem;\" onclick=\"clearHistory()\">Limpiar Historial<\/button>\n        <\/div>\n\n        <div class=\"history-list\" id=\"historyList\"><\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div id=\"toast\" class=\"toast\">Guardado correctamente<\/div>\n\n  <script>\n    const SUGGESTED_EXAMPLES = [\n      \"Salud\", \"Familia\", \"Diversi\u00f3n\", \"Amor\", \n      \"Desarrollo personal\", \"Educaci\u00f3n\", \"Trabajo\", \n      \"Finanzas\", \"Amistades\", \"Espiritualidad\"\n    ];\n\n    const DEFAULT_AREAS = [\n      { id: 1, name: \"\", score: 5, color: \"#B86B4B\", note: \"\" },\n      { id: 2, name: \"\", score: 5, color: \"#C88EA7\", note: \"\" },\n      { id: 3, name: \"\", score: 5, color: \"#C4B5FD\", note: \"\" },\n      { id: 4, name: \"\", score: 5, color: \"#E8A598\", note: \"\" },\n      { id: 5, name: \"\", score: 5, color: \"#8DA9C4\", note: \"\" },\n      { id: 6, name: \"\", score: 5, color: \"#A3B18A\", note: \"\" },\n      { id: 7, name: \"\", score: 5, color: \"#5C4033\", note: \"\" },\n      { id: 8, name: \"\", score: 5, color: \"#D4A373\", note: \"\" }\n    ];\n\n    let state = {\n      areas: [],\n      history: []\n    };\n\n    let activeInputIndex = null;\n\n    function initApp() {\n      const savedData = localStorage.getItem('rueda_vida_app_v3');\n      if (savedData) {\n        try {\n          const parsed = JSON.parse(savedData);\n          state.areas = parsed.areas || JSON.parse(JSON.stringify(DEFAULT_AREAS));\n          state.history = parsed.history || [];\n        } catch (e) {\n          state.areas = JSON.parse(JSON.stringify(DEFAULT_AREAS));\n        }\n      } else {\n        state.areas = JSON.parse(JSON.stringify(DEFAULT_AREAS));\n      }\n\n      renderSuggestionChips();\n      renderSetupGrid();\n      renderFormControls();\n      renderWheelSVG();\n      renderMetrics();\n      renderReflectionForm();\n      renderHistoryList();\n    }\n\n    function persistState() {\n      localStorage.setItem('rueda_vida_app_v3', JSON.stringify(state));\n    }\n\n    function showToast(msg) {\n      const toast = document.getElementById('toast');\n      toast.innerText = msg;\n      toast.classList.add('show');\n      setTimeout(() => {\n        toast.classList.remove('show');\n      }, 2200);\n    }\n\n    function switchTab(tabId) {\n      document.querySelectorAll('.step-btn').forEach(btn => btn.classList.remove('active'));\n      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));\n\n      const activeNav = document.getElementById(`tabNav-${tabId}`);\n      if (activeNav) activeNav.classList.add('active');\n\n      const activeTab = document.getElementById(`tab-${tabId}`);\n      if (activeTab) activeTab.classList.add('active');\n\n      if (tabId === 'wheel') {\n        renderFormControls();\n        renderWheelSVG();\n      } else if (tabId === 'reflection') {\n        renderMetrics();\n        renderReflectionForm();\n      } else if (tabId === 'history') {\n        renderHistoryList();\n      }\n    }\n\n    function renderSuggestionChips() {\n      const container = document.getElementById('chipsContainer');\n      container.innerHTML = '';\n\n      const currentNamesLower = state.areas.map(a => (a.name || '').trim().toLowerCase());\n\n      SUGGESTED_EXAMPLES.forEach(example => {\n        const isUsed = currentNamesLower.includes(example.toLowerCase());\n        const btn = document.createElement('button');\n        btn.className = `chip-btn ${isUsed ? 'used' : ''}`;\n        btn.innerHTML = `<span class=\"chip-plus\">${isUsed ? '\u2713' : '+'}<\/span> ${example}`;\n        btn.onclick = () => handleChipClick(example);\n        container.appendChild(btn);\n      });\n    }\n\n    function handleChipClick(exampleText) {\n      \/\/ 1. Check if already present in state\n      const existingIdx = state.areas.findIndex(a => (a.name || '').trim().toLowerCase() === exampleText.toLowerCase());\n      if (existingIdx !== -1) {\n        highlightSetupItem(existingIdx);\n        showToast(`\"${exampleText}\" ya est\u00e1 agregado en la casilla ${existingIdx + 1}`);\n        return;\n      }\n\n      let targetIdx = -1;\n\n      \/\/ 2. Use currently active focused input slot if user selected one\n      if (activeInputIndex !== null && activeInputIndex >= 0 && activeInputIndex < 8) {\n        targetIdx = activeInputIndex;\n      } else {\n        \/\/ 3. Find first empty slot\n        targetIdx = state.areas.findIndex(a => !a.name || a.name.trim() === '');\n      }\n\n      \/\/ 4. Fallback to slot 0 if all filled and none focused\n      if (targetIdx === -1) {\n        targetIdx = 0;\n      }\n\n      state.areas[targetIdx].name = exampleText;\n      persistState();\n      \n      renderSetupGrid();\n      renderSuggestionChips();\n      renderFormControls();\n      renderWheelSVG();\n\n      highlightSetupItem(targetIdx);\n      showToast(`Asignado \"${exampleText}\" al espacio ${targetIdx + 1}`);\n    }\n\n    function highlightSetupItem(index) {\n      const elem = document.getElementById(`setup-item-${index}`);\n      if (elem) {\n        elem.classList.add('highlight-anim');\n        setTimeout(() => elem.classList.remove('highlight-anim'), 600);\n      }\n    }\n\n    function renderSetupGrid() {\n      const container = document.getElementById('setupGrid');\n      container.innerHTML = '';\n\n      state.areas.forEach((area, index) => {\n        const isFocused = activeInputIndex === index;\n        const item = document.createElement('div');\n        item.className = `setup-item ${isFocused ? 'focused' : ''}`;\n        item.id = `setup-item-${index}`;\n\n        item.innerHTML = `\n          <div class=\"area-badge-index\">${index + 1}<\/div>\n          <div class=\"color-picker-dot\" style=\"background-color: ${area.color}\" title=\"Cambiar color\">\n            <input type=\"color\" class=\"color-input-hidden\" value=\"${area.color}\" onchange=\"updateAreaColor(${index}, this.value)\">\n          <\/div>\n          <input type=\"text\" class=\"input-text-custom\" id=\"input-area-${index}\" value=\"${escapeHtml(area.name)}\" \n                 placeholder=\"Escribe el \u00e1rea ${index + 1}...\" \n                 onfocus=\"setActiveInputIndex(${index})\" \n                 oninput=\"updateAreaName(${index}, this.value)\">\n          ${area.name ? `<button class=\"clear-field-btn\" onclick=\"clearSingleArea(${index})\" title=\"Borrar este campo\">&times;<\/button>` : ''}\n        `;\n        container.appendChild(item);\n      });\n    }\n\n    function setActiveInputIndex(index) {\n      activeInputIndex = index;\n      document.querySelectorAll('.setup-item').forEach((el, idx) => {\n        if (idx === index) {\n          el.classList.add('focused');\n        } else {\n          el.classList.remove('focused');\n        }\n      });\n    }\n\n    function updateAreaName(index, name) {\n      state.areas[index].name = name;\n      persistState();\n      renderSuggestionChips();\n      renderFormControls();\n      renderWheelSVG();\n    }\n\n    function clearSingleArea(index) {\n      state.areas[index].name = '';\n      persistState();\n      renderSetupGrid();\n      renderSuggestionChips();\n      renderFormControls();\n      renderWheelSVG();\n    }\n\n    function clearAllAreas() {\n      state.areas.forEach(a => a.name = '');\n      activeInputIndex = 0;\n      persistState();\n      renderSetupGrid();\n      renderSuggestionChips();\n      renderFormControls();\n      renderWheelSVG();\n      showToast('Campos vaciados');\n    }\n\n    function updateAreaColor(index, color) {\n      state.areas[index].color = color;\n      persistState();\n      renderSetupGrid();\n      renderFormControls();\n      renderWheelSVG();\n    }\n\n    function confirmAreasAndGoToWheel() {\n      \/\/ Ensure all 8 areas have a fallback title if left blank\n      state.areas.forEach((a, i) => {\n        if (!a.name || a.name.trim() === '') {\n          a.name = `\u00c1rea ${i + 1}`;\n        }\n      });\n      persistState();\n      renderSetupGrid();\n      renderSuggestionChips();\n      switchTab('wheel');\n    }\n\n    function renderFormControls() {\n      const container = document.getElementById('areasContainer');\n      container.innerHTML = '';\n\n      state.areas.forEach((area, index) => {\n        const card = document.createElement('div');\n        card.className = 'area-card';\n        card.innerHTML = `\n          <div class=\"area-top-row\">\n            <div class=\"area-title-group\">\n              <div class=\"color-picker-dot\" style=\"background-color: ${area.color}\">\n                <input type=\"color\" class=\"color-input-hidden\" value=\"${area.color}\" onchange=\"updateAreaColor(${index}, this.value)\">\n              <\/div>\n              <input type=\"text\" class=\"input-text-custom\" value=\"${escapeHtml(area.name)}\" placeholder=\"Nombre del \u00e1rea\" onchange=\"updateAreaName(${index}, this.value)\">\n            <\/div>\n            <div class=\"score-display\" id=\"badge-${index}\">${area.score}<\/div>\n          <\/div>\n          <div class=\"slider-container\">\n            <input type=\"range\" min=\"0\" max=\"10\" value=\"${area.score}\" oninput=\"updateAreaScore(${index}, this.value)\">\n          <\/div>\n          <div class=\"slider-labels\">\n            <span>0<\/span><span>2<\/span><span>4<\/span><span>6<\/span><span>8<\/span><span>10<\/span>\n          <\/div>\n        `;\n        container.appendChild(card);\n      });\n    }\n\n    function updateAreaScore(index, value) {\n      const num = parseInt(value, 10);\n      state.areas[index].score = num;\n      const badge = document.getElementById(`badge-${index}`);\n      if (badge) badge.innerText = num;\n      persistState();\n      renderWheelSVG();\n    }\n\n    function renderWheelSVG() {\n      const svg = document.getElementById('wheelSvg');\n      svg.innerHTML = '';\n\n      const maxRadius = 115;\n      const totalSlices = 8;\n      const anglePerSlice = (2 * Math.PI) \/ totalSlices;\n\n      \/\/ 1. Draw Sector Colors from Level 10 down to 1\n      for (let level = 10; level >= 1; level--) {\n        const levelRadius = (maxRadius \/ 10) * level;\n\n        state.areas.forEach((area, i) => {\n          const startAngle = i * anglePerSlice - Math.PI \/ 2;\n          const endAngle = (i + 1) * anglePerSlice - Math.PI \/ 2;\n\n          const x1 = levelRadius * Math.cos(startAngle);\n          const y1 = levelRadius * Math.sin(startAngle);\n          const x2 = levelRadius * Math.cos(endAngle);\n          const y2 = levelRadius * Math.sin(endAngle);\n\n          const pathData = `M 0 0 L ${x1} ${y1} A ${levelRadius} ${levelRadius} 0 0 1 ${x2} ${y2} Z`;\n\n          const path = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\n          path.setAttribute(\"d\", pathData);\n          path.setAttribute(\"class\", \"ring-sector\");\n\n          if (level <= area.score) {\n            path.setAttribute(\"fill\", area.color);\n            path.setAttribute(\"opacity\", \"0.88\");\n          } else {\n            path.setAttribute(\"fill\", \"#FFFFFF\");\n            path.setAttribute(\"opacity\", \"0.01\");\n          }\n\n          path.addEventListener(\"click\", () => {\n            updateAreaScore(i, level);\n            renderFormControls();\n          });\n\n          svg.appendChild(path);\n        });\n      }\n\n      \/\/ 2. Draw 10 Concentric Grid Lines\n      for (let level = 1; level <= 10; level++) {\n        const r = (maxRadius \/ 10) * level;\n        const circle = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\n        circle.setAttribute(\"cx\", \"0\");\n        circle.setAttribute(\"cy\", \"0\");\n        circle.setAttribute(\"r\", r);\n        circle.setAttribute(\"fill\", \"none\");\n        circle.setAttribute(\"stroke\", level === 10 ? \"#1F1B16\" : \"#A3A3A3\");\n        circle.setAttribute(\"stroke-width\", level === 10 ? \"2.2\" : \"0.75\");\n        circle.setAttribute(\"opacity\", level === 10 ? \"1\" : \"0.4\");\n        circle.setAttribute(\"style\", \"pointer-events: none;\");\n        svg.appendChild(circle);\n      }\n\n      \/\/ 3. Draw Radial Division Lines &#038; Text Labels\n      state.areas.forEach((area, i) => {\n        const angle = i * anglePerSlice - Math.PI \/ 2;\n        const x = maxRadius * Math.cos(angle);\n        const y = maxRadius * Math.sin(angle);\n\n        const line = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n        line.setAttribute(\"x1\", \"0\");\n        line.setAttribute(\"y1\", \"0\");\n        line.setAttribute(\"x2\", x);\n        line.setAttribute(\"y2\", y);\n        line.setAttribute(\"stroke\", \"#5C4033\");\n        line.setAttribute(\"stroke-width\", \"1.5\");\n        line.setAttribute(\"style\", \"pointer-events: none;\");\n        svg.appendChild(line);\n\n        const midAngle = angle + anglePerSlice \/ 2;\n        const labelRadius = maxRadius + 26;\n        const lx = labelRadius * Math.cos(midAngle);\n        const ly = labelRadius * Math.sin(midAngle);\n\n        const text = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n        text.setAttribute(\"x\", lx);\n        text.setAttribute(\"y\", ly);\n        text.setAttribute(\"class\", \"wheel-label\");\n\n        const displayLabel = area.name.length > 14 ? area.name.substring(0, 12) + \"\u2026\" : area.name;\n        text.textContent = displayLabel || `\u00c1rea ${i + 1}`;\n\n        svg.appendChild(text);\n      });\n    }\n\n    function renderMetrics() {\n      const container = document.getElementById('metricsSummary');\n      const scores = state.areas.map(a => a.score);\n      const avg = (scores.reduce((a, b) => a + b, 0) \/ scores.length).toFixed(1);\n      const minScore = Math.min(...scores);\n      const maxScore = Math.max(...scores);\n\n      container.innerHTML = `\n        <div class=\"metric-card\">\n          <div class=\"metric-value\">${avg}<\/div>\n          <div class=\"metric-label\">Promedio General<\/div>\n        <\/div>\n        <div class=\"metric-card\">\n          <div class=\"metric-value\" style=\"color: var(--terracotta);\">${minScore}<\/div>\n          <div class=\"metric-label\">Menor Puntaje<\/div>\n        <\/div>\n        <div class=\"metric-card\">\n          <div class=\"metric-value\" style=\"color: #4A7C59;\">${maxScore}<\/div>\n          <div class=\"metric-label\">Mayor Puntaje<\/div>\n        <\/div>\n      `;\n    }\n\n    function renderReflectionForm() {\n      const container = document.getElementById('reflectionList');\n      container.innerHTML = '';\n\n      state.areas.forEach((area, index) => {\n        const item = document.createElement('div');\n        item.className = 'reflection-item';\n        item.style.borderLeftColor = area.color;\n        item.innerHTML = `\n          <div class=\"reflection-title\">\n            <span>${escapeHtml(area.name || `\u00c1rea ${index + 1}`)}<\/span>\n            <span style=\"color: var(--brown-soft)\">${area.score} \/ 10<\/span>\n          <\/div>\n          <textarea class=\"action-input\" placeholder=\"\u00bfQu\u00e9 acci\u00f3n o h\u00e1bito te gustar\u00eda iniciar para mejorar esta \u00e1rea?\" onchange=\"updateNote(${index}, this.value)\">${escapeHtml(area.note || '')}<\/textarea>\n        `;\n        container.appendChild(item);\n      });\n    }\n\n    function updateNote(index, value) {\n      state.areas[index].note = value;\n      persistState();\n    }\n\n    function saveNotes() {\n      persistState();\n      showToast('Plan de Acci\u00f3n guardado');\n    }\n\n    function saveEvaluationSnapshot() {\n      const now = new Date();\n      const dateStr = now.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });\n\n      const snapshot = {\n        id: Date.now(),\n        date: dateStr,\n        areas: JSON.parse(JSON.stringify(state.areas))\n      };\n\n      state.history.unshift(snapshot);\n      persistState();\n      showToast('Evaluaci\u00f3n guardada en Historial');\n    }\n\n    function renderHistoryList() {\n      const container = document.getElementById('historyList');\n      container.innerHTML = '';\n\n      if (state.history.length === 0) {\n        container.innerHTML = `<p style=\"text-align: center; color: var(--gray); padding: 20px;\">No tienes evaluaciones guardadas a\u00fan. Haz clic en \"Guardar evaluaci\u00f3n\" para registrar tu progreso.<\/p>`;\n        return;\n      }\n\n      state.history.forEach((item) => {\n        const scores = item.areas.map(a => a.score);\n        const avg = (scores.reduce((a, b) => a + b, 0) \/ scores.length).toFixed(1);\n\n        const card = document.createElement('div');\n        card.className = 'history-card';\n        card.innerHTML = `\n          <div>\n            <div class=\"history-date\">${item.date}<\/div>\n            <div class=\"history-meta\">Promedio de satisfacci\u00f3n: <strong>${avg} \/ 10<\/strong><\/div>\n          <\/div>\n          <button class=\"btn btn-secondary\" style=\"padding: 5px 12px; font-size: 0.78rem;\" onclick=\"loadHistorySnapshot(${item.id})\">Cargar<\/button>\n        `;\n        container.appendChild(card);\n      });\n    }\n\n    function loadHistorySnapshot(id) {\n      const found = state.history.find(h => h.id === id);\n      if (found) {\n        state.areas = JSON.parse(JSON.stringify(found.areas));\n        persistState();\n        renderSetupGrid();\n        renderSuggestionChips();\n        renderFormControls();\n        renderWheelSVG();\n        switchTab('wheel');\n        showToast('Evaluaci\u00f3n cargada');\n      }\n    }\n\n    function clearHistory() {\n      if (confirm('\u00bfSeguro que deseas borrar todo el historial de evaluaciones?')) {\n        state.history = [];\n        persistState();\n        renderHistoryList();\n        showToast('Historial limpiado');\n      }\n    }\n\n    function escapeHtml(str) {\n      if (!str) return '';\n      return str.replace(\/[&<>\"']\/g, function(m) {\n        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#039;' }[m];\n      });\n    }\n\n    document.addEventListener('DOMContentLoaded', initApp);\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Test La rueda de la vida Test La rueda de la vida Eval\u00faa tus \u00e1reas m\u00e1s importantes en la vida [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":2,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}