/* ============================================================
   style-conteiner-flotante.css — Dock flotante (redesign)
   Acceso rápido para el nutriólogo en todas las secciones
   ============================================================ */

/* ── Contenedor principal ─────────────────────────────────── */
.dock-nutri {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Barra de acciones rápidas ────────────────────────────── */
.dock-quick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  background: color-mix(in oklab, var(--bg, #0b0f1a) 85%, transparent);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 18px;
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    0 4px 16px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── Botones de acción ────────────────────────────────────── */
.qa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  height: 52px;
  min-width: 52px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted, rgba(255,255,255,.48));
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
  white-space: nowrap;
  line-height: 1;
}

.qa-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform .14s;
}

.qa-btn .qa-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: inherit;
}

/* ── Colores por acción ───────────────────────────────────── */
.qa-btn:hover { transform: translateY(-2px); }
.qa-btn:active { transform: translateY(0); }

.qa-btn--blue:hover {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.22);
  color: #93c5fd;
}
.qa-btn--purple:hover {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.22);
  color: #c4b5fd;
}
.qa-btn--red:hover {
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.22);
  color: #fca5a5;
}
.qa-btn--amber:hover {
  background: rgba(251,191,36,.12);
  border-color: rgba(251,191,36,.22);
  color: #fde68a;
}
.qa-btn--teal:hover {
  background: rgba(45,212,191,.12);
  border-color: rgba(45,212,191,.22);
  color: #5eead4;
}
.qa-btn--green:hover {
  background: rgba(74,222,128,.12);
  border-color: rgba(74,222,128,.22);
  color: #86efac;
}

/* ── qa-btn como enlace (<a>) ─────────────────────────────── */
a.qa-btn {
  text-decoration: none;
  display: inline-flex;
}

/* ── Separador ────────────────────────────────────────────── */
.dock-sep {
  width: 1px;
  height: 28px;
  background: var(--border, rgba(255,255,255,.1));
  margin: 0 3px;
  flex-shrink: 0;
  border-radius: 99px;
}

/* ── Botón "más" ──────────────────────────────────────────── */
.qa-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted, rgba(255,255,255,.48));
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.qa-more:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
  color: var(--text, rgba(255,255,255,.9));
  transform: translateY(-2px);
}
.qa-more svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

/* ── Bottom sheet ─────────────────────────────────────────── */
.dock-sheet {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: min(500px, calc(100vw - 40px));
  max-height: min(70vh, 580px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--card, #131e31);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 20px;
  box-shadow:
    0 28px 64px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
  z-index: 120;
  animation: dockSheetIn .2s cubic-bezier(.16,1,.3,1) both;
}

@keyframes dockSheetIn {
  from { transform: translateY(12px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Sheet – header */
.sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
  background: rgba(255,255,255,.02);
}

.sheet-branding {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.sheet-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #4f8cff);
  box-shadow: 0 0 8px rgba(79,140,255,.5);
}
.sheet-brand-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, rgba(255,255,255,.9));
  letter-spacing: .1px;
}

.sheet-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.sheet-search {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: rgba(255,255,255,.05);
  color: var(--text, rgba(255,255,255,.9));
  font-size: 12px;
  outline: none;
  width: 170px;
  transition: border-color .15s, box-shadow .15s, width .2s;
}
.sheet-search:focus {
  border-color: rgba(96,165,250,.4);
  box-shadow: 0 0 0 3px rgba(96,165,250,.1);
  width: 200px;
}
.sheet-search::placeholder { color: var(--muted, rgba(255,255,255,.32)); font-size: 11px; }

.sheet-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: rgba(255,255,255,.04);
  color: var(--muted, rgba(255,255,255,.48));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .14s;
  flex-shrink: 0;
}
.sheet-close:hover {
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.25);
  color: #fca5a5;
}
.sheet-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sheet – body */
.sheet-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* Etiqueta de grupo */
.sheet-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted, rgba(255,255,255,.4));
  margin: 0 2px 8px;
}

/* Grid de enlaces */
.link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.sheet-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,.07));
  background: rgba(255,255,255,.03);
  color: var(--text, rgba(255,255,255,.9));
  text-decoration: none;
  transition: background .14s, border-color .14s, transform .11s;
}
.sheet-link:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  transform: translateY(-1px);
}

.sheet-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sheet-link-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Variantes de icono */
.sheet-link-icon--blue   { background: rgba(96,165,250,.13);  color: #60a5fa; }
.sheet-link-icon--green  { background: rgba(52,211,153,.13);  color: #34d399; }
.sheet-link-icon--purple { background: rgba(167,139,250,.13); color: #a78bfa; }
.sheet-link-icon--orange { background: rgba(251,146,60,.13);  color: #fb923c; }
.sheet-link-icon--teal   { background: rgba(45,212,191,.13);  color: #2dd4bf; }
.sheet-link-icon--amber  { background: rgba(251,191,36,.13);  color: #fbbf24; }
.sheet-link-icon--pink   { background: rgba(244,114,182,.13); color: #f472b6; }
.sheet-link-icon--red    { background: rgba(248,113,113,.13); color: #f87171; }

.sheet-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sheet-link-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, rgba(255,255,255,.9));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-link-sub {
  font-size: 10px;
  color: var(--muted, rgba(255,255,255,.4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sheet – footer */
.sheet-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
  background: rgba(255,255,255,.01);
}
.sheet-hint {
  font-size: 10px;
  color: var(--muted, rgba(255,255,255,.28));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sheet-hint kbd {
  font-family: inherit;
  font-size: 9px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text, rgba(255,255,255,.65));
}

/* ── Backdrop ──────────────────────────────────────────────── */
.dock-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 119;
  animation: backdropIn .16s ease both;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Light theme ───────────────────────────────────────────── */
#app.light-theme .dock-quick {
  background: rgba(248,250,253,.94);
  border-color: rgba(0,0,0,.09);
  box-shadow:
    0 12px 40px rgba(0,0,0,.1),
    0 4px 16px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
}
#app.light-theme .qa-btn { color: rgba(0,0,0,.42); }
#app.light-theme .qa-btn--blue:hover   { background: rgba(59,130,246,.08);  border-color: rgba(59,130,246,.2);  color: #2563eb; }
#app.light-theme .qa-btn--purple:hover { background: rgba(124,58,237,.08);  border-color: rgba(124,58,237,.2);  color: #7c3aed; }
#app.light-theme .qa-btn--red:hover    { background: rgba(220,38,38,.08);   border-color: rgba(220,38,38,.2);   color: #dc2626; }
#app.light-theme .qa-btn--amber:hover  { background: rgba(217,119,6,.08);   border-color: rgba(217,119,6,.2);   color: #d97706; }
#app.light-theme .qa-btn--teal:hover   { background: rgba(13,148,136,.08);  border-color: rgba(13,148,136,.2);  color: #0d9488; }
#app.light-theme .qa-more { color: rgba(0,0,0,.42); }
#app.light-theme .qa-more:hover { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.8); }
#app.light-theme .dock-sep { background: rgba(0,0,0,.1); }

#app.light-theme .dock-sheet {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 28px 64px rgba(0,0,0,.14);
}
#app.light-theme .sheet-head  { background: rgba(0,0,0,.01); border-color: rgba(0,0,0,.07); }
#app.light-theme .sheet-brand-title { color: rgba(0,0,0,.85); }
#app.light-theme .sheet-search { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.8); }
#app.light-theme .sheet-search::placeholder { color: rgba(0,0,0,.32); }
#app.light-theme .sheet-close { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.42); }
#app.light-theme .sheet-close:hover { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.2); color: #dc2626; }
#app.light-theme .sheet-link { border-color: rgba(0,0,0,.06); background: rgba(0,0,0,.02); }
#app.light-theme .sheet-link:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
#app.light-theme .sheet-link-title { color: rgba(0,0,0,.85); }
#app.light-theme .sheet-link-sub { color: rgba(0,0,0,.4); }
#app.light-theme .sheet-group-label { color: rgba(0,0,0,.38); }
#app.light-theme .sheet-foot { border-color: rgba(0,0,0,.06); background: rgba(0,0,0,.01); }
#app.light-theme .sheet-hint { color: rgba(0,0,0,.3); }
#app.light-theme .sheet-hint kbd { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.6); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dock-nutri { right: 12px; bottom: 12px; }
  .dock-quick { padding: 4px; gap: 2px; }
  .qa-btn { height: 46px; min-width: 46px; padding: 0 10px; }
  .qa-btn .qa-label { display: none; }
  .qa-btn svg { width: 18px; height: 18px; }
  .qa-more { width: 46px; height: 46px; }

  .dock-sheet {
    left: 12px;
    right: 12px;
    bottom: 78px;
    width: auto;
    border-radius: 16px;
    max-height: min(75vh, 70dvh);
  }
  .link-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .sheet-search { width: 120px; }
}

/* ── Forzar [hidden] ───────────────────────────────────────── */
[hidden] { display: none !important; }