/* =========================================================================
   ASTER · Panel — estilos propios (encima de ../css/styles.css)
   Usa los tokens del sitio: --blue, --ink, --surface, --line, --r*, sombras,
   --ease-out, y el tema oscuro html[data-theme="dark"].
   ========================================================================= */
.panel-body { background: var(--blue-light-2); min-height: 100vh; color: var(--ink); }

/* ---------------------------------------------------------- Top bar */
.panel-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.panel-top .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.panel-top .brand img { height: 28px; width: auto; }
.panel-top .brand .logo-light { display: none; }
.panel-top .brand .logo-dark  { display: block; }
html[data-theme="dark"] .panel-top .brand .logo-light { display: block; }
html[data-theme="dark"] .panel-top .brand .logo-dark  { display: none; }
.panel-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-light); padding: 4px 9px; border-radius: var(--r-pill);
}
.panel-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.panel-nav a {
  padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem;
  color: var(--muted); transition: background-color .2s var(--ease), color .2s var(--ease);
}
.panel-nav a:hover { color: var(--ink); background: var(--blue-light); }
.panel-nav a.is-active { color: var(--blue-700); background: var(--blue-light); }
html[data-theme="dark"] .panel-nav a.is-active { color: #fff; }

.panel-menu { flex: 1; display: flex; align-items: center; gap: 22px; min-width: 0; }
.panel-menu-side { display: flex; align-items: center; gap: 14px; }
.panel-menu-actions { display: flex; align-items: center; gap: 14px; }
.panel-user { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.panel-user .pu-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-weight: 700; font-size: .9rem; overflow: hidden; box-shadow: var(--shadow-xs); transition: transform .2s var(--ease-out); }
.panel-user .pu-av img { width: 100%; height: 100%; object-fit: cover; }
.panel-user:hover .pu-av { transform: translateY(-1px); }
.panel-user .pu-meta { display: flex; flex-direction: column; line-height: 1.1; }
.panel-user .pu-name { font-weight: 600; font-size: .88rem; color: var(--ink); }
.panel-user .pu-role { font-size: .72rem; color: var(--muted); }
.panel-user:hover .pu-name { color: var(--blue-700); }
.panel-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 13px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: var(--surface); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.panel-burger:hover { border-color: var(--blue-300, var(--line-2)); }
.panel-burger span { width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s var(--ease); }

/* ---------------------------------------------------------- Main */
.panel-main { max-width: 1180px; margin-inline: auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 80px; }
.panel-main--wide { max-width: 1560px; }
.panel-hero { margin-bottom: clamp(32px, 5vw, 52px); }
.panel-hero .h1 { margin: 14px 0 12px; }
.panel-hero .lead { max-width: 620px; }
.panel-page-head { margin-bottom: 28px; }
.panel-page-head .h1 { margin: 12px 0 10px; }

/* ---------------------------------------------------------- Tool cards */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tool-card {
  position: relative; display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-xs); overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s var(--ease);
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.tool-ic { width: 54px; height: 54px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center; background: var(--blue-light); color: var(--blue-700); transition: transform .4s var(--ease-spring), background-color .3s var(--ease), color .3s var(--ease); }
.tool-ic svg { width: 26px; height: 26px; }
.tool-card:hover .tool-ic { transform: scale(1.06) rotate(-4deg); background: var(--grad-blue); color: #fff; }
.tool-body h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.tool-body p { color: var(--muted); font-size: .95rem; }
.tool-meta { display: inline-block; margin-top: 12px; font-size: .78rem; font-weight: 600; color: var(--blue-700); background: var(--blue-light); padding: 4px 11px; border-radius: var(--r-pill); }
.tool-arrow { position: absolute; right: 22px; top: 22px; color: var(--muted-2); font-size: 1.1rem; transition: transform .3s var(--ease-out), color .3s var(--ease); }
.tool-card:hover .tool-arrow { transform: translate(3px, -3px); color: var(--blue); }
.tool-card--feature { grid-column: 1 / -1; background: var(--grad-navy); color: #fff; border-color: transparent; }
.tool-card--feature h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tool-card--feature p { color: rgba(233,241,249,.78); max-width: 60ch; }
.tool-card--feature .tool-ic { background: rgba(255,255,255,.12); color: #fff; }
.tool-card--feature .tool-meta { background: rgba(255,255,255,.14); color: #fff; }
.tool-card--feature .tool-arrow { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------- Cards / forms */
.panel-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-xs); }
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 18px; }
.field select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm); background: var(--blue-light-2);
  border: 1.5px solid transparent; font-size: .98rem; color: var(--ink);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field select:focus { outline: none; background: var(--surface); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,131,204,.14); }

/* ---------------------------------------------------------- User list */
.user-list { display: flex; flex-direction: column; }
.user-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line-2); }
.user-row:last-child { border-bottom: 0; }
.user-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-weight: 700; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Perfil */
.perfil-av-wrap { display: flex; align-items: center; gap: 18px; }
.perfil-av { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-weight: 700; font-size: 2.2rem; overflow: hidden; box-shadow: var(--shadow-sm); }
.perfil-av img { width: 100%; height: 100%; object-fit: cover; }
.perfil-av-name { font-weight: 700; font-size: 1.1rem; }
.perfil-av-sub { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.perfil-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.perfil-pick-btn { display: inline-flex; width: auto; margin: 0; cursor: pointer; }
.perfil-pick-note { margin: 0; line-height: 1.3; }
.perfil-actions { display: flex; gap: 10px; margin-top: 14px; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; }
.user-you { font-size: .7rem; font-weight: 700; color: var(--blue-700); background: var(--blue-light); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px; }
.user-sub { font-size: .84rem; color: var(--muted); }
.user-tools { display: flex; gap: 6px; }

/* ---------------------------------------------------------- Gate (login) */
.gate-logo-light { display: block; } .gate-logo-dark { display: none; }
html[data-theme="dark"] .gate-logo-light { display: none; } html[data-theme="dark"] .gate-logo-dark { display: block; }
.gate-card img { height: 34px; margin: 0 auto 22px; }
.theme-toggle.gate-theme { position: fixed; top: 22px; right: 22px; color: var(--ink); }

/* =========================================================== SOCIAL DESK */
.sd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.sd-head .h1 { margin: 10px 0 0; }
.sd-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Board picker */
.sd-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.sd-board {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-xs); cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.sd-board:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.sd-board h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.sd-board .sd-client { font-size: .85rem; color: var(--muted); }
.sd-board .sd-board-meta { margin-top: 10px; display: flex; gap: 10px; align-items: center; font-size: .76rem; color: var(--muted-2); }
.sd-board .sd-share-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #1A7F45; }
.sd-board.sd-board--new { align-items: center; justify-content: center; text-align: center; color: var(--muted); border-style: dashed; background: transparent; min-height: 150px; }
.sd-board--new svg { width: 26px; height: 26px; margin-bottom: 6px; }
.sd-empty { padding: 60px 20px; text-align: center; color: var(--muted); }

/* Editor */
.sd-editor { display: none; }
.sd-editor.is-active { display: block; }
.sd-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sd-back { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--muted); }
.sd-back:hover { color: var(--blue-700); }
.sd-titlewrap { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.sd-title-input { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; border: 0; background: transparent; color: var(--ink); padding: 2px 0; }
.sd-title-input:focus { outline: none; }
.sd-client-input { font-size: .9rem; color: var(--muted); border: 0; background: transparent; padding: 1px 0; }
.sd-client-input:focus { outline: none; color: var(--ink); }
.sd-save-state { font-size: .8rem; color: var(--muted-2); font-weight: 500; }

.sd-share-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; }
.sd-share-bar .sd-share-label { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 9px; }
.sd-switch { position: relative; width: 46px; height: 26px; border-radius: var(--r-pill); background: var(--line); flex-shrink: 0; transition: background-color .3s var(--ease); }
.sd-switch.on { background: var(--blue); }
.sd-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .3s var(--ease-spring); }
.sd-switch.on::after { transform: translateX(20px); }
.sd-share-link { flex: 1; min-width: 200px; display: flex; gap: 8px; align-items: center; }
.sd-share-link input { flex: 1; font-size: .85rem; color: var(--muted); background: var(--blue-light-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 12px; }

/* Content table */
.sd-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.sd-table { width: 100%; border-collapse: collapse; min-width: 1024px; table-layout: fixed; }
.sd-table thead th {
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.sd-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.sd-table tr:last-child td { border-bottom: 0; }
/* Día y Diseño fijos; las 3 columnas de texto se reparten el resto (auto con table-layout:fixed). */
.sd-col-day { width: 150px; } .sd-col-design { width: 340px; } .sd-col-tools { width: 56px; }
/* Columna de acciones (borrar día) fija a la derecha: siempre visible aunque la tabla
   tenga scroll horizontal en pantallas chicas. */
.sd-table th.sd-col-tools, .sd-table td.sd-row-tools { position: sticky; right: 0; background: var(--surface); z-index: 2; }
.sd-table thead th.sd-col-tools { z-index: 3; }
/* sombra separadora SOLO cuando la tabla se desplaza horizontalmente (en pantallas chicas) */
.sd-table-wrap.is-scrollable th.sd-col-tools, .sd-table-wrap.is-scrollable td.sd-row-tools { box-shadow: -12px 0 14px -12px rgba(11,27,43,.22); }
html[data-theme="dark"] .sd-table-wrap.is-scrollable th.sd-col-tools, html[data-theme="dark"] .sd-table-wrap.is-scrollable td.sd-row-tools { box-shadow: -12px 0 16px -12px rgba(0,0,0,.6); }
.sd-cell { width: 100%; border: 1.5px solid transparent; border-radius: var(--r-sm); background: transparent; padding: 11px 13px; font: inherit; font-size: .92rem; color: var(--ink); resize: none; line-height: 1.6; box-sizing: border-box; }
.sd-cell:hover { background: var(--blue-light-2); }
.sd-cell:focus { outline: none; background: var(--surface); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,131,204,.14); }
textarea.sd-cell { min-height: 76px; overflow: hidden; display: block; }

/* Día = botón con un selector de fecha al estilo de Aster */
button.sd-day { text-align: left; cursor: pointer; background: var(--blue-light-2); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
button.sd-day::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0; background-color: var(--blue-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
button.sd-day .sd-day-label { overflow: hidden; text-overflow: ellipsis; }
button.sd-day.is-empty { color: var(--muted-2); font-weight: 500; }
button.sd-day.is-empty::before { background-color: var(--muted-2); }
button.sd-day:hover { background: var(--blue-light); }
button.sd-day:focus-visible { outline: none; background: var(--surface); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,131,204,.14); }
.sd-row-tools { text-align: center; }
.sd-row-tools .icon-btn { display: inline-grid; }

/* Selector de fecha (popover) */
.sd-dp { position: absolute; z-index: 120; width: 268px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 12px; }
.sd-dp[hidden] { display: none; }
.sd-dp-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sd-dp-month { flex: 1; text-align: center; font-weight: 700; font-size: .92rem; text-transform: capitalize; }
.sd-dp-nav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--blue-light-2); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.sd-dp-nav:hover { background: var(--blue-light); color: var(--blue-700); }
.sd-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sd-dp-dow { text-align: center; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); padding: 2px 0 6px; }
.sd-dp-day { height: 32px; border-radius: var(--r-sm); font-size: .82rem; font-weight: 600; color: var(--ink); background: transparent; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.sd-dp-day:hover { background: var(--blue-light); color: var(--blue-700); }
.sd-dp-day.is-other { color: var(--muted-2); font-weight: 400; }
.sd-dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--blue); }
.sd-dp-day.is-sel, .sd-dp-day.is-sel:hover { background: var(--blue); color: #fff; }
.sd-dp-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.sd-dp-clear, .sd-dp-today { font-size: .8rem; font-weight: 600; color: var(--muted); padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; background: transparent; transition: background-color .2s var(--ease), color .2s var(--ease); }
.sd-dp-clear:hover, .sd-dp-today:hover { background: var(--blue-light-2); color: var(--blue-700); }

/* Design cell — miniaturas al doble (128px), arrastrables y reordenables */
.sd-designs { display: flex; flex-wrap: wrap; gap: 10px; border-radius: var(--r-sm); }
.sd-designs.sd-drop { outline: 2px dashed var(--blue); outline-offset: 4px; background: var(--blue-light-2); }
.sd-thumb { position: relative; width: 128px; height: 128px; border-radius: var(--r-sm); overflow: hidden; background: var(--blue-light); border: 1px solid var(--line); cursor: grab; transition: opacity .2s var(--ease), box-shadow .25s var(--ease-out); }
.sd-thumb:active { cursor: grabbing; }
.sd-thumb:hover { box-shadow: var(--shadow-sm); }
.sd-thumb.dragging { opacity: .4; }
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sd-thumb .sd-thumb-del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(8,16,26,.72); color: #fff; font-size: 16px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .2s var(--ease); }
.sd-thumb:hover .sd-thumb-del { opacity: 1; }
.sd-upload {
  width: 128px; height: 128px; border-radius: var(--r-sm); border: 1.5px dashed var(--line-strong, var(--line));
  display: grid; place-items: center; color: var(--muted-2); cursor: pointer; background: transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.sd-upload:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light-2); }
.sd-upload svg { width: 26px; height: 26px; }
.sd-addrow { margin-top: 16px; }

/* ---- Conmutador de vista (Tabla / Calendario) ---- */
.sd-viewtoggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--blue-light-2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.sd-viewbtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.sd-viewbtn svg { opacity: .85; }
.sd-viewbtn:hover { color: var(--blue-700); }
.sd-viewbtn.is-active { background: var(--surface); color: var(--blue-700); box-shadow: var(--shadow-xs); }

/* ---- Calendario (rejilla mensual) ---- */
.sd-calendar { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); padding: clamp(14px, 2.5vw, 24px); }
.sd-cal-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sd-cal-month { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; text-transform: capitalize; margin: 0; min-width: 200px; }
.sd-cal-nav { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--blue-light-2); border: 1px solid var(--line); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease-out); }
.sd-cal-nav:hover { background: var(--blue-light); color: var(--blue-700); }
.sd-cal-nav:active { transform: scale(0.92); }
.sd-cal-today { margin-left: auto; }
.sd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sd-cal-dow { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding: 4px 0 8px; }
.sd-cal-cell { position: relative; min-height: 104px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--blue-light-2); padding: 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease-out), box-shadow .25s var(--ease-out); }
.sd-cal-cell:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.sd-cal-cell.is-empty { color: var(--muted-2); }
.sd-cal-cell.is-empty:hover::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 300; color: var(--blue); background: var(--blue-light); border-radius: var(--r-sm); }
.sd-cal-cell.is-other { opacity: .42; }
.sd-cal-cell.is-today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.sd-cal-cell.has-row { background: var(--surface); border-color: var(--line); }
.sd-cal-daynum { font-size: .82rem; font-weight: 700; color: var(--ink); }
.sd-cal-cell.is-today .sd-cal-daynum { color: var(--blue-700); }
.sd-cal-snippet { font-size: .76rem; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sd-cal-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.sd-cal-thumbs { display: flex; }
.sd-cal-thumbs img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; border: 1.5px solid var(--surface); margin-left: -6px; }
.sd-cal-thumbs img:first-child { margin-left: 0; }
.sd-cal-count { font-size: .68rem; font-weight: 700; color: var(--blue-700); background: var(--blue-light); border-radius: var(--r-pill); padding: 2px 7px; }
/* destello al saltar de un día del calendario a su fila en la tabla */
.sd-row-flash { animation: sdRowFlash 1.6s var(--ease-out); }
/* la celda de acciones es sticky con fondo propio: anímala también para que no quede un hueco */
.sd-row-flash td.sd-row-tools { animation: sdRowFlash 1.6s var(--ease-out); }
@keyframes sdRowFlash { 0%,15% { background: color-mix(in srgb, var(--blue) 22%, transparent); } 100% { background: transparent; } }

/* Encabezado de tarjeta (solo móvil): oculto en escritorio */
.sd-cardhead { display: none; }

/* ---- Social Desk en MÓVIL: cada día = tarjeta apilada y contraíble ---- */
@media (max-width: 700px) {
  .sd-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .sd-table { min-width: 0; width: 100%; table-layout: auto; display: block; }
  .sd-table thead { display: none; }
  .sd-table tbody { display: block; }
  .sd-table tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); margin-bottom: 12px; overflow: hidden; }
  .sd-table td { display: block; border: 0; padding: 0 16px; }

  /* header de tarjeta = día + nº diseños + chevron, alterna el contraído */
  .sd-cardhead { display: block; padding: 0; }
  .sd-cardhead-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; cursor: pointer; text-align: left; background: transparent; }
  .sd-cardhead-day { font-weight: 700; font-size: 1rem; color: var(--ink); }
  .sd-cardhead-meta { font-size: .8rem; color: var(--muted); margin-right: auto; }
  .sd-cardhead-chev { color: var(--muted-2); flex-shrink: 0; transition: transform .3s var(--ease-out); }
  .sd-collapsed .sd-cardhead-chev { transform: rotate(-90deg); }

  /* etiquetas de campo encima de cada celda */
  .sd-table td[data-label] { padding: 0 16px 6px; }
  .sd-table td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }
  .sd-table td[data-label]:last-of-type { padding-bottom: 14px; }

  /* contraído: solo el encabezado visible */
  .sd-collapsed td[data-label], .sd-collapsed td.sd-row-tools { display: none; }

  /* la columna de acciones deja de ser sticky en formato tarjeta */
  .sd-table td.sd-row-tools { position: static; box-shadow: none; padding: 4px 12px 14px; text-align: right; }
  .sd-table td.sd-row-tools .icon-btn { display: inline-grid; }

  button.sd-day { width: 100%; }
  textarea.sd-cell { min-height: 60px; }
  .sd-addrow { width: 100%; justify-content: center; }

  /* barra de compartir: que los controles bajen de línea y no se salgan de la tarjeta */
  .sd-share-link { flex-wrap: wrap; }
  .sd-share-link input { flex: 1 1 100%; min-width: 0; }
  .sd-share-link .btn { flex: 1; }
  /* toolbar del editor: que el título y los controles no se aprieten */
  .sd-toolbar { gap: 10px; }
  .sd-titlewrap { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 600px) {
  .sd-cal-cell { min-height: 76px; padding: 5px; }
  .sd-cal-snippet { -webkit-line-clamp: 2; }
  .sd-cal-month { min-width: 0; font-size: 1.02rem; }
}

@media (max-width: 920px) {
  /* Sólido (sin backdrop-filter): el blur del padre hace que la hoja desplegable,
     que es un hijo absoluto, se vea transparente. */
  .panel-top { position: relative; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel-burger { display: flex; margin-left: auto; }
  /* hamburguesa → X al abrir */
  .panel-top.nav-open .panel-burger { border-color: var(--blue-300, var(--line-2)); }
  .panel-top.nav-open .panel-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .panel-top.nav-open .panel-burger span:nth-child(2) { opacity: 0; }
  .panel-top.nav-open .panel-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* menú = hoja desplegable redondeada (no la franja plana anterior) */
  .panel-menu {
    display: none; position: absolute; top: calc(100% + 9px);
    left: clamp(10px, 3vw, 22px); right: clamp(10px, 3vw, 22px); z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 8px;
  }
  .panel-top.nav-open .panel-menu { display: flex; animation: panelMenuIn .2s var(--ease-out); }

  .panel-nav { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
  .panel-nav a { padding: 12px 14px; border-radius: var(--r-sm); font-size: 1rem; }
  .panel-nav a.is-active { background: var(--blue-light); }

  .panel-menu-side { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .panel-menu-side .panel-user { display: flex; padding: 8px 12px; border-radius: var(--r-sm); background: var(--blue-light-2, var(--blue-light)); }
  .panel-menu-side .pu-av { width: 40px; height: 40px; }
  .panel-menu-actions { justify-content: space-between; gap: 12px; }
  .panel-menu-actions .panel-logout { flex: 1; text-align: center; }

  .tool-grid { grid-template-columns: 1fr; }
  .panel-cols { grid-template-columns: 1fr; }
}
@keyframes panelMenuIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================== SHARE (cliente) */
.share-body { background: var(--blue-light-2); min-height: 100vh; color: var(--ink); }
.share-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px,5vw,56px); border-bottom: 1px solid var(--line-2); }
.share-top .brand img { height: 30px; }
.share-top .logo-light { display: none; } .share-top .logo-dark { display: block; }
html[data-theme="dark"] .share-top .logo-light { display: block; } html[data-theme="dark"] .share-top .logo-dark { display: none; }
.share-main { max-width: 1100px; margin-inline: auto; padding: clamp(32px,6vw,72px) clamp(16px,5vw,56px) 100px; }
.share-head { margin-bottom: clamp(32px,5vw,56px); }
.share-head .eyebrow { color: var(--blue-600); }
.share-head h1 { font-size: clamp(2rem,5vw,3.4rem); font-weight: 700; letter-spacing: -0.03em; margin: 14px 0 10px; }
.share-head p { color: var(--muted); max-width: 60ch; }
.share-day { margin-bottom: clamp(34px, 5vw, 56px); }
.share-day-label { display: flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.share-day-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.share-item { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); aspect-ratio: 1; cursor: zoom-in; }
.share-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.share-item:hover img { transform: scale(1.05); }
.share-item .share-dl {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(8,16,26,.6); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.share-item:hover .share-dl { opacity: 1; transform: none; }
.share-item .share-dl:hover { background: var(--blue); }
.share-item .share-dl svg { width: 18px; height: 18px; }
.share-empty { text-align: center; color: var(--muted); padding: 80px 20px; }
.share-foot { text-align: center; color: var(--muted-2); font-size: .82rem; padding: 34px 30px; border-top: 1px solid var(--line-2); }
.share-foot-logo { height: 26px; width: auto; margin: 0 auto 12px; opacity: .9; }
.share-foot .logo-light { display: none; } .share-foot .logo-dark { display: block; }
html[data-theme="dark"] .share-foot .logo-light { display: block; } html[data-theme="dark"] .share-foot .logo-dark { display: none; }

/* ---- Propuestas del cliente: barra de vista + acordeón (contraído por defecto) ---- */
.share-toolbar { display: flex; justify-content: flex-end; margin-bottom: 22px; }
.share-acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); margin-bottom: 14px; overflow: hidden; transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease); }
.share-acc.is-open { box-shadow: var(--shadow-lg); border-color: transparent; }
.share-acc-head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 20px; cursor: pointer; text-align: left; background: transparent; transition: background-color .2s var(--ease); }
.share-acc-head:hover { background: var(--blue-light-2); }
.share-acc-thumbs { display: flex; flex-shrink: 0; }
.share-acc-thumbs img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 2px solid var(--surface); margin-left: -14px; box-shadow: var(--shadow-xs); }
.share-acc-thumbs img:first-child { margin-left: 0; }
.share-acc-text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.share-acc-day { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.share-acc-count { font-size: .82rem; color: var(--muted); }
.share-acc-chev { color: var(--muted-2); flex-shrink: 0; transition: transform .3s var(--ease-out), color .2s var(--ease); }
.share-acc.is-open .share-acc-chev { transform: rotate(180deg); color: var(--blue-700); }
.share-acc-panel { padding: 2px 20px 22px; }
.share-acc-copy { background: var(--blue-light-2); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; }
.share-copy-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 6px; }
.share-acc-copy p { white-space: pre-wrap; line-height: 1.6; color: var(--ink); }
.share-calendar { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); padding: clamp(14px,2.5vw,24px); }
/* Calendario del cliente = solo lectura: sin afford. de "agregar" en días vacíos */
#shCalGrid .sd-cal-cell { cursor: default; }
#shCalGrid .sd-cal-cell.has-row { cursor: pointer; }
#shCalGrid .sd-cal-cell.is-empty:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
#shCalGrid .sd-cal-cell.is-empty:hover::after { content: none; }

/* ---- Lightbox: imagen + panel de info (día + copy) + pasarela ---- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6,12,20,.92); display: none; align-items: center; justify-content: center; padding: 28px; }
.lightbox.show { display: flex; }
.lightbox-body { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; max-width: 1240px; max-height: 86vh; }
.lightbox-stage { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
#lbImg { max-width: 100%; max-height: 86vh; border-radius: var(--r); box-shadow: var(--shadow-xl); object-fit: contain; }
.lightbox-info { flex: 0 0 300px; align-self: center; max-height: 86vh; overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-xl); }
.lb-info-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.lb-info-day { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.lb-info-copy { white-space: pre-wrap; color: var(--ink); font-size: .95rem; line-height: 1.6; }
.lb-info-copy.is-empty::before { content: "Sin copy para este día."; color: var(--muted-2); font-style: italic; }
.lb-info-dl { margin-top: 6px; align-self: flex-start; }
.lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; z-index: 3; }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease-out);
}
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-nav:hover { background: var(--blue); }
.lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
.lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox-nav[hidden] { display: none; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
@media (max-width: 820px) {
  .lightbox { padding: 16px; }
  .lightbox-body { flex-direction: column; gap: 14px; max-height: 90vh; overflow-y: auto; }
  .lightbox-stage { width: 100%; }
  #lbImg { max-height: 58vh; }
  .lightbox-info { flex: 0 0 auto; width: 100%; }
  .lb-prev { left: 4px; } .lb-next { right: 4px; }
}

/* ---------------------------------------------------------- Descargas */
.dl-form { margin-bottom: 26px; }
.dl-form-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.dl-form input[type="file"] {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm); background: var(--blue-light-2);
  border: 1.5px dashed var(--line-2); font-size: .92rem; color: var(--ink); cursor: pointer;
}
.dl-form input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--grad-blue); color: #fff; font-weight: 600; font-size: .85rem; font-family: inherit;
}

.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
.dl-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.dl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.dl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--blue-light); color: var(--blue-700);
}
.dl-badge--pdf { background: rgba(198,42,47,.12); color: #C62A2F; }
.dl-badge--zip { background: rgba(176,124,16,.14); color: #9A6B0C; }
.dl-badge--svg, .dl-badge--eps { background: rgba(124,77,196,.14); color: #6B3FC4; }
.dl-badge--png, .dl-badge--jpg, .dl-badge--webp, .dl-badge--gif { background: rgba(26,127,69,.14); color: #15703B; }
.dl-size { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.dl-desc { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.dl-meta { font-size: .76rem; color: var(--muted-2); margin-top: 2px; }
.dl-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.dl-actions .btn--primary { display: inline-flex; align-items: center; }
.dl-actions form { margin-left: 0; }

.dl-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.dl-empty-ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--blue-light); color: var(--blue-700); }
.dl-empty-ic svg { width: 30px; height: 30px; }
.dl-empty-t { font-weight: 600; color: var(--ink); }
.dl-empty-s { font-size: .9rem; margin-top: 4px; }

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

/* ===================================================== PROPUESTAS (clientes) */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.prop-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.prop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.prop-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prop-title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.prop-views { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.prop-views svg { color: var(--muted-2); }
.prop-meta { font-size: .76rem; color: var(--muted-2); }
.prop-linkrow { display: flex; align-items: stretch; gap: 8px; margin-top: 4px; }
.prop-linkinput {
  flex: 1; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: .8rem;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--blue-light-2, var(--blue-light)); color: var(--blue-700);
}
.prop-linkrow .btn { white-space: nowrap; }
.prop-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.prop-replace { margin: 0; }
.prop-replace-lbl { cursor: pointer; }
.prop-actions .icon-btn { margin-left: auto; }

@media (max-width: 700px) {
  .prop-grid { grid-template-columns: 1fr; }
  .prop-linkrow { flex-wrap: wrap; }
  .prop-linkinput { flex: 1 1 100%; }
}