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;
  }

  /* 7 columnas para las apps, siempre en una sola línea */
  .apps{
    display: grid;
    grid-template-columns: repeat(7, 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;
  }
  
  
  .card.app h2 {
  font-size: 23px;   /* antes ~24px, lo bajás en 1px */
}
  
}

/* Cards más compactas */
.card{ padding:.75rem; }    /* antes 1rem */

/* 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 */
}

@media (max-width: 979px){
  .card.app h2{
    display: flex;
    flex-direction: column;   /* ícono arriba, texto abajo */
    align-items: flex-start;  /* <- izquierda, no centrado */
    gap: 6px;
    text-align: left;         /* <- texto a la izquierda */
    margin: 6px 0 0;
    line-height: 1.2;
  }
  .card.app h2 .app-icon{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 0 2px 0;        /* anula el margin-left global */
    vertical-align: initial;
  }
}

/* Desktop/Tablet por defecto */
.tagline--desktop{ display:block; }
.tagline--mobile{ display:none; }

/* Solo teléfonos */
@media (max-width: 979px){
  .tagline--desktop{ display:none; }
  .tagline--mobile{ display:block; }
  .tagline{ margin:.25rem 0 0; color:#cfd8dc; line-height:1.35; } /* estilo móvil opcional */
}

/* Al final de tu CSS */
@media (max-width: 979px){
  .side{
    display:flex !important;  /* en vez de block */
    flex-direction: column;  /* apilar vertical */
  }
  .links{ order: 0; }        /* arriba: Mis Sitios Favoritos */
  .note { order: 1; }        /* abajo: Mi bloc */
}