/* Centro de operaciones (Planner + Control): marco con menú lateral.
   Blanco como el Planner de hoy, vidrio ligero (el mismo de la pastilla superior),
   sección activa en pastilla negra y la mascota en estados vacíos. */

/* 24 px a la derecha: las .page sangran -24 px (heredado del marco anterior) y con menos desbordaban. */
.shell.co-marco { flex-direction: row; gap: 24px; padding: 14px 24px 0 20px; max-width: 1760px; }
.co-principal { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; height: 100%; }

/* ── Menú lateral ── */
.co-lateral {
  flex: none; width: 232px; height: calc(100vh - 28px); position: sticky; top: 14px;
  display: flex; flex-direction: column; gap: 14px; padding: 18px 12px 14px;
  background: color-mix(in srgb, var(--cdp-white) 72%, transparent);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line); border-radius: var(--r-3, 24px); box-shadow: var(--shadow);
  z-index: 90;
}
.co-marca { display: flex; align-items: center; gap: 10px; padding: 2px 10px 10px; text-decoration: none; }
.co-marca-logo { height: 20px; width: auto; display: block; }
.co-marca-sub {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
  padding-left: 10px; border-left: 1px solid var(--line-strong);
}
.co-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: none; }
.co-nav::-webkit-scrollbar { display: none; }
.co-nav-grupo {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 16px 12px 6px;
}
.co-nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: var(--r-pill); font-weight: 600; font-size: 14px; color: var(--text-2); text-align: left;
  transition: color var(--dur-fast) var(--out), background var(--dur-fast) var(--out), transform var(--dur-fast) var(--out);
}
.co-nav-item:hover { color: var(--text-1); background: var(--purple-tint); }
.co-nav-item:active { transform: scale(.98); }
.co-nav-item.on { background: var(--cdp-black); color: var(--cdp-white); box-shadow: 0 8px 20px -12px rgba(20, 24, 30, .6); }
.co-nav-item:focus-visible { outline: 2px solid var(--cdp-purple); outline-offset: 2px; }
.co-nav-ico { width: 20px; text-align: center; font-size: 15px; opacity: .85; flex: none; }
.co-nav-txt { flex: 1; min-width: 0; }
.co-nav-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--alert); color: var(--cdp-white);
}
.co-lateral-pie {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: var(--r-2, 18px); background: var(--purple-tint);
  font-size: 12.5px; font-weight: 700; color: var(--text-1); line-height: 1.3;
}
/* `small` heredaba 0,833 × 12,5 px = 10,4 px: por debajo del mínimo legible (11 px). */
.co-lateral-pie small { font-size: 11px; font-weight: 600; color: var(--text-3); }
.co-lateral-pie img { flex: none; }

/* ── Barra superior (sin pestañas: solo buscar y acciones) ── */
.co-topbar { justify-content: space-between; }
.co-buscar {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-3); font-size: 13.5px; font-weight: 600; min-width: 0; flex: 0 1 340px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.co-buscar:hover { color: var(--text-1); border-color: var(--line-strong); }
.co-buscar kbd {
  margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; color: var(--text-3);
  background: var(--cdp-white); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}

/* ── Subvistas de la sección (Lista · Pipeline · Proyectos…) ── */
.co-subvistas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.co-subvistas button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--cdp-white) 70%, transparent);
  font-weight: 700; font-size: 13.5px; color: var(--text-2);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.co-subvistas button:hover { color: var(--text-1); background: var(--purple-tint); }
.co-subvistas button.on { background: var(--cdp-black); border-color: var(--cdp-black); color: var(--cdp-white); }
.co-sub-n {
  font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; background: var(--alert); color: var(--cdp-white);
}

/* ── Mascota en estados vacíos, de éxito y de error ── */
.vacio-m { display: flex; align-items: center; gap: 18px; padding: 18px 6px; }
.vacio-m .mascota { flex: none; }
.vacio-m-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vacio-m-txt b { font-size: 16px; color: var(--text-1); }
.vacio-m-txt p { font-size: 14px; color: var(--text-2); max-width: 520px; }
.vacio-m-compacto { padding: 10px 4px; gap: 12px; }
.vacio-m-compacto .vacio-m-txt b { font-size: 14.5px; }

/* ── Tamaños intermedios: menú solo con iconos ── */
@media (max-width: 1180px) {
  .co-lateral { width: 72px; padding: 16px 10px; }
  .co-marca-sub, .co-nav-txt, .co-nav-grupo, .co-lateral-pie span { display: none; }
  .co-marca { justify-content: center; padding: 2px 0 10px; }
  .co-marca-logo { width: 28px; height: auto; object-fit: cover; object-position: left; }
  .co-nav-item { justify-content: center; padding: 0; position: relative; }
  .co-nav-n { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; font-size: 11px; }
  .co-lateral-pie { padding: 6px; justify-content: center; background: none; }
}
/* ── Móvil: el menú lateral se va y manda la barra inferior de siempre ── */
@media (max-width: 640px) {
  .shell.co-marco { padding: 10px 16px 0; gap: 0; }
  .co-lateral { display: none; }
  .co-buscar { flex: 0 0 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 17px; }
  .co-buscar-txt, .co-buscar kbd { display: none; }
  .co-subvistas { gap: 4px; }
  .co-subvistas button { padding: 0 12px; }
  .vacio-m { flex-direction: column; align-items: flex-start; }
}

/* Aviso de demo local (solo con DEMO=1 en la API). */
.co-demo {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; margin-right: auto; margin-left: 12px;
  border-radius: var(--r-pill); background: var(--ccl-warn-soft, #FCEFD8); color: var(--ccl-warn, #8A5A00);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
@media (max-width: 900px) { .co-demo { display: none; } }

/* ── Avisos de acción con la mascota (Nico, 28-oct) ──────────────────────────
   Amplía el aviso de siempre (app.jsx `.toasts`), no es otro sistema. En el
   centro de operaciones va con la piel Control clara: vidrio blanco, texto
   oscuro y la mascota con UNA pose acorde al resultado (avisos.mjs).
   · Escritorio: abajo a la derecha, lejos de la barra superior y del «Deshacer»
     del borrado (arriba al centro).
   · Móvil: abajo, a 16 px de cada borde y por encima de la barra inferior.
   · Movimiento solo con transform y opacity; con movimiento reducido, fundido.
   · Nunca más de dos (avisos.mjs); se cierran solos en 3,8 s salvo los errores. */
.toasts.toasts--co {
  top: auto; left: auto; right: 24px; bottom: 24px; transform: none;
  align-items: flex-end; max-width: min(400px, calc(100vw - 32px));
  perspective: none;
}
.toasts--co .toast {
  color: var(--text-1);
  background: color-mix(in srgb, var(--cdp-white) 94%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 14px 34px -14px rgba(20, 24, 30, .28);
  border-radius: var(--r-2, 18px);
  padding: 10px 10px 10px 14px; gap: 12px;
  font-size: 13.5px; font-weight: 600;
  animation: aviso-m-entra var(--dur-med) var(--ease-out) both;
}
@supports (backdrop-filter: blur(1px)) {
  .toasts--co .toast { backdrop-filter: blur(16px) saturate(160%); }
}
.toasts--co .toast > * { animation: none; }
.toasts--co .toast-txt { color: var(--text-1); }
.toasts--co .toast-ir:hover, .toasts--co .toast-ir:focus-visible { text-decoration-color: var(--cdp-purple-deep); }
/* Con mascota, el punto de estado sobra: la pose ya dice cómo fue. */
.toasts--co .toast.con-m::before { display: none; }
.toasts--co .toast-m { flex: none; width: 34px; height: auto; align-self: center; margin: -4px 0; }
.toasts--co .toast.err { border-color: color-mix(in srgb, var(--u-critica) 45%, var(--line)); }
.toasts--co .toast.err .toast-txt { color: var(--text-1); }
/* El aspa: 44 px de diana para el dedo, sin hinchar la píldora. */
.toasts--co .toast-x {
  color: var(--text-2); opacity: .8;
  min-width: 32px; min-height: 32px; display: inline-grid; place-items: center;
  border-radius: 50%; position: relative;
}
.toasts--co .toast-x::after { content: ""; position: absolute; inset: -6px; }
.toasts--co .toast-x:hover { opacity: 1; background: var(--purple-tint); transform: none; }
.toasts--co .toast-x:focus-visible { outline: 2px solid var(--cdp-purple-deep); outline-offset: 1px; opacity: 1; }
/* Con «Reintentar», en móvil el texto no se estruja: el botón baja a su línea. */
.toasts--co .toast { flex-wrap: wrap; }
.toasts--co .toast-txt { flex: 1 1 150px; }
.toasts--co .toast .toast-accion {
  color: var(--cdp-purple-deep); border-color: color-mix(in srgb, var(--cdp-purple) 40%, var(--line));
  min-height: 44px; margin-left: auto;
}
.toasts--co .toast .toast-accion:hover { background: var(--purple-tint); }
/* Cuenta atrás: misma duración que AVISO_MS (avisos.mjs). */
.toasts--co .toast:not(.err)::after { animation-duration: 3800ms; background: var(--cdp-purple); }
/* La pila: el de detrás, apenas más pequeño. */
.toasts--co .toast:nth-last-child(2) { scale: .97; translate: 0 -2px; opacity: .94; }
.toasts--co .toast.saliendo { animation: toast-out-co 220ms var(--ease-out) both; }
@keyframes aviso-m-entra {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* El nombre empieza por «toast-out»: app.jsx retira el nodo al acabar. */
@keyframes toast-out-co {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes toast-out-fundido { from { opacity: 1; } to { opacity: 0; } }
@keyframes aviso-m-fundido { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .toasts.toasts--co {
    left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom));
    max-width: none; align-items: stretch;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toasts--co .toast { animation: aviso-m-fundido 160ms linear both; transition: none; }
  /* Sin animación de salida el nodo no se retiraba nunca: un fundido corto. */
  .toasts--co .toast.saliendo { animation: toast-out-fundido 160ms linear both; }
  .toasts--co .toast:nth-last-child(2) { scale: 1; translate: 0; }
}

/* Buscador sin resultados: la mascota curiosa (estado vacío tras buscar). */
.pal-vacio { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pal-vacio .mascota { flex: none; }