/*
 * Dashboard widget styles. The shell HTML is in wactivity/public/dashboard.html,
 * the orchestration JS in shared/js/dashboard.js. Each widget card uses the
 * .dw- prefix (dashboard widget) to stay clear of admin chrome classes.
 *
 * Design doc: project_shared_home_dashboard.md
 */

/* Per-widget accents:
   --dw-accent       → icon chip color sobre el header oscuro (tonos -400
                       para legibilidad sobre slate-900).
   --dw-accent-soft  → fondo de hover de filas sobre el body blanco
                       (tonos -100, casi pastel).
   Pedro 2026-05-12: paleta refinada + header oscuro estilo admin pro. */
.dw-card {
    --dw-accent: #818cf8;
    --dw-accent-soft: #eef2ff;
    background: #fff;
    border-radius: 0.875rem;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.05),
        0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s ease;
}
.dw-card:hover {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 12px 32px -14px rgba(15, 23, 42, 0.22);
}

/* Accents: -400 para icon sobre header oscuro, -100 soft para hover
   row sobre body blanco. */
.dw-card[data-widget="my-businesses"]    { --dw-accent: #818cf8; --dw-accent-soft: #eef2ff; }
.dw-card[data-widget="recent"]           { --dw-accent: #2dd4bf; --dw-accent-soft: #ccfbf1; }
.dw-card[data-widget="drafts"]           { --dw-accent: #facc15; --dw-accent-soft: #fef9c3; }
.dw-card[data-widget="upcoming"]         { --dw-accent: #60a5fa; --dw-accent-soft: #dbeafe; }
.dw-card[data-widget="reviews-recent"]   { --dw-accent: #fb923c; --dw-accent-soft: #ffedd5; }
.dw-card[data-widget="reviews-pending"]  { --dw-accent: #f87171; --dw-accent-soft: #fee2e2; }
.dw-card[data-widget="dishes-recent"]    { --dw-accent: #4ade80; --dw-accent-soft: #dcfce7; }
.dw-card[data-widget="events-upcoming"]  { --dw-accent: #a78bfa; --dw-accent-soft: #ede9fe; }
.dw-card[data-widget="forms-recent"]     { --dw-accent: #22d3ee; --dw-accent-soft: #cffafe; }
.dw-card[data-widget="ai-status"]        { --dw-accent: #c084fc; --dw-accent-soft: #f3e8ff; }

/* "Tu IA" widget — per-provider BYOK key health rows. */
.dw-aikey { padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.dw-aikey:last-of-type { border-bottom: 0; }
.dw-aikey-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dw-aikey-name { font-size: 13px; font-weight: 600; color: #1f2937; }
.dw-aikey-pref { margin-left: 6px; font-size: 10px; font-weight: 600; color: #7c3aed; text-transform: uppercase; letter-spacing: .03em; }
.dw-aikey-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dw-aikey-pill--ok     { background: #dcfce7; color: #166534; }
.dw-aikey-pill--danger { background: #fee2e2; color: #991b1b; }
.dw-aikey-pill--warn   { background: #fef3c7; color: #92400e; }
.dw-aikey-pill--info   { background: #dbeafe; color: #1e40af; }
.dw-aikey-pill--mute   { background: #f1f5f9; color: #475569; }
.dw-aikey-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dw-aikey-cap { font-size: 10px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 6px; }
.dw-aikey-detail { margin-top: 5px; font-size: 11px; color: #b45309; line-height: 1.35; word-break: break-word; }
.dw-aikey-checked { display: inline-block; margin-top: 5px; font-size: 10px; color: #94a3b8; }
.dw-aikey-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dw-aikey-headline { font-size: 12px; font-weight: 700; }
.dw-aikey-check { font-size: 12px; font-weight: 600; color: #6d28d9; background: #f3e8ff; border: 1px solid #e9d5ff; border-radius: 6px; padding: 3px 11px; cursor: pointer; line-height: 1.25; white-space: nowrap; }
.dw-aikey-check:hover { background: #e9d5ff; }
.dw-aikey-check:disabled { opacity: 0.6; cursor: default; }
.dw-aikey-platnote { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 11px; color: #6b7280; line-height: 1.35; }

/* Banda del encabezado — slate-800 (#1e293b), menos negro que 900,
   slim padding y title 1rem para que el texto sea el foco. Pedro
   2026-05-12: dark sí, pero menos heavy y title más prominente. */
.dw-card-header {
    background: #283548;
    padding: 0.4375rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dw-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.005em;
    margin: 0;
    flex: 1;
}

/* When the widget has a primary destination, the WHOLE header band is
   the link — con micro-label "Ver todo" + chevron accent SIEMPRE
   visibles (no solo en hover). Pedro 2026-05-29: el título-enlace
   anterior solo se revelaba al pasar el ratón → invisible para
   operadores muggle y en táctil (sin hover). Regla "CTAs = botones,
   no links sutiles". El padding vive en el <a> para que el área de
   clic cubra toda la banda, no solo el texto. */
.dw-card-header--link { padding: 0; }
.dw-card-header-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.4375rem 1.25rem;   /* == .dw-card-header: misma altura/banda */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.12s ease;
}
.dw-card-header-link .dw-card-title { min-width: 0; }
.dw-card-header-link:focus-visible {
    outline: 2px solid var(--dw-accent, #93c5fd);
    outline-offset: -2px;
}

/* Afluencia "ver más": label uppercase + chevron, tintados con el
   accent del widget, atenuados en reposo y a plena opacidad en hover. */
.dw-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex-shrink: 0;
    color: var(--dw-accent, #93c5fd);
    opacity: 0.82;
    transition: opacity 0.14s ease;
}
.dw-card-more-label {
    font-size: 0.625rem;          /* 10px */
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.dw-card-more-arrow {
    width: 0.9375rem;             /* 15px */
    height: 0.9375rem;
    flex-shrink: 0;
    transition: transform 0.16s ease;
}
.dw-card-header-link:hover .dw-card-title,
.dw-card-header-link:focus-visible .dw-card-title {
    color: var(--dw-accent, #93c5fd);
}
.dw-card-header-link:hover .dw-card-more,
.dw-card-header-link:focus-visible .dw-card-more {
    opacity: 1;
}
.dw-card-header-link:hover .dw-card-more-arrow,
.dw-card-header-link:focus-visible .dw-card-more-arrow {
    transform: translateX(3px);
}

/* Icon chip translúcido sobre el header oscuro — accent -400 del widget
   tinta el SVG. */
.dw-card-icon-chip {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--dw-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dw-card-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.dw-card-body {
    padding: 0.25rem 0 0.5rem;
    flex: 1;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

/* Wrapper applied to widgets that use renderBody() (custom HTML, not
   list-of-rows). Reproduces the horizontal indentation .dw-item rows
   have built-in (1.25rem each side) so inbox-summary / platform-usage /
   signature-status visually align with the list-style widgets.
   `display: flex; flex-direction: column` mirrors the parent so child
   anchors stack as rows instead of collapsing to inline (default for
   <a>). Without this the inbox rows ran together on one line. */
.dw-card-body-inner {
    padding: 0 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Inbox-summary uses .dw-row (not .dw-item) — give it explicit flex
   so the label sits on the left and the count pill on the right. The
   row is itself a link, padded to match .dw-item's hit area. */
.dw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s, padding-left 0.12s;
}
.dw-row:first-child { border-top: 0; }
.dw-row:hover {
    background: var(--dw-accent-soft);
    padding-left: 0.5rem;
}
.dw-row-label {
    font-size: 0.875rem;
    color: #1f2937;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dw-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    background: var(--dw-accent-soft);
    color: #1f2937;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.dw-pill--alert {
    background: #fee2e2;
    color: #991b1b;
}
.dw-pill--mute {
    background: #f3f4f6;
    color: #9ca3af;
    font-weight: 400;
}

/* Loading skeleton — pulses while the fetch is in flight. dashboard.js
   swaps this for the populated list or an empty-state once data arrives. */
.dw-skeleton {
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dw-skeleton-row {
    height: 1rem;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    border-radius: 0.25rem;
    animation: dw-pulse 1.4s ease-in-out infinite;
}
.dw-skeleton-row:nth-child(2) { width: 90%; }
.dw-skeleton-row:nth-child(3) { width: 75%; }
.dw-skeleton-row:nth-child(4) { width: 85%; }

@keyframes dw-pulse {
    0%, 100% { background-position: 200% 0; }
    50%      { background-position: -200% 0; }
}

/* Identity row inside a populated widget */
.dw-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s, padding-left 0.12s;
}
.dw-item:first-child { border-top: 0; }
.dw-item:hover {
    background: var(--dw-accent-soft);
    padding-left: 1.5rem;
}

.dw-item-logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Logo placeholder cuando es una review (sin imagen propia) — usamos
   el accent del card en lugar del gris genérico. */
.dw-item-logo.dw-rating {
    background: var(--dw-accent-soft);
    color: #b45309;
    font-size: 1rem;
}

.dw-item-body {
    flex: 1;
    min-width: 0;
}

.dw-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dw-item-meta {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.dw-stars {
    color: #f59e0b;
    letter-spacing: 0.05em;
}

.dw-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    height: 1.25rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    letter-spacing: 0.01em;
}
.dw-badge-draft     { background: #fef3c7; color: #92400e; }
.dw-badge-scheduled { background: #dbeafe; color: #1e40af; }

/* upcoming-all badges. Cada tipo de automatización con su color para
   distinguir publicar / expirar / evento / precio en el calendario
   unificado. */
.dw-up-publish    { background: #e0e7ff; color: #4338ca; }
.dw-up-expire     { background: #fee2e2; color: #b91c1c; }
.dw-up-event      { background: #ede9fe; color: #6d28d9; }
.dw-up-offer      { background: #dcfce7; color: #15803d; }
.dw-up-offer-end  { background: #fef3c7; color: #92400e; }

/* Estado overdue: la fila se tinta sutil en rojo para señalar que la
   automatización debería haberse disparado y aún no fue procesada. */
.dw-item.dw-up-overdue {
    background: #fef2f2;
}
.dw-item.dw-up-overdue:hover {
    background: #fee2e2;
}
.dw-item.dw-up-overdue .dw-item-meta {
    color: #b91c1c;
}

/* Empty state — non-aggressive, surfaces a CTA to the related feature
   so the dashboard doubles as onboarding (D4 decision 2026-05-12). */
.dw-empty {
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #64748b;
    gap: 0.5rem;
}
.dw-empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: #cbd5e1;
}
.dw-empty-text {
    font-size: 0.875rem;
}
.dw-empty-cta {
    margin-top: 0.5rem;
    color: #4f46e5;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.dw-empty-cta:hover { text-decoration: underline; }

.dw-error {
    padding: 1.5rem 1.25rem;
    color: #b91c1c;
    font-size: 0.875rem;
    text-align: center;
}

/* Layout masonry — CSS Grid con grid-auto-rows pequeño (8px) + JS que
   asigna `grid-row: span N` a cada card según altura natural. Pedro
   2026-05-28: el orden lectura natural es izquierda-a-derecha y
   luego arriba-a-abajo (NO el vertical-first que da column-count).
   Solución: grid normal + spans calculados → horizontal reading
   order + altura natural por card (sin whitespace en cards cortas).
   `applyMasonryLayout()` en dashboard.js corre post-paint + observe. */
.dw-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 8px;
    gap: 1.25rem 1.25rem;
}
/* Hasta que JS aplique los spans, las cards mantienen altura natural
   ocupando una sola fila grande (el JS las reajusta a span N). */
.dw-grid > * {
    grid-row: span 50;
    /* CRÍTICO: sin align-self:start, el `display:flex;flex-direction:column`
       de .dw-card hace que la card se ESTIRE para llenar el row asignado
       (50*8px + 49*gap = enorme antes del JS, o el ceil() margin post-JS).
       align-self:start ancla la card al top y la deja en altura natural
       — el span N de Grid sólo reserva el espacio, no estira la card. */
    align-self: start;
}
@media (min-width: 720px)  { .dw-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }

/* Widget full-width (ocupa todas las columnas del grid). Usado por
   "Mis negocios" en el dashboard de tourismium. */
.dw-card-full {
    grid-column: 1 / -1;
}

/* Toolbar — fila sobre el grid. Layout:
     [Saludo "Buenos días, Pedro"]  ......  [Actualizar] [Auto-refresh] [stamp]
   El saludo crece para empujar las acciones contra el borde derecho. En
   móvil se envuelve a dos líneas. dashboard.js renderiza el contenido
   en boot(); el slot queda vacío fuera del dashboard. */
.dw-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dw-toolbar:empty {
    display: none;
}
/* Hero del toolbar — saludo + tagline contextual EN LA MISMA LÍNEA.
   Los pills van a continuación del texto del saludo, no debajo.
   Crece para empujar las acciones (refresh + auto + stamp) al borde
   derecho. En viewports estrechos los pills caen a la siguiente
   línea automáticamente por el flex-wrap. */
.dw-toolbar-hero {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.dw-toolbar-greeting {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Cuando el saludo estático es sustituido por la versión IA, animamos la
   sustitución para que no parezca un re-render abrupto. Misma curva
   cubic-bezier que el stagger de las pills, duración ligeramente mayor
   (0.7s) porque es un H1 — el ojo necesita más tiempo para releer una
   frase completa que un badge corto. */
@keyframes dw-greeting-replace {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.985);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
.dw-toolbar-greeting.is-replacing {
    animation: dw-greeting-replace 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .dw-toolbar-greeting.is-replacing {
        animation: none;
    }
}

/* Tagline contextual — "pills" pequeños con info dinámica (mensajes
   sin leer, tiempo). Vacío al cargar, async-populated por los providers
   de dashboard.js. Es la semilla del asistente proactivo: futura IA
   enchufa un provider nuevo con mayor priority. */
.dw-toolbar-tagline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dw-tagline-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: #f1f5f9;
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #475569;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color 0.12s, color 0.12s;
}
.dw-tagline-pill:hover {
    background: #e2e8f0;
    color: #0f172a;
}
/* Convención semáforo 2026-05-28 — cuatro tonos cross-widget.
   Coherente con los colores del widget `platform-health`:
     danger  #dc2626   alert/fallo   pill--alert
     warn    #d97706   amber/aviso   pill--warn
     info    #2563eb   azul/notif    pill--info
     win     #16a34a   verde/logro   pill--win
   (neutral = default `.dw-tagline-pill` sin modifier) */
.dw-tagline-pill--alert {
    background: #fee2e2;
    color: #b91c1c;
    font-weight: 600;
}
.dw-tagline-pill--alert:hover {
    background: #fecaca;
    color: #991b1b;
}
.dw-tagline-pill--warn {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}
.dw-tagline-pill--warn:hover {
    background: #fde68a;
    color: #78350f;
}
.dw-tagline-pill--info {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 500;
}
.dw-tagline-pill--info:hover {
    background: #bfdbfe;
    color: #1e3a8a;
}
.dw-tagline-pill--win {
    background: #d1fae5;
    color: #047857;
    font-weight: 600;
}
.dw-tagline-pill--win:hover {
    background: #a7f3d0;
    color: #065f46;
}
.dw-tagline-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

/* Entrada cinematográfica de los pills: cada uno aparece desde abajo
   con blur+scale, escalonados. El JS añade .is-entering al slot tras
   pintar los hijos; CSS aplica la animación a cada pill con nth-child
   delay. La animación corre cada vez que se reemplaza el HTML (el JS
   fuerza un reflow entre remove/add la clase). */
@keyframes dw-tagline-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.94);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.dw-toolbar-tagline.is-entering .dw-tagline-pill {
    animation: dw-tagline-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dw-toolbar-tagline.is-entering .dw-tagline-pill:nth-child(1) {
    animation-delay: 0s;
}
.dw-toolbar-tagline.is-entering .dw-tagline-pill:nth-child(2) {
    animation-delay: 0.18s;
}
.dw-toolbar-tagline.is-entering .dw-tagline-pill:nth-child(3) {
    animation-delay: 0.36s;
}
.dw-toolbar-tagline.is-entering .dw-tagline-pill:nth-child(4) {
    animation-delay: 0.54s;
}
/* Reduce motion: usuarios con preferencia sin animaciones ven el
   tagline pintar instantáneo, sin blur ni stagger. */
@media (prefers-reduced-motion: reduce) {
    .dw-toolbar-tagline.is-entering .dw-tagline-pill {
        animation: none;
    }
}
.dw-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dw-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.dw-toolbar-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.dw-toolbar-icon {
    width: 1rem;
    height: 1rem;
    color: #475569;
}
.dw-toolbar-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.35rem 1.75rem 0.35rem 0.65rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #0f172a;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
}
.dw-toolbar-select:hover { border-color: #cbd5e1; }
.dw-toolbar-stamp {
    font-size: 0.75rem;
    color: #94a3b8;
    min-width: 12ch;
    text-align: right;
}

/* Pill de control de actualización — unifica botón + intervalo +
   timestamp en un solo control. Click abre menú con "Actualizar ahora"
   + opciones de intervalo. Diseño 2026-05-28 (Pedro). */
.dw-toolbar-actions { position: relative; }
.dw-update-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem 0.4rem 0.65rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.8125rem;
    color: #0f172a;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}
.dw-update-pill:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.dw-update-icon {
    width: 0.95rem;
    height: 0.95rem;
    color: #475569;
    flex-shrink: 0;
}
.dw-update-chevron {
    width: 0.85rem;
    height: 0.85rem;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.12s;
}
.dw-update-pill[aria-expanded="true"] .dw-update-chevron {
    transform: rotate(180deg);
}
.dw-update-since {
    color: #475569;
}
.dw-update-sep {
    color: #cbd5e1;
}
.dw-update-interval {
    color: #0f172a;
    font-weight: 500;
}
.dw-update-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 11rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
    padding: 0.35rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.dw-update-menu[hidden] { display: none; }
.dw-update-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 0;
    background: transparent;
    border-radius: 0.4rem;
    font-size: 0.8125rem;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.dw-update-menu-item:hover {
    background: #f1f5f9;
}
.dw-update-menu-item[aria-current="true"] {
    color: #1d4ed8;
    font-weight: 500;
}
.dw-update-menu-action {
    color: #0f172a;
    font-weight: 500;
}
.dw-update-menu-check {
    width: 1rem;
    text-align: center;
    color: #1d4ed8;
    flex-shrink: 0;
}
.dw-update-menu-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 0.25rem 0;
}

/* Business list — cards de "Mis negocios" con stats inline */
.dw-biz-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dw-biz {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s, padding-left 0.12s;
}
.dw-biz-list li:first-child .dw-biz { border-top: 0; }
.dw-biz:hover {
    background: var(--dw-accent-soft);
    padding-left: 1.5rem;
}

.dw-biz-body {
    flex: 1;
    min-width: 0;
}
.dw-biz-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dw-biz-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.dw-biz-domain {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
    display: block;
}

.dw-badge-plan {
    background: #0f172a;
    color: #f1f5f9;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0 0.5rem;
}

/* Stats inline — números prominentes, labels discretos. La columna
   "Pendientes" usa color warning si > 0 para guiar la atención. */
.dw-biz-stats {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}
.dw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.5rem;
}
.dw-stat-label {
    font-size: 0.625rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.125rem;
}
.dw-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.dw-stat-value.dw-stat-warn {
    color: #dc2626;
}
.dw-stat-value.dw-stat-rating {
    color: #d97706;
}

@media (max-width: 640px) {
    .dw-biz {
        flex-wrap: wrap;
    }
    .dw-biz-stats {
        width: 100%;
        gap: 1rem;
        margin-top: 0.5rem;
        padding-left: calc(2.25rem + 0.875rem);
    }
}

/* Pagination nav inside paginated widgets. Neutral styling — no
   accent-tint, prefiere ser discreto en body context. */
.dw-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
}
.dw-page-btn {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 0.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dw-page-btn:hover:not([disabled]) {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.dw-page-btn[disabled] {
    color: #cbd5e1;
    cursor: not-allowed;
}
.dw-page-info {
    font-size: 0.8125rem;
    color: #64748b;
    min-width: 4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Page footer. Slim admin variant — copyright + logout. Visible on
   every host that proxies /dashboard. Spanish-only for now (CMS admin
   policy is Spanish-only — see project_translation_unification.md F4).
   Localisation lands when a translatable footer pattern arrives for
   admin pages. */
.dw-page-footer {
    border-top: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}
.dw-page-footer a {
    color: #2563eb;
    text-decoration: none;
}
.dw-page-footer a:hover { text-decoration: underline; }
.dw-page-footer-sep {
    color: #d1d5db;
}