/* ═══════════════════════════════════════════════════════════════
   RUEDA-DE-LA-VIDA · style.css
   Hereda nav y estructura de herramientas.css
   Mobile-first · Breakpoints: 480 · 768 · 900 · 1100
   ═══════════════════════════════════════════════════════════════ */
:root {
      --sand:    #f5f0e8;
      --linen:   #ede7d9;
      --terra:   #a0764e;
      --terra-d: #8b6b4a;
      --terra-l: #f0e6d8;
      --sage:    #4a6b58;
      --charcoal:#2c2925;
      --warm-mid:#6b5c48;
      --mist:    #ddd6c8;
      --white:   #fdfaf5;
    }

    body {
      font-family:'Jost', sans-serif;
      background:var(--sand);
      color:var(--charcoal);
      font-weight:300;
      min-height:100vh;
      overflow-x:hidden;
      padding-top:64px;
    }

    .page-header {
      padding:36px 20px 32px; text-align:center;
      background:linear-gradient(to bottom, var(--terra-l), var(--sand));
      border-bottom:1px solid var(--mist);
    }
    .page-eyebrow { font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--terra); margin-bottom:14px; display:block; }
    .page-title { font-family:'Cormorant Garamond', serif; font-size:clamp(28px,7vw,42px); font-weight:300; color:var(--charcoal); margin-bottom:12px; }
    .page-title em { font-style:italic; color:var(--terra); }
    .page-desc { font-size:clamp(13px,3vw,14.5px); line-height:1.8; color:var(--warm-mid); max-width:500px; margin:0 auto; }

    main { max-width:900px; margin:0 auto; padding:36px 20px 80px; }

    /* ─── CÓDIGO ANÓNIMO ─── */
    .codigo-banner {
      background:rgba(255,255,255,0.6); border:1px solid rgba(160,118,78,.2);
      border-left:3px solid var(--terra); padding:14px 16px;
      margin-bottom:28px; display:none; gap:10px; align-items:flex-start;
    }
    .codigo-banner p { font-size:12px; line-height:1.7; color:var(--warm-mid); }
    .codigo-banner strong { color:var(--charcoal); font-weight:500; }
    .codigo-banner code { font-family:monospace; font-size:13px; background:var(--terra-l); color:var(--terra-d); padding:1px 6px; letter-spacing:.05em; }
    .codigo-recover-toggle { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(160,118,78,.6); background:none; border:none; cursor:pointer; transition:color .2s; padding:0; margin-top:4px; display:block; }
    .codigo-recover-toggle:hover { color:var(--terra); }
    .codigo-recover-form { display:none; margin-top:10px; gap:8px; flex-wrap:wrap; }
    .codigo-recover-form.visible { display:flex; }
    .codigo-input { font-family:monospace; font-size:13px; padding:8px 12px; border:1px solid var(--mist); background:var(--white); color:var(--charcoal); outline:none; text-transform:uppercase; width:140px; letter-spacing:.08em; transition:border-color .2s; }
    .codigo-input:focus { border-color:var(--terra); }
    .codigo-btn { font-family:'Jost',sans-serif; font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--white); background:var(--terra); padding:8px 16px; border:none; cursor:pointer; }
    .codigo-btn:hover { background:var(--terra-d); }

    .tool-layout { display:grid; grid-template-columns:1fr; gap:32px; }

    /* ─── RUEDA ─── */
    .wheel-wrap { display:flex; flex-direction:column; align-items:center; position:sticky; top:72px; }
    .wheel-container { width:100%; max-width:380px; background:var(--white); border:1px solid var(--mist); padding:24px; }
    .wheel-svg { width:100%; height:auto; display:block; }
    .wheel-title { font-family:'Cormorant Garamond', serif; font-size:15px; font-weight:300; font-style:italic; color:var(--warm-mid); text-align:center; margin-bottom:16px; display:block; }
    .wheel-score { text-align:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--linen); }
    .wheel-score-num { font-family:'Cormorant Garamond', serif; font-size:36px; font-weight:300; color:var(--terra); }
    .wheel-score-label { font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm-mid); display:block; margin-top:2px; }
    .wheel-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
    .btn-wheel { font-family:'Jost',sans-serif; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:10px 20px; cursor:pointer; transition:all .2s; -webkit-tap-highlight-color:transparent; }
    .btn-wheel--primary { background:var(--terra); color:var(--white); border:none; }
    .btn-wheel--primary:hover { background:var(--terra-d); }
    .btn-wheel--secondary { background:none; color:var(--warm-mid); border:1px solid var(--mist); }
    .btn-wheel--secondary:hover { border-color:var(--terra); color:var(--terra); }

    /* ─── SLIDERS ─── */
    .sliders-section { background:var(--white); border:1px solid var(--mist); padding:28px 24px; }
    .section-label { font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--terra); margin-bottom:24px; display:block; }
    .area-row { margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--linen); }
    .area-row:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
    .area-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .area-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:300; color:var(--charcoal); }
    .area-name-icon { margin-right:6px; }
    .area-value { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:300; color:var(--terra); min-width:28px; text-align:right; }
    .area-slider { width:100%; height:4px; -webkit-appearance:none; appearance:none; background:var(--linen); outline:none; cursor:pointer; margin-bottom:8px; border-radius:0; }
    .area-slider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--terra); cursor:pointer; border:2px solid var(--white); box-shadow:0 1px 4px rgba(160,118,78,.3); transition:transform .15s; }
    .area-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }
    .area-slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--terra); cursor:pointer; border:2px solid var(--white); }
    .area-note { font-size:11.5px; color:var(--mist); font-style:italic; min-height:16px; transition:color .2s; }

    /* ─── REFLEXIÓN E HISTORIAL ─── */
    .reflection-section { background:var(--white); border:1px solid var(--mist); padding:28px 24px; }
    .field-label { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--warm-mid); margin-bottom:8px; display:block; }
    .field-textarea { width:100%; background:var(--sand); border:1px solid var(--mist); padding:14px 16px; font-family:'Jost',sans-serif; font-size:16px; font-weight:300; color:var(--charcoal); resize:vertical; min-height:90px; outline:none; line-height:1.7; transition:border-color .2s; -webkit-appearance:none; margin-bottom:20px; }
    .field-textarea:focus { border-color:var(--terra); }
    .field-textarea::placeholder { color:var(--mist); }
    .history-section { background:var(--white); border:1px solid var(--mist); padding:28px 24px; }
    .history-empty { font-size:13px; color:var(--mist); font-style:italic; text-align:center; padding:20px 0; }
    .snapshot-card { border:1px solid var(--linen); padding:16px 18px; margin-bottom:12px; }
    .snapshot-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
    .snapshot-date { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:300; font-style:italic; color:var(--warm-mid); }
    .snapshot-score { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:300; color:var(--terra); }
    .snapshot-bars { display:flex; flex-direction:column; gap:6px; }
    .snap-bar-row { display:flex; align-items:center; gap:10px; }
    .snap-bar-label { font-size:10.5px; color:var(--warm-mid); min-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .snap-bar-track { flex:1; height:5px; background:var(--linen); position:relative; }
    .snap-bar-fill { height:100%; background:var(--terra); opacity:.65; transition:width .4s ease; }
    .snap-bar-val { font-size:11px; color:var(--mist); min-width:14px; text-align:right; }
    .btn-delete { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(160,118,78,.3); background:none; border:none; cursor:pointer; transition:color .2s; padding:0; margin-top:10px; }
    .btn-delete:hover { color:var(--terra); }
    .field-sep { height:1px; background:var(--mist); margin:24px 0; }

    @media (min-width:480px) { main { padding:40px 28px 80px; } }
    @media (min-width:768px) {
      main { padding:44px 44px 80px; }
      .tool-layout { grid-template-columns:380px 1fr; gap:40px; align-items:start; }
    }
    @media (min-width:900px) { main { padding:44px 60px 80px; } }
        /* ── Badge código anónimo ─────────────────────────── */
        .codigo-badge {
            display: flex; align-items: flex-start; gap: 10px;
            background: #f0f7ee; border: 1.5px solid #c5dfc2;
            border-radius: 12px; padding: 14px 16px; margin: 16px 0;
        }
        .codigo-badge__icono { color: var(--sage); margin-top: 2px; flex-shrink: 0; }
        .codigo-badge__texto { flex: 1; }
        .codigo-badge__label { font-size: 13px; color: #4a6a47; line-height: 1.5; }
        .codigo-badge__codigo { display: block; font-size: 13px; color: #4a6a47; margin-top: 2px; }
        .codigo-badge__codigo strong {
            font-family: 'Cormorant Garamond', serif; font-size: 17px;
            color: var(--charcoal); letter-spacing: 1px;
        }
        .codigo-badge__aviso { display: block; font-size: 12px; color: #7a9a77; margin-top: 3px; }
        .codigo-badge__copiar { background: none; border: none; cursor: pointer; color: var(--sage); font-size: 11px; }
  
        dialog::backdrop { background: rgba(58,46,40,0.45); backdrop-filter: blur(4px); }