body{font-family:sans-serif;background:#0b1220;color:#fff;margin:0}
h1{color:#0ea5e9}
.topbar{padding:1rem;background:#111;display:flex;justify-content:space-between;align-items:center}
.container{display:grid;grid-template-columns:2fr 1fr;gap:1rem;padding:1rem}
.card{background:#222;padding:1rem;border-radius:8px}
.btn{background:#0ea5e9;color:#fff;border:none;padding:0.5rem 1rem;margin:0.2rem;cursor:pointer;border-radius:6px}
.btn.small{padding:0.3rem 0.6rem;font-size:0.8rem}
textarea{width:100%;min-height:120px}
ul{list-style:none;padding:0}
li{margin-bottom:6px}

:root{
  --ig-top: 0px;  --ig-left: 0px;
  --fb-top: 0px;  --fb-left: 0px;
}



/* ===== Desktop: 6 en línea y el panel abajo ===== */
@media (min-width: 980px){
  /* El layout principal pasa a vertical:
     primero .apps (ancho completo), abajo .side (ancho completo) */
  .container{
    display: block;            /* en lugar de grid 2fr/1fr */
    padding: 1rem;
  }

  /* 6 columnas para las apps, siempre en una sola línea */
  .apps{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;       /* separa de Mi Bloc / Enlaces */
  }

  /* El panel lateral ahora ocupa todo el ancho, debajo */
  .side{
    display: grid;
    grid-template-columns: 1fr 1fr;   /* Mi Bloc | Enlaces Rápidos */
    gap: 16px;
  }
}

/* Opcional: en pantallas MUY grandes podés subir el margen y el gap */
@media (min-width: 1400px){
  .apps{ gap: 20px; }
  .side{ gap: 20px; }
}




/* Estilo moderno para Mi Bloc y Enlaces Rápidos */

/* Bordes más redondeados en los campos */


/* Tipografía más moderna para títulos */
.note h3,
.links h3 {
  font-family: "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #0ea5e9;  /* azul moderno */
  margin-bottom: 0.5rem;
}

/* Placeholder más elegante */
textarea::placeholder,
#link-form input::placeholder {
  color: #888;
  font-style: italic;
}




/* Fuente moderna global */
body {
  font-family: 'Inter', sans-serif;
}

/* Títulos del bloc y enlaces más lindos */
.note h3,
.links h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: #0ea5e9;
  margin-bottom: 0.5rem;
}

/* Inputs y textarea modernos */
textarea,
#link-form input {
  border-radius: 12px;
  border: 1px solid #333;
  background: #111;
  color: #fff;
  padding: 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  box-sizing: border-box; /* ?? agregar */
}

/* Placeholders elegantes */
textarea::placeholder,
#link-form input::placeholder {
  color: #777;
  font-style: italic;
}



/* ===== Versión Teléfono ===== */
@media (max-width: 979px){
  .container{
    display: block;
    padding: 0.5rem;
  }

  /* Apps en grilla de 2 columnas */
  .apps{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  /* Enlaces rápidos ocupa 100% arriba */
  .links{
    margin-bottom: 12px;
  }

  /* Mi Bloc debajo de Enlaces */
  .note{
    margin-bottom: 12px;
  }

  .side{
    display: block; /* uno abajo del otro */
  }

  .card{
    width: 100%; /* que se adapten al ancho de la pantalla */
    box-sizing: border-box;
  }
}

/* Tarjeta de instalación (solo visible en móvil) */
.install-card .install-wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:120px;
}
.install-card .install-text{ color:#bbb; font-size:0.95rem; }

/* Solo teléfono: que la tarjeta ocupe 100% y quede debajo de Enlaces */
@media (max-width: 979px){
  #install-card{ display:none; }           /* oculta por defecto */
  #install-card.show{ display:block; }     /* se muestra cuando JS añade .show */
}
@media (min-width: 980px){
  /* en desktop, no mostramos la tarjeta */
  #install-card{ display:none !important; }
}

.app-icon {
  width: 40px;   /* mismo ancho */
  height: 40px;  /* misma altura */
  margin-left: 8px; /* espacio después del texto */
  vertical-align: middle; /* alineado con la palabra */
}

/* Estilo para los enlaces de "Mis Sitios Favoritos" */
#link-list a {
  color: #fff;          /* blanco */
  font-size: 1.05rem;   /* apenas más grande que el default */
  text-decoration: none;
}

#link-list a:hover {
  text-decoration: underline; /* opcional: subrayado al pasar el mouse */
}