:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #dbeafe;
    --on-primary: #ffffff;
    --secondary: #64748b;
    --success: #15803d;
    --danger: #b91c1c;
    --background: #f8fafc;
    --surface: #ffffff;
    --surface-muted: #f1f5f9;
    --surface-hover: #eef2ff;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --border: #cbd5e1;
    --focus-ring: rgba(37, 99, 235, 0.28);
    --overlay: rgba(15, 23, 42, 0.72);
    --radius: 10px;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.20);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --primary-soft: #172554;
    --on-primary: #0f172a;
    --secondary: #475569;
    --success: #4ade80;
    --danger: #f87171;
    --background: #0f172a;
    --surface: #172033;
    --surface-muted: #1e293b;
    --surface-hover: #25334a;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --border: #475569;
    --focus-ring: rgba(147, 197, 253, 0.38);
    --overlay: rgba(2, 6, 23, 0.82);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.48);
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Navigation */
header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

.btn-logout {
    background-color: var(--danger);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
}

/* Main content */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    min-height: calc(100vh - 180px);
}

/* Page header */
.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-secondary);
}

/* Cards */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Filters */
.filters {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.filter-group input,
.filter-group select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    min-width: 150px;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--secondary);
    color: white;
}

.btn-success {
    background-color: var(--success);
    color: white;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Table */
.table-container {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background-color: var(--background);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

tr:hover {
    background-color: var(--background);
}

tr:last-child td {
    border-bottom: none;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.pagination a,
.pagination span {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
}

.pagination span {
    color: #6b7280;
    font-size: 0.875rem;
}

.pagination a:hover {
    background-color: var(--background);
}

.pagination .current {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Detail page */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.detail-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.detail-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.detail-value {
    font-weight: 500;
}

/* Login page */
.login-container {
    max-width: 400px;
    margin: 4rem auto;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.error-message {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--danger);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

/* Connected Devices */
.connected-devices {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.devices-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.devices-icon {
    font-size: 1.25rem;
}

.devices-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.device-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--background);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.device-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.device-name {
    font-weight: 500;
}

.device-initials {
    color: var(--text-secondary);
}

.device-time {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.badge-info {
    background: #E3F2FD;
    color: #1565C0;
}

.badge-success {
    background: #E8F5E9;
    color: #2E7D32;
}

.badge-danger {
    background: #FFEBEE;
    color: #C62828;
}

/* Footer */
footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
    .filters {
        flex-direction: column;
    }

    .filter-group input,
    .filter-group select {
        width: 100%;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 0.875rem;
    }

    th, td {
        padding: 0.5rem;
    }
}

/* Fix logout button to look like nav link */
nav form {
    display: inline;
    margin: 0;
    padding: 0;
}

nav form .btn-logout {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════
   CERTIFICATE WIZARD & FORM STYLES
   ═══════════════════════════════════════════════════════════ */

/* --- Wizard Progress Bar --- */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.wizard-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
}

.wizard-progress-step .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--background);
    color: var(--text-secondary);
    border: 2px solid var(--border);
    transition: all 0.3s;
}

.wizard-progress-step.active .step-number {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.wizard-progress-step.completed .step-number {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.wizard-progress-step .step-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
}

.wizard-progress-step.active .step-label {
    color: var(--primary);
    font-weight: 600;
}

.wizard-progress-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    max-width: 120px;
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    transition: background 0.3s;
}

.wizard-progress-line.active {
    background: var(--success);
}

/* --- Wizard Container --- */
.wizard-container {
    max-width: 900px;
}

.wizard-step-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}

/* --- Equipment Type Selector --- */
.type-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
    background: var(--surface);
    cursor: pointer;
}

.type-card:hover {
    border-color: var(--primary);
    background: #f0f4ff;
}

.type-card.active {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.type-icon {
    font-size: 2rem;
}

.type-name {
    font-weight: 600;
    font-size: 1rem;
}

.type-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* --- Certificate Type Grid --- */
.cert-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.cert-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.25rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
    background: var(--surface);
    text-align: center;
    cursor: pointer;
}

.cert-type-card:hover:not(.disabled) {
    border-color: var(--primary);
    background: #f0f4ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.cert-type-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cert-type-card small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cert-type-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--primary);
    color: white;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

/* --- Form Select (shared) --- */
.form-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text-primary);
    width: 100%;
    transition: border-color 0.2s;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-select-sm {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}

/* --- Form Input --- */
.form-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text-primary);
    width: 100%;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input-sm {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}

/* --- Form Textarea --- */
.form-textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text-primary);
    width: 100%;
    resize: vertical;
    transition: border-color 0.2s;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* --- Certificate Info Header --- */
.cert-info-header {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #eff6ff, #f0f4ff);
    border-left: 4px solid var(--primary);
}

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

.cert-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cert-info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cert-info-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Certificate Section Title --- */
.cert-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* --- Certificate Form Layout --- */
.cert-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cert-form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.cert-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cert-form-group label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.cert-form-group label .required {
    color: var(--danger);
    font-weight: 700;
}

/* --- Checklists Grid --- */
.cert-checklists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cert-checklist-card {
    margin-bottom: 0;
}

.cert-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.checklist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.checklist-row:last-child {
    border-bottom: none;
}

.checklist-header-row {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

.checklist-item-label {
    font-size: 0.8125rem;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.checklist-row .form-select-sm {
    width: 85px;
    flex-shrink: 0;
}

/* CWPV has 29 checklist entries: keep the scan dense while preserving a
   full-width native select label ("NO OK" previously clipped at 85px). */
.cwpv-compact-checklist .checklist-row,
#checklistSistema .checklist-row,
#checklistFunciones .checklist-row {
    min-height: 44px;
    padding: 0.25rem 0;
}

.cwpv-compact-checklist .form-select-sm,
#checklistSistema .form-select-sm,
#checklistFunciones .form-select-sm {
    width: 120px;
    min-width: 120px;
    min-height: 38px;
    white-space: nowrap;
}

/* --- Checkbox Group --- */
.cert-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.cert-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
}

.cert-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.cert-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 0.5rem;
}

.cert-radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
}

.cert-radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* --- Image Preview --- */
.cert-image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 120px;
    padding: 1rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.cert-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

.cert-image-preview {
    position: relative;
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.cert-image-preview img {
    width: 140px;
    height: 105px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.cert-image-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    border: 2px solid white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cert-image-name {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Generate Button --- */
.cert-actions {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
}

.btn-lg:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Result Modal --- */
.cert-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.cert-modal-content {
    background: var(--surface);
    border-radius: 12px;
    padding: 2.5rem;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cert-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.cert-modal-icon.success {
    background: #e8f5e9;
    color: var(--success);
}

.cert-modal-icon.error {
    background: #ffebee;
    color: var(--danger);
}

.cert-modal-content h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.cert-modal-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.cert-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Responsive Certificate Form --- */
@media (max-width: 992px) {
    .cert-checklists-grid {
        grid-template-columns: 1fr;
    }

    .cert-form-row-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .cert-form-row {
        grid-template-columns: 1fr;
    }

    .cert-form-row-3 {
        grid-template-columns: 1fr;
    }

    .type-selector {
        grid-template-columns: 1fr;
    }

    .cert-type-grid {
        grid-template-columns: 1fr;
    }

    .cert-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .wizard-progress {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .wizard-progress-line {
        display: none;
    }
}

/* Draft items in wizard */
.draft-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 200px;
}

.draft-item:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.draft-item strong {
    font-size: 0.875rem;
    color: var(--primary);
}

.draft-item small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Draft status bar */
#draftStatusBar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   CORRIDA 6.4 — M55 / M56 (mobile usability + a11y)
   ADDITIVE SECTION ONLY: nothing above this line was edited.
   A few rules below intentionally override ONE property of an
   earlier equal-specificity block; each case is documented and
   was verified against the 16 certificate pages (E10).
   ═══════════════════════════════════════════════════════════ */

/* --- M56: wide tables scroll inside their container.
   `.table-container` above sets `overflow: hidden`, which CLIPS any
   table wider than the viewport (dashboard unusable on phones).
   This later rule overrides only overflow-x: horizontal scroll when
   the table is wider than the card, while overflow-y stays hidden
   (keeps the rounded-corner clipping). Zero visual change on
   desktop when the table fits — also for the 10 certificate pages
   that reuse this class, where overflowing tables were clipped and
   now become scrollable. */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- M56: the page itself must never scroll horizontally.
   Set on body (not on html) so the value propagates to the viewport
   per the CSS overflow spec and `position: sticky` on the header
   keeps working. */
body {
    overflow-x: hidden;
}

/* --- M56: responsive images by default. Element selector (0,0,1):
   class-based fixed sizes such as `.cert-image-preview img` (0,1,1)
   still win, so certificate thumbnails are unaffected. */
img {
    max-width: 100%;
    height: auto;
}

/* --- M55: accessible visually-hidden utility. For labels that must
   exist for screen readers without taking visual space. Never use
   `display: none` for that — it hides the label from assistive
   technology too. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- M56: nav collapses (wraps) on small screens with >= 44x44 px
   touch targets. CSS-only collapse: a hamburger button would need
   new markup/JS in _Layout.cshtml, out of scope for this file. */
@media (max-width: 768px) {
    nav {
        flex-wrap: wrap;
    }

    .nav-links {
        flex-wrap: wrap;
        width: 100%;
        gap: 0.25rem;
    }

    .nav-links a,
    nav form .btn-logout {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }
}

/* --- Contrast fixes (WCAG 2.x, 4.5:1 text). Each class below was
   verified as NOT used by any of the 16 certificate pages, so there
   is no visual regression there (E10). Failing pairs that ARE used
   by certificate pages were reported instead of changed. */

/* "Salir" button: `.btn-logout` sets `color: white !important` and
   the later `nav form .btn-logout` sets `background: none`, so the
   nav renders WHITE text on the white sticky header — invisible
   (1:1). #b91c1c keeps the danger semantics at 6.47:1 on white.
   `!important` is required to beat the existing
   `color: white !important`. */
nav form .btn-logout {
    color: #b91c1c !important;
}

:root[data-theme="dark"] nav form .btn-logout {
    color: #f87171 !important;
}

/* White on #22c55e measured 2.28:1. Darker green reaches 5.02:1.
   Used only by Index.cshtml and Patrones.cshtml. */
.btn-success {
    background-color: #15803d;
}

/* #ef4444 on #fef2f2 measured 3.44:1 → #b91c1c reaches 5.91:1.
   Used only by Login.cshtml. */
.error-message {
    color: #b91c1c;
}

/* --- Missing classes carried over from corrida 6.3 (E10 mandate).
   RXIPAC.cshtml uses them in 24 <h4> and 2 <h2>. Values copied
   VERBATIM from the page-local <style> block in RXIPAC.cshtml
   (@section Scripts) so both definitions agree; the local block can
   be dropped in corrida 6.4b. Same visual language as
   `.cert-section-title` / `.cert-info-label`. */
.cert-subsection-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
}

.cert-group-divider {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

/* badge-secondary was referenced by the dashboard pages (e.g. the
   "Inactivo" state on Tecnicos) but never defined. Neutral gray
   following the existing badge-* palette (Material 50 background /
   800 text, same as badge-info/success/danger). Appended at the end
   on purpose — corrida 6.4b, never reorder existing rules. */
.badge-secondary {
    background: #ECEFF1;
    color: #37474F;
}

/* ═══════════════════════════════════════════════════════════
   GenCert UI system — accessible density, icons and themes
   ═══════════════════════════════════════════════════════════ */

html {
    min-width: 320px;
    scroll-padding-top: 6rem;
}

body {
    min-height: 100dvh;
    font-size: 1rem;
    line-height: 1.55;
    accent-color: var(--primary);
    transition: background-color 180ms ease, color 180ms ease;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
select,
input[type="checkbox"],
input[type="radio"] {
    touch-action: manipulation;
}

a,
button,
[role="button"] {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

main:focus {
    outline: none;
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 1px 0 var(--border);
    backdrop-filter: blur(12px);
}

.site-nav {
    max-width: 1440px;
    min-height: 68px;
    padding: 0.55rem clamp(1rem, 2vw, 2rem);
    gap: 1rem;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: max-content;
    color: var(--text-primary);
    text-decoration: none;
}

.nav-brand img {
    width: 156px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

:root[data-theme="dark"] .nav-brand img {
    filter: brightness(0) invert(1);
}

.nav-brand span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.nav-brand strong {
    color: var(--primary);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.nav-brand small {
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 500;
}

.nav-links {
    gap: 0.2rem;
    margin-left: auto;
}

.nav-links a,
.btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 40px;
    padding: 0.48rem 0.58rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] {
    background: var(--primary-soft);
    color: var(--primary-dark) !important;
}

.nav-links .nav-generate {
    background: var(--primary);
    color: var(--on-primary) !important;
}

.nav-links .nav-generate:hover,
.nav-links .nav-generate.active {
    background: var(--primary-dark);
    color: var(--on-primary) !important;
}

.btn-logout:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger) !important;
}

.nav-logout-form {
    display: inline-flex;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    order: 3;
}

.icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-secondary);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.icon-button:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.theme-icon-sun,
:root[data-theme="dark"] .theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-icon-sun {
    display: block;
}

.nav-menu-toggle {
    display: none;
}

main {
    max-width: 1440px;
    min-height: calc(100dvh - 140px);
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 2rem);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    color: var(--text-primary);
    font-size: clamp(1.65rem, 2.5vw, 2rem);
    font-weight: 720;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.page-header p {
    max-width: 72ch;
    font-size: 1rem;
}

.card,
.stat-card,
.connected-devices,
.filters,
.table-container,
.wizard-progress {
    box-shadow: var(--shadow);
}

.card {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.stat-card {
    padding: 0.9rem 1rem;
    text-align: left;
}

.stat-value {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    font-weight: 550;
}

.filters {
    gap: 0.75rem;
    padding: 0.85rem;
}

.filter-group {
    flex: 0 1 250px;
    gap: 0.3rem;
}

.filter-group label,
.cert-form-group label,
.admin-form-group label,
.eq-field label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 650;
}

.filter-group input,
.filter-group select,
.form-input,
.form-select,
.form-textarea,
.login-form input {
    min-height: 38px;
    padding: 0.4rem 0.68rem;
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.35;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.filter-group input,
.filter-group select {
    width: min(100%, 260px);
    min-width: 180px;
}

.form-textarea {
    min-height: 88px;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.78;
}

.filter-group input:focus,
.filter-group select:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.login-form input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn {
    min-height: 38px;
    padding: 0.42rem 0.85rem;
    border: 1px solid transparent;
    font-size: 0.925rem;
    font-weight: 650;
    line-height: 1.2;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    border-color: var(--border);
    background: var(--surface-muted);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
    color: var(--primary-dark);
}

.btn-success {
    background: var(--success);
    color: #ffffff;
}

.btn-danger,
.pv-danger-btn {
    background: var(--danger);
    color: #ffffff;
}

.btn-sm {
    min-height: 34px;
    padding: 0.32rem 0.62rem;
    font-size: 0.85rem;
}

.btn:disabled,
button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.table-container {
    background: var(--surface);
}

table {
    font-size: 0.95rem;
}

th,
td {
    padding: 0.65rem 0.8rem;
    vertical-align: middle;
}

th {
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-muted) 45%, transparent);
}

tbody tr:hover {
    background: var(--surface-hover);
}

td,
.detail-value,
.cert-info-value {
    overflow-wrap: anywhere;
}

.pagination {
    flex-wrap: wrap;
    gap: 0.55rem;
}

.pagination a,
.pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
}

.badge {
    border: 1px solid currentColor;
    font-size: 0.8rem;
    line-height: 1.15;
    white-space: nowrap;
}

.devices-icon {
    display: inline-flex;
    color: var(--primary);
}

.draft-status-icon {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    color: var(--text-secondary);
    font-weight: 800;
}

.draft-status-icon.is-success {
    color: var(--success);
}

.draft-status-icon.is-success::before {
    width: 0.65rem;
    height: 0.35rem;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    transform: rotate(-45deg) translateY(-1px);
}

.draft-status-icon.is-error {
    color: var(--danger);
}

.draft-status-icon.is-error::before {
    content: "!";
}

/* The whole bar reads as an error, not just its icon (pages outside .gc-workflow). */
#draftStatusBar:has(.draft-status-icon.is-error) {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--surface));
}

.pdf-link {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary-dark);
    text-decoration: none;
}

.pdf-link:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.device-item {
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

.device-time,
.draft-item small,
.cert-type-card small,
.type-desc,
.cert-info-label,
.cert-subsection-title,
.patron-pdf-actual,
.patron-checkbox-row,
.admin-text-muted,
.admin-hint,
.pv-hint {
    font-size: 0.82rem;
}

.wizard-container {
    max-width: 1080px;
}

.wizard-progress {
    padding: 1rem;
}

.wizard-progress-step .step-label {
    font-size: 0.84rem;
}

.wizard-step-title,
.cert-section-title {
    font-size: 1.08rem;
    font-weight: 700;
}

.type-card,
.cert-type-card {
    min-height: 132px;
    justify-content: center;
}

.type-card:hover,
.cert-type-card:hover:not(.disabled) {
    background: var(--surface-hover);
}

.type-card.active {
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.type-icon {
    display: inline-flex;
    color: var(--primary);
}

.type-icon .icon {
    width: 2rem;
    height: 2rem;
}

/* Action language stays consistent across every dashboard table. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
}

.admin-actions-cell,
.tecnico-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cell-nowrap {
    white-space: nowrap;
    overflow-wrap: normal;
}

.action-edit .icon {
    color: var(--primary-dark);
}

.action-delete .icon,
.action-download .icon,
.btn-primary .icon,
.btn-danger .icon,
.btn-success .icon {
    color: currentColor;
}

/* Compact service selection: client, equipment and case are one scannable row. */
.wizard-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.wizard-selection-card {
    min-width: 0;
    margin: 0;
}

.wizard-selection-card.is-pending {
    border-style: dashed;
    box-shadow: none;
}

.wizard-field {
    max-width: none;
    width: 100%;
}

.wizard-field select,
.wizard-field input {
    width: 100%;
    min-width: 0;
}

.wizard-title-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    place-items: center;
    border-radius: 8px;
    vertical-align: middle;
}

.wizard-title-icon .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.icon-client {
    background: #dbeafe;
    color: #1d4ed8;
}

.icon-equipment {
    background: #dcfce7;
    color: #15803d;
}

.icon-case {
    background: #fef3c7;
    color: #b45309;
}

.icon-certificate {
    background: #f3e8ff;
    color: #7e22ce;
}

.wizard-prompt,
.wizard-field-hint,
.wizard-step-help {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.wizard-field-hint {
    display: block;
    margin-top: 0.35rem;
}

.wizard-step-help {
    margin: -0.35rem 0 1rem;
}

.type-card .type-icon {
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.type-card-rx .type-icon {
    background: #fee2e2;
    color: #dc2626;
}

.type-card-cw .type-icon {
    background: #dcfce7;
    color: #15803d;
}

.type-card-dm .type-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.cert-type-card .cert-type-badge {
    color: #1d4ed8;
    background: #dbeafe;
}

.cert-type-card:nth-child(3n + 2) .cert-type-badge {
    color: #15803d;
    background: #dcfce7;
}

.cert-type-card:nth-child(3n) .cert-type-badge {
    color: #b45309;
    background: #fef3c7;
}

/* Save is always reachable on long certificate forms without covering content. */
.cert-actions {
    padding-bottom: 5.25rem;
}

#btnSaveDraft {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 90;
    border-color: var(--primary);
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: var(--shadow-lg);
}

#btnSaveDraft:hover {
    background: var(--primary-soft);
}

#draftStatusBar {
    position: sticky;
    top: 76px;
    z-index: 80;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
}

.cert-info-header {
    background: linear-gradient(135deg, var(--primary-soft), var(--surface));
}

.checklist-item-label,
.cert-checkbox-label,
.cert-radio-label {
    font-size: 0.95rem;
}

.cert-checkbox-label input[type="checkbox"],
.cert-radio-label input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.cert-image-preview-container,
.device-item,
.draft-item,
#draftStatusBar,
.pv-item-form {
    background: var(--surface-muted);
}

.cert-modal,
.admin-modal,
.eq-modal-overlay,
.patron-modal-overlay,
.pv-modal-overlay {
    background: var(--overlay) !important;
}

.cert-modal-content,
.admin-modal-content,
.eq-modal-box,
.patron-modal-box,
.pv-modal-box {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg) !important;
}

.cert-modal-icon .icon {
    width: 2rem;
    height: 2rem;
}

.cert-image-remove,
.pv-modal-close,
.eq-modal-close {
    min-width: 32px;
    min-height: 32px;
}

.error-message,
.tecnico-form-error,
.admin-form-error,
.eq-form-error,
.pv-alert-error,
#reeditWarningBar {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border)) !important;
    background: color-mix(in srgb, var(--danger) 13%, var(--surface)) !important;
    color: var(--danger) !important;
}

.login-form {
    gap: 0.45rem;
}

.login-form label {
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 650;
}

.eq-form-notice,
.pv-alert-success {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border)) !important;
    background: color-mix(in srgb, var(--success) 13%, var(--surface)) !important;
    color: var(--success) !important;
}

.pv-chip {
    border: 1px solid var(--primary);
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
}

:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .nav-links .nav-generate {
    color: var(--on-primary) !important;
}

:root[data-theme="dark"] .btn-success {
    color: #052e16;
}

:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .pv-danger-btn {
    color: #450a0a;
}

:root[data-theme="dark"] .badge-info {
    background: #172554;
    color: #bfdbfe;
}

:root[data-theme="dark"] .badge-success {
    background: #052e16;
    color: #bbf7d0;
}

:root[data-theme="dark"] .badge-danger {
    background: #450a0a;
    color: #fecaca;
}

:root[data-theme="dark"] .badge-secondary {
    background: #1e293b;
    color: #e2e8f0;
}

:root[data-theme="dark"] #tecFirmaPreviewImg {
    background: #ffffff;
}

footer {
    background: var(--surface);
}

@media (max-width: 1100px) {
    .site-nav {
        flex-wrap: wrap;
    }

    .nav-actions {
        margin-left: auto;
        order: 1;
    }

    .nav-menu-toggle {
        display: inline-grid;
    }

    .nav-links {
        display: none;
        width: 100%;
        margin: 0;
        order: 2;
        padding-top: 0.4rem;
        border-top: 1px solid var(--border);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .nav-links.is-open {
        display: grid;
    }

    .nav-links a,
    .nav-logout-form,
    .btn-logout {
        width: 100%;
    }

    .nav-links a,
    .btn-logout {
        justify-content: flex-start;
        min-height: 44px;
        padding-inline: 0.75rem;
    }
}

@media (max-width: 768px) {
    .site-nav {
        padding: 0.55rem 0.75rem;
    }

    .nav-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    main {
        padding: 1.1rem 0.75rem;
    }

    .filters {
        align-items: stretch;
    }

    .filter-group,
    .filter-group input,
    .filter-group select {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }

    .filter-group input,
    .filter-group select,
    .form-input,
    .form-select,
    .btn,
    .pagination a,
    .pagination span {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
    }

    .card {
        margin-bottom: 1rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cert-info-grid {
        grid-template-columns: 1fr;
    }

    .wizard-progress-step {
        min-width: 72px;
    }

    .wizard-selection-grid {
        grid-template-columns: 1fr;
    }

    #btnSaveDraft {
        right: 0.75rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .cert-modal-content,
    .admin-modal-content,
    .eq-modal-box,
    .patron-modal-box,
    .pv-modal-box {
        padding: 1.1rem;
    }
}

@media (max-width: 430px) {
    .nav-brand img {
        width: 136px;
        height: auto;
        padding: 0;
    }

    .nav-brand small {
        display: none;
    }

    .nav-links {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .page-header h1 {
        font-size: 1.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Expired-session notice (site.js). Fixed at the bottom so it never covers the
   form header, full width on phones. */
.gc-session-expired {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(40rem, calc(100% - 2rem));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.875rem 1rem;
    background: var(--surface, #fff);
    color: var(--text-primary, #0f172a);
    border: 2px solid var(--danger, #b91c1c);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-lg, 0 20px 45px rgba(15, 23, 42, 0.2));
}

.gc-session-expired p {
    flex: 1 1 100%;
    margin: 0;
    font-weight: 600;
}

.gc-session-expired a {
    color: var(--primary, #1d4ed8);
    font-weight: 600;
}