/* Linkaloo — hoja única */

/* === Variables (azul Twitter) === */
:root{
  --primary: #0556cb;          /* azul Twitter */
  --primary-600:#0d8ddc;       /* azul más oscuro para hover */
  --primary-050:#e8f5fd;       /* azul muy claro para fondos */
  --bg: #f5f9fc;               /* fondo general claro */
  --card: #ffffff;
  --text: #15202b;             /* tono gris oscuro usado en Twitter */
  --muted: #536471;            /* gris medio */
  --border: #dce5ec;
  --danger:#b00020;
}

/* === Base === */
html,body{
  margin:0;
  font-family: "Rambla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
img{max-width:100%;height:auto;}

/* === Header & branding === */
header{
  position: sticky; top:0; z-index:1000;
  background: var(--primary);
  color:#fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  padding: 12px 16px;
}

/* ===== Botón hamburguesa ===== */
#menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px; height:20px;
  background:transparent; border:0; cursor:pointer;
  margin-left:auto;
}
#menu-toggle span{
  display:block; height:3px; width:100%;
  background:#fff; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}



/* Icono "X" cuando está abierto */
header.nav-open #menu-toggle span:nth-child(1){ transform: translateY(8.5px) rotate(45deg); }
header.nav-open #menu-toggle span:nth-child(2){ opacity:0; }
header.nav-open #menu-toggle span:nth-child(3){ transform: translateY(-8.5px) rotate(-45deg); }

/* ===== Estado base del nav (escritorio) ===== */
#categorias{
  display:flex;
  gap:8px; flex-wrap:wrap; justify-content:flex-start;
}

/* ===== Móvil: menú colapsable ===== */
@media (max-width: 992px){
  #menu-toggle{ display:flex; }

  /* El nav se convierte en panel colapsable bajo el header */
  #categorias{
    display:flex; flex-direction:column; gap:0;
    background: var(--primary);
    padding:0;
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  /* Abierto */
  header.nav-open #categorias{
    max-height:70vh; /* alto máximo a mostrar */
  }

  /* Botones dentro del nav en modo móvil */
  #categorias button{
    border-radius:0;
    border:0;
    color:#fff;
    background:transparent;
    text-align:left;
    padding:12px 16px;
    border-top:1px solid #ffffff22;
  }
  #categorias button.active{
    background:#ffffff22; color:#fff; border:0; font-weight:700;
  }

  /* Ajustes de header en móvil */
  .header-inner{ align-items:center; }
  #user-box{ display:none; } /* opcional: ocultar badge de usuario en móvil para simplificar */
}



.header-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:flex-start; /* logo a la izquierda */
  gap:12px;
}
.header-left{ display:flex; align-items:center; gap:12px; }
.header-logo{ height:48px; width:auto; display:block; }
.header-title{ margin:0; font-size:1.25rem; letter-spacing:.2px; color:#fff; }

/* (compat) Si mantienes #user-box dentro del header */
#user-box{
  margin-left:auto;
  display:flex; align-items:center; gap:.5rem;
}
.avatar{
  width:32px; height:32px; border-radius:50%;
  background:#fff1; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.u-meta{ display:flex; flex-direction:column; line-height:1.1; }
.u-name{ font-size:.95rem; color:#fff; }
.u-email{ font-size:.8rem; color:#e8f5fd; }
.u-actions a{ color:#fff; text-decoration:none; font-size:.85rem; margin-left:.5rem; }

/* === Toolbar (inyectada por app.js) === */
#toolbar{
  max-width:1100px; margin:.5rem auto 0; padding:0 12px;
  display:flex; gap:.5rem; align-items:center; justify-content:center; flex-wrap:wrap;
}
#toolbar input[type="search"],
#toolbar input[type="url"],
#toolbar select{
  border:1px solid var(--border); background:#fff; border-radius:10px; padding:.6rem .8rem; outline:none;
}
#add-btn{
  padding:.65rem 1rem; border:0; border-radius:999px; background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
}
#add-btn:hover{ background:var(--primary-600); }

/* Alertas */
#error-box{
  background:#ffe9ed; color:#b00020;
  border:1px solid #ffd3da; border-radius:12px; padding:.6rem .8rem;
}

/* === Categorías === */
#categorias{
  max-width:1100px; margin:8px auto 4px; padding:0 12px;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;
}
#categorias button{
  background:#1da1f2;
  padding:.45rem .7rem; border-radius:999px; cursor:pointer;
  border-color: transparent;
  color:#fff;
}
#categorias button.active{
  background: var(--primary); 
  color:#fff; border-color: transparent; font-weight:700;
}

/* === Contenido principal === */
main{ max-width:1100px; margin:12px auto; padding:0 12px; }

/* Grid de tarjetas */
#links{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px;
}

.card{
  display:grid; grid-template-rows:auto 1fr auto auto; gap:.5rem;
  background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow: var(--shadow);
}
.card img{ width:100%; max-height:180px; object-fit:cover; background:#f0f5ff; }
.card .content{ padding:.6rem .8rem; }
.card .content h3{ margin:.1rem 0 .25rem 0; font-size:1rem; line-height:1.25; color:#0f2859; }
.card .content p{ margin:0; color:#555; font-size:.9rem; max-height:3.6em; overflow:hidden; }

.card > a{
  display:block; padding:.5rem .75rem; border-top:1px solid var(--border);
  color:var(--primary); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:left;
}

/* Acciones en tarjeta */
.card .actions{
  display:flex; align-items:center; gap:.5rem; border-top:1px solid var(--border); padding:.5rem .6rem .6rem .6rem;
}
.card .actions button,
.card .actions select{
  padding:.35rem .6rem; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font-size:.85rem;
}
.card .actions button.danger{ border-color:#ffdad4; color:#b00020; background:#fff5f3; }
.card .actions .spacer{ flex:1; }

/* === Footer === */
footer{ text-align:center; padding:1rem; font-size:.85rem; color:var(--muted); }

/* === Utilidad (grid compatible legacy) === */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap:1rem; } /* por compat con estilos antiguos */