/* ═══════════════ DESIGN TOKENS ════════════════════════════════════ */
:root{
  /* ── Raw palette ─────────────────────────────────────────────── */
  --palette-dark:             #1a1006;           /* warm near-black – topbar background    */
  --palette-gold:             #F5C050;           /* primary accent – hovers, active states */
  --palette-gold-dim:         rgba(245,192,80,0.55);
  --palette-amber:            #BA7517;           /* deep amber – headings, section labels  */
  --palette-green:            #2d7a4a;           /* confirm – print & save buttons         */
  --palette-green-dark:       #246040;           /* confirm hover                          */
  --palette-red:              #ef5350;           /* danger – delete buttons                */
  --palette-gray:             #888;              /* mid-gray – barlines, dividers, muted   */
  --palette-border:           #e2e8f0;           /* light border – panels, inputs          */
  --palette-overlay:          rgba(0,0,0,.78);   /* dark backdrop – onboarding             */

  /* ── Semantic tokens ─────────────────────────────────────────── */
  --color-topbar-bg:          var(--palette-dark);
  --color-accent:             var(--palette-gold);
  --color-accent-dim:         var(--palette-gold-dim);
  --color-heading:            var(--palette-amber);
  --color-btn-confirm:        var(--palette-green);
  --color-btn-confirm-hover:  var(--palette-green-dark);
  --color-btn-danger:         var(--palette-red);
  --color-divider:            var(--palette-gray);
  --color-overlay:            var(--palette-overlay);
  --color-border-tertiary:    var(--palette-border);
  --color-text-secondary:     #666;
  --color-background-primary: #fff;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',Arial,sans-serif;background:#eceff1;color:#222;}

/* === DISPOSICIÓN === */
.app{display:flex;flex-direction:column;height:100vh;}
.topbar{background:var(--color-topbar-bg);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;z-index:10;}
.main{display:flex;flex:1;overflow:hidden;}
.sidebar{width:250px;min-width:210px;background:#fff;border-right:1px solid var(--color-border-tertiary);overflow-y:auto;padding:10px;}
.workarea{flex:1;overflow-y:auto;padding:20px;}

/* === LOGO === */
.topbar-logo{font-size:15px;font-weight:700;letter-spacing:0.5px;margin-right:6px;white-space:nowrap;line-height:1.1;}
.topbar-logo .logo-main{color:var(--color-accent);}
.topbar-logo .logo-sub{color:var(--color-accent-dim);font-weight:400;font-size:11px;display:block;}

/* === BARRA SUPERIOR === */
.topbar label{font-size:11px;color:rgba(255,255,255,0.4);display:block;margin-bottom:2px;text-transform:uppercase;letter-spacing:0.5px;}
.topbar input,.topbar select{padding:4px 7px;border-radius:6px;border:0.5px solid rgba(255,255,255,0.25);font-size:13px;background:#fff;color:#222;outline:none;}
.topbar input::placeholder{color:#aaa;}
.topbar select option{background:#fff;color:#222;}
.topbar .t-titulo{width:170px;font-weight:bold;}
.topbar .t-ton{width:55px;}
.topbar .t-tempo{width:70px;}

/* === BOTONES === */
.btn{padding:6px 14px;border:0.5px solid rgba(255,255,255,0.18);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.75);transition:background .15s;}
.btn:hover{background:rgba(255,255,255,0.14);}
.btn-imprimir{background:var(--color-btn-confirm);color:#fff;border:none;}
.btn-imprimir:hover{background:var(--color-btn-confirm-hover);}
.btn-seccion{background:#2a6099;color:#fff;border:none;}
.btn-seccion:hover{background:#215079;}
.spacer{flex:1;}

/* === PANEL DE ACORDES === */
.pal-label{font-size:11px;font-weight:bold;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.btn-nc{display:flex;align-items:baseline;gap:5px;width:100%;margin-bottom:7px;padding:5px 8px;border:1px dashed #b0bec5;border-radius:5px;background:#f5f5f5;cursor:pointer;font-size:12px;font-weight:bold;color:#555;text-align:left;}
.btn-nc span{font-size:10px;font-weight:400;color:#999;}
.btn-nc:hover{border-color:var(--color-divider);background:#eee;color:#222;}
.nc-rest{height:72px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;color:#bbb;cursor:pointer;}
.nc-rest:hover{color:var(--color-divider);}
.pal-buscar{width:100%;padding:4px 7px;border:1px solid var(--color-border-tertiary);border-radius:4px;font-size:12px;margin-bottom:8px;outline:none;box-sizing:border-box;}
.pal-buscar:focus{border-color:var(--color-accent);}
.pal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:12px;}
.pal-chord{cursor:pointer;border:1px solid #ddd;border-radius:6px;padding:3px 2px 1px;text-align:center;background:#fafafa;transition:all .15s;user-select:none;}
.pal-chord:hover{border-color:var(--color-accent);background:#FAEEDA;transform:scale(1.04);}
.pal-chord:hover svg circle:not([fill="none"]){fill:#185FA5;}
.pal-chord:hover svg rect[fill="rgb(21,101,192)"]{fill:#185FA5;}
.pal-chord .cn{font-size:11px;font-weight:bold;margin-top:1px;}
.pal-chord .cl{font-size:9px;color:var(--color-divider);}
.pal-group-header{grid-column:1/-1;font-size:10px;font-weight:500;color:var(--color-heading);text-transform:uppercase;letter-spacing:.5px;margin-top:8px;padding:4px 0 2px;border-top:0.5px solid var(--color-border-tertiary);}
.pal-group-header:first-child{margin-top:0;border-top:none;}
.acorde-custom{margin-top:4px;padding:8px;background:#f5f5f5;border-radius:6px;border:1px dashed #ccc;}
.acorde-custom>label{font-size:10px;color:#666;display:block;margin-bottom:4px;}
.acorde-custom>input{width:100%;padding:3px 6px;border:1px solid #ccc;border-radius:3px;font-size:12px;margin-bottom:6px;box-sizing:border-box;}
.cb-grid{display:grid;grid-template-columns:18px repeat(4,1fr);gap:2px;margin-bottom:6px;}
.cb-sh{font-size:9px;font-weight:bold;color:#555;text-align:center;}
.cb-rl{font-size:10px;color:#666;display:flex;align-items:center;justify-content:flex-end;padding-right:2px;}
.cb-btn{padding:5px 2px;border:1px solid #ccc;border-radius:3px;background:#fff;cursor:pointer;font-size:9px;text-align:center;line-height:1;}
.cb-btn:hover{border-color:var(--color-accent);}
.cb-sel{background:var(--color-accent);border-color:var(--color-heading);}
.cb-fret-nav{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 4px;font-size:10px;color:#666;}
.cb-arr{padding:1px 8px;border:1px solid #ccc;border-radius:3px;background:#fff;cursor:pointer;font-size:10px;line-height:1.5;}
.cb-arr:not(:disabled):hover{border-color:var(--color-accent);}
.cb-arr:disabled{opacity:.35;cursor:default;}
.cb-barre-row{display:flex;align-items:center;gap:4px;margin-bottom:6px;font-size:11px;color:#555;}
.cb-barre-val{width:38px;padding:2px 4px;border:1px solid #ccc;border-radius:3px;font-size:11px;}
.cb-preview-wrap{display:flex;justify-content:center;margin:4px 0 6px;}
.btn-anadir-custom{width:100%;padding:4px;background:#5c6bc0;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:11px;font-weight:bold;}
.btn-anadir-custom:hover{background:#3949ab;}

/* === PÁGINA DEL CIFRADO === */
.chart-page{background:var(--color-background-primary);max-width:820px;margin:0 auto;padding:24px 28px;box-shadow:0 2px 10px rgba(0,0,0,.12);border-radius:10px;border:0.5px solid var(--color-border-tertiary);}
.chart-head{text-align:center;border-bottom:1.5px solid #222;padding-bottom:12px;margin-bottom:22px;position:relative;min-height:125px;}
.chart-head h1{font-size:28px;font-weight:700;letter-spacing:.5px;}
.chart-autor{font-size:14px;color:var(--color-divider);margin-top:4px;}
.chart-meta{font-size:16px;font-weight:500;color:var(--color-text-secondary);margin-top:5px;}
.chart-footer{margin-top:28px;padding-top:8px;border-top:1px solid #ddd;font-size:11px;color:#aaa;text-align:center;}
.chart-footer a{color:#aaa;text-decoration:underline;}
.print-only{display:none;}

/* === LEYENDA DE ACORDES === */
.leyenda{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 8px;padding:10px 0 14px;border-bottom:1px solid #ddd;margin-bottom:18px;}
.leyenda-label{font-size:10px;font-weight:bold;color:var(--color-divider);text-transform:uppercase;letter-spacing:.5px;align-self:center;margin-right:4px;}
.ley-chord{text-align:center;}
.ley-nombre{font-size:10px;font-weight:bold;margin-top:1px;}

/* === SECCIONES === */
.seccion{margin-bottom:22px;}
.sec-header{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.sec-nombre{font-size:13px;font-weight:bold;color:var(--color-heading);border:1px dashed #d4a830;padding:2px 8px;border-radius:4px;background:#fffbf0;min-width:50px;cursor:text;}
.sec-nombre:focus{outline:2px solid var(--color-accent);border-style:solid;}
.sec-btn{font-size:11px;padding:2px 7px;border-radius:3px;cursor:pointer;border:1px solid;}
.sec-btn-act{background:#f5f0e0;color:#7a5800;border-color:#d4a830;}
.sec-btn-act.on{background:var(--color-accent);color:var(--color-topbar-bg);}
.sec-btn-del{background:#ffebee;color:#b71c1c;border-color:#ef9a9a;}
.sec-body{display:flex;align-items:stretch;}
.sec-acordes{flex:1;display:flex;flex-wrap:wrap;row-gap:6px;min-height:88px;padding:8px;border:1.5px dashed #C0DD97;border-radius:6px;background:#F9FCF5;}
.sec-acordes.activa{border-color:var(--color-accent);background:#fffbf0;}
.barra-lateral{align-self:flex-start;display:flex;align-items:stretch;justify-content:center;width:28px;min-width:28px;cursor:pointer;user-select:none;padding:0 2px;}
.barra-lateral.barra-fin{align-self:flex-end;}
.barra-lateral:hover{opacity:.65;}
.barra-add{font-size:14px;color:#ccc;line-height:1;}
.barra-sym{display:flex;align-items:stretch;height:120px;gap:2px;}
.bl-thin{width:1px;background:var(--color-divider);flex-shrink:0;}
.bl-thick{width:4px;background:var(--color-divider);flex-shrink:0;}
.bl-dots{display:flex;flex-direction:column;justify-content:center;gap:8px;flex-shrink:0;}
.bl-dot{width:5px;height:5px;border-radius:50%;background:var(--color-divider);}
.pista-vacia{color:#bbb;font-size:12px;font-style:italic;align-self:center;margin:auto;}

/* === NAVEGACIÓN DE SECCIÓN === */
.sec-footer{display:flex;justify-content:flex-end;align-items:center;margin-top:4px;min-height:20px;}
.sec-nav-input{font-size:11px;font-style:italic;color:#555;border:none;border-bottom:1px dashed #c5cae9;background:transparent;padding:1px 4px;width:100%;outline:none;text-align:right;}
.sec-nav-input:focus{border-bottom-color:var(--color-accent);}
.sec-nav-input::placeholder{color:#ccc;}
.sec-nav-badge{font-size:11px;font-style:italic;font-weight:bold;color:var(--color-heading);white-space:nowrap;}

/* === ÍTEM DE ACORDE === */
.chord-item{position:relative;text-align:center;padding:4px 4px 2px;border:none;border-radius:6px;background:transparent;min-width:60px;user-select:none;}
.ci-nombre{font-size:13px;font-weight:bold;line-height:1.2;margin:2px 0 1px;}
.ci-quitar{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:var(--color-btn-danger);color:#fff;border:none;cursor:pointer;font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .15s;}
.chord-item:hover .ci-quitar,.chord-repeat:hover .ci-quitar{opacity:1;}

/* === COMPÁS === */
.bar{display:flex;flex-direction:column;flex:1 1 0;max-width:50%;box-sizing:border-box;border-right:1px solid var(--color-divider);padding:2px 6px;}
.bar:last-child{border-right:none;}
.bar-texto textarea{width:100%;border:none;border-bottom:1px dashed #c5cae9;background:transparent;font-size:11px;font-style:italic;color:#555;padding:2px 2px 1px;outline:none;box-sizing:border-box;resize:none;overflow:hidden;line-height:1.4;display:block;}
.bar-texto textarea:focus{border-bottom-color:var(--color-accent);}
.bar-texto textarea::placeholder{color:#ccc;}
.bar-chords{display:flex;gap:4px;align-items:stretch;flex:1;}
.beats-badge{font-size:9px;color:var(--color-text-secondary);text-align:center;margin-top:2px;letter-spacing:.5px;}
.chord-repeat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;padding:4px;height:100%;}
.chord-repeat .repeat-sign{font-size:40px;color:#bbb;font-style:italic;line-height:1;user-select:none;}
.chord-repeat .beats-badge{margin-top:4px;}
.ci-svg{cursor:pointer;display:flex;justify-content:center;}
.ci-svg:hover{opacity:.85;}

/* === PANEL DERECHO — RITMOS === */
.sidebar-ritmos{width:160px;min-width:140px;background:#fff;border-left:1px solid var(--color-border-tertiary);overflow-y:auto;padding:10px;}
#ritmo-grid{display:flex;flex-direction:column;}
.ritmo-thumb{cursor:pointer;border:none;border-bottom:0.5px solid var(--color-border-tertiary);padding:6px 4px;background:transparent;transition:background .15s;user-select:none;overflow:hidden;}
.ritmo-thumb:hover{background:#FAEEDA;}
.ritmo-thumb.sel{background:#FAF0D8;border-left:3px solid var(--color-accent);}
.ritmo-thumb-svg svg{width:100%;height:auto;display:block;}
.ritmo-thumb-nombre{font-size:12px;font-weight:500;color:#333;margin-top:2px;}
.ritmo-thumb-compas{font-size:10px;color:var(--color-text-secondary);}

/* === RITMO EN ESQUINA DEL CIFRADO === */
#ritmo-corner-wrap{position:absolute;top:0;right:0;}
.ritmo-corner{text-align:center;}
.ritmo-corner svg{display:block;}
.ritmo-corner-nombre{font-size:10px;font-weight:bold;color:var(--color-heading);}
.ritmo-corner-compas{font-size:9px;color:var(--color-divider);margin-bottom:2px;}

/* === CONSTRUCTOR DE RITMO === */
.rc-wrap{padding:6px 0 2px;border-top:0.5px solid var(--color-border-tertiary);margin-top:4px;}
.rc-toggle{font-size:11px;font-weight:500;color:var(--color-heading);cursor:pointer;padding:4px 2px;user-select:none;}
.rc-toggle:hover,.rc-toggle.on{color:#d4870f;}
.rc-body{padding:4px 2px;}
.rc-input{width:100%;padding:3px 5px;border:1px solid #ddd;border-radius:3px;font-size:11px;margin-bottom:5px;outline:none;box-sizing:border-box;}
.rc-input:focus{border-color:var(--color-accent);}
.rc-bh{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#666;margin-bottom:4px;}
.rc-btn-sm{padding:1px 6px;border:1px solid #ccc;border-radius:3px;cursor:pointer;background:#f5f5f5;font-size:13px;line-height:1.3;}
.rc-btn-sm:hover:not([disabled]){background:#e0e0e0;}
.rc-btn-sm[disabled]{opacity:.35;cursor:default;}
.rc-br{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;}
.rc-beat{width:22px;height:22px;border:1px solid #b0bec5;border-radius:3px;cursor:pointer;font-size:9px;font-weight:bold;background:#e3f2fd;color:#1565c0;padding:0;}
.rc-beat:hover{background:#bbdefb;border-color:#1565c0;}
.rc-prev{margin:4px 0;overflow:hidden;}
.rc-prev svg{width:100%;height:auto;}
.rc-save{width:100%;padding:4px;background:var(--color-btn-confirm);color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:11px;font-weight:bold;}
.rc-save:hover{background:var(--color-btn-confirm-hover);}
.rc-del{margin-left:4px;padding:0 3px;border:none;background:transparent;color:var(--color-btn-danger);cursor:pointer;font-size:10px;vertical-align:middle;}
.rc-del:hover{color:#c62828;}

/* === ONBOARDING TOUR === */
#onb-overlay{position:fixed;inset:0;background:var(--color-overlay);z-index:9000;}
#onb-spot{position:fixed;z-index:9000;background:transparent;box-shadow:0 0 0 9999px var(--color-overlay);border:2px solid rgba(255,255,255,.75);border-radius:6px;pointer-events:none;}
#onb-tip{position:fixed;z-index:9001;background:#fff;border-radius:12px;padding:22px 24px 18px;width:300px;box-shadow:0 8px 40px rgba(0,0,0,.5);max-height:calc(100vh - 48px);overflow-y:auto;}
.onb-titulo{font-size:15px;font-weight:bold;color:var(--color-heading);margin-bottom:8px;}
.onb-texto{font-size:13px;color:#444;line-height:1.55;margin-bottom:16px;white-space:pre-line;}
.onb-nav-top{display:flex;justify-content:flex-end;margin-bottom:12px;}
.onb-dots{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;}
.onb-dot{width:7px;height:7px;border-radius:50%;background:#ddd;transition:background .2s;}
.onb-dot.on{background:var(--color-accent);}
.onb-btns{display:flex;gap:8px;}
.onb-btns button{padding:6px 14px;border:none;border-radius:5px;cursor:pointer;font-size:12px;font-weight:bold;}
#onb-prev{background:#e0e0e0;color:#333;}
#onb-next{background:var(--color-accent);color:var(--color-topbar-bg);}
#onb-ok{background:var(--color-btn-confirm);color:#fff;}
.btn-tour{font-size:12px;}

/* === ESTILOS DE IMPRESIÓN === */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body{background:#fff;}
  .app{display:block;height:auto;}
  .topbar,.sidebar,.sidebar-ritmos,.no-print{display:none!important;}
  .main{display:block;}
  .workarea{padding:0;overflow:visible;}
  .chart-page{box-shadow:none;border-radius:0;max-width:100%;padding:14px 18px;margin:0;border:none;}
  .sec-header .sec-btn,.sec-header .sec-btn-act,.sec-header .sec-btn-del,
  .ci-quitar,.pista-vacia{display:none!important;}
  .sec-acordes{border:none!important;background:#fff!important;min-height:0!important;padding:4px 0!important;}
  .sec-acordes.activa{border:none!important;background:#fff!important;}
  .barra-lateral{width:20px;min-width:20px;}
  .barra-sym{height:80px;}
  .bl-thin{background:#000;}
  .bl-thick{background:#000;}
  .bl-dot{background:#000;}
  .sec-nombre{border:none!important;background:transparent!important;padding:0!important;}
  .bar{max-width:25%!important;border-right:1px solid #aaa!important;padding:0 4px!important;}
  .bar:last-child{border-right:none!important;}
  .bar-texto textarea{border:none!important;font-size:10px;color:#333;}
  .bar-texto-vacio textarea{visibility:hidden;}
  .print-only{display:inline!important;}
  .chord-item{break-inside:avoid;page-break-inside:avoid;min-width:0;}
  .chord-repeat{min-width:0;}
  .ci-nombre{font-size:10px;word-break:break-word;}
  .seccion{page-break-inside:avoid;}
}