*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0a0a0a; --card:      #111111; --card2:     #191919;
      --input-bg:  #161616; --border:    #232323; --border2:   #333333;
      --red:       #cc0000; --red-h:     #e60000; --red-muted: rgba(204,0,0,.11);
      --white:     #ffffff; --gray:      #888888; --gray-l:    #aaaaaa;
      --success:   #22c55e; --warn:      #f59e0b;
    }

    body { background:var(--bg); color:var(--white); font-family:'Segoe UI',system-ui,sans-serif; font-size:14px; line-height:1.6; min-height:100vh; }

    /* ── HEADER ── */
    header { background:#050505; border-bottom:2px solid var(--red); padding:0 2rem; height:76px; display:flex; align-items:center; position:sticky; top:0; z-index:50; }
    .logo { display:flex; align-items:center; height:100%; flex-shrink:0; }
    .brand-logo-img { display:block; width:168px; max-width:23vw; height:auto; object-fit:contain; object-position:left center; }
    nav { margin-left:auto; display:flex; gap:6px; align-items:center; }
    .tab-btn { background:none; border:1px solid var(--border2); color:var(--gray-l); padding:6px 18px; cursor:pointer; border-radius:3px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; transition:all .15s; }
    .tab-btn:hover { color:var(--white); border-color:var(--gray); }
    .tab-btn.active { background:var(--red); border-color:var(--red); color:var(--white); }

    /* ── LAYOUT ── */
    main { max-width:1100px; margin:0 auto; padding:2rem; }
    .section { display:none; }
    .section.active { display:block; }
    .sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
    .head-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .sec-title { font-size:1.35rem; font-weight:800; }
    .sec-title em { color:var(--red); font-style:normal; }

    /* ── BUTTONS ── */
    .btn { border:none; border-radius:4px; cursor:pointer; font-size:12px; font-weight:700; padding:8px 18px; text-transform:uppercase; letter-spacing:.5px; transition:all .15s; font-family:inherit; }
    .btn-red   { background:var(--red); color:var(--white); }
    .btn-red:hover { background:var(--red-h); }
    .btn-ghost { background:transparent; border:1px solid var(--border2); color:var(--gray-l); }
    .btn-ghost:hover { border-color:var(--gray); color:var(--white); }
    .btn-danger { background:transparent; border:1px solid #3a1010; color:#e06060; font-size:11px; padding:5px 10px; }
    .btn-danger:hover { background:rgba(200,50,50,.15); }
    .btn-quiet { background:transparent; border:1px solid transparent; color:var(--gray-l); padding:8px 12px; }
    .btn-quiet:hover { background:var(--card2); border-color:var(--border2); color:var(--white); }
    .btn-sm { font-size:11px; padding:5px 12px; }
    .btn-export { background:transparent; border:1px solid var(--border2); color:var(--gray-l); font-size:10px; padding:4px 10px; border-radius:3px; cursor:pointer; font-family:inherit; font-weight:700; letter-spacing:.3px; transition:all .15s; }
    .btn-export:hover { border-color:var(--gray); color:var(--white); }

    /* ── CARDS ── */
    .card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.25rem; }
    .card-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); margin-bottom:.75rem; }

    /* ── PERSON GRID ── */
    .person-grid { display:flex; flex-direction:column; gap:.45rem; }
    .person-card { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:.7rem .9rem; transition:border-color .2s, background .2s; cursor:pointer; }
    .person-card:hover { border-color:var(--red); }
    .person-card.selected { border-color:var(--red); background:var(--red-muted); }
    .avatar { width:48px; height:48px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800; margin-bottom:.75rem; }
    .avatar-img { width:48px; height:48px; border-radius:50%; object-fit:cover; margin-bottom:.75rem; border:2px solid var(--red); display:block; }
    .person-main { min-width:0; }
    .p-name { font-size:1rem; font-weight:700; margin-bottom:.2rem; }
    .p-meta { color:var(--gray-l); font-size:.82rem; margin-bottom:.9rem; }
    .p-acts { display:flex; gap:.5rem; flex-wrap:wrap; }
    .person-list .person-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; }
    .person-list .avatar, .person-list .avatar-img { margin-bottom:0; width:38px; height:38px; font-size:.95rem; }
    .person-list .p-name { margin-bottom:.05rem; }
    .person-list .p-meta { margin-bottom:0; }
    .person-list .p-acts { justify-content:flex-end; }

    /* ── FORM ── */
    .form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(195px,1fr)); gap:1rem; }
    .fg { display:flex; flex-direction:column; gap:4px; }
    .fg.full { grid-column:1/-1; }
    label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); }
    .badge-auto { background:var(--red-muted); border:1px solid var(--red); color:#ff6666; border-radius:3px; font-size:9px; font-weight:700; padding:0 4px; margin-left:4px; }
    input,select,textarea { background:var(--input-bg); border:1px solid var(--border2); color:var(--white); padding:8px 10px; border-radius:4px; font-size:13px; font-family:inherit; width:100%; transition:border-color .15s; }
    input:focus,select:focus,textarea:focus { outline:none; border-color:var(--red); }
    input.autofilled { border-color:#660000; color:#ff8888; }
    select option { background:#1a1a1a; }
    textarea { resize:vertical; min-height:60px; }
    .hint { font-size:10px; color:var(--gray); }
    .form-sec { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); margin:1rem 0 .6rem; display:flex; align-items:center; gap:.5rem; }
    .form-sec::after { content:''; flex:1; height:1px; background:var(--border); }

    /* ── COLLAPSIBLE ── */
    .coll { background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
    .coll-head { padding:.9rem 1.25rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
    .coll-head:hover { background:var(--red-muted); }
    .coll-title { font-weight:700; font-size:.9rem; letter-spacing:.5px; }
    .coll-body { padding:1.25rem; border-top:1px solid var(--border); display:none; }
    .coll-body.open { display:block; }

    /* ── ALERTS ── */
    .alert { padding:8px 14px; border-radius:4px; font-size:12px; display:none; margin-bottom:.75rem; }
    .alert.show { display:block; }
    .alert-ok  { background:rgba(34,197,94,.1); border:1px solid var(--success); color:var(--success); }
    .alert-err { background:var(--red-muted); border:1px solid var(--red); color:#ff7070; }

    /* ── SELECTED BAR ── */
    .sel-bar { background:var(--red-muted); border:1px solid #4a0000; border-radius:6px; padding:.7rem 1rem; margin-bottom:1.25rem; display:none; align-items:center; justify-content:space-between; gap:.5rem; }
    .sel-bar.show { display:flex; }
    .sel-bar-name { font-weight:700; font-size:.95rem; }
    .sel-bar-meta { color:var(--gray-l); font-size:.82rem; }

    /* ── EVAL CARDS ── */
    .eval-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.1rem; margin-bottom:.75rem; }
    .eval-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; flex-wrap:wrap; gap:.5rem; }
    .eval-date { font-weight:700; font-size:.95rem; }
    .eval-head-actions { display:flex; gap:.5rem; align-items:center; }
    .metrics-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:.6rem; }
    .metric { background:var(--card2); border-radius:6px; padding:.65rem .8rem; }
    .m-lbl  { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); margin-bottom:1px; }
    .m-val  { font-size:1.1rem; font-weight:800; line-height:1.2; }
    .m-unit { font-size:10px; color:var(--gray-l); font-weight:400; }
    .m-cat  { font-size:9px; color:var(--gray); margin-top:1px; }
    .imc-bajo { color:#60a5fa; } .imc-normal { color:var(--success); } .imc-sobre { color:var(--warn); } .imc-obeso { color:var(--red-h); }

    /* ── MODAL ── */
    .overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; }
    .overlay.open { display:flex; }
    .modal { background:var(--card); border:1px solid var(--border2); border-top:3px solid var(--red); border-radius:8px; padding:1.75rem; width:100%; max-width:560px; position:relative; max-height:90vh; overflow-y:auto; }
    .modal-title { font-size:1.1rem; font-weight:800; margin-bottom:1.25rem; }
    .modal-close { position:absolute; top:.9rem; right:1rem; background:none; border:none; color:var(--gray); font-size:1.5rem; cursor:pointer; line-height:1; }
    .modal-close:hover { color:var(--white); }
    .form-actions { margin-top:1.25rem; display:flex; gap:.6rem; }

    /* ── EMPTY STATE ── */
    .empty { text-align:center; padding:3.5rem 2rem; color:var(--gray); }
    .empty-icon { font-size:2.5rem; margin-bottom:.75rem; opacity:.5; }
    .empty h3 { font-size:1rem; color:var(--gray-l); margin-bottom:.3rem; }

    /* ── COMPARISON ── */
    .comp-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
    .comp-table { width:100%; border-collapse:collapse; }
    .comp-table th { background:var(--card2); padding:10px 14px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); border-bottom:2px solid var(--red); }
    .comp-table th:not(:first-child) { color:var(--white); }
    .comp-table td { padding:9px 14px; border-bottom:1px solid var(--border); font-size:13px; }
    .comp-table tr:hover td { background:var(--red-muted); }
    .d-pos { color:var(--success); font-weight:700; }
    .d-neg { color:#f87171; font-weight:700; }
    .d-neu { color:var(--gray); }

    /* ── CHARTS ── */
    .charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:1.25rem; }
    .chart-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.25rem; }
    .chart-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); margin-bottom:1rem; }
    .chart-full { grid-column:1/-1; }

    hr { border:none; border-top:1px solid var(--border); margin:1.25rem 0; }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:var(--bg); }
    ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:var(--gray); }

    /* ══ FICHA ══ */
    .ficha-hero { display:grid; grid-template-columns:auto minmax(220px, 1fr); align-items:center; gap:1.25rem; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.15rem 1.35rem; margin-bottom:1.25rem; }
    .ficha-av-wrap { flex-shrink:0; text-align:center; }
    .ficha-av { width:72px; height:72px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:900; cursor:pointer; }
    .ficha-av-img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--red); cursor:pointer; display:block; }
    .profile-upload-hint { font-size:9px; color:var(--gray); margin-top:4px; cursor:pointer; }
    .profile-upload-hint:hover { color:var(--red); }
    .ficha-name { font-size:1.4rem; font-weight:900; line-height:1.2; margin-bottom:.25rem; }
    .ficha-sub  { color:var(--gray-l); font-size:.85rem; }
    .ficha-acts { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.25rem; }
    .ficha-dashboard { margin-bottom:1.25rem; }
    .dashboard-head { align-items:center; display:flex; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
    .dashboard-sub { color:var(--gray-l); font-size:.82rem; margin-top:-.35rem; }
    .dashboard-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:.55rem; }
    .dashboard-metric { background:var(--card2); border:1px solid var(--border); border-radius:6px; min-height:76px; padding:.62rem .72rem; }
    .dashboard-metric span { color:var(--gray); display:block; font-size:8px; font-weight:850; letter-spacing:1px; line-height:1.2; margin-bottom:.3rem; text-transform:uppercase; }
    .dashboard-metric strong { display:block; font-size:1rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dashboard-metric em { display:block; font-size:10px; font-style:normal; font-weight:800; margin-top:.28rem; }
    .dashboard-metric em.is-good { color:var(--success); }
    .dashboard-metric em.is-bad { color:#f87171; }
    .dashboard-metric em.is-neutral { color:var(--gray); }
    .ficha-info-card { display:none; }
    .ficha-info-card.open { display:block; }
    .info-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; row-gap:1.1rem; }
    .info-panel { min-width:0; }
    .info-panel.wide { grid-column:1/-1; }
    .info-panel-title { color:var(--gray); font-size:9px; font-weight:900; letter-spacing:1.4px; margin-bottom:.35rem; text-transform:uppercase; }
    .info-row { align-items:start; border-top:1px solid var(--border); display:grid; grid-template-columns:minmax(128px, .42fr) minmax(0, 1fr); gap:1rem; min-height:38px; padding:.48rem 0; }
    .info-row:last-child { border-bottom:1px solid var(--border); }
    .info-panel.wide { display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; }
    .info-panel.wide .info-panel-title { grid-column:1/-1; }
    .info-panel.wide .info-row:last-child { grid-column:1/-1; }
    .info-lbl { color:var(--gray); font-size:8px; font-weight:850; letter-spacing:1px; line-height:1.35; text-transform:uppercase; }
    .info-val { font-size:.86rem; font-weight:650; line-height:1.35; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
    .info-val.empty-val { color:var(--gray); font-weight:400; }
    .status-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
    .sb-activo   { background:rgba(34,197,94,.12);  border:1px solid var(--success); color:var(--success); }
    .sb-pausado  { background:rgba(245,158,11,.12); border:1px solid var(--warn);    color:var(--warn); }
    .sb-inactivo { background:rgba(136,136,136,.1); border:1px solid var(--gray);   color:var(--gray); }
    .eval-sum-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:.6rem; }
    .hist-table { width:100%; border-collapse:collapse; }
    .hist-table th { background:var(--card2); padding:8px 12px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); border-bottom:2px solid var(--red); }
    .hist-table td { padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; }
    .hist-table th:last-child, .hist-table td:last-child { text-align:right; width:260px; padding-right:18px; }
    .hist-table tr:hover td { background:var(--red-muted); }
    .hist-actions { align-items:center; display:flex; gap:.38rem; justify-content:flex-end; min-width:230px; }
    .hist-action { background:transparent; border:1px solid var(--border2); border-radius:3px; color:var(--gray-l); cursor:pointer; font-family:inherit; font-size:10px; font-weight:800; letter-spacing:.2px; padding:3px 7px; text-transform:uppercase; }
    .hist-action:hover { border-color:var(--gray); color:var(--white); }
    .hist-delete { align-items:center; background:transparent; border:1px solid #3a1010; border-radius:3px; color:#e06060; cursor:pointer; display:inline-flex; font-family:inherit; font-size:15px; font-weight:800; height:24px; justify-content:center; line-height:1; margin-left:.75rem; padding:0; width:24px; }
    .hist-delete:hover { background:rgba(200,50,50,.15); color:#ff8a8a; }

    /* ══ FOTOS ══ */
    .photo-upload-input { display:none; }
    .photo-upload-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--card2); border:1px dashed var(--border2); color:var(--gray-l); padding:7px 14px; border-radius:4px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; font-family:inherit; }
    .photo-upload-btn:hover { border-color:var(--red); color:var(--white); }
    .photo-count-hint { font-size:10px; color:var(--gray); margin-left:.5rem; vertical-align:middle; }
    .pending-photos-grid { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
    .photo-thumb { position:relative; width:80px; height:80px; border-radius:6px; overflow:hidden; border:1px solid var(--border2); }
    .photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
    .photo-del { position:absolute; top:2px; right:2px; background:rgba(0,0,0,.75); border:none; color:#fff; border-radius:50%; width:18px; height:18px; cursor:pointer; font-size:11px; line-height:18px; text-align:center; display:none; padding:0; }
    .photo-thumb:hover .photo-del { display:block; }
    .eval-photos { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }
    .eval-photos-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); margin-bottom:.4rem; }
    .eval-photos-row { display:flex; gap:.4rem; flex-wrap:wrap; }
    .eval-photo-img { width:72px; height:72px; border-radius:4px; object-fit:cover; cursor:pointer; border:1px solid var(--border2); transition:border-color .15s; }
    .eval-photo-img:hover { border-color:var(--red); }
    .photo-comp-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
    .photo-comp-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); margin-bottom:.5rem; }
    .photo-comp-row { display:flex; gap:.5rem; flex-wrap:wrap; }
    .photo-comp-img { height:150px; border-radius:6px; object-fit:cover; cursor:pointer; border:1px solid var(--border2); flex:1; min-width:90px; max-width:220px; transition:border-color .15s; }
    .photo-comp-img:hover { border-color:var(--red); }
    .profile-crop-modal { max-width:420px; }
    .profile-crop-wrap { display:flex; justify-content:center; margin-bottom:1rem; }
    #profile-crop-canvas { width:100%; max-width:320px; aspect-ratio:1; background:#050505; border:1px solid var(--border2); border-radius:8px; cursor:grab; display:block; touch-action:none; }
    #profile-crop-canvas.dragging { cursor:grabbing; }
    .send-modal { max-width:430px; }
    .send-eval-box { background:var(--card2); border:1px solid var(--border); border-radius:6px; padding:.9rem 1rem; margin-bottom:1rem; }
    .send-eval-name { font-weight:800; font-size:1rem; }
    .send-eval-meta { color:var(--gray-l); font-size:.82rem; margin-top:.15rem; }
    .send-actions { display:grid; grid-template-columns:1fr; gap:.6rem; }
    .send-note { color:var(--gray); font-size:11px; margin-top:.85rem; }

    /* ── LIGHTBOX ── */
    .lightbox { position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:300; display:none; align-items:center; justify-content:center; cursor:zoom-out; }
    .lightbox.open { display:flex; }
    .lightbox-img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:4px; cursor:default; }
    .lightbox-close { position:absolute; top:1rem; right:1.5rem; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none; line-height:1; }
    .lightbox-close:hover { color:var(--red); }

    /* ── RESPONSIVE ── */
    @media (max-width:700px) {
      main { padding:1rem; }
      .charts-grid,.comp-row,.photo-comp-grid { grid-template-columns:1fr; }
      header { height:66px; padding:0 1rem; }
      nav { gap:2px; }
      .brand-logo-img { width:150px; max-width:35vw; }
      .tab-btn { padding:5px 7px; font-size:10px; }
      .ficha-hero { grid-template-columns:1fr; align-items:flex-start; }
      .dashboard-head { align-items:flex-start; flex-direction:column; }
      .dashboard-grid { grid-template-columns:1fr 1fr; }
      .info-grid, .info-panel.wide { grid-template-columns:1fr; }
      .info-row { grid-template-columns:1fr; gap:.12rem; }
      .info-panel.wide .info-row:last-child { grid-column:auto; }
      .sec-head { align-items:flex-start; flex-direction:column; gap:1rem; }
      .head-actions { justify-content:flex-start; }
      .person-list .person-card { grid-template-columns:auto minmax(0,1fr); }
      .person-list .p-acts { grid-column:1/-1; justify-content:flex-start; }
    }
    /* ── STORAGE INDICATOR ── */
    .storage-hint { font-size:10px; color:var(--gray); white-space:nowrap; }
    .storage-warn { color:var(--warn); font-weight:700; }

    /* ── LANG SWITCHER ── */
    .lang-switcher { position:relative; margin-right:.3rem; }
    .lang-current { align-items:center; background:var(--card); border:1px solid var(--border2); border-radius:4px; color:var(--gray-l); cursor:pointer; display:flex; gap:.35rem; font-family:inherit; font-size:11px; font-weight:800; height:31px; letter-spacing:.5px; padding:0 .65rem; text-transform:uppercase; }
    .lang-current:hover, .lang-switcher.open .lang-current { border-color:var(--gray); color:var(--white); }
    .lang-current span:first-child { font-size:14px; line-height:1; }
    .lang-caret { color:var(--gray); font-size:10px; transition:transform .15s; }
    .lang-switcher.open .lang-caret { transform:rotate(180deg); }
    .lang-menu { background:var(--card); border:1px solid var(--border2); border-radius:6px; box-shadow:0 16px 34px rgba(0,0,0,.38); display:none; min-width:150px; overflow:hidden; padding:.25rem; position:absolute; right:0; top:calc(100% + 8px); z-index:90; }
    .lang-switcher.open .lang-menu { display:block; }
    .lang-menu button { align-items:center; background:transparent; border:none; border-radius:4px; color:var(--gray-l); cursor:pointer; display:flex; gap:.5rem; font-family:inherit; font-size:12px; font-weight:750; padding:.45rem .55rem; text-align:left; width:100%; }
    .lang-menu button:hover { background:var(--card2); color:var(--white); }
    .lang-menu button.active { background:var(--red-muted); color:var(--white); }
    .lang-menu button span { font-size:15px; line-height:1; }

    @media (max-width:420px) {
      header { height:58px; padding:0 .65rem; }
      .brand-logo-img { width:110px; max-width:33vw; }
      .tab-btn { padding:4px 4px; font-size:8.5px; letter-spacing:.1px; }
      .lang-current { height:27px; padding:0 .45rem; font-size:10px; }
      .lang-menu { right:-42px; }
    }