/* ============================================================
   PAF · WhatsApp Console — Sistema de diseño
   Identidad tomada del logo oficial: gradiente azul -> violeta.
   ============================================================ */
:root {
    /* Marca */
    --brand-blue: #2563eb;
    --brand-blue-700: #1d4ed8;
    --brand-violet: #7c3aed;
    --brand-violet-700: #6d28d9;
    --brand-grad: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --brand-grad-strong: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    --brand-soft: rgba(124, 58, 237, .10);
    --brand-ring: rgba(99, 102, 241, .28);

    /* Superficies */
    --bg: #f3f5fb;
    --card: #ffffff;
    --border: #e5e7f1;
    --border-strong: #d7dbeb;
    --text: #1b2440;
    --muted: #6b7392;

    /* Sidebar (oscuro) */
    --side-bg: #0d1130;
    --side-text: #c7cbe6;

    /* Semánticos */
    --success: #10b981; --success-bg: #d1fae5; --success-fg: #065f46;
    --warning: #f59e0b; --warning-bg: #fef3c7; --warning-fg: #92400e;
    --danger: #ef4444; --danger-bg: #fee2e2; --danger-fg: #991b1b;
    --info: #3b82f6; --info-bg: #dbeafe; --info-fg: #1e40af;

    /* Radios y sombras */
    --r-sm: 9px; --r: 13px; --r-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow: 0 8px 26px rgba(27, 36, 64, .09);
    --shadow-lg: 0 22px 60px rgba(13, 17, 48, .28);
}

* { box-sizing: border-box; }

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link { color: var(--brand-blue-700); text-decoration: none; }
a:hover { color: var(--brand-violet-700); }

h1:focus { outline: none; }

/* ---------- Encabezado de página ---------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em;
}

.page-header p {
    color: var(--muted);
    margin: .35rem 0 0;
}

/* ---------- Superficies / tarjetas ---------- */
.admin-table-wrap,
.edit-surface,
.empty-state,
.qr-surface {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.admin-table-wrap { overflow: auto; }

.edit-surface { padding: 1.35rem; margin-bottom: 1.25rem; }

.empty-state {
    padding: 2.4rem 1.6rem;
    text-align: center;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.empty-state h2 { font-size: 1.1rem; margin: 0; }

/* ---------- Botones ---------- */
.btn {
    border-radius: var(--r-sm);
    font-weight: 600;
    padding: .45rem .95rem;
    transition: transform .04s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    color: #fff;
    border: none;
    background-image: var(--brand-grad);
    box-shadow: 0 8px 18px rgba(99, 102, 241, .30);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-image: var(--brand-grad-strong);
    box-shadow: 0 10px 22px rgba(99, 102, 241, .38);
}

.btn-outline-primary {
    color: var(--brand-violet-700);
    border-color: #cdb8f5;
    background: #fff;
}

.btn-outline-primary:hover {
    background: var(--brand-soft);
    color: var(--brand-violet-700);
    border-color: var(--brand-violet);
}

.btn-outline-secondary {
    color: #4b5573;
    border-color: var(--border-strong);
    background: #fff;
}

.btn-outline-secondary:hover {
    background: #f3f4fa;
    color: #1b2440;
    border-color: #c3c8dc;
}

.btn-sm { padding: .3rem .65rem; font-size: .82rem; }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    border-color: var(--brand-violet);
    box-shadow: 0 0 0 .18rem var(--brand-ring);
}

.form-check-input:checked {
    background-color: var(--brand-violet);
    border-color: var(--brand-violet);
}

/* ---------- Formularios ---------- */
.content { padding-top: 1.2rem; }

.form-control {
    border-radius: var(--r-sm);
    border-color: var(--border-strong);
    color: var(--text);
}

.form-control::placeholder { color: #9aa1bd; }

.form-section { margin-bottom: 1.4rem; }

.form-section h2,
.edit-surface h2 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: .95rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.form-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 1rem;
}

.form-grid label,
.form-stack label {
    display: grid;
    gap: .35rem;
    font-weight: 600;
    color: #344054;
    align-content: start;
}

.form-grid small,
.form-grid .form-text {
    color: var(--muted);
    font-weight: 400;
}

.form-grid .form-control { min-height: 40px; }
.form-grid input.form-control,
.edit-surface input.form-control { height: 40px; min-height: 40px; }

.toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.toggle-row label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: #344054;
}

.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.form-text {
    display: block;
    margin-top: 4px;
    font-size: .82rem;
    color: var(--muted);
}

/* ---------- Tablas ---------- */
.admin-table { min-width: 1080px; margin-bottom: 0; }

.admin-table th {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #f7f8fd;
    border-bottom-color: var(--border);
    padding: .7rem .75rem;
}

.admin-table td { vertical-align: middle; padding: .7rem .75rem; }

.admin-table tbody tr { transition: background-color .12s ease; }
.admin-table tbody tr:hover { background: #fafbff; }

.muted { color: var(--muted); font-size: .82rem; }

.action-cell { white-space: nowrap; }
.action-cell .btn { margin: .12rem; }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .38em .72em;
    letter-spacing: .01em;
}

.text-bg-success { background-color: var(--success-bg) !important; color: var(--success-fg) !important; }
.text-bg-secondary { background-color: #eceef6 !important; color: #5b6481 !important; }
.text-bg-info { background-color: var(--info-bg) !important; color: var(--info-fg) !important; }

/* ---------- Alertas ---------- */
.alert { border-radius: var(--r); border: 1px solid transparent; }
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: #a7f3d0; }
.alert-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: #fecaca; }
.alert-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: #fde68a; }
.alert-info { background: var(--info-bg); color: var(--info-fg); border-color: #bfdbfe; }

.api-key-alert { display: grid; gap: .5rem; }

/* ---------- Login ---------- */
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 540px at 12% -10%, rgba(37, 99, 235, .28), transparent 58%),
        radial-gradient(1000px 680px at 112% 118%, rgba(124, 58, 237, .32), transparent 55%),
        #0b0f29;
}

.login-panel {
    width: min(420px, 100%);
    padding: 2.1rem 1.9rem;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.login-brand {
    display: grid;
    justify-items: center;
    gap: .55rem;
    margin-bottom: .35rem;
}

.login-logo { width: 92px; height: auto; display: block; }

.login-kicker {
    display: block;
    text-align: center;
    color: var(--brand-violet-700);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.login-panel h1 {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0;
    text-align: center;
    letter-spacing: -.01em;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-copy {
    color: var(--muted);
    text-align: center;
    margin: .55rem 0 1.4rem;
    font-size: .9rem;
}

.form-stack { display: grid; gap: 1rem; }
.form-stack .btn-primary { padding: .6rem; font-size: 1rem; margin-top: .25rem; }

/* Marca cuadrada (fallback / usos varios) */
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 9px;
    background-image: var(--brand-grad);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
}

.brand-mark.large { width: 3rem; height: 3rem; font-size: .95rem; }

/* ---------- QR ---------- */
.qr-surface { display: inline-flex; padding: 1rem; }
.qr-surface img { width: min(320px, 80vw); height: auto; }

.qr-box {
    display: inline-flex;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    margin-top: .5rem;
}

/* ---------- Caja JSON / estado ---------- */
.json-box {
    background: #0d1130;
    color: #c7d2fe;
    border: 1px solid #1e2456;
    border-radius: var(--r);
    padding: 1rem;
    overflow: auto;
    min-height: 160px;
    font-size: .82rem;
}

/* ---------- Validación ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: .85rem; }

.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    color: #fff;
    border-radius: var(--r);
}

.blazor-error-boundary::after { content: "Ocurrió un error."; }