/**
 * ==========================================
 * ARCHIVO: components.css
 * FUNCIÓN: Piezas de UI genéricas, compartidas por varias
 * secciones de la app (no exclusivas de una sola pantalla).
 * El estilo propio de cada sección vive en su propio archivo:
 * player.css, sfx.css, tiles.css, tabs.css, miniplaylists.css,
 * notes.css, auth.css, account.css.
 * ==========================================
 */

/* --- MODALES ---
   Estructura y piezas compartidas por los 6 modales de la app
   (editar botón, editar pestaña, mini playlist, SFX, cuenta y
   confirmación de cierre de sesión). */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; z-index:150; padding:16px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--color-parchment); border-radius:14px; padding:24px; width:100%; max-width:380px; border:3px solid rgba(0,0,0,0.2); position: relative; }
.modal h2{ font-family: 'Grenze', serif; margin-top:0; font-size:1.2rem; color: var(--color-espresso); }
.modal label{ font-size:0.8rem; font-weight:700; display:block; margin:12px 0 4px; color: var(--color-espresso); }
/* Campos de texto y listas desplegables, iguales en TODOS los modales
   (botón, pestaña, playlist, efectos y cuenta): blanco cálido con borde
   hueso; al escribir el borde se pone espresso. */
.modal input[type=text], .modal input[type=email], .modal input[type=password], .modal select.modal-select{
  width:100%; box-sizing:border-box; padding:9px 11px; border-radius:8px;
  border:2px solid var(--color-bone); background:#FFFCF6; box-shadow:none;
  font-size:0.9rem; font-family:'Inter', sans-serif; color: var(--color-espresso);
  outline:none; transition: border-color 0.12s ease; }
.modal input::placeholder{ color: var(--color-ash); }
.modal input[type=text]:focus, .modal input[type=email]:focus, .modal input[type=password]:focus, .modal select.modal-select:focus{ border-color: var(--color-espresso); }
.modal input:disabled{ background: var(--color-bone); color: var(--color-taupe); cursor: not-allowed; opacity: 1; }
/* El autocompletado del navegador pinta el campo de celeste: lo tapamos
   con el mismo blanco cálido para que todos los campos se vean iguales. */
.modal input:-webkit-autofill, .modal input:-webkit-autofill:hover, .modal input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #FFFCF6 inset; -webkit-text-fill-color: var(--color-espresso); caret-color: var(--color-espresso); }
.modal select.modal-select { margin-top: 4px; margin-bottom: 8px; }

/* Botón para cerrar el modal (X arriba a la derecha), lo usan los 6 modales */
.modal-close-x{
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
}
/* La X es un ícono (assets/icons/ui/x.svg), del mismo juego que el resto */
.modal-close-icon{
  width: 18px; height: 18px; display: block;
  background-color: var(--color-ash);
  -webkit-mask: url('../assets/icons/ui/x.svg') center/contain no-repeat;
  mask: url('../assets/icons/ui/x.svg') center/contain no-repeat;
  transition: background-color 0.12s ease;
}
.modal-close-x:hover .modal-close-icon{
  background-color: var(--color-espresso);
}

.source-toggle{ display:flex; gap:8px; margin-top:6px; }
/* YouTube / Archivo MP3: chips con relieve, como las categorías de efectos */
.source-btn{ flex:1; padding:7px 6px 10px; border-radius:8px; border:none; background:var(--color-bone); cursor:pointer; font-size:0.8rem; font-weight:700; color:var(--color-espresso); font-family:'Inter', sans-serif; box-shadow: var(--tile-bevel-sm); transition: transform 0.1s ease; }
.source-btn:hover{ transform: translateY(-2px); }
.source-btn.active{ background:var(--color-espresso); color:var(--color-parchment); }
/* Aviso debajo del link: si es válido (con el título del video) o no */
.field-status{ font-size:0.75rem; margin-top:6px; min-height:1em; color: var(--color-taupe); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-status.ok{ color: var(--color-espresso); font-weight:600; }
.field-status.bad{ color:#A33A2C; white-space:normal; }
.modal input[type=file]{ width:100%; margin-top:4px; font-size:0.78rem; color: var(--color-espresso); }
.upload-filename{ font-size:0.75rem; color:var(--color-bronze); margin-top:6px; line-height:1.3; }

/* Modal de botón en dos columnas: a la izquierda la vista previa, el nombre
   y el audio; a la derecha colores e iconos. En pantallas chicas, una sola. */
.modal.tile-modal{ max-width: 650px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.tile-modal-cols{ display:grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; }
.tile-modal-left, .tile-modal-right{ min-width:0; }
.tile-modal-left > label:first-child, .tile-modal-right > label:first-child{ margin-top:0; }
.tile-preview{ width:150px; aspect-ratio:1/1; margin: 2px auto 4px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: var(--tile-bevel), 0 4px 10px rgba(0,0,0,0.15); color: var(--color-espresso); transition: background 0.15s ease; }
.tile-preview-icon{ width:46%; aspect-ratio:1/1; background-color: var(--color-espresso); margin-bottom:8px; }
.tile-preview-label{ font-family:'Grenze', serif; font-weight:600; font-size:1.05rem; width:100%; padding:0 12px; box-sizing:border-box; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-preview-label.placeholder{ opacity:0.5; }
/* Iconos: se ven 4 filas y el resto aparece con la barrita, como en efectos */
.tile-modal .icon-swatches{ display:grid; grid-template-columns: repeat(8, 32px); gap:8px; max-height: 166px; overflow-y:auto; padding: 2px 6px 4px 2px; align-content:start; }
@media (max-width: 720px){
  .tile-modal-cols{ grid-template-columns: 1fr; gap: 0; }
  .tile-modal-right > label:first-child{ margin-top:12px; }
  .tile-preview{ width:120px; }
}

/* Colores en grilla de 8 por fila (una familia de tonos por fila), cuadrados como los íconos */
.swatches{ display:grid; grid-template-columns:repeat(8, 32px); gap:8px; margin-top:6px; }
.swatch{ width:32px; height:32px; border-radius:8px; cursor:pointer; border:2px solid transparent; box-sizing:border-box; transition: transform 0.12s ease; }
.swatch:hover{ transform:scale(1.08); }
.swatch.selected{ border-color:var(--color-espresso); }
.icon-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.icon-swatch { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; padding: 4px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.05); transition: all 0.15s ease; }
.icon-swatch:hover { background: rgba(0,0,0,0.1); }
.icon-swatch.selected { border-color: var(--color-espresso); background: rgba(0,0,0,0.15); }
.icon-swatch .modal-icon { width: 100%; height: 100%; background-color: var(--color-espresso); }

.modal-actions{ display:flex; justify-content:space-between; margin-top:20px; gap:10px; }
/* Botones de los modales, los tres con el mismo relieve que los chips y
   botones de la app (Grenze, bevel, saltito al pasar el mouse, se hunden
   al apretar). Solo cambia el color según la importancia:
   Vaciar   = stone con letra iron (como un lugar vacío)
   Cancelar = hueso con letra espresso
   Guardar  = espresso con letra pergamino (la acción principal) */
.modal-actions button{ flex:1; padding:8px 9px 11px; border-radius:8px; border:none; cursor:pointer; font-family:'Grenze', serif; font-weight:700; font-size:1.05rem; line-height:1.1;
  box-shadow: var(--tile-bevel-sm, inset 0 0 0 2px rgba(0,0,0,0.12), inset 0 -5px 0 rgba(0,0,0,0.16)); transition: transform 0.1s ease; }
.modal-actions button:hover{ transform:translateY(-2px); }
.modal-actions button:active{ transform:translateY(1px); box-shadow: var(--tile-bevel-sm-pressed, inset 0 0 0 2px rgba(0,0,0,0.12), inset 0 -2px 0 rgba(0,0,0,0.16)); }
.btn-save{ background:var(--color-espresso); color:var(--color-parchment); }
.btn-cancel{ background:var(--color-bone); color:var(--color-espresso); }
.btn-clear{ background:var(--color-stone); color:var(--color-iron); }

/* Barra de desplazamiento con el estilo de la app: canal hueso, barra
   marrón redondeada que se oscurece al pasar el mouse. Se usa con la clase
   .scroll-dm en cualquier zona que se desplace (lista de efectos, iconos…).
   Firefox solo entiende scrollbar-width/color; en Chrome/Edge/Safari esas
   pisarían el diseño de abajo, por eso van solo donde no hay ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar) {
  .scroll-dm { scrollbar-width: thin; scrollbar-color: var(--color-taupe) rgba(74,60,49,0.08); }
}
.scroll-dm::-webkit-scrollbar { width: 10px; }
.scroll-dm::-webkit-scrollbar-track { background: rgba(74,60,49,0.08); border-radius: 6px; }
.scroll-dm::-webkit-scrollbar-thumb { background: var(--color-taupe); border-radius: 6px; border: 2px solid var(--color-parchment); }
.scroll-dm::-webkit-scrollbar-thumb:hover { background: var(--color-espresso); }