/* ---------------- ROOT ---------------- */
body {
    margin: 0;
    padding: 4px;
    background: #222;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: 4px;
    color: white;
}

/* ---------------- BOTONES SUPERIORES ---------------- */
#top-bar {
    display: flex;
    height: 40px;
    gap: 4px;
    flex-wrap: wrap;
}

.kivy-btn {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    text-align: center;
    white-space: nowrap;
    padding: 0.5em 1em;               /* padding relativo a la fuente */
    flex: 1 1 80px;                    /* Crece y se encoge */
    min-width: 80px;
    font-size: clamp(12px, 1.8vw, 16px); /* responsivo */
}

/* Colores botones superiores */
.btn-import { background: rgb(36, 192, 4); }
.btn-import:active { background: rgb(5, 75, 5); }

.btn-save { background: rgb(221, 153, 6); }
.btn-save:active { background: rgb(65, 53, 2); }

.btn-tone { background: rgb(6, 164, 236); }
.btn-tone:active { background: rgb(2, 43, 66); }

.btn-zoom { background: rgb(158, 12, 216); }
.btn-zoom:active { background: rgb(55, 5, 102); }

.btn-reset { background: rgb(252, 10, 10); }
.btn-reset:active { background: rgb(34, 2, 2); }

/* ---------------- PANEL PRINCIPAL ---------------- */
#main {
    display: flex;
    width: 100%;
    flex: 1;
    gap: 2px;
    overflow: hidden;
}

/* ---------------- PANEL IZQUIERDO (REPERTORIO) ---------------- */
#panel-lista {
    width: 25%;
    position: relative;
    background-color: #1f1a1a;
    border-right: 2px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease;
}

/* Fondo gris del panel */
#lista-container {
    flex: 1;
    overflow-y: auto;
    padding: 3px;
    padding-bottom: 70px; /* Margen para botonera inferior */
    background: #ada2a2;
}

#lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Botones de canciones */
.item-cancion {
    background: rgb(77, 77, 77);
    color: white;
    padding: 6px;
    border-radius: 3px;
    cursor: grab;
    user-select: none;
    font-size: 14px;
}
.item-cancion:hover { background: rgb(95, 95, 95); }
.item-cancion.seleccionada {
    background: rgb(255, 136, 0);
    color: black;
}
.item-cancion:active { cursor: grabbing; }

/* ---------------- BOTONERA INFERIOR RESPONSIVA ---------------- */
#lista-botones {
    display: flex;
    gap: 4px;
    padding: 4px;
    flex-wrap: wrap;
}

#lista-botones .kivy-btn {
    flex: 1 1 30%;
    min-width: 60px;
    padding: 0.4em 0.8em;              /* padding relativo a la fuente */
    font-size: clamp(10px, 2.2vw, 14px); /* responsivo */
    border-radius: 5px;
    border: none;
    cursor: pointer;
    color: white;
    text-align: center;
    white-space: nowrap;
}

/* Colores botones inferiores */
.btn-delete { background-color: #d32f2f; }
.btn-delete:active { background-color: #a20f0f; }

.btn-up, .btn-down { background-color: #1161c9; }
.btn-up:active, .btn-down:active { background-color: #0a3e9f; }

.btn-delete:hover { background-color: #e53935; }
.btn-up:hover, .btn-down:hover { background-color: #1976d2; }

/* Botones Delete, Up, Down aún más pequeños (opcional) */
#lista-botones .btn-delete,
#lista-botones .btn-up,
#lista-botones .btn-down {
    font-size: clamp(8px, 1.5vw, 12px); /* más pequeño y responsivo */
    padding: 0.3em 0.6em;
}

/* ---------------- PANEL DE TEXTO ---------------- */
#texto {
    flex: 1;
    background: #111;
    color: white;
    padding: 5px 25px;
    overflow-y: auto;
    white-space: pre;
    font-family: monospace;
    font-size: clamp(9px, 2.5vw, 16px); /* responsivo */
    line-height: 1;
}

/* ---------------- TITULO LISTA ---------------- */
#titulo-lista {
    background: black;
    color: white;
    text-align: center;
    padding: 6px 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 3px;
}

/* ---------------- BOTONERA FIJA (opcional) ---------------- */
#botonera-fija {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-top: 2px solid #444;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
    z-index: 10;
}

/* ---------------- DRAG & DROP ---------------- */
.item-cancion.drag-over {
    border-top: 3px solid #ff8800;
    background-color: #333;
}

/* ---------------- CURSOR Y SELECCION ---------------- */
.sin-color { color: inherit !important; text-decoration: none; cursor: default; }
#texto span { cursor: pointer; }

/* ---------------- SCROLLBARS ---------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 6px; border: 3px solid #111; }
::-webkit-scrollbar-thumb:hover { background: #ff8800; }

* { scrollbar-width: thin; scrollbar-color: #333 #111; }
#lista-container::-webkit-scrollbar-track { background: #ada2a2; }
#lista-container::-webkit-scrollbar-thumb { background: #1a1a1a; border: 2px solid #ada2a2; }

/* ---------------- RESPONSIVE ---------------- */
#toggle-lista-wrapper {
    margin: 1px 0;
}

#toggle-lista {
    width: 25%;
    padding: 1px;
    font-size: 16px;
}

#toggle-lista:hover {
    opacity: 1;
    background: #d82323;
}

#texto {
    width: 70%;
    transition: width 0.3s ease;
}

/* Franja superior fija */
#status-bar-spacer {
    width: 100%;
    height: 30px; /* altura de la franja */
    background-color: #007acc; /* color visible, cambia al que quieras */
    position: fixed; /* queda fija arriba */
    top: 0;
    left: 0;
    z-index: 9999; /* siempre encima */
}

/* Ajustamos el top-bar para que no quede debajo de la franja */
#top-bar {
    margin-top: 30px; /* misma altura que la franja */
}

/* Editor overlay */
#editorOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 9999;
}

#editorOverlay.active {
    opacity: 1;
    pointer-events: all;
}

#editorContainer {
    width: 95%;
    max-width: 1100px;
    height: 90%;
    background: #1e1e1e;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: 0.3s ease;
}

#editorOverlay.active #editorContainer {
    transform: scale(1);
}

#editorHeader {
    height: 50px;
    background: #2d2d2d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

#editorHeader button {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

#editorContainer iframe {
    flex: 1;
    border: none;
}



/* ================= LOGO INICIO ================= */
/* ---------------- LOGO INICIO UNIFICADO ---------------- */
.logo-inicio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    z-index: 5;
    pointer-events: none;
}

.logo-contenido {
    text-align: center;
    animation: aparecer-unificado 2s ease-in-out forwards; /* animación unificada */
}

.logo-contenido img {
    width: 500px;
    max-width: 80%;
    margin-bottom: 30px;
    animation: flotar 4s ease-in-out infinite; /* flotación opcional */
}

.logo-contenido h1 {
    color: #fcfcfc;
    font-family: sans-serif;
    font-size: 2.8rem;
    letter-spacing: 3px;
    margin: 0;
}

/* Animación unificada: imagen y texto aparecen juntos */
@keyframes aparecer-unificado {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* Flotación suave de la imagen */
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Ocultar logo al cerrar */
.logo-oculto {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}


#contenedor-texto {
    position: relative;
    flex: 1;
    width: 70%;
    display: flex;
}