/* ========================================
   MC Laboratorio — Global Theme Styles
   ======================================== */

/* ── Design Token System ── */
:root {
  --color-primary: #1B6CA8; --color-secondary: #00897B;
  --color-accent: #4db6ac;  --color-background: #F4F6F9;
  --color-surface: #FFFFFF; --color-text: #1A1F2E;
  --color-primary-fg: #FFFFFF; --color-secondary-fg: #FFFFFF;
  --color-border: #D8DDE5; --color-muted: #8A94A6;
  --color-hover-primary: #175F94; --color-hover-secondary: #00786C;
  --color-focus-ring: rgba(27, 108, 168, 0.3);
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-ui: 'DM Sans', sans-serif;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --radius-card: 16px; --radius-full: 9999px;
}

/* ── Body ── */
body {
    font-family: var(--mud-typography-default-family, var(--font-body));
    background-color: var(--color-background);
}

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

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ── Rounded UI overrides ── */
.mud-button-root { border-radius: var(--radius-full) !important; }
.mud-card, .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border-radius: var(--radius-card) !important;
}
.mud-card { overflow: hidden; }
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-md) !important; }
.mud-chip { border-radius: var(--radius-full) !important; }
.mud-alert { border-radius: var(--radius-md) !important; }
.mud-snackbar { border-radius: var(--radius-md) !important; }
.mud-dialog { border-radius: var(--radius-lg) !important; }

/* ── Card hover lift (skip stat cards — they have gradient bg) ── */
.mud-card:not(.stat-card) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mud-card:not(.stat-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10) !important;
}

/* ── Drawer scroll ── */
.mud-drawer .mud-drawer-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ── Sidebar nav links ── */
.mud-nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 8px;
    margin: 2px 8px;
    transform: translateX(0);
    transition: background 0.15s ease, color 0.15s ease, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mud-nav-link:hover,
.mud-nav-link.active {
    background: rgba(255, 255, 255, 0.10) !important;
    color: white !important;
}

.mud-nav-link.active {
    background: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
    border-left: 3px solid var(--color-accent);
    transform: translateX(4px);
}

.mud-nav-link .mud-icon-root {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.15s ease;
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link:hover .mud-icon-root {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Main content area ── */
.page-content {
    min-height: calc(100vh - 60px);
    animation: pageIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ═══════════════════════════════════════════════
   DATA TABLES — Global revamp
   Targets MudDataGrid + MudSimpleTable instances
═══════════════════════════════════════════════ */

/* ── MudDataGrid container ── */
.mud-data-grid {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    border: 1px solid var(--color-border) !important;
    border-top: 3px solid var(--color-primary) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease;
}
.mud-data-grid:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    transform: none !important;
}

/* ── Toolbar ── */
.mud-data-grid .mud-toolbar {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
    min-height: 52px !important;
}

/* Search pill shape inside toolbar */
.mud-data-grid .mud-toolbar .mud-input-outlined .mud-input-outlined-border {
    border-radius: 20px !important;
}
.mud-data-grid .mud-toolbar .mud-input-control {
    max-width: 240px;
}

/* ── Table headers ── */
.mud-data-grid .mud-table-head th,
.mud-data-grid .mud-header-cell {
    background-color: var(--color-background) !important;
    color: var(--color-muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--color-border) !important;
    white-space: nowrap;
    padding: 10px 16px !important;
}

/* ── Body cells ── */
.mud-data-grid .mud-table-body td {
    font-size: 0.87rem !important;
    padding: 9px 16px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent) !important;
    vertical-align: middle !important;
    transition: background 0.1s ease;
}

/* ── Row hover (override MudBlazor's default gray) ── */
.mud-data-grid .mud-table-body tr:hover td {
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) !important;
}

/* ── Striped rows ── */
.mud-data-grid.mud-table-striped .mud-table-body tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--color-background) 65%, var(--color-surface)) !important;
}

/* ── Pagination ── */
.mud-data-grid .mud-table-pagination {
    border-top: 1px solid var(--color-border) !important;
    background-color: var(--color-surface) !important;
    font-size: 0.8rem !important;
    color: var(--color-muted) !important;
}
.mud-data-grid .mud-table-pagination .mud-select-input,
.mud-data-grid .mud-table-pagination .mud-input-root {
    font-size: 0.8rem !important;
}

/* ── MudDataGrid table headers (legacy rule — kept for fallback) ── */
.mud-table-head th {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    background-color: var(--color-background);
}

/* ── MudSimpleTable ── */
.mud-simple-table {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    border-top: 3px solid var(--color-primary) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
}
.mud-simple-table thead th {
    background-color: var(--color-background) !important;
    color: var(--color-muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px 16px !important;
    white-space: nowrap;
}
.mud-simple-table tbody td {
    font-size: 0.87rem !important;
    padding: 9px 16px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent) !important;
    vertical-align: middle !important;
}
.mud-simple-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) !important;
}

/* ── Toolbar title + count badge ── */
.table-toolbar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    font-family: var(--font-ui);
}
.table-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 9px;
    border-radius: var(--radius-full);
    font-size: 0.71rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    min-width: 22px;
    line-height: 1.7;
    font-family: var(--font-ui);
}

/* ── Action buttons: dim until row hover ── */
.mud-data-grid .mud-table-body tr .table-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}
.mud-data-grid .mud-table-body tr:hover .table-actions {
    opacity: 1;
}

/* ── Status badge (Ventas) ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.status-badge.status-pagada  { background: rgba(46,125,50,0.10); color: #1b5e20; }
.status-badge.status-pagada::before  { background: #2e7d32; box-shadow: 0 0 4px #2e7d32; }
.status-badge.status-pendiente { background: rgba(245,127,23,0.10); color: #bf360c; }
.status-badge.status-pendiente::before { background: #f57f17; box-shadow: 0 0 4px #f57f17; }
.status-badge.status-cancelada { background: rgba(198,40,40,0.10); color: #b71c1c; }
.status-badge.status-cancelada::before { background: #c62828; box-shadow: 0 0 4px #c62828; }

/* ── Role badge (Usuarios) ── */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-ui);
}
.role-badge.role-admin   { background: rgba(245,127,23,0.12); color: #b45309; }
.role-badge.role-usuario { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }

/* ── Price badge (Servicios) ── */
.price-badge {
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-ui);
    letter-spacing: -0.01em;
}

/* ── Empty state ── */
.table-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 0.6rem;
    color: var(--color-muted);
    text-align: center;
}

/* ── Dashboard stat cards ── */
.stat-card-blue {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-teal {
    background: linear-gradient(135deg, var(--color-secondary) 0%, color-mix(in srgb, var(--color-secondary) 60%, #000) 100%) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-orange {
    background: linear-gradient(135deg, #e65c00 0%, #b34100 100%) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-blue:hover,
.stat-card-teal:hover,
.stat-card-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2) !important;
}

/* ── Page entrance animation ── */
@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Resultado / print view ── */
.resultado-container {
    background: #e8ecf0;
    padding: 2rem;
    min-height: 100vh;
}

.resultado-doc {
    background: white;
    width: 21cm;
    min-height: 29.7cm;
    margin: 0 auto;
    padding: 2.5cm 2cm;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    font-size: 11pt;
}

.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.header-left { flex: 1; }

.lab-title-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lab-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

.lab-subtitle {
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 0.12em;
}

.header-right { text-align: right; }

.lab-info {
    font-size: 0.8rem;
    color: #444;
    line-height: 1.6;
}

.header-bar {
    height: 3px;
    background: var(--color-primary);
    margin: 0.75rem 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.doc-date {
    text-align: right;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #333;
}

.patient-section { margin-bottom: 0.5rem; }
.patient-row { margin-bottom: 0.25rem; }

.patient-row-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    align-items: flex-start;
}

.label { font-weight: 600; margin-right: 0.25rem; }
.value { color: #222; }

.double-rule {
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    height: 4px;
    margin: 0.75rem 0;
}

/* ── Per-service section card ── */
.svc-section {
    margin-bottom: 1.25rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.svc-header {
    background: var(--color-primary, #1B6CA8);
    color: white;
    padding: 6px 12px;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.svc-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: 1;
}

.svc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 5px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.78rem;
    color: #444;
}

.svc-meta-item { display: flex; gap: 0.25rem; }
.svc-meta-label { font-weight: 600; color: #333; }

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.results-table thead tr { background-color: #e8e8e8; }

.results-table th {
    padding: 5px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #333;
}

.results-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.results-table tbody tr:last-child td { border-bottom: none; }

.col-estudio   { width: 40%; text-align: left; }
.col-resultado { width: 25%; text-align: center; }
.col-unidad    { width: 10%; text-align: center; color: #666; font-size: 0.8rem; }
.col-referencia{ width: 25%; text-align: center; color: #555; }

.text-center { text-align: center; }

.doc-footer { margin-top: auto; }

.footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.qr-block img {
    width: 2.5cm;
    height: 2.5cm;
}

.qr-label {
    font-size: 0.6rem;
    color: #888;
}

.firma-section {
    text-align: right;
    margin-bottom: 1rem;
}

.firma-line {
    border-top: 1px solid #333;
    width: 8cm;
    margin-left: auto;
    margin-bottom: 0.25rem;
}

.responsable {
    font-size: 0.85rem;
    font-weight: 600;
}

.cedula {
    font-size: 0.75rem;
    color: #666;
}

.address-footer {
    text-align: center;
    font-size: 0.75rem;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}

/* ── Print ── */
@media print {
    .no-print { display: none !important; }
    .mud-drawer, .mud-appbar { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    .resultado-container { background: white; padding: 0; }
    .resultado-doc { box-shadow: none; margin: 0; width: 100%; }
    body { background: white; }
}

/* ── Form validation ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ── Blazor error boundary ── */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 8px;
}

h1:focus { outline: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .resultado-container { padding: 0; }
    .resultado-doc {
        width: 100%;
        min-height: unset;
        padding: 1rem;
        box-shadow: none;
    }
    .patient-row-grid { flex-direction: column; }
}