/*
 * 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; }

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}