:root{
    --cream:#F4F0E5;
    --paper:#FFFDF8;
    --ink:#2B2924;
    --ink-soft:#726C5D;
    --sage:#5F7A63;
    --sage-dark:#42594A;
    --sage-light:#DFE7DA;
    --rose:#C98F7E;
    --rose-light:#F2E2DA;
    --border:#E2DCC8;
    --danger:#B5564A;
    --radius:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;background:var(--cream);}
  button,input,textarea{touch-action:manipulation;}
  /* El contenedor se llama #shell en el HTML, no #app: este bloque
     nunca se aplicó y toda la app se dibujaba con el serif por
     omisión del navegador en lugar de Inter. Venía así desde el
     archivo original. */
  #shell{
    font-family:'Inter',sans-serif;
    background:var(--cream);
    color:var(--ink);
    min-height:100vh;
    padding-bottom:60px;
  }
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  input,textarea{font-family:'Inter',sans-serif;}

  /* ---------- Header ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--sage-dark);
    color:#F8F5EC;
    padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
  }
  .brand{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#C9D8C4;font-weight:600;
  }
  .brand h1{font-size:19px;font-weight:600;color:#FBF8EF;}
  .topbar-btn{
    background:rgba(255,255,255,.12);
    color:#F8F5EC;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;font-weight:600;
  }
  .topbar-btn:active{background:rgba(255,255,255,.24);}

  /* ---------- List view ---------- */
  #view-list{max-width:900px;margin:0 auto;padding:20px;}
  .list-controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .search-input{
    flex:1;min-width:180px;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--paper);font-size:15px;color:var(--ink);
  }
  .btn-primary{
    background:var(--sage);color:#fff;border:none;border-radius:12px;
    padding:13px 20px;font-size:15px;font-weight:600;
    box-shadow:0 2px 6px rgba(66,89,74,.25);
    white-space:nowrap;
  }
  .btn-primary:active{background:var(--sage-dark);}
  .btn-ghost{
    background:transparent;color:var(--sage-dark);border:1.5px solid var(--sage);
    border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;
  }
  .btn-ghost:active{background:var(--sage-light);}
  .btn-danger-text{
    background:none;border:none;color:var(--danger);font-size:14px;
    font-weight:600;padding:8px;text-decoration:underline;
  }

  .backup-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
  .link-btn{
    background:none;border:none;color:var(--sage-dark);font-size:13px;font-weight:600;
    text-decoration:underline;padding:4px 0;
  }
  .cards{display:flex;flex-direction:column;gap:10px;}
  .card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .card-main h3{font-size:18px;font-weight:600;color:var(--ink);}
  .card-meta{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}
  .pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sage-light);color:var(--sage-dark);
    border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;
  }
  .card-arrow{font-size:22px;color:var(--sage);flex-shrink:0;}
  .empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:8px;}

  /* ---------- Form view ---------- */
  #view-form{max-width:760px;margin:0 auto;padding:18px 16px 40px;}
  .section{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 20px;margin-bottom:16px;position:relative;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .section::before{
    content:'';position:absolute;left:-1px;top:44px;bottom:-16px;width:2px;
    background:var(--sage-light);
  }
  .section:last-of-type::before{display:none;}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .badge{
    width:34px;height:34px;border-radius:50%;
    background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:16px;flex-shrink:0;
    box-shadow:0 0 0 4px var(--cream);
  }
  .section-head h2{font-size:17px;color:var(--ink);font-weight:600;}

  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:.01em;
  }
  .field input[type=text],.field input[type=number],.field input[type=tel],
  .field input[type=date],.field textarea{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:56px;}
  .field input:focus,.field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.row2{grid-template-columns:1fr;}}

  .toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
  .toggle-group button{
    border:1.5px solid var(--border);background:#FCFAF4;color:var(--ink-soft);
    border-radius:10px;padding:10px 16px;font-size:14.5px;font-weight:600;
  }
  .toggle-group button.active{
    background:var(--sage);border-color:var(--sage);color:#fff;
  }

  .cond-grid{display:grid;grid-template-columns:1fr;gap:10px;}
  .cond-row{
    padding:10px 12px;background:#FCFAF4;border:1px solid var(--border);border-radius:10px;
  }
  .cond-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .cond-row-top span{font-size:14.5px;color:var(--ink);}
  .cond-row .toggle-group button{padding:7px 13px;font-size:13.5px;}
  .cond-row input.esp-input{
    margin-top:8px;width:100%;padding:8px 11px;border:1px solid var(--border);
    border-radius:8px;background:#fff;font-size:13.5px;color:var(--ink);
  }
  .cond-row input.esp-input::placeholder{color:#B9B2A0;}

  .checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px;}
  .checkbox-row input{width:20px;height:20px;margin-top:1px;accent-color:var(--sage);flex-shrink:0;}
  .checkbox-row label{font-size:14px;color:var(--ink);line-height:1.4;}

  .consent-text{
    font-size:13.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--rose-light);border-radius:10px;padding:14px 16px;
  }

  .sig-wrap{margin-top:10px;}
  .sig-canvas-box{
    border:1.5px dashed var(--border);border-radius:10px;background:#FCFAF4;
    position:relative;touch-action:none;
  }
  .sig-canvas-box canvas{display:block;width:100%;height:130px;border-radius:10px;}
  .sig-hint{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#B9B2A0;pointer-events:none;
  }
  .sig-actions{display:flex;justify-content:flex-end;margin-top:6px;}
  .sig-clear{background:none;border:none;color:var(--rose);font-size:13px;font-weight:600;}

  .session-item{
    border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FCFAF4;
  }
  .session-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .session-item-head strong{font-size:14px;color:var(--sage-dark);}
  .session-item-head button{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;}

  .add-session-btn{
    width:100%;padding:13px;border-radius:10px;border:1.5px dashed var(--sage);
    background:var(--sage-light);color:var(--sage-dark);font-weight:600;font-size:14.5px;
  }

  .form-actions{
    position:sticky;bottom:0;background:var(--cream);
    padding:14px 0 4px;display:flex;gap:10px;
    margin-top:6px;
  }
  .form-actions .btn-primary{flex:1;}
  .form-actions .btn-ghost{flex:0 0 auto;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;
    font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;
    z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}


  :root{
    --cream:#F4F0E5;
    --paper:#FFFDF8;
    --ink:#2B2924;
    --ink-soft:#726C5D;
    --sage:#5F7A63;
    --sage-dark:#42594A;
    --sage-light:#DFE7DA;
    --rose:#C98F7E;
    --rose-light:#F2E2DA;
    --border:#E2DCC8;
    --danger:#B5564A;
    --radius:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;background:var(--cream);}
  button,input,textarea{touch-action:manipulation;}
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  input,textarea{font-family:'Inter',sans-serif;}

  /* ---------- Header ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--sage-dark);
    color:#F8F5EC;
    padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
  }
  .brand{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#C9D8C4;font-weight:600;
  }
  .brand h1{font-size:19px;font-weight:600;color:#FBF8EF;}
  .topbar-btn{
    background:rgba(255,255,255,.12);
    color:#F8F5EC;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;font-weight:600;
  }
  .topbar-btn:active{background:rgba(255,255,255,.24);}

  /* ---------- List view ---------- */
  #view-list{max-width:900px;margin:0 auto;padding:20px;}
  .list-controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .search-input{
    flex:1;min-width:180px;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--paper);font-size:15px;color:var(--ink);
  }
  .btn-primary{
    background:var(--sage);color:#fff;border:none;border-radius:12px;
    padding:13px 20px;font-size:15px;font-weight:600;
    box-shadow:0 2px 6px rgba(66,89,74,.25);
    white-space:nowrap;
  }
  .btn-primary:active{background:var(--sage-dark);}
  .btn-ghost{
    background:transparent;color:var(--sage-dark);border:1.5px solid var(--sage);
    border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;
  }
  .btn-ghost:active{background:var(--sage-light);}
  .btn-danger-text{
    background:none;border:none;color:var(--danger);font-size:14px;
    font-weight:600;padding:8px;text-decoration:underline;
  }
  .backup-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
  .link-btn{
    background:none;border:none;color:var(--sage-dark);font-size:13px;font-weight:600;
    text-decoration:underline;padding:4px 0;
  }

  .cards{display:flex;flex-direction:column;gap:10px;}
  .card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .card-main h3{font-size:18px;font-weight:600;color:var(--ink);}
  .card-meta{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}
  .pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sage-light);color:var(--sage-dark);
    border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;
  }
  .card-arrow{font-size:22px;color:var(--sage);flex-shrink:0;}
  .empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:8px;}

  /* ---------- Form view ---------- */
  #view-form{max-width:760px;margin:0 auto;padding:18px 16px 40px;}
  .section{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 20px;margin-bottom:16px;position:relative;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .section::before{
    content:'';position:absolute;left:-1px;top:44px;bottom:-16px;width:2px;
    background:var(--sage-light);
  }
  .section:last-of-type::before{display:none;}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .badge{
    width:34px;height:34px;border-radius:50%;
    background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:16px;flex-shrink:0;
    box-shadow:0 0 0 4px var(--cream);
  }
  .section-head h2{font-size:17px;color:var(--ink);font-weight:600;}

  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:.01em;
  }
  .field input[type=text],.field input[type=number],.field input[type=tel],
  .field input[type=date],.field textarea{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:56px;}
  .field input:focus,.field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.row2{grid-template-columns:1fr;}}

  .toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
  .toggle-group button{
    border:1.5px solid var(--border);background:#FCFAF4;color:var(--ink-soft);
    border-radius:10px;padding:10px 16px;font-size:14.5px;font-weight:600;
  }
  .toggle-group button.active{
    background:var(--sage);border-color:var(--sage);color:#fff;
  }
  .field-hint{font-size:12px;color:var(--ink-soft);margin-bottom:8px;margin-top:-2px;}

  .slider-row{display:flex;align-items:center;gap:14px;}
  .slider-row input[type=range]{flex:1;accent-color:var(--sage);height:34px;}
  .slider-value{
    width:40px;height:40px;border-radius:50%;background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;
  }

  .eva-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .eva-row{display:flex;gap:8px;min-width:max-content;padding:2px;}
  .eva-btn{
    width:52px;height:64px;border-radius:14px;border:1.5px solid var(--border);
    background:#FCFAF4;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:22px;flex-shrink:0;
  }
  .eva-btn span{font-size:12px;font-weight:700;color:var(--ink-soft);font-family:'Inter',sans-serif;}
  .eva-btn.active{background:var(--sage);border-color:var(--sage);}
  .eva-btn.active span{color:#fff;}
  .eva-caption{
    text-align:center;margin-top:10px;font-size:14px;font-weight:700;color:var(--sage-dark);
  }

  .cond-grid{display:grid;grid-template-columns:1fr;gap:10px;}
  .cond-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;background:#FCFAF4;border:1px solid var(--border);border-radius:10px;
  }
  .cond-row span{font-size:14.5px;color:var(--ink);}
  .cond-row .toggle-group button{padding:7px 13px;font-size:13.5px;}

  .checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px;}
  .checkbox-row input{width:20px;height:20px;margin-top:1px;accent-color:var(--sage);flex-shrink:0;}
  .checkbox-row label{font-size:14px;color:var(--ink);line-height:1.4;}

  .consent-text{
    font-size:13.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--rose-light);border-radius:10px;padding:14px 16px;
  }

  .ref-image-box{text-align:center;margin:6px 0 4px;}
  .ref-image-box img{max-width:220px;width:100%;border-radius:10px;border:1px solid var(--border);}
  .ref-image-caption{font-size:12px;color:var(--ink-soft);margin-top:6px;}
  .ref-image-tap-hint{font-size:11.5px;color:var(--sage-dark);margin-top:4px;font-weight:600;}

  .mapa-modal{
    position:fixed;inset:0;background:rgba(20,18,15,.92);z-index:200;
    display:flex;flex-direction:column;
  }
  .mapa-modal-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;flex-shrink:0;
  }
  .mapa-modal-bar button{
    background:rgba(255,255,255,.14);color:#F8F5EC;border:1px solid rgba(255,255,255,.3);
    border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;
  }
  .mapa-modal-controls{display:flex;gap:8px;}
  .mapa-modal-controls button{width:44px;font-size:18px;font-weight:700;}
  .mapa-modal-viewport{
    flex:1;overflow:hidden;position:relative;touch-action:none;
    display:flex;align-items:center;justify-content:center;
  }
  .mapa-modal-viewport img{
    max-width:none;max-height:none;width:auto;height:auto;
    will-change:transform;user-select:none;-webkit-user-drag:none;
  }
  .mapa-modal-hint{
    text-align:center;color:#D9D2C4;font-size:12.5px;padding:6px 14px 14px;flex-shrink:0;
  }

  .mapa-annotate-btn{
    margin-top:8px;background:var(--sage);color:#fff;border:none;border-radius:10px;
    padding:10px 16px;font-size:13.5px;font-weight:600;
  }
  .mapa-annotate-modal{
    position:fixed;inset:0;background:rgba(20,18,15,.96);z-index:210;
    display:flex;flex-direction:column;
  }
  .mapa-annotate-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
    padding:10px 12px;flex-shrink:0;
  }
  .mapa-annotate-bar > button{
    background:rgba(255,255,255,.14);color:#F8F5EC;border:1px solid rgba(255,255,255,.3);
    border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:600;flex-shrink:0;
  }
  .mapa-annotate-tools{display:flex;gap:6px;flex-wrap:wrap;}
  .mapa-tool-btn{
    background:rgba(255,255,255,.1);color:#F8F5EC;border:1px solid rgba(255,255,255,.25);
    border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;
  }
  .mapa-tool-btn.active{background:var(--sage);border-color:var(--sage);}
  .mapa-annotate-colors{
    display:flex;gap:10px;justify-content:center;padding:4px 12px 8px;flex-shrink:0;
  }
  .color-swatch{
    width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
    padding:0;
  }
  .color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--sage);}
  .mapa-annotate-canvas-wrap{
    flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px;
  }
  #mapa-annotate-canvas{
    touch-action:none;background:#fff;border-radius:8px;max-width:100%;height:auto;
  }
  .mapa-annotate-hint{
    text-align:center;color:#D9D2C4;font-size:12.5px;padding:4px 14px;flex-shrink:0;
  }
  .mapa-annotate-actions{
    padding:10px 14px 16px;flex-shrink:0;
  }
  .mapa-annotate-actions button{
    width:100%;background:var(--sage);color:#fff;border:none;border-radius:10px;
    padding:13px;font-size:15px;font-weight:600;
  }

  .sig-wrap{margin-top:10px;}
  .sig-canvas-box{
    border:1.5px dashed var(--border);border-radius:10px;background:#FCFAF4;
    position:relative;touch-action:none;
  }
  .sig-canvas-box canvas{display:block;width:100%;height:130px;border-radius:10px;}
  .sig-hint{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#B9B2A0;pointer-events:none;
  }
  .sig-actions{display:flex;justify-content:flex-end;margin-top:6px;}
  .sig-clear{background:none;border:none;color:var(--rose);font-size:13px;font-weight:600;}

  .session-item{
    border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FCFAF4;
  }
  .session-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .session-item-head strong{font-size:14px;color:var(--sage-dark);}
  .session-item-head button{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;}

  .add-session-btn{
    width:100%;padding:13px;border-radius:10px;border:1.5px dashed var(--sage);
    background:var(--sage-light);color:var(--sage-dark);font-weight:600;font-size:14.5px;
  }

  .form-actions{
    position:sticky;bottom:0;background:var(--cream);
    padding:14px 0 4px;display:flex;gap:10px;
    margin-top:6px;
  }
  .form-actions .btn-primary{flex:1;}
  .form-actions .btn-ghost{flex:0 0 auto;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;
    font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;
    z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}


  :root{
    --cream:#F4F0E5;
    --paper:#FFFDF8;
    --ink:#2B2924;
    --ink-soft:#726C5D;
    --sage:#5F7A63;
    --sage-dark:#42594A;
    --sage-light:#DFE7DA;
    --rose:#C98F7E;
    --rose-light:#F2E2DA;
    --border:#E2DCC8;
    --danger:#B5564A;
    --radius:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;background:var(--cream);}
  button,input,textarea{touch-action:manipulation;}
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  input,textarea{font-family:'Inter',sans-serif;}

  /* ---------- Header ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--sage-dark);
    color:#F8F5EC;
    padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    gap:10px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff;}
  .brand-text{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#C9D8C4;font-weight:600;
  }
  .brand h1{font-size:17px;font-weight:600;color:#FBF8EF;}
  .topbar-btn{
    background:rgba(255,255,255,.12);
    color:#F8F5EC;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;font-weight:600;
    flex-shrink:0;
  }
  .topbar-btn:active{background:rgba(255,255,255,.24);}

  /* ---------- List view ---------- */
  #view-list{max-width:900px;margin:0 auto;padding:20px;}
  .list-controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .search-input{
    flex:1;min-width:180px;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--paper);font-size:15px;color:var(--ink);
  }
  .btn-primary{
    background:var(--sage);color:#fff;border:none;border-radius:12px;
    padding:13px 20px;font-size:15px;font-weight:600;
    box-shadow:0 2px 6px rgba(66,89,74,.25);
    white-space:nowrap;
  }
  .btn-primary:active{background:var(--sage-dark);}
  .btn-ghost{
    background:transparent;color:var(--sage-dark);border:1.5px solid var(--sage);
    border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;
  }
  .btn-ghost:active{background:var(--sage-light);}
  .btn-danger-text{
    background:none;border:none;color:var(--danger);font-size:14px;
    font-weight:600;padding:8px;text-decoration:underline;
  }
  .backup-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
  .link-btn{
    background:none;border:none;color:var(--sage-dark);font-size:13px;font-weight:600;
    text-decoration:underline;padding:4px 0;
  }

  .cards{display:flex;flex-direction:column;gap:10px;}
  .card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .card-main h3{font-size:18px;font-weight:600;color:var(--ink);}
  .card-meta{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}
  .pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sage-light);color:var(--sage-dark);
    border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;
  }
  .card-arrow{font-size:22px;color:var(--sage);flex-shrink:0;}
  .empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:8px;}

  /* ---------- Form view ---------- */
  #view-form{max-width:760px;margin:0 auto;padding:18px 16px 40px;}
  .section{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 20px;margin-bottom:16px;position:relative;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .section::before{
    content:'';position:absolute;left:-1px;top:44px;bottom:-16px;width:2px;
    background:var(--sage-light);
  }
  .section:last-of-type::before{display:none;}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .badge{
    width:34px;height:34px;border-radius:50%;
    background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:16px;flex-shrink:0;
    box-shadow:0 0 0 4px var(--cream);
  }
  .section-head h2{font-size:17px;color:var(--ink);font-weight:600;}

  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:.01em;
  }
  .field input[type=text],.field input[type=number],.field input[type=tel],
  .field input[type=date],.field textarea{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:56px;}
  .field select{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field input:focus,.field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;}

  .treatment-list{
    display:flex;flex-direction:column;gap:2px;max-height:360px;overflow-y:auto;
    border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#FCFAF4;
    -webkit-overflow-scrolling:touch;
  }
  .treatment-cat{
    font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:var(--sage-dark);margin:12px 0 4px;
  }
  .treatment-cat:first-child{margin-top:0;}
  .treatment-item{
    display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:8px;
  }
  .treatment-item input{width:21px;height:21px;margin-top:2px;accent-color:var(--sage);flex-shrink:0;}
  .treatment-item span{font-size:14px;color:var(--ink);line-height:1.35;}
  .treatment-item .price{color:var(--sage-dark);font-weight:700;white-space:nowrap;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.row2{grid-template-columns:1fr;}}

  .toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
  .toggle-group button{
    border:1.5px solid var(--border);background:#FCFAF4;color:var(--ink-soft);
    border-radius:10px;padding:10px 16px;font-size:14.5px;font-weight:600;
  }
  .toggle-group button.active{
    background:var(--sage);border-color:var(--sage);color:#fff;
  }
  .field-hint{font-size:12px;color:var(--ink-soft);margin-bottom:8px;margin-top:-2px;}

  .assess-row{
    background:#FCFAF4;border:1px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:12px;
  }
  .assess-row .field-label{
    font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;display:block;
  }

  .cond-grid{display:flex;flex-direction:column;gap:10px;}
  .cond-row{
    padding:12px 14px;background:#FCFAF4;border:1px solid var(--border);border-radius:10px;
  }
  .cond-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .cond-row-top span{font-size:14.5px;color:var(--ink);font-weight:500;}
  .cond-row .toggle-group button{padding:7px 13px;font-size:13.5px;}
  .cond-row input.esp-input{
    margin-top:8px;width:100%;padding:8px 11px;border:1px solid var(--border);
    border-radius:8px;background:#fff;font-size:13.5px;color:var(--ink);
  }
  .cond-row input.esp-input::placeholder{color:#B9B2A0;}

  .consent-text{
    font-size:13.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--rose-light);border-radius:10px;padding:14px 16px;
  }

  .sig-wrap{margin-top:10px;}
  .sig-canvas-box{
    border:1.5px dashed var(--border);border-radius:10px;background:#FCFAF4;
    position:relative;touch-action:none;
  }
  .sig-canvas-box canvas{display:block;width:100%;height:130px;border-radius:10px;}
  .sig-hint{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#B9B2A0;pointer-events:none;
  }
  .sig-actions{display:flex;justify-content:flex-end;margin-top:6px;}
  .sig-clear{background:none;border:none;color:var(--rose);font-size:13px;font-weight:600;}

  .session-item{
    border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FCFAF4;
  }
  .session-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .session-item-head strong{font-size:14px;color:var(--sage-dark);}
  .session-item-head button{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;}

  .add-session-btn{
    width:100%;padding:13px;border-radius:10px;border:1.5px dashed var(--sage);
    background:var(--sage-light);color:var(--sage-dark);font-weight:600;font-size:14.5px;
  }

  .form-actions{
    position:sticky;bottom:0;background:var(--cream);
    padding:14px 0 4px;display:flex;gap:10px;
    margin-top:6px;
  }
  .form-actions .btn-primary{flex:1;}
  .form-actions .btn-ghost{flex:0 0 auto;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;
    font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;
    z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}


  :root{
    --cream:#F4F0E5;
    --paper:#FFFDF8;
    --ink:#2B2924;
    --ink-soft:#726C5D;
    --sage:#5F7A63;
    --sage-dark:#42594A;
    --sage-light:#DFE7DA;
    --rose:#C98F7E;
    --rose-light:#F2E2DA;
    --border:#E2DCC8;
    --danger:#B5564A;
    --radius:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;background:var(--cream);}
  button,input,textarea{touch-action:manipulation;}
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  input,textarea{font-family:'Inter',sans-serif;}

  /* ---------- Header ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--sage-dark);
    color:#F8F5EC;
    padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    gap:10px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff;}
  .brand-text{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#C9D8C4;font-weight:600;
  }
  .brand h1{font-size:17px;font-weight:600;color:#FBF8EF;}
  .topbar-btn{
    background:rgba(255,255,255,.12);
    color:#F8F5EC;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;font-weight:600;
    flex-shrink:0;
  }
  .topbar-btn:active{background:rgba(255,255,255,.24);}

  /* ---------- List view ---------- */
  #view-list{max-width:900px;margin:0 auto;padding:20px;}
  .list-controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .search-input{
    flex:1;min-width:180px;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--paper);font-size:15px;color:var(--ink);
  }
  .btn-primary{
    background:var(--sage);color:#fff;border:none;border-radius:12px;
    padding:13px 20px;font-size:15px;font-weight:600;
    box-shadow:0 2px 6px rgba(66,89,74,.25);
    white-space:nowrap;
  }
  .btn-primary:active{background:var(--sage-dark);}
  .btn-ghost{
    background:transparent;color:var(--sage-dark);border:1.5px solid var(--sage);
    border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;
  }
  .btn-ghost:active{background:var(--sage-light);}
  .btn-danger-text{
    background:none;border:none;color:var(--danger);font-size:14px;
    font-weight:600;padding:8px;text-decoration:underline;
  }
  .backup-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
  .link-btn{
    background:none;border:none;color:var(--sage-dark);font-size:13px;font-weight:600;
    text-decoration:underline;padding:4px 0;
  }

  .cards{display:flex;flex-direction:column;gap:10px;}
  .card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .card-main h3{font-size:18px;font-weight:600;color:var(--ink);}
  .card-meta{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}
  .pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sage-light);color:var(--sage-dark);
    border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;
  }
  .card-arrow{font-size:22px;color:var(--sage);flex-shrink:0;}
  .empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:8px;}

  /* ---------- Form view ---------- */
  #view-form{max-width:760px;margin:0 auto;padding:18px 16px 40px;}
  .section{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 20px;margin-bottom:16px;position:relative;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .section::before{
    content:'';position:absolute;left:-1px;top:44px;bottom:-16px;width:2px;
    background:var(--sage-light);
  }
  .section:last-of-type::before{display:none;}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .badge{
    width:34px;height:34px;border-radius:50%;
    background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:15px;flex-shrink:0;
    box-shadow:0 0 0 4px var(--cream);
  }
  .section-head h2{font-size:16.5px;color:var(--ink);font-weight:600;}
  .subhead{
    font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--sage-dark);margin:20px 0 10px;
  }

  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:.01em;
  }
  .field input[type=text],.field input[type=number],.field input[type=tel],
  .field input[type=date],.field textarea{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:56px;}
  .field input:focus,.field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.row2{grid-template-columns:1fr;}}

  .toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
  .toggle-group button{
    border:1.5px solid var(--border);background:#FCFAF4;color:var(--ink-soft);
    border-radius:10px;padding:10px 16px;font-size:14.5px;font-weight:600;
  }
  .toggle-group button.active{
    background:var(--sage);border-color:var(--sage);color:#fff;
  }
  .field-hint{font-size:12px;color:var(--ink-soft);margin-bottom:8px;margin-top:-2px;}
  .donde-input{margin-top:8px;}
  .donde-input input{
    width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;
    background:#FCFAF4;font-size:14px;color:var(--ink);
  }
  .donde-input input::placeholder{color:#B9B2A0;}

  .assess-row{
    background:#FCFAF4;border:1px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:12px;
  }
  .assess-row .field-label{
    font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;display:block;
  }

  .cond-grid{display:flex;flex-direction:column;gap:10px;}
  .cond-row{
    padding:12px 14px;background:#FCFAF4;border:1px solid var(--border);border-radius:10px;
  }
  .cond-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .cond-row-top span{font-size:14.5px;color:var(--ink);font-weight:500;}
  .cond-row .toggle-group button{padding:7px 13px;font-size:13.5px;}
  .cond-row input.esp-input{
    margin-top:8px;width:100%;padding:8px 11px;border:1px solid var(--border);
    border-radius:8px;background:#fff;font-size:13.5px;color:var(--ink);
  }
  .cond-row input.esp-input::placeholder{color:#B9B2A0;}

  .checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px;}
  .checkbox-row input{width:20px;height:20px;margin-top:1px;accent-color:var(--sage);flex-shrink:0;}
  .checkbox-row label{font-size:14px;color:var(--ink);line-height:1.4;}

  .consent-text{
    font-size:13.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--rose-light);border-radius:10px;padding:14px 16px;
  }
  .consent-text strong{display:block;color:var(--ink);margin:12px 0 4px;font-size:13px;letter-spacing:.02em;}
  .consent-text p{margin:0 0 4px;}

  .ref-image-box{text-align:center;margin:6px 0 4px;}
  .ref-image-box img{max-width:100%;width:100%;border-radius:10px;border:1px solid var(--border);}
  .ref-image-caption{font-size:12px;color:var(--ink-soft);margin-top:6px;}
  .ref-image-tap-hint{font-size:11.5px;color:var(--sage-dark);margin-top:4px;font-weight:600;}

  .mapa-modal{
    position:fixed;inset:0;background:rgba(20,18,15,.92);z-index:200;
    display:flex;flex-direction:column;
  }
  .mapa-modal-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;flex-shrink:0;
  }
  .mapa-modal-bar button{
    background:rgba(255,255,255,.14);color:#F8F5EC;border:1px solid rgba(255,255,255,.3);
    border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;
  }
  .mapa-modal-controls{display:flex;gap:8px;}
  .mapa-modal-controls button{width:44px;font-size:18px;font-weight:700;}
  .mapa-modal-viewport{
    flex:1;overflow:hidden;position:relative;touch-action:none;
    display:flex;align-items:center;justify-content:center;
  }
  .mapa-modal-viewport img{
    max-width:none;max-height:none;width:auto;height:auto;
    will-change:transform;user-select:none;-webkit-user-drag:none;
  }
  .mapa-modal-hint{
    text-align:center;color:#D9D2C4;font-size:12.5px;padding:6px 14px 14px;flex-shrink:0;
  }

  .mapa-annotate-btn{
    margin-top:8px;background:var(--sage);color:#fff;border:none;border-radius:10px;
    padding:10px 16px;font-size:13.5px;font-weight:600;
  }
  .mapa-annotate-modal{
    position:fixed;inset:0;background:rgba(20,18,15,.96);z-index:210;
    display:flex;flex-direction:column;
  }
  .mapa-annotate-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
    padding:10px 12px;flex-shrink:0;
  }
  .mapa-annotate-bar > button{
    background:rgba(255,255,255,.14);color:#F8F5EC;border:1px solid rgba(255,255,255,.3);
    border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:600;flex-shrink:0;
  }
  .mapa-annotate-tools{display:flex;gap:6px;flex-wrap:wrap;}
  .mapa-tool-btn{
    background:rgba(255,255,255,.1);color:#F8F5EC;border:1px solid rgba(255,255,255,.25);
    border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;
  }
  .mapa-tool-btn.active{background:var(--sage);border-color:var(--sage);}
  .mapa-annotate-colors{
    display:flex;gap:10px;justify-content:center;padding:4px 12px 8px;flex-shrink:0;
  }
  .color-swatch{
    width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
    padding:0;
  }
  .color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--sage);}
  .mapa-annotate-canvas-wrap{
    flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px;
  }
  #mapa-annotate-canvas{
    touch-action:none;background:#fff;border-radius:8px;max-width:100%;height:auto;
  }
  .mapa-annotate-hint{
    text-align:center;color:#D9D2C4;font-size:12.5px;padding:4px 14px;flex-shrink:0;
  }
  .mapa-annotate-actions{
    padding:10px 14px 16px;flex-shrink:0;
  }
  .mapa-annotate-actions button{
    width:100%;background:var(--sage);color:#fff;border:none;border-radius:10px;
    padding:13px;font-size:15px;font-weight:600;
  }

  .eva-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .eva-row{display:flex;gap:8px;min-width:max-content;padding:2px;}
  .eva-btn{
    width:52px;height:64px;border-radius:14px;border:1.5px solid var(--border);
    background:#FCFAF4;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:22px;flex-shrink:0;
  }
  .eva-btn span{font-size:12px;font-weight:700;color:var(--ink-soft);font-family:'Inter',sans-serif;}
  .eva-btn.active{background:var(--sage);border-color:var(--sage);}
  .eva-btn.active span{color:#fff;}
  .eva-caption{
    text-align:center;margin-top:10px;font-size:14px;font-weight:700;color:var(--sage-dark);
  }

  .sig-wrap{margin-top:10px;}
  .sig-canvas-box{
    border:1.5px dashed var(--border);border-radius:10px;background:#FCFAF4;
    position:relative;touch-action:none;
  }
  .sig-canvas-box canvas{display:block;width:100%;height:130px;border-radius:10px;}
  .sig-hint{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#B9B2A0;pointer-events:none;
  }
  .sig-actions{display:flex;justify-content:flex-end;margin-top:6px;}
  .sig-clear{background:none;border:none;color:var(--rose);font-size:13px;font-weight:600;}

  .session-item{
    border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FCFAF4;
  }
  .session-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .session-item-head strong{font-size:14px;color:var(--sage-dark);}
  .session-item-head button{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;}

  .add-session-btn{
    width:100%;padding:13px;border-radius:10px;border:1.5px dashed var(--sage);
    background:var(--sage-light);color:var(--sage-dark);font-weight:600;font-size:14.5px;
  }

  .form-actions{
    position:sticky;bottom:0;background:var(--cream);
    padding:14px 0 4px;display:flex;gap:10px;
    margin-top:6px;
  }
  .form-actions .btn-primary{flex:1;}
  .form-actions .btn-ghost{flex:0 0 auto;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;
    font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;
    z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}


  :root{
    --cream:#F4F0E5;
    --paper:#FFFDF8;
    --ink:#2B2924;
    --ink-soft:#726C5D;
    --sage:#5F7A63;
    --sage-dark:#42594A;
    --sage-light:#DFE7DA;
    --rose:#C98F7E;
    --rose-light:#F2E2DA;
    --border:#E2DCC8;
    --danger:#B5564A;
    --radius:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;background:var(--cream);}
  button,input,textarea{touch-action:manipulation;}
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  input,textarea{font-family:'Inter',sans-serif;}

  /* ---------- Header ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--sage-dark);
    color:#F8F5EC;
    padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    gap:10px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff;}
  .brand-text{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#C9D8C4;font-weight:600;
  }
  .brand h1{font-size:17px;font-weight:600;color:#FBF8EF;}
  .topbar-btn{
    background:rgba(255,255,255,.12);
    color:#F8F5EC;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;font-weight:600;
    flex-shrink:0;
  }
  .topbar-btn:active{background:rgba(255,255,255,.24);}

  /* ---------- List view ---------- */
  #view-list{max-width:900px;margin:0 auto;padding:20px;}
  .list-controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .search-input{
    flex:1;min-width:180px;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--paper);font-size:15px;color:var(--ink);
  }
  .btn-primary{
    background:var(--sage);color:#fff;border:none;border-radius:12px;
    padding:13px 20px;font-size:15px;font-weight:600;
    box-shadow:0 2px 6px rgba(66,89,74,.25);
    white-space:nowrap;
  }
  .btn-primary:active{background:var(--sage-dark);}
  .btn-ghost{
    background:transparent;color:var(--sage-dark);border:1.5px solid var(--sage);
    border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;
  }
  .btn-ghost:active{background:var(--sage-light);}
  .btn-danger-text{
    background:none;border:none;color:var(--danger);font-size:14px;
    font-weight:600;padding:8px;text-decoration:underline;
  }
  .backup-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
  .link-btn{
    background:none;border:none;color:var(--sage-dark);font-size:13px;font-weight:600;
    text-decoration:underline;padding:4px 0;
  }

  .cards{display:flex;flex-direction:column;gap:10px;}
  .card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .card-main h3{font-size:18px;font-weight:600;color:var(--ink);}
  .card-meta{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}
  .pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sage-light);color:var(--sage-dark);
    border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;
  }
  .card-arrow{font-size:22px;color:var(--sage);flex-shrink:0;}
  .empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:8px;}

  /* ---------- Form view ---------- */
  #view-form{max-width:760px;margin:0 auto;padding:18px 16px 40px;}
  .section{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 20px;margin-bottom:16px;position:relative;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .section::before{
    content:'';position:absolute;left:-1px;top:44px;bottom:-16px;width:2px;
    background:var(--sage-light);
  }
  .section:last-of-type::before{display:none;}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .badge{
    width:34px;height:34px;border-radius:50%;
    background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:16px;flex-shrink:0;
    box-shadow:0 0 0 4px var(--cream);
  }
  .section-head h2{font-size:17px;color:var(--ink);font-weight:600;}

  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:.01em;
  }
  .field input[type=text],.field input[type=number],.field input[type=tel],
  .field input[type=date],.field textarea{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:56px;}
  .field input:focus,.field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.row2{grid-template-columns:1fr;}}

  .toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
  .toggle-group button{
    border:1.5px solid var(--border);background:#FCFAF4;color:var(--ink-soft);
    border-radius:10px;padding:10px 16px;font-size:14.5px;font-weight:600;
  }
  .toggle-group button.active{
    background:var(--sage);border-color:var(--sage);color:#fff;
  }
  .field-hint{font-size:12px;color:var(--ink-soft);margin-bottom:8px;margin-top:-2px;}
  .donde-input{margin-top:8px;}
  .donde-input input{
    width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;
    background:#FCFAF4;font-size:14px;color:var(--ink);
  }
  .donde-input input::placeholder{color:#B9B2A0;}

  .assess-row{
    background:#FCFAF4;border:1px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:12px;
  }
  .assess-row .field-label{
    font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;display:block;
  }

  .cond-grid{display:flex;flex-direction:column;gap:10px;}
  .cond-row{
    padding:12px 14px;background:#FCFAF4;border:1px solid var(--border);border-radius:10px;
  }
  .cond-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .cond-row-top span{font-size:14.5px;color:var(--ink);font-weight:500;}
  .cond-row .toggle-group button{padding:7px 13px;font-size:13.5px;}
  .cond-row input.esp-input{
    margin-top:8px;width:100%;padding:8px 11px;border:1px solid var(--border);
    border-radius:8px;background:#fff;font-size:13.5px;color:var(--ink);
  }
  .cond-row input.esp-input::placeholder{color:#B9B2A0;}

  .measure-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.measure-grid{grid-template-columns:1fr;}}
  .measure-field label{font-size:12.5px;}
  .measure-field .unit-input{position:relative;}
  .measure-field input{padding-right:38px;}
  .measure-field .unit{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    font-size:12.5px;color:var(--ink-soft);font-weight:600;pointer-events:none;
  }

  .consent-text{
    font-size:13.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--rose-light);border-radius:10px;padding:14px 16px;
  }

  .sig-wrap{margin-top:10px;}
  .sig-canvas-box{
    border:1.5px dashed var(--border);border-radius:10px;background:#FCFAF4;
    position:relative;touch-action:none;
  }
  .sig-canvas-box canvas{display:block;width:100%;height:130px;border-radius:10px;}
  .sig-hint{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#B9B2A0;pointer-events:none;
  }
  .sig-actions{display:flex;justify-content:flex-end;margin-top:6px;}
  .sig-clear{background:none;border:none;color:var(--rose);font-size:13px;font-weight:600;}

  .session-item{
    border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FCFAF4;
  }
  .session-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .session-item-head strong{font-size:14px;color:var(--sage-dark);}
  .session-item-head button{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;}

  .add-session-btn{
    width:100%;padding:13px;border-radius:10px;border:1.5px dashed var(--sage);
    background:var(--sage-light);color:var(--sage-dark);font-weight:600;font-size:14.5px;
  }

  .form-actions{
    position:sticky;bottom:0;background:var(--cream);
    padding:14px 0 4px;display:flex;gap:10px;
    margin-top:6px;
  }
  .form-actions .btn-primary{flex:1;}
  .form-actions .btn-ghost{flex:0 0 auto;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;
    font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;
    z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}


  :root{
    --cream:#F4F0E5;
    --paper:#FFFDF8;
    --ink:#2B2924;
    --ink-soft:#726C5D;
    --sage:#5F7A63;
    --sage-dark:#42594A;
    --sage-light:#DFE7DA;
    --rose:#C98F7E;
    --rose-light:#F2E2DA;
    --border:#E2DCC8;
    --danger:#B5564A;
    --radius:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;background:var(--cream);}
  button,input,textarea{touch-action:manipulation;}
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  input,textarea{font-family:'Inter',sans-serif;}

  /* ---------- Header ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--sage-dark);
    color:#F8F5EC;
    padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    gap:10px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff;}
  .brand-text{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#C9D8C4;font-weight:600;
  }
  .brand h1{font-size:17px;font-weight:600;color:#FBF8EF;}
  .topbar-btn{
    background:rgba(255,255,255,.12);
    color:#F8F5EC;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;font-weight:600;
    flex-shrink:0;
  }
  .topbar-btn:active{background:rgba(255,255,255,.24);}

  /* ---------- List view ---------- */
  #view-list{max-width:900px;margin:0 auto;padding:20px;}
  .list-controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .search-input{
    flex:1;min-width:180px;
    padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--paper);font-size:15px;color:var(--ink);
  }
  .btn-primary{
    background:var(--sage);color:#fff;border:none;border-radius:12px;
    padding:13px 20px;font-size:15px;font-weight:600;
    box-shadow:0 2px 6px rgba(66,89,74,.25);
    white-space:nowrap;
  }
  .btn-primary:active{background:var(--sage-dark);}
  .btn-ghost{
    background:transparent;color:var(--sage-dark);border:1.5px solid var(--sage);
    border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;
  }
  .btn-ghost:active{background:var(--sage-light);}
  .btn-danger-text{
    background:none;border:none;color:var(--danger);font-size:14px;
    font-weight:600;padding:8px;text-decoration:underline;
  }
  .backup-row{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
  .link-btn{
    background:none;border:none;color:var(--sage-dark);font-size:13px;font-weight:600;
    text-decoration:underline;padding:4px 0;
  }

  .cards{display:flex;flex-direction:column;gap:10px;}
  .card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .card-main h3{font-size:18px;font-weight:600;color:var(--ink);}
  .card-meta{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}
  .pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sage-light);color:var(--sage-dark);
    border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;
  }
  .card-arrow{font-size:22px;color:var(--sage);flex-shrink:0;}
  .empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:8px;}

  /* ---------- Form view ---------- */
  #view-form{max-width:760px;margin:0 auto;padding:18px 16px 40px;}
  .section{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 20px;margin-bottom:16px;position:relative;
    box-shadow:0 1px 3px rgba(43,41,36,.05);
  }
  .section::before{
    content:'';position:absolute;left:-1px;top:44px;bottom:-16px;width:2px;
    background:var(--sage-light);
  }
  .section:last-of-type::before{display:none;}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .badge{
    width:34px;height:34px;border-radius:50%;
    background:var(--sage);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:15px;flex-shrink:0;
    box-shadow:0 0 0 4px var(--cream);
  }
  .section-head h2{font-size:16.5px;color:var(--ink);font-weight:600;}
  .subhead{
    font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--sage-dark);margin:20px 0 10px;
  }

  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:.01em;
  }
  .field input[type=text],.field input[type=number],.field input[type=tel],
  .field input[type=date],.field textarea{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;
    background:#FCFAF4;font-size:15.5px;color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:56px;}
  .field input:focus,.field textarea:focus{outline:2px solid var(--sage);outline-offset:1px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:520px){.row2{grid-template-columns:1fr;}}

  .toggle-group{display:flex;gap:8px;flex-wrap:wrap;}
  .toggle-group button{
    border:1.5px solid var(--border);background:#FCFAF4;color:var(--ink-soft);
    border-radius:10px;padding:10px 16px;font-size:14.5px;font-weight:600;
  }
  .toggle-group button.active{
    background:var(--sage);border-color:var(--sage);color:#fff;
  }
  .field-hint{font-size:12px;color:var(--ink-soft);margin-bottom:8px;margin-top:-2px;}
  .donde-input{margin-top:8px;}
  .donde-input input{
    width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;
    background:#FCFAF4;font-size:14px;color:var(--ink);
  }
  .donde-input input::placeholder{color:#B9B2A0;}

  .assess-row{
    background:#FCFAF4;border:1px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:12px;
  }
  .assess-row .field-label{
    font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;display:block;
  }

  .cond-grid{display:flex;flex-direction:column;gap:10px;}
  .cond-row{
    padding:12px 14px;background:#FCFAF4;border:1px solid var(--border);border-radius:10px;
  }
  .cond-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .cond-row-top span{font-size:14.5px;color:var(--ink);font-weight:500;}
  .cond-row .toggle-group button{padding:7px 13px;font-size:13.5px;}
  .cond-row input.esp-input{
    margin-top:8px;width:100%;padding:8px 11px;border:1px solid var(--border);
    border-radius:8px;background:#fff;font-size:13.5px;color:var(--ink);
  }
  .cond-row input.esp-input::placeholder{color:#B9B2A0;}

  .checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px;}
  .checkbox-row input{width:20px;height:20px;margin-top:1px;accent-color:var(--sage);flex-shrink:0;}
  .checkbox-row label{font-size:14px;color:var(--ink);line-height:1.4;}

  .consent-text{
    font-size:13.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--rose-light);border-radius:10px;padding:14px 16px;
  }
  .consent-text strong{display:block;color:var(--ink);margin:12px 0 4px;font-size:13px;letter-spacing:.02em;}
  .consent-text p{margin:0 0 4px;}

  .ref-image-box{text-align:center;margin:6px 0 4px;}
  .ref-image-box img{max-width:100%;width:100%;border-radius:10px;border:1px solid var(--border);}
  .ref-image-caption{font-size:12px;color:var(--ink-soft);margin-top:6px;}
  .ref-image-tap-hint{font-size:11.5px;color:var(--sage-dark);margin-top:4px;font-weight:600;}

  .mapa-modal{
    position:fixed;inset:0;background:rgba(20,18,15,.92);z-index:200;
    display:flex;flex-direction:column;
  }
  .mapa-modal-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;flex-shrink:0;
  }
  .mapa-modal-bar button{
    background:rgba(255,255,255,.14);color:#F8F5EC;border:1px solid rgba(255,255,255,.3);
    border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;
  }
  .mapa-modal-controls{display:flex;gap:8px;}
  .mapa-modal-controls button{width:44px;font-size:18px;font-weight:700;}
  .mapa-modal-viewport{
    flex:1;overflow:hidden;position:relative;touch-action:none;
    display:flex;align-items:center;justify-content:center;
  }
  .mapa-modal-viewport img{
    max-width:none;max-height:none;width:auto;height:auto;
    will-change:transform;user-select:none;-webkit-user-drag:none;
  }
  .mapa-modal-hint{
    text-align:center;color:#D9D2C4;font-size:12.5px;padding:6px 14px 14px;flex-shrink:0;
  }

  .mapa-annotate-btn{
    margin-top:8px;background:var(--sage);color:#fff;border:none;border-radius:10px;
    padding:10px 16px;font-size:13.5px;font-weight:600;
  }
  .mapa-annotate-modal{
    position:fixed;inset:0;background:rgba(20,18,15,.96);z-index:210;
    display:flex;flex-direction:column;
  }
  .mapa-annotate-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
    padding:10px 12px;flex-shrink:0;
  }
  .mapa-annotate-bar > button{
    background:rgba(255,255,255,.14);color:#F8F5EC;border:1px solid rgba(255,255,255,.3);
    border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:600;flex-shrink:0;
  }
  .mapa-annotate-tools{display:flex;gap:6px;flex-wrap:wrap;}
  .mapa-tool-btn{
    background:rgba(255,255,255,.1);color:#F8F5EC;border:1px solid rgba(255,255,255,.25);
    border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;
  }
  .mapa-tool-btn.active{background:var(--sage);border-color:var(--sage);}
  .mapa-annotate-colors{
    display:flex;gap:10px;justify-content:center;padding:4px 12px 8px;flex-shrink:0;
  }
  .color-swatch{
    width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
    padding:0;
  }
  .color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--sage);}
  .mapa-annotate-canvas-wrap{
    flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px;
  }
  #mapa-annotate-canvas{
    touch-action:none;background:#fff;border-radius:8px;max-width:100%;height:auto;
  }
  .mapa-annotate-hint{
    text-align:center;color:#D9D2C4;font-size:12.5px;padding:4px 14px;flex-shrink:0;
  }
  .mapa-annotate-actions{
    padding:10px 14px 16px;flex-shrink:0;
  }
  .mapa-annotate-actions button{
    width:100%;background:var(--sage);color:#fff;border:none;border-radius:10px;
    padding:13px;font-size:15px;font-weight:600;
  }

  .eva-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .eva-row{display:flex;gap:8px;min-width:max-content;padding:2px;}
  .eva-btn{
    width:52px;height:64px;border-radius:14px;border:1.5px solid var(--border);
    background:#FCFAF4;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:22px;flex-shrink:0;
  }
  .eva-btn span{font-size:12px;font-weight:700;color:var(--ink-soft);font-family:'Inter',sans-serif;}
  .eva-btn.active{background:var(--sage);border-color:var(--sage);}
  .eva-btn.active span{color:#fff;}
  .eva-caption{
    text-align:center;margin-top:10px;font-size:14px;font-weight:700;color:var(--sage-dark);
  }

  .sig-wrap{margin-top:10px;}
  .sig-canvas-box{
    border:1.5px dashed var(--border);border-radius:10px;background:#FCFAF4;
    position:relative;touch-action:none;
  }
  .sig-canvas-box canvas{display:block;width:100%;height:130px;border-radius:10px;}
  .sig-hint{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#B9B2A0;pointer-events:none;
  }
  .sig-actions{display:flex;justify-content:flex-end;margin-top:6px;}
  .sig-clear{background:none;border:none;color:var(--rose);font-size:13px;font-weight:600;}

  .session-item{
    border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FCFAF4;
  }
  .session-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .session-item-head strong{font-size:14px;color:var(--sage-dark);}
  .session-item-head button{background:none;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;}

  .add-session-btn{
    width:100%;padding:13px;border-radius:10px;border:1.5px dashed var(--sage);
    background:var(--sage-light);color:var(--sage-dark);font-weight:600;font-size:14.5px;
  }

  .form-actions{
    position:sticky;bottom:0;background:var(--cream);
    padding:14px 0 4px;display:flex;gap:10px;
    margin-top:6px;
  }
  .form-actions .btn-primary{flex:1;}
  .form-actions .btn-ghost{flex:0 0 auto;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;
    font-size:14px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;
    z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .hidden{display:none !important;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}

/* ===== Shell / Home ===== */
  .home-view{max-width:900px;margin:0 auto;padding:24px 20px 40px;}
  .home-intro{margin-bottom:20px;}
  .home-intro h2{font-size:22px;color:var(--ink);margin-bottom:6px;}
  .home-intro p{font-size:14.5px;color:var(--ink-soft);margin:0;}
  .home-grid{display:flex;flex-direction:column;gap:12px;}
  .home-card{
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
    padding:18px 20px;display:flex;align-items:center;gap:16px;
    box-shadow:0 1px 3px rgba(43,41,36,.05);text-align:left;width:100%;
  }
  .home-card:active{background:var(--sage-light);}
  .home-icon{
    width:52px;height:52px;border-radius:14px;background:var(--sage-light);
    display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
  }
  .home-card-text h3{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:3px;}
  .home-card-text p{font-size:13px;color:var(--ink-soft);margin:0;}
  .home-card-arrow{margin-left:auto;font-size:22px;color:var(--sage);flex-shrink:0;}
  #module-mount{max-width:900px;margin:0 auto;}

  .biaskin-confirm-overlay{
    position:fixed;inset:0;background:rgba(20,18,15,.5);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .biaskin-confirm-box{
    background:var(--paper);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .biaskin-confirm-box p{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 18px;}
  .biaskin-confirm-actions{display:flex;gap:10px;}
  .biaskin-confirm-actions button{
    flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;border:none;
  }
  .biaskin-confirm-cancel{background:#EFEAE0;color:var(--ink);}
  .biaskin-confirm-ok{background:var(--danger);color:#fff;}

/* ==========================================================
   Sesión, cuenta y pantallas de acceso / administración
   ========================================================== */

/* El shell arranca oculto y se revela cuando la sesión quedó
   confirmada, para no alcanzar a mostrar fichas a quien no entró. */
#shell{visibility:hidden;}
#shell.listo{visibility:visible;}

.topbar-acciones{display:flex;align-items:center;gap:8px;}

#topbar-cuenta{
  width:44px;height:44px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.02em;
}
/* Con ratón no hace falta el blanco tan grande. */
@media (hover:hover) and (pointer:fine){
  #topbar-cuenta{width:38px;height:38px;}
}

/* El menú de la cuenta se comporta distinto según el tamaño:

   · En computadora cuelga del avatar, como cualquier menú. La capa de
     fondo sigue ahí, transparente, solo para poder cerrarlo picando
     afuera.
   · En teléfono es una hoja que sube desde abajo, donde el pulgar
     alcanza sin estirarse, con el fondo oscurecido.

   La posición exacta en computadora la calcula `abrirMenuCuenta()`
   midiendo el avatar, para no depender de la altura de la barra. */
.menu-cuenta{
  position:fixed;inset:0;z-index:60;
  background:transparent;
}
.menu-cuenta.hidden{display:none;}
.menu-cuenta-caja{
  position:absolute;
  top:60px;right:16px;
  width:min(300px, calc(100vw - 32px));
  background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;box-shadow:0 10px 30px rgba(43,41,36,.22);
}

@media (max-width:700px){
  .menu-cuenta{
    background:rgba(43,41,36,.45);
    display:flex;align-items:flex-end;justify-content:center;
    padding:16px;
  }
  .menu-cuenta-caja{
    position:static;
    width:100%;max-width:420px;
  }
}
.menu-cuenta-quien{
  padding:18px 20px;background:var(--sage-light);
  display:flex;flex-direction:column;gap:3px;
  border-bottom:1px solid var(--border);
}
.menu-cuenta-quien strong{font-size:16px;color:var(--ink);}
.menu-cuenta-quien span{font-size:13px;color:var(--ink-soft);}
/* El selector lleva el padre a propósito: `.menu-cuenta-quien span`
   es más específico que una sola clase, así que le ganaba al color y
   al tamaño de esta etiqueta y la dejaba en café claro sobre verde
   oscuro, prácticamente ilegible. */
.menu-cuenta-quien .menu-cuenta-rol{
  align-self:flex-start;margin-top:6px;
  background:var(--sage-dark);color:#F8F5EC;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;
}
/* El tamaño de los renglones depende de con qué se toca, no de lo
   ancha que sea la pantalla. Son dos cosas distintas y atarlas fue un
   error: una tablet es ancha (el menú cuelga del avatar, como en
   computadora) pero se opera con el dedo, así que necesita renglones
   altos. Por eso el valor por omisión es el táctil, y la versión
   compacta se reserva para quien tiene ratón. */
.menu-cuenta-item{
  display:block;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--border);
  padding:15px 20px;font-size:15px;font-weight:500;color:var(--ink);
  min-height:48px;
}
.menu-cuenta-item:active{background:var(--cream);}

@media (hover:hover) and (pointer:fine){
  .menu-cuenta-item{
    padding:12px 18px;font-size:14px;min-height:0;
  }
  .menu-cuenta-item:hover{background:var(--cream);}
  .menu-cuenta-item:active{background:var(--sage-light);}
}
.menu-cuenta-item.peligro{color:var(--danger);font-weight:600;}
.menu-cuenta-item.tenue{color:var(--ink-soft);border-bottom:none;display:none;}
@media (max-width:700px){
  .menu-cuenta-item.tenue{display:block;}
}

/* ---------- Pantallas sueltas (login, cuenta, administración) ---------- */

.pagina{
  font-family:'Inter',sans-serif;
  background:var(--cream);color:var(--ink);
  min-height:100vh;margin:0;
}
.pagina h1,.pagina h2,.pagina h3{font-family:'Fraunces',serif;margin:0;}

.acceso{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.acceso-caja{
  background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);padding:30px 26px;
  width:100%;max-width:400px;
  box-shadow:0 8px 28px rgba(66,89,74,.12);
}
.acceso-marca{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:24px;text-align:center;}
.acceso-marca img{width:64px;height:64px;border-radius:14px;object-fit:cover;}
.acceso-marca .eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);font-weight:600;
}
.acceso-marca h1{font-size:22px;font-weight:600;}
.acceso-marca p{margin:0;font-size:14px;color:var(--ink-soft);}

.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.campo label{font-size:13px;font-weight:600;color:var(--ink-soft);}
.campo input{
  padding:13px 15px;border-radius:12px;border:1px solid var(--border);
  background:var(--paper);font-size:16px;color:var(--ink);
}
.campo input:focus{outline:2px solid var(--sage-light);border-color:var(--sage);}
.campo select{
  padding:13px 15px;border-radius:12px;border:1px solid var(--border);
  background:var(--paper);font-size:16px;color:var(--ink);
}

.btn-bloque{
  width:100%;background:var(--sage);color:#fff;border:none;border-radius:12px;
  padding:15px 20px;font-size:16px;font-weight:600;
  box-shadow:0 2px 6px rgba(66,89,74,.25);
}
.btn-bloque:active{background:var(--sage-dark);}
.btn-bloque:disabled{opacity:.55;box-shadow:none;}

.aviso{
  border-radius:12px;padding:12px 14px;font-size:14px;
  margin-bottom:16px;line-height:1.45;
}
.aviso.error{background:#F7E2DF;border:1px solid var(--danger);color:#8C3A31;}
.aviso.ok{background:var(--sage-light);border:1px solid var(--sage);color:var(--sage-dark);}
.aviso.nota{background:var(--rose-light);border:1px solid var(--rose);color:#8A5347;}
.aviso.hidden{display:none;}

.pie-legal{
  margin-top:20px;text-align:center;
  font-size:12px;color:var(--ink-soft);line-height:1.5;
}
.pie-legal a{color:var(--sage);}

/* ---------- Administración ---------- */

.admin-cuerpo{max-width:980px;margin:0 auto;padding:20px;}
.admin-seccion{
  background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;margin-bottom:20px;
}
.admin-seccion > h2{font-size:18px;margin-bottom:4px;}
.admin-seccion > p.sub{margin:0 0 18px;font-size:14px;color:var(--ink-soft);}

.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.tab{
  background:var(--paper);border:1px solid var(--border);
  border-radius:99px;padding:9px 16px;font-size:14px;font-weight:600;
  color:var(--ink-soft);
}
.tab.active{background:var(--sage-dark);border-color:var(--sage-dark);color:#F8F5EC;}

.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.datos{width:100%;border-collapse:collapse;font-size:14px;}
table.datos th,table.datos td{
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.datos th{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
table.datos tr:last-child td{border-bottom:none;}
table.datos td.envuelve{white-space:normal;min-width:220px;}

.etiqueta{
  display:inline-block;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
}
.etiqueta.admin{background:var(--sage-dark);color:#F8F5EC;}
.etiqueta.terapeuta{background:var(--sage-light);color:var(--sage-dark);}
.etiqueta.lectura{background:var(--rose-light);color:#8A5347;}
.etiqueta.inactivo{background:#E8E4D7;color:var(--ink-soft);}
.etiqueta.activo{background:var(--sage-light);color:var(--sage-dark);}

.btn-chico{
  background:var(--paper);border:1px solid var(--border);border-radius:9px;
  padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink);
}
.btn-chico:active{background:var(--cream);}
.btn-chico.peligro{color:var(--danger);border-color:var(--danger);}

.fila-campos{display:flex;gap:12px;flex-wrap:wrap;}
.fila-campos .campo{flex:1;min-width:170px;}

.vacio{padding:26px 0;text-align:center;color:var(--ink-soft);font-size:14px;}

/* ==========================================================
   Blancos táctiles

   El equipo captura en una tablet. Los controles que se tocan
   constantemente estaban en 32px y los campos cortos en 34; el
   mínimo cómodo para un dedo son 44. Solo aplica con puntero
   grueso: con ratón la densidad compacta se conserva, que en
   formularios tan largos se agradece.
   ========================================================== */

@media (pointer: coarse){
  .toggle-group button{
    min-height:44px;
    padding-top:10px;padding-bottom:10px;
  }
  #view-form input[type="text"],
  #view-form input[type="date"],
  #view-form input[type="number"],
  #view-form input[type="tel"],
  #view-form input[type="email"],
  #view-form select,
  .esp-input,
  .search-input{
    min-height:44px;
  }
  .color-swatch{min-width:40px;min-height:40px;}
  .mapa-tool-btn{min-height:44px;}
  .link-btn{min-height:44px;display:inline-flex;align-items:center;}
  .sesion-quitar{min-width:44px;min-height:44px;}
}

/* ==========================================================
   Impresión

   En pantalla la vista de impresión no existe. Al imprimir se
   esconde la aplicación y solo queda ella, en negro sobre blanco
   y sin los colores de la marca, que en papel solo gastan tinta.
   ========================================================== */

#vista-impresion{display:none;}

@media print{
  @page{ margin:14mm 12mm; }

  body > *:not(#vista-impresion){display:none !important;}
  #vista-impresion{
    display:block;
    font-family:'Inter', sans-serif;
    color:#000;background:#fff;
    font-size:11pt;line-height:1.45;
  }

  .imp-encabezado{
    display:flex;align-items:center;gap:14px;
    border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:16px;
  }
  .imp-encabezado img{width:52px;height:52px;object-fit:contain;}
  .imp-marca{
    font-size:8pt;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  }
  .imp-encabezado h1{font-family:'Fraunces',serif;font-size:17pt;margin:2px 0;}
  .imp-sub{font-size:11pt;font-weight:600;}

  .imp-seccion{
    margin-bottom:14px;
    /* Que una sección no se parta a la mitad entre dos hojas. */
    break-inside:avoid;page-break-inside:avoid;
  }
  .imp-seccion h2{
    font-family:'Fraunces',serif;font-size:12pt;
    border-bottom:1px solid #999;padding-bottom:3px;margin:0 0 7px;
  }

  .imp-campo{
    display:flex;gap:8px;padding:2px 0;
    break-inside:avoid;page-break-inside:avoid;
  }
  .imp-etq{
    min-width:190px;max-width:190px;
    font-size:9.5pt;color:#333;font-weight:600;
  }
  .imp-val{flex:1;}

  .imp-tabla{
    width:100%;border-collapse:collapse;margin-top:6px;font-size:9.5pt;
  }
  .imp-tabla td{
    border:1px solid #999;padding:4px 6px;vertical-align:top;
  }
  .imp-firma-chica{max-height:38px;}

  .imp-firma{
    margin-top:8px;break-inside:avoid;page-break-inside:avoid;
  }
  .imp-firma img{
    display:block;max-width:230px;max-height:80px;
    border-bottom:1px solid #000;margin-top:3px;
  }

  .imp-pie{
    margin-top:18px;padding-top:7px;border-top:1px solid #999;
    font-size:8pt;color:#444;
  }
}

/* ==========================================================
   Campos que el sistema calcula

   La edad se deriva de la fecha de nacimiento, así que se muestra
   pero no se escribe. Tiene que verse distinta de un campo vacío
   que alguien olvidó llenar.
   ========================================================== */

input[readonly]{
  background:var(--cream);
  color:var(--ink-soft);
  cursor:default;
}
input[readonly]:focus{outline:none;border-color:var(--border);}

.pista{
  display:block;margin-top:4px;
  font-size:11px;color:var(--ink-soft);line-height:1.35;
}