/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
  /* Sin variables de escala. Tamaño natural 1:1 */
}

body {
  font-family: 'Roboto', sans-serif;
  color: #555;
  margin: 0;
  padding: 0;
  
  /* CONFIGURACIÓN DE PANTALLA COMPLETA */
  width: 100%;
  height: 100vh; /* Fuerza al body a tener la altura de la ventana/iframe */
  overflow: hidden; /* Evita que toda la página haga scroll, solo lo hará el mástil */
  
  display: flex;
  flex-direction: column;
  transform: none !important;
}

/* =========================================
   LAYOUT PRINCIPAL
   ========================================= */

.app-wrapper {
  /* Ocupa todo el espacio disponible dentro del body */
  width: 100%;
  height: 100%;
  
  display: flex;
  flex-direction: column; /* Apila Controles arriba y Mástil abajo */
  align-items: flex-start;
  
  padding: 23px 50px 10px 50px;
  box-sizing: border-box;
  background-color: transparent; 
}

.content-wrapper {
  /* Ocupa el espacio restante debajo de los controles */
  flex: 1; 
  width: 100%;
  
  /* Prepara el terreno para el scroll interno */

  display: flex;
  flex-direction: column;
}

/* =========================================
   CONTROLES (FIJOS, SIEMPRE VISIBLES)
   ========================================= */

.controls-area {
  /* Flexbox para los botones */
  display: flex;
  flex-wrap: wrap; 
  align-items: center;
  gap: 8px;
  
  /* CRÍTICO: Evita que los controles se aplasten o desaparezcan */
  flex-shrink: 0; 
  
  width: 100%;
  margin-top: 20px;
  margin-bottom: 60px;
  padding: 5px 0;
  
  position: relative;
  z-index: 20;
}

/* --- TUS ESTILOS DE UI (INTACTOS) --- */

.controls-area button {
  font-size: 18px;
  height: 35px;
}

#toggleZoomButton {
    /* Mismo tamaño que los demás botones cuadrados */
    width: 35px !important;
    height: 35px !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

.controls-area select {
  font-size: 16px; 
  height: 35px;
  font-weight: bold;
  color: #555;
  background-color: #e0e0e0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  
  padding-left: 10px !important;
  padding-right: 25px !important;
  text-align: left !important;
  text-align-last: center;
  min-width: 70px;
  width: auto !important;
}

select:disabled,
button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

optgroup {
  font-weight: bold;
  color: #333;
  background-color: #f5f5f5;
}

option {
  font-weight: normal;
  padding: 4px;
}

.action-button, 
.toggle-button, 
.guitar-button {
  height: 35px;
  background-color: #e0e0e0;
  color: #777;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  transition: color 0.3s ease, background-color 0.2s ease;
}

/* Botones Cuadrados (35x35) */
#displayToggle,
#guitarButton,
#saveFretboardButton,
#generatePdfButton,
#layoutButton,
#resetButton,
#titleToggleButton {
  width: 35px !important;
  height: 35px !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

#titleToggleButton {
  background-color: #e0e0e0;
  color: #777;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.2s ease;
}

/* 2. Aseguramos el estado iluminado cuando está activo (azul) */
#titleToggleButton.active-state {
    background-color: #397f99 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

#titleToggleButton.active-state:hover,
#toggleVerticalButton.active-state:hover,
#toggleZoomButton.active-state:hover {
    background-color: #397f99 !important; /* Mantenemos el azul exacto */
    color: #ffffff !important;
    cursor: pointer;
}

/* 3. El hover para que reaccione al pasar el ratón */
#titleToggleButton:hover {
  background-color: #d0d0d0 !important;
}

#saveFretboardButton {
  position: relative !important;
  overflow: visible !important;
}

.action-button .fas { font-size: 18px; }
#guitarButton .fas.fa-guitar { font-size: 20px; }

.icon-wrapper {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.icon-text {
  font-size: 11px !important; fill: currentColor;
}

/* Efectos Activos */
#guitarButton.active-effect,
#displayToggle.active-effect,
.action-button.active-effect {
  background-color: #999 !important;
  transition: background-color 0s !important;
  color: #111 !important;
}

.action-button.active-state {
    background-color: #397f99 !important; /* Azul corporativo */
    color: #ffffff !important;            /* Icono blanco */
    border-color: #397f99 !important;     /* Opcional: si tuvieras bordes */
    
    /* Opcional: Un pequeño efecto de sombra interna para dar sensación de "presionado" */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); 
}

#numeroColumnas, #selectNota {
  width: 85px !important; min-width: 0 !important;
}

#selectNota, #selectNota * {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #333 !important; 
}

#selectNota option {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

#displayToggle { color: #111 !important; }

#numeroColumnas:hover,
#selectNota:hover,
.action-button:hover,
.toggle-button:hover,
.guitar-button:hover {
  background-color: #d0d0d0 !important;
}

.separator {
  width: 1px; height: 24px;
  background-color: #bbb; margin: 0 4px;
  display: inline-block;
}

/* =========================================
   MÁSTIL (SCROLL AUTOMÁTICO, SIN DEFORMAR)
   ========================================= */

#fretboardContainer {
  /* 1. GESTIÓN DEL SCROLL */
  overflow-x: auto;   /* Scroll horizontal SI ES NECESARIO */
  overflow-y: visible !important; /* Nunca scroll vertical */
  
  /* 2. OCUPAR ESPACIO */
  width: 100%;
  height: 100%; /* Aprovecha toda la altura restante */
  position: relative;
  
  /* Suavizado móvil */
  -webkit-overflow-scrolling: touch; 
  touch-action: pan-x;
  
  /* LIMPIEZA TOTAL DE TRANSFORMS */
  transform: none; 
  margin: 0;
  padding-bottom: 20px;
}

#fretboardContainer.full-width-view {
    overflow-x: hidden;
}


table {
  /* --- LA CLAVE DEL DISEÑO --- */
  /* max-content obliga a la tabla a mantener sus proporciones reales. 
     Si la tabla mide 1200px y la pantalla 500px, la tabla medirá 1200px 
     y se activará el scroll del contenedor. */
  width: max-content; 
  border-collapse: collapse;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

td { text-align: center; }

.nota-circular {
  height: 36px;
  transform: translateY(50%);
  line-height: 0; 
  padding: 0;
  position: relative;
  z-index: 5;
}

svg {
  margin-top: -3px; 
  margin-bottom: -3px;
  display: inline-block; 
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  visibility: visible;
}

svg text {
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important; 
  letter-spacing: 0px; 
  dominant-baseline: central !important;
  alignment-baseline: central !important;
  pointer-events: none;
  fill: currentColor;
}

svg text tspan {
  dominant-baseline: central !important;
  alignment-baseline: central !important;
}

.music-symbol {
  font-family: 'Space Mono', monospace !important;
  font-size: 15px;
}

tr:first-child td {
  border-top: none; border-left: none; border-right: none;
}
tr:first-child td:first-child { border: none; }

circle { opacity: 100%; }
circle text { visibility: hidden; }
.circulo-oculto { opacity: 30%; }
.circulo-oculto text { visibility: hidden; }
.circulo-blanco { fill: white; }
.circulo-azul { fill: blue; }
.circulo-rojo { fill: red; }
.playmode { fill: #fff; font-weight: 700; }

/* =========================================
   EXTRAS UI
   ========================================= */

.save-count {
  position: absolute; top: -6px; right: -6px;
  background-color: brown; color: white; border-radius: 50%;
  padding: 0; width: 16px; height: 16px; line-height: 16px;
  font-size: 10px; text-align: center;
  box-shadow: 0 0 0 1.5px white;
  display: none; z-index: 10;
}

.help-button {
  background: none; border: none; padding: 0;
  margin-left: 10px; cursor: pointer;
  font-size: 20px; color: #777;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s ease, transform 0.1s ease;
}
.help-button:hover { color: #555; }
.help-button.active { color: #777; }

/* Tooltips */
.gb-tooltip {
  position: absolute;
  background-color: #e6f2f5; 
  color: #2a5d70; 
  border: none; border-radius: 5px;
  padding: 5px 10px;
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', 'Roboto', sans-serif;
  z-index: 10000;
  pointer-events: none;
  white-space: pre-line; text-align: center; line-height: 1.3;
  opacity: 0;
  animation: fadeInTooltip 0.2s forwards;
}

@keyframes fadeInTooltip { to { opacity: 1; } }

input[type="text"] {
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

@media (max-width: 576px) {
  .app-wrapper {
    /* Reducimos el padding drásticamente para ganar ancho de pantalla */
    padding: 10px !important; 
  }
}

/* --- ESTILOS EXCLUSIVOS PARA MODO VERTICAL --- */
body.vertical-layout {
    overflow-y: auto !important;
    height: auto !important;
    /* Centramos el body entero por si la pantalla es muy ancha */
    display: flex;
    justify-content: center;
}

body.vertical-layout .app-wrapper {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    padding-bottom: 50px;
    padding: 0 !important;
    /* LA CLAVE: El wrapper solo mide lo que midan los controles */
    width: fit-content !important;
    min-width: min-content;
    margin: 0 auto;
}

body.vertical-layout .content-wrapper {
    /* Se ajusta al ancho del padre (app-wrapper) */
    width: 100% !important;
    max-width: fit-content !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.vertical-layout .controls-area {
    justify-content: center !important;
    width: fit-content !important;
    margin-left: auto;
    margin-right: auto;

    /* CAMBIO: Controles fijos arriba mientras haces scroll */
    position: sticky !important;
    top: 0;
    z-index: 100;
    background-color: #fff; /* Fondo sólido para que no se transparente el mástil al pasar */
    padding: 40px 10px 20px 10px !important; 
    margin-top: 0 !important;
}

body.vertical-layout #fretboardContainer {
    display: block !important;
    overflow: visible !important;
    /* El ancho se lo da el JS basado en la altura de la tabla */
    margin: 0 auto !important; 
    transform: translateX(18px) !important;
}

body.vertical-layout #miTabla {
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    margin: 0 !important;
}

.text-vertical-fix {
    transform: rotate(-90deg) !important;
    transform-origin: center !important;
}

/* Solo afecta en modo vertical a los círculos que tengan esta clase */
body.vertical-layout .nut-v-hidden {
    opacity: 0 !important;
}

/* Ocultamos el texto mientras el círculo sea invisible */
body.vertical-layout .nut-v-hidden + text {
    visibility: hidden !important;
}

/* --- COMPATIBILIDAD VERTICAL PARA NÚMEROS --- */
/* 1. Orientación del contenedor en vertical */
body.vertical-layout #fretNumbers {
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 0;
    right: 100%; /* Esto lo empuja a la izquierda del mástil */
    margin-right: 30px;
    left: auto;
}

/* 2. Ajuste de dimensiones de cada número en vertical */
body.vertical-layout .fret-number-item {
    width: auto;
    height: 59px; /* La anchura horizontal de la celda ahora es la altura vertical */
    line-height: 59px;
    transform: none; /* Quitamos el translate Y del 50% para que no desvíe el eje X */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(30%);
}

body.vertical-layout.start-fret-offset .fret-number-item {
    transform: translateY(23%); 
}

/* 3. Ajuste del espaciador (Traste 0) en vertical */
body.vertical-layout .fret-number-spacer {
    height: 63px; /* Sincronizado con el traste 0 de la tabla */
    width: auto;
}
/* --- fin ESTILOS EXCLUSIVOS PARA MODO VERTICAL --- */

/* --- ESTILOS para select startFRET --- */
/* Oculta el traste pero mantiene su existencia en el DOM */
.fret-hidden {
    display: none !important;
}

/* Opcional: Estilo para el nuevo select para que combine */
#startFret {
    width: 85px !important;
}

/* Regla para ocultar los puntos (pseudo-elementos) */
.hide-markers .borde-especial::before,
.hide-markers .borde-especial-1::before,
.hide-markers .borde-especial-2::after {
    display: none !important;
}
/* --- fin ESTILOS para select startFRET --- */

/* --- ESTILOS fretnumbers --- */
#fretNumbers {
    display: flex;
    width: max-content; /* Para que acompañe el ancho de la tabla */
    margin-top: 10px;
    cursor: pointer; /* Evita que interfiera con los clics */
}

.fret-number-item {
    width: 59px; /* Ajustado para coincidir con el ancho de celda */
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #888;
    flex-shrink: 0;
    
    /* APLICAR DESPLAZAMIENTO VERTICAL */
    transform: translateY(100%);
    display: inline-block;
    transition: opacity 0.2s ease-in-out;
}

/* El espaciador para el traste 0 (cejilla) */
.fret-number-spacer {
    width: 63px; /* 58px + 5px de borde inicial */
    flex-shrink: 0;
}

/* Reutilizamos tu lógica de ocultación */
.fret-number-item.fret-hidden {
    display: none !important;
}
/* --- fin ESTILOS fretnnumbers --- */

/* --- ESTILOS título texto --- */
#fretboardTitleArea {
    display: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;         /* CAMBIO: Evita que cualquier contenido desborde verticalmente */
    background-color: white;
    padding: 10px 0;
    font-size: 3.5rem;
    font-weight: bold;
    color: #333;
    cursor: text;
    
    /* SOLUCIÓN AL CRECIMIENTO: */
    height: 1.1em;            /* CAMBIO: De min-height a height fijo */
    line-height: 1.1em;       /* NUEVO: Clave para que el texto no empuje los bordes */
    
    outline: none;
    border: 2px dashed transparent;
    box-sizing: border-box;
}

#fretboardTitleArea.active {
    display: flex; /* Ocupa espacio y desplaza la tabla */
}

#fretboardTitleArea.active:empty::before {
    content: ''; /* Mantenemos vacío para que no haya texto por defecto */
}

body.vertical-layout #fretboardTitleArea {
    width: max-content;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centrado + compensación mástil */
    margin-bottom: 20px;
}

body.vertical-layout #wrapperTitulo:has(#fretboardTitleArea.active) + #fretboardContainer {
    /* Calculamos el empuje: Top del título (70px) + Altura título (~50px) */
    margin-top: 120px !important; 
    transition: margin-top 0.2s ease;
}

body.vertical-layout #fretboardTitleArea.active ~ #fretNumbers {
    /* Calculamos el empuje sumando:
       - 3.5rem (tamaño de la fuente del título)
       - 20px (10px padding top + 10px padding bottom)
       - 20px (el margin-bottom que definiste para el título)
    */
    top: calc(3.5rem + 26px);
}

/* Estilo para el aviso flotante (Tooltip) */
.title-hint-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 1s ease;
    text-align: center;
}

/* Toolbar de símbolos flotante */
.title-symbol-toolbar {
    display: none; /* Se activa por JS o CSS focus */
    position: fixed;
    transform: translate(-50%, -100%);
    gap: 8px;
    z-index: 4000;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: left 0.1s ease, top 0.1s ease, opacity 0.2s;
}

/* Mostrar cuando el título está activo y tiene el foco */
#fretboardTitleArea:focus + #titleSymbolToolbar,
#titleSymbolToolbar.visible {
    display: flex;
}

.symbol-btn {
    width: 32px;
    height: 32px;
    background-color: #397f99;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.symbol-btn:hover { background-color: #2a5d70; }

/* El SPAN que se insertará en el texto */
.music-symbol-inline {
    font-family: 'Space Mono', monospace !important;
    line-height: 0;
    pointer-events: none;
    user-select: none;
}
/* --- fin ESTILOS título texto --- */