:root{
    --oliva:#25482f; --mostaza:#f4962a; --fresa:#a30200; --guindilla:#e2021d;
    --mantequilla:#fbf7e6; --carbon:#242223; --mar:#252f47;
    --tier-diamante:#96c7f2; --tier-oro:#ffc53d; --tier-plata:#d4cfcf;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{font-family:'Work Sans',sans-serif;background:var(--mantequilla);color:var(--carbon);-webkit-font-smoothing:antialiased;}
  button,input,select,textarea{font-family:'Work Sans',sans-serif;border-radius:0;}

  .app{display:grid;grid-template-columns:280px 1fr;grid-template-rows:64px 1fr;height:100vh;}
  .app__header{grid-column:1/-1;background:var(--mar);display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
  .app__brand{display:flex;align-items:center;}
  .app__logo{height:24px;width:auto;display:block;}
  .app__user{display:flex;align-items:center;gap:12px;color:var(--mantequilla);font-size:14px;}
  .app__demo-tag{background:var(--mostaza);color:var(--mantequilla);font-size:11px;font-weight:700;padding:4px 10px;text-transform:uppercase;}

  .sidebar{background:var(--oliva);color:var(--mantequilla);overflow-y:auto;padding:20px 0 100px;}
  .sidebar__tier-header{display:flex;align-items:center;gap:8px;padding:10px 20px;font-family:'Work Sans',sans-serif;font-weight:700;font-size:16px;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;user-select:none;}
  .sidebar__tier--agencia .sidebar__tier-header{cursor:default;}
  .sidebar__tier-dot{width:10px;height:10px;flex-shrink:0;}
  .sidebar__tier--diamante .sidebar__tier-dot{background:var(--tier-diamante);}
  .sidebar__tier--oro .sidebar__tier-dot{background:var(--tier-oro);}
  .sidebar__tier--plata .sidebar__tier-dot{background:var(--tier-plata);}
  .sidebar__tier--agencia .sidebar__tier-dot{background:var(--fresa);}
  .sidebar__tier--agencia{border-bottom:1px solid rgba(251,247,230,.15);padding-bottom:10px;margin-bottom:6px;}
  .sidebar__cliente{display:flex;align-items:center;gap:6px;padding:9px 14px 9px 20px;font-size:14px;cursor:grab;border-left:2px solid transparent;opacity:.85;}
  .sidebar__cliente:hover{background:rgba(251,247,230,.08);opacity:1;}
  .sidebar__cliente--activo{border-left-color:var(--mostaza);background:rgba(251,247,230,.1);opacity:1;font-weight:600;}
  .sidebar__cliente-nombre{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
  .sidebar__cliente-count{font-size:11px;color:rgba(251,247,230,.5);flex-shrink:0;cursor:pointer;}
  .sidebar__cliente-menu-btn{
    flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;color:rgba(251,247,230,.55);font-size:16px;line-height:1;
    padding:0;cursor:pointer;opacity:0;transition:opacity .12s ease;position:relative;
  }
  .sidebar__cliente:hover .sidebar__cliente-menu-btn,
  .sidebar__cliente--touch-activo .sidebar__cliente-menu-btn{opacity:1;}
  .sidebar__cliente-menu-btn:hover{color:var(--mantequilla);}
  .sidebar__cliente-menu{
    position:absolute;top:0;left:100%;z-index:60;
    background:white;border:1px solid var(--carbon);min-width:130px;
    box-shadow:2px 4px 8px rgba(0,0,0,.25);
  }
  .sidebar__cliente-menu button{
    display:block;width:100%;text-align:left;padding:8px 14px;
    background:transparent;border:none;font-size:13px;color:var(--carbon);cursor:pointer;
  }
  .sidebar__cliente-menu button:hover{background:var(--mantequilla);}
  .sidebar__cliente-menu button.eliminar{color:var(--guindilla);}
  .sidebar__tier-dropzone{min-height:6px;}
  .sidebar__tier-dropzone--vacio::after{
    content:"Arrastra un cliente aquí";
    display:block;padding:6px 20px;font-size:11px;color:rgba(251,247,230,.35);font-style:italic;
  }
  .sidebar__tier-dropzone--sobre{background:rgba(244,150,42,.18);outline:1px dashed var(--mostaza);}
  .sidebar__cliente--arrastrando{opacity:.35;}
  .sidebar__todos{padding:9px 20px;margin:0 0 14px;font-size:14px;font-weight:700;cursor:pointer;border-left:2px solid transparent;}
  .sidebar__todos--activo{border-left-color:var(--mostaza);background:rgba(251,247,230,.1);}
  .sidebar__add-cliente{margin:16px 20px 0;background:transparent;border:1px dashed rgba(251,247,230,.4);color:rgba(251,247,230,.7);font-size:12px;padding:8px;width:calc(100% - 40px);text-transform:uppercase;font-weight:600;cursor:pointer;}
  .sidebar__add-cliente:hover{border-color:var(--mantequilla);color:var(--mantequilla);}

  .main{display:flex;flex-direction:column;overflow-y:auto;}
  .filterbar-wrap{display:flex;align-items:center;background:var(--mantequilla);}
  .filterbar__nav{background:transparent;border:none;color:var(--oliva);font-size:22px;font-weight:700;width:36px;height:48px;cursor:pointer;flex-shrink:0;line-height:1;display:flex;align-items:center;justify-content:center;}
  .filterbar__nav:hover{background:rgba(37,72,47,.08);}
  .filterbar__nav:disabled{color:rgba(37,72,47,.25);cursor:default;}
  .filterbar__nav:disabled:hover{background:transparent;}
  .filterbar{display:flex;align-items:center;gap:8px;padding:14px 8px;flex:1;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;}
  .filterbar::-webkit-scrollbar{display:none;}
  .filterbar--enlace{border-bottom:1px solid rgba(36,34,35,.15);}
  .filterbar__chip{padding:7px 14px;font-size:12.5px;font-weight:600;background:transparent;border:1px solid var(--oliva);color:var(--oliva);text-transform:uppercase;letter-spacing:.2px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
  .filterbar__chip:hover{background:var(--oliva);border-color:var(--oliva);color:var(--mantequilla);}
  .filterbar__chip--activo,.filterbar__chip--activo:hover{background:var(--mostaza);border-color:var(--mostaza);color:var(--mantequilla);font-weight:700;}
  .addbar{display:flex;justify-content:center;align-items:center;gap:10px;padding:24px 28px 36px;background:var(--mantequilla);}
  .addbar__input{flex:1 1 auto;max-width:50%;padding:11px 14px;border:1px solid var(--carbon);background:white;font-size:14px;}
  .addbar__select{padding:11px 12px;border:1px solid var(--carbon);background:white;font-size:13px;max-width:140px;}
  .addbar__submit{
    background:transparent;color:var(--carbon);border:1px solid var(--carbon);
    width:36px;height:36px;font-size:18px;font-weight:400;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;
  }
  .addbar__submit:hover{background:var(--oliva);border-color:var(--oliva);color:var(--mantequilla);}
  .filterbar__divider{width:1px;background:var(--oliva);height:24px;margin:0 4px;flex-shrink:0;opacity:.4;}
  .filterbar__chip--tiktok{border-color:#28b4d6;color:#28b4d6;}
  .filterbar__chip--tiktok.filterbar__chip--activo{background:#28b4d6;border-color:#28b4d6;color:#fff;}
  .filterbar__chip--instagram{border-color:#28b4d6;color:#28b4d6;}
  .filterbar__chip--instagram.filterbar__chip--activo{background:#28b4d6;border-color:#28b4d6;color:#fff;}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;padding:24px 28px;}
  .card{background:white;border:1px solid var(--carbon);cursor:pointer;display:flex;flex-direction:column;transition:transform .12s ease;}
  .card:hover{transform:translateY(-3px);}
  .card__thumb{width:100%;aspect-ratio:3/4;background:var(--oliva);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}
  .card__thumb .instagram-media{max-width:100% !important;min-width:0 !important;width:100% !important;}
  .card__thumb iframe.instagram-media{height:100% !important;}
  .card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .card__thumb-placeholder{color:rgba(251,247,230,.5);font-size:12px;text-align:center;padding:10px;}
  .card__platform-badge{position:absolute;top:8px;left:8px;background:var(--carbon);color:var(--mantequilla);font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;letter-spacing:.5px;}
  .card__body{padding:10px 12px 12px;}
  .card__body-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:4px;}
  .card__clientes{display:flex;align-items:center;flex-wrap:wrap;gap:5px;flex:1;}
  .card__menu-btn{
    flex-shrink:0;background:transparent;border:none;color:var(--carbon);
    font-size:16px;line-height:1;padding:0 2px;cursor:pointer;opacity:.5;
  }
  .card__menu-btn:hover{opacity:1;}
  .cliente-pill{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--mostaza);background:white;border:1px solid var(--mostaza);border-radius:999px;padding:2px 9px;}
  .cliente-pill--agencia{color:var(--fresa);border-color:var(--fresa);}
  .card__titulo{font-size:13px;font-weight:500;line-height:1.3;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .card__meta{display:flex;justify-content:space-between;font-size:11px;color:#777;}
  .grid__empty{grid-column:1/-1;text-align:center;padding:80px 20px;color:#888;}
  .grid__empty h3{font-family:'Anton',sans-serif;font-size:22px;color:var(--carbon);text-transform:uppercase;margin-bottom:8px;}

  .modal-overlay{position:fixed;inset:0;background:rgba(36,34,35,.85);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;}
  .modal{background:var(--mantequilla);border:1px solid var(--carbon);max-width:920px;width:100%;max-height:90vh;overflow-y:auto;display:grid;grid-template-columns:320px 1fr;position:relative;}
  .modal--narrow{grid-template-columns:1fr;max-width:480px;}
  .modal__media{background:var(--oliva);display:flex;align-items:center;justify-content:center;min-height:380px;color:rgba(251,247,230,.7);font-size:13px;text-align:center;padding:20px;}
  .modal__media img{width:100%;height:100%;object-fit:cover;}
  .modal__panel{padding:24px;display:flex;flex-direction:column;gap:14px;}
  .modal__close{position:absolute;top:14px;right:14px;background:var(--mantequilla);border:1px solid var(--carbon);width:32px;height:32px;font-weight:700;font-size:16px;cursor:pointer;}
  .modal__field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--oliva);margin-bottom:4px;letter-spacing:.5px;}
  .modal__field select,.modal__field textarea,.modal__field input{width:100%;padding:8px 10px;border:1px solid var(--carbon);background:white;font-size:14px;}
  .chip-toggle-group{display:flex;flex-wrap:wrap;gap:6px;}
  .chip-toggle{padding:6px 12px;font-size:12px;font-weight:600;background:transparent;border:1px solid var(--oliva);color:var(--oliva);text-transform:uppercase;letter-spacing:.2px;cursor:pointer;}
  .chip-toggle:hover{background:var(--oliva);border-color:var(--oliva);color:var(--mantequilla);}
  .chip-toggle--activo,.chip-toggle--activo:hover{background:var(--mostaza);border-color:var(--mostaza);color:var(--mantequilla);font-weight:700;}
  .filterbar__chip--add{border-style:dashed;color:var(--oliva);border-color:var(--oliva);}
  .filterbar__chip[draggable="true"]{cursor:grab;}
  .filterbar__chip--dragging{opacity:.4;}
  .filterbar__chip--drag-over{border-left:3px solid var(--fresa);}
  .modal__link{font-size:12px;word-break:break-all;color:var(--mar);}
  .modal__delete{margin-top:auto;background:transparent;border:1px solid var(--guindilla);color:var(--guindilla);font-weight:700;font-size:12px;padding:8px;text-transform:uppercase;cursor:pointer;}
  .modal__delete:hover{background:var(--guindilla);color:white;}
  .modal__save{background:var(--mostaza);color:var(--mantequilla);border:none;font-weight:700;font-size:14px;padding:10px;text-transform:uppercase;cursor:pointer;}
  .modal__note{font-size:11px;color:#8a8a86;margin:0;}

  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(36,34,35,.2);}

  /* --- Botón de menú (solo visible en móvil) --- */
  .app__header-left{display:flex;align-items:center;gap:14px;}
  .app__menu-btn{display:none;background:transparent;border:none;width:32px;height:32px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;}
  .app__menu-btn span{display:block;width:20px;height:2px;background:var(--mantequilla);}
  .sidebar-overlay{display:none;}

  /* --- Mobile (≤768px): sidebar como panel deslizante, grid a 2 columnas, barras apiladas --- */
  @media (max-width: 768px){
    .app{grid-template-columns:1fr;grid-template-rows:56px 1fr;}
    .app__menu-btn{display:flex;}
    .app__demo-tag{display:none;}
    .app__header{padding:0 14px;}
    .app__user{font-size:13px;gap:8px;}

    .sidebar{
      position:fixed;top:0;left:0;bottom:0;z-index:50;
      width:80%;max-width:300px;
      transform:translateX(-100%);
      transition:transform .25s ease;
      padding-top:56px;
      box-shadow:2px 0 12px rgba(0,0,0,.2);
    }
    .sidebar--abierto{transform:translateX(0);}
    .sidebar-overlay{
      display:block;position:fixed;inset:0;z-index:40;
      background:rgba(0,0,0,0);pointer-events:none;
      transition:background .25s ease;
    }
    .sidebar-overlay--visible{background:rgba(0,0,0,.45);pointer-events:auto;}

    .addbar{flex-wrap:nowrap;padding:10px 14px;gap:6px;}
    .addbar__input{flex:1 1 auto;max-width:none;min-width:0;padding:9px 10px;font-size:13px;}
    .addbar__select{flex:0 1 90px;min-width:0;padding:9px 6px;font-size:11px;max-width:none;}
    .addbar__submit{flex-shrink:0;}

    .filterbar-wrap{padding:0;}
    .filterbar{padding:10px 4px;gap:6px;}
    .filterbar__nav{width:28px;}
    .filterbar__chip{padding:6px 11px;font-size:11.5px;}

    .grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px;}
    .card__titulo{font-size:12.5px;-webkit-line-clamp:2;}
    .card__meta{font-size:10px;flex-wrap:wrap;gap:3px;}
    .cliente-pill{font-size:9px;padding:2px 7px;}

    .modal{grid-template-columns:1fr;max-height:92vh;}
    .modal__media{min-height:220px;}
    .modal__panel{padding:18px;gap:12px;}
    .chip-toggle-group{gap:5px;}
    .chip-toggle{padding:5px 10px;font-size:11px;}
  }

  @media (max-width: 420px){
    .grid{grid-template-columns:1fr;}
  }