@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);.icono-sonido{height:60px;position:relative;width:60px}.icono-base{height:100%;width:100%}.icono-base svg{fill:var(--color-primario);transition:fill .3s}.reproduciendo .icono-base svg{fill:var(--color-secundario)}.ondas{left:0;top:0}.onda,.ondas{height:100%;position:absolute;width:100%}.onda{animation:none;border:2px solid var(--color-primario);border-radius:50%;opacity:0}.reproduciendo .onda{animation:expandir 1.5s infinite;border-color:var(--color-secundario)}.reproduciendo .onda:first-child{animation-delay:0s}.reproduciendo .onda:nth-child(2){animation-delay:.5s}.reproduciendo .onda:nth-child(3){animation-delay:1s}@keyframes expandir{0%{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}@media (max-width:600px){.icono-sonido{height:50px;width:50px}}.icono-base svg{color:var(--color-primario);height:100%;width:100%}.reproduciendo .icono-base svg{color:var(--color-secundario)}.tarjeta-sonido{align-items:center;background-color:var(--color-superficie);border:1px solid var(--color-borde);border-radius:12px;box-shadow:0 4px 6px #0000001a;cursor:pointer;display:flex;flex-direction:column;margin:15px;padding:20px;position:relative;transition:transform .2s,box-shadow .2s;width:150px}.tarjeta-sonido:hover{box-shadow:0 8px 12px #00000026;transform:translateY(-8px)}.tarjeta-sonido.destacada{border-color:var(--color-primario);box-shadow:0 0 0 3px #0d6efd59}.tarjeta-sonido p{color:var(--color-texto);font-size:16px;font-weight:500;margin-top:15px;text-align:center}@media (max-width:600px){.tarjeta-sonido{padding:15px;width:80%}}.tarjeta-sonido:active{box-shadow:0 6px 10px #0003;transform:translateY(-2px)}.icono-base svg{transition:color .3s}.etiqueta-nuevo{background-color:var(--color-secundario);border-radius:8px;box-shadow:0 2px 4px #0003;color:#fff;font-size:.75rem;font-weight:700;left:10px;padding:5px 10px;position:absolute;text-transform:uppercase;top:10px}.boton-descarga-absolute{align-items:center;background-color:#28a745;border-radius:4px;bottom:10px;color:#fff;display:flex;font-size:12px;justify-content:center;padding:4px 6px;position:absolute;right:10px;text-decoration:none;transition:background-color .2s}.boton-descarga-absolute:hover{background-color:#218838}.boton-descarga-absolute svg{height:14px;width:14px}.boton-compartir-absolute{align-items:center;background-color:#0d6efd;border:0;border-radius:4px;bottom:10px;color:#fff;cursor:pointer;display:flex;font-size:12px;justify-content:center;left:10px;padding:4px 6px;position:absolute;text-decoration:none;transition:background-color .2s}.boton-compartir-absolute:hover{background-color:#0b5ed7}.boton-compartir-absolute svg{height:14px;width:14px}input{padding:10px}:root{--color-fondo:#f0f2f5;--color-texto:#333;--color-primario:#2196f3;--color-secundario:#e91e63;--color-superficie:#fff;--color-borde:#ccc;--color-boton-tema:#111827;--color-boton-tema-texto:#fff}body[data-theme=dark]{--color-fondo:#0f172a;--color-texto:#e2e8f0;--color-primario:#60a5fa;--color-secundario:#f472b6;--color-superficie:#1e293b;--color-borde:#334155;--color-boton-tema:#e2e8f0;--color-boton-tema-texto:#0f172a}body{background-color:#f0f2f5;background-color:var(--color-fondo);color:#333;color:var(--color-texto);font-family:Roboto,sans-serif;margin:0;padding:0;transition:background-color .3s ease,color .3s ease}.App{text-align:center}.theme-selector{background-color:#fff;background-color:var(--color-superficie);border:1px solid #ccc;border:1px solid var(--color-borde);border-radius:999px;gap:4px;margin:20px auto 0;padding:4px}.theme-option,.theme-selector{align-items:center;display:inline-flex}.theme-option{background-color:initial;border:none;border-radius:999px;color:#333;color:var(--color-texto);cursor:pointer;font-size:13px;font-weight:600;gap:6px;height:34px;padding:0 12px;transition:background-color .2s ease,color .2s ease}.theme-option-icon{font-size:14px}.theme-option:hover{background-color:color-mix(in srgb,#2196f3 15%,#0000);background-color:color-mix(in srgb,var(--color-primario) 15%,#0000)}.theme-option.active{background-color:#111827;background-color:var(--color-boton-tema);color:#fff;color:var(--color-boton-tema-texto)}h1{font-size:32px;margin-top:20px}h1,input{color:#333;color:var(--color-texto)}input{background-color:#fff;background-color:var(--color-superficie);border:1px solid #ccc;border:1px solid var(--color-borde);border-radius:25px;font-size:16px;margin:20px;max-width:400px;outline:none;padding:10px 15px;transition:border-color .3s;width:80%}input:focus{border-color:#2196f3;border-color:var(--color-primario)}input::placeholder{color:color-mix(in srgb,#333 65%,#0000);color:color-mix(in srgb,var(--color-texto) 65%,#0000)}.menu-categorias{margin:20px 0}.menu-categorias h3{color:#333;color:var(--color-texto);font-size:18px;margin-bottom:10px}.menu-categorias select{background-color:#fff;background-color:var(--color-superficie);border:1px solid #ccc;border:1px solid var(--color-borde);border-radius:25px;color:#333;color:var(--color-texto);cursor:pointer;font-size:16px;min-width:200px;outline:none;padding:10px 15px;transition:border-color .3s}.menu-categorias select:focus{border-color:#2196f3;border-color:var(--color-primario)}.grid-sonidos{display:flex;flex-wrap:wrap;justify-content:center;padding:10px}@media (max-width:600px){.grid-sonidos{align-items:center;flex-direction:column}}.logo{display:block;height:auto;margin:0;width:260px}.logo-boton{background:#0000;border:none;cursor:default;display:block;margin:10px auto 20px;padding:0}.logo-boton.activo{cursor:pointer}.logo-boton.activo .logo{transition:transform .2s ease,filter .2s ease}.logo-boton.activo:hover .logo{filter:drop-shadow(0 0 12px rgba(33,150,243,.35));transform:scale(1.03)}@media (max-width:600px){.logo{width:150px}.theme-option span{display:none}.theme-option{justify-content:center;padding:0;width:34px}}