:root{
      --bg:#f9fafb;
      --ink:#0f172a;
      --muted:#6b7280;
      --accent:#2563eb;
      --border:#e5e7eb;
      --radius:18px;
      --shadow-soft:0 10px 24px rgba(15,23,42,.10);

      /* Layout responsivo (aprovecha mejor pantallas grandes sin romper móvil) */
      --page-max: 1280px;
      --page-pad: clamp(14px, 2.2vw, 28px);
      --page-pad-top: clamp(16px, 2.4vw, 30px);
      --page-pad-bottom: clamp(28px, 3vw, 44px);
      --page-gap: clamp(12px, 1.8vw, 18px);
      color-scheme: light;
    }
    *{box-sizing:border-box;}

    /* Accesibilidad */
    .sr-only{
      position:absolute !important;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
      outline: 3px solid rgba(37,99,235,.35);
      outline-offset: 2px;
      border-radius: 12px;
    }
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      background: var(--bg);
      color:var(--ink);
    }
    /* Contenedor principal (tema.php y páginas que lo usen) */
    .wrap{
      width:100%;
      max-width:var(--page-max);
      margin:0 auto;
      padding:var(--page-pad-top) var(--page-pad) var(--page-pad-bottom);
    }

    /* Utilidad opcional (para páginas con .container) */
    .container{
      width:100%;
      max-width:var(--page-max);
      margin:0 auto;
      padding:0 var(--page-pad);
    }

    .page-header{
      margin-bottom:18px;
      text-align:center;
    }
    h1{
      margin:12px 0 4px;
      font-size:clamp(22px,3vw,30px);
      letter-spacing:.2px;
    }
    .subtitle{
      margin:0;
      font-size:13px;
      color:var(--muted);
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      justify-content:center;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.6);
      background:#ffffffd9;
      font-size:11px;
      color:var(--muted);
    }
    .tag-dot{
      width:7px;height:7px;border-radius:999px;background:var(--accent);
    }

    /* Grid flexible (se adapta: 1 / 2 / 3 columnas según ancho disponible) */
    .grid{
      margin-top:20px;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
      gap:var(--page-gap);
    }

    .tile{
      position:relative;
      border-radius:var(--radius);
      overflow:hidden;
      background:#ffffff;
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    .tile-frame{
      position:relative;
      width:100%;
      padding-top:56.25%; /* 16:9 */
      overflow:hidden;
      background:#e5e7eb;
    }
    .tile-frame iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .tile-info{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:9px 12px 10px;
      background:#f9fafb;
      border-top:1px solid var(--border);
      font-size:12px;
    }
    .tile-main{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .tile-icon{
      width:30px;height:30px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      flex-shrink:0;
      background:#e5e7eb;
    }
    .tile-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .tile-label{
      font-weight:600;
      white-space:nowrap;
    }
    .tile-actions{
      font-size:12px;
      flex-shrink:0;
    }
    .tile-actions a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:4px 9px;
      border-radius:999px;
      border:1px solid #bfdbfe;
      color:#1d4ed8;
      background:#eff6ff;
      text-decoration:none;
      font-weight:500;
      white-space:nowrap;
    }
    .tile-actions a:hover{
      background:#dbeafe;
    }

    .empty-msg{
      margin-top:22px;
      padding:16px 18px;
      border-radius:var(--radius);
      border:1px dashed rgba(148,163,184,.8);
      background:#fefefe;
      font-size:14px;
      color:var(--muted);
      text-align:center;
    }
  

/* Importante: SIN padding global en body (evita “marcos” y desperdicio de espacio) */
body{padding:0;}