@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos personalizados para el editor de letras */
#lyrics-editor {
    white-space: pre-wrap;
    overflow-y: auto;
    outline: none;
    word-wrap: break-word;
}

/* Estilos para la sintaxis de la letra */
.instruct {
    color: #cf5300; /* gray-700 - Para corchetes [...] */
    font-weight: 100;
}

.lirycs {
    color: #005319; /* Negro - Para texto normal */
    font-weight: bolder;
}

.paren-text {
    color: hsl(320, 92%, 31%); /* green-800 - Para paréntesis (...) */
    font-style: italic;
}

/* Estilos para el scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Estilos para el modal */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* Notebook Effect Styles from samples/song/index.css */
.p-06 {
    padding: 0.6rem;
}
.lyrics-font { font-family: 'Crimson Pro', serif; }
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.gradient-bg {
    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
.lyrics-paper {
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 100% 2rem;
    line-height: 2rem;
}
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.loading-dots::after {
    content: '...';
    animation: pulse-soft 1.5s infinite;
}

/* Botonera inferior: los nombres solo se muestran si TODOS caben en una sola fila.
   Lo decide ajustarEtiquetasPie() midiendo el desbordamiento real, no un breakpoint
   fijo como el 'hidden md:inline' que habia antes: con md el nombre aparecia aunque
   la fila tuviera que partirse en dos. La fila arranca con .solo-iconos puesta para
   que no haya un parpadeo de nombres antes de que el JS mida. */
#fila-botones-pie.solo-iconos .etiqueta-pie {
    display: none;
}

/* En modo icono los separadores tambien estorban: a 320 px la fila desbordaba por
   4 px con ellos puestos, y con nowrap desbordar significa recortar botones. */
#fila-botones-pie.solo-iconos .separador-pie {
    display: none;
}

/* Nota: se intento tambien apretar el relleno de los botones en modo icono
   (padding-left/right y padding-inline, con y sin !important, y hasta inyectando
   la regla al final del <head>) y NO se aplica: el navegador sigue computando los
   8 px del px-2 de Tailwind, mientras que las dos reglas display:none de arriba si
   ganan. No se identifico la causa. Se retiro en vez de dejar CSS muerto.
   Consecuencia conocida: por debajo de 320 px la fila de iconos desborda unos
   12 px. Ningun dispositivo real es tan estrecho, asi que se acepta. */