* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f3f6fb;
    color: #172033;
    font-family: Arial, Helvetica, sans-serif;
}

.topbar {
    background: #101827;
    color: #ffffff;
    padding: 18px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
}

.topbar h1 {
    margin: 0;
    font-size: 22px;
}

.topbar p {
    margin: 3px 0 0;
    color: #cbd5e1;
    font-size: 14px;
}

.topbar nav {
    display: flex;
    gap: 14px;
}

.topbar nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.topbar nav a:hover {
    text-decoration: underline;
}

.container {
    padding: 32px 40px;
}

.hero {
    background: #ffffff;
    border-radius: 20px;
    padding: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
}

.hero h2 {
    margin: 8px 0 10px;
    font-size: 34px;
}

.hero p {
    max-width: 780px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.5;
}

.hero-actions,
.header-actions,
.form-actions,
.actions-cell {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cards-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.card,
.panel,
.form-card,
.empty-state,
.table-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.card {
    padding: 24px;
}

.card h3 {
    margin: 0 0 8px;
}

.card p {
    color: #64748b;
    line-height: 1.45;
}

.page-header {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.page-header h2 {
    margin: 7px 0 5px;
    font-size: 30px;
}

.page-header p {
    margin: 0;
    color: #64748b;
}

.eyebrow {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #2563eb;
}

.btn-primary,
.btn-secondary,
.btn-small,
.btn-danger {
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
    padding: 11px 16px;
}

.btn-secondary {
    background: #e5e7eb;
    color: #111827;
    padding: 11px 16px;
}

.btn-small {
    background: #0f766e;
    color: #ffffff;
    padding: 8px 12px;
    font-size: 13px;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
    padding: 8px 12px;
    font-size: 13px;
}

.table-card {
    overflow: hidden;
}

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

th,
td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

th {
    background: #f8fafc;
    font-size: 13px;
    color: #334155;
}

td small {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

.actions-cell form {
    margin: 0;
}

.badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
}

.badge.processed {
    background: #dcfce7;
    color: #166534;
}

.badge.uploaded {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.failed {
    background: #fee2e2;
    color: #991b1b;
}

.empty-state {
    padding: 34px;
    text-align: center;
}

.empty-state p {
    color: #64748b;
}

.form-card {
    padding: 28px;
}

.form-group {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

label {
    display: block;
    margin-bottom: 7px;
    font-weight: 800;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 13px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 15px;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(37, 99, 235, 0.25);
    border-color: #2563eb;
}

small {
    color: #64748b;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    margin-bottom: 22px;
}

.panel {
    padding: 24px;
}

.panel h3 {
    margin: 0 0 16px;
}

.data-list {
    margin: 0;
}

.data-list div {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.data-list dt {
    color: #64748b;
    font-weight: 800;
}

.data-list dd {
    margin: 0;
}

.check-list {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    line-height: 1.7;
}

.section-title {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.section-title h3 {
    margin: 0;
}

.section-title p {
    margin: 5px 0 0;
    color: #64748b;
}

.pages-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-box {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

.page-box h4 {
    margin: 0;
    background: #f8fafc;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.page-box pre {
    margin: 0;
    padding: 16px;
    white-space: pre-wrap;
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    max-height: 520px;
    overflow: auto;
    background: #ffffff;
}

.muted {
    color: #64748b;
    padding: 16px;
}

@media (max-width: 900px) {
    .topbar,
    .hero,
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cards-grid,
    .detail-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 24px;
    }

    .topbar {
        padding: 18px 24px;
    }

    .topbar nav {
        flex-wrap: wrap;
    }
}

.analysis-panel {
    margin-bottom: 22px;
}

.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.analysis-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    background: #ffffff;
}

.analysis-card h4 {
    margin: 0 0 14px;
    font-size: 18px;
}

.full-width {
    grid-column: 1 / -1;
}

.mini-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mini-table th,
.mini-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.mini-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mini-table small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    line-height: 1.4;
}

.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.timeline-list li:last-child {
    border-bottom: none;
}

.timeline-list strong {
    display: block;
    margin-bottom: 4px;
}

.timeline-list span {
    display: block;
    color: #2563eb;
    font-weight: 800;
    margin-bottom: 4px;
}

.timeline-list small {
    color: #64748b;
    line-height: 1.4;
}

.requirements-list,
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.requirement-item,
.document-item {
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    padding: 13px;
    background: #f8fafc;
}

.requirement-item strong,
.document-item strong {
    display: block;
    margin: 8px 0 4px;
}

.requirement-item em {
    display: inline-block;
    color: #166534;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 4px;
}

.requirement-item p,
.document-item p {
    margin: 6px 0 0;
    color: #64748b;
    line-height: 1.45;
}

.document-item span {
    display: inline-flex;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.tag {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.muted-inline {
    color: #64748b;
    margin: 0;
}

.badge.analyzed {
    background: #ede9fe;
    color: #5b21b6;
}

@media (max-width: 900px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

.form-section-title {
    margin: 26px 0 18px;
    padding: 16px 18px;
    border-left: 5px solid #2563eb;
    background: #f8fafc;
    border-radius: 12px;
}

.form-section-title:first-child {
    margin-top: 0;
}

.form-section-title h3 {
    margin: 0 0 5px;
    font-size: 18px;
}

.form-section-title p {
    margin: 0;
    color: #64748b;
}

.three-cols {
    grid-template-columns: 0.6fr 1fr 1fr;
}

.text-block {
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.text-block:last-child {
    border-bottom: none;
}

.text-block h4 {
    margin: 0 0 8px;
    color: #111827;
}

.text-block p {
    margin: 0;
    color: #334155;
    white-space: pre-wrap;
    line-height: 1.6;
}

.badge.draft {
    background: #e5e7eb;
    color: #111827;
}

.badge.in_review {
    background: #fef3c7;
    color: #92400e;
}

.badge.ready {
    background: #dcfce7;
    color: #166534;
}

.badge.submitted {
    background: #dbeafe;
    color: #1d4ed8;
}

@media (max-width: 900px) {
    .three-cols {
        grid-template-columns: 1fr;
    }
}

.validation-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
}

.validation-pill.ok {
    background: #dcfce7;
    color: #166534;
}

.validation-pill.warning {
    background: #fef3c7;
    color: #92400e;
}

.validation-pill.error {
    background: #fee2e2;
    color: #991b1b;
}

.validation-pill.not_validated {
    background: #e5e7eb;
    color: #374151;
}

.validation-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.validation-counter {
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.validation-counter strong {
    display: block;
    font-size: 30px;
    margin-bottom: 4px;
}

.validation-counter span {
    color: #64748b;
    font-weight: 800;
}

.validation-counter.ok strong {
    color: #166534;
}

.validation-counter.warning strong {
    color: #92400e;
}

.validation-counter.error strong {
    color: #991b1b;
}

.validations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.validation-item {
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.validation-item.ok {
    border-left: 6px solid #16a34a;
}

.validation-item.warning {
    border-left: 6px solid #f59e0b;
}

.validation-item.error {
    border-left: 6px solid #dc2626;
}

.validation-item h4 {
    margin: 9px 0 6px;
}

.validation-item p {
    margin: 0 0 8px;
    color: #334155;
    line-height: 1.5;
}

.validation-item small {
    color: #64748b;
    font-weight: 700;
}

.validation-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.validation-status.ok {
    background: #dcfce7;
    color: #166534;
}

.validation-status.warning {
    background: #fef3c7;
    color: #92400e;
}

.validation-status.error {
    background: #fee2e2;
    color: #991b1b;
}

.empty-validation {
    padding: 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
}

.empty-validation h4 {
    margin: 0 0 8px;
}

.empty-validation p {
    margin: 0;
    color: #64748b;
}

@media (max-width: 900px) {
    .validation-summary-grid {
        grid-template-columns: 1fr;
    }
}

.budget-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.budget-counter {
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.budget-counter strong {
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
    color: #111827;
}

.budget-counter span {
    color: #64748b;
    font-weight: 800;
}

.budget-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.budget-rule {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.budget-rule strong {
    display: block;
    margin-bottom: 8px;
}

.budget-rule span {
    color: #64748b;
    font-weight: 800;
}

.budget-rule.ok {
    border-left: 6px solid #16a34a;
}

.budget-rule.error {
    border-left: 6px solid #dc2626;
}

.table-card.flat {
    box-shadow: none;
    border: 1px solid #e5e7eb;
}

.empty-state.inner {
    box-shadow: none;
    border: 1px dashed #cbd5e1;
}

@media (max-width: 900px) {
    .budget-summary-grid,
    .budget-rules-grid {
        grid-template-columns: 1fr;
    }
}

.activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.activity-counter {
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.activity-counter strong {
    display: block;
    font-size: 26px;
    margin-bottom: 6px;
    color: #111827;
}

.activity-counter span {
    color: #64748b;
    font-weight: 800;
}

.activities-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.activity-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.activity-card-header h4 {
    margin: 8px 0 0;
    font-size: 20px;
}

.activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.activity-field {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
}

.activity-field strong {
    display: block;
    margin-bottom: 7px;
}

.activity-field p {
    margin: 0;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
}

.activity-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
}

.timeline-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.timeline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.timeline-table th,
.timeline-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 10px;
    text-align: center;
}

.timeline-table th:first-child,
.timeline-table td:first-child {
    text-align: left;
    min-width: 280px;
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 1;
}

.timeline-table small {
    display: block;
    color: #64748b;
    margin-top: 4px;
}

.timeline-dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-block;
    border: 1px solid #cbd5e1;
    background: #ffffff;
}

.timeline-dot.active {
    background: #2563eb;
    border-color: #2563eb;
}

@media (max-width: 1100px) {
    .activity-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .activity-summary-grid,
    .activity-grid {
        grid-template-columns: 1fr;
    }

    .activity-card-header {
        flex-direction: column;
    }
}

.documents-help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.document-help-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    background: #f8fafc;
}

.document-help-card strong {
    display: block;
    margin-bottom: 7px;
    color: #111827;
    font-size: 18px;
}

.document-help-card span {
    color: #64748b;
    line-height: 1.5;
}

.badge.generated {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 900px) {
    .documents-help-grid {
        grid-template-columns: 1fr;
    }
}

.document-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.document-readiness {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.document-readiness.ready {
    background: #dcfce7;
    color: #166534;
}

.document-readiness.warning {
    background: #fef3c7;
    color: #92400e;
}

.document-readiness.error {
    background: #fee2e2;
    color: #991b1b;
}

.readiness-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.readiness-item {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.readiness-item.ok {
    border-left: 6px solid #16a34a;
}

.readiness-item.missing {
    border-left: 6px solid #dc2626;
}

.readiness-item h4 {
    margin: 8px 0 5px;
}

.readiness-item p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.readiness-ok {
    color: #166534;
    white-space: nowrap;
}

.readiness-missing {
    color: #991b1b;
    white-space: nowrap;
}

.documents-help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.document-help-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    background: #f8fafc;
}

.document-help-card strong {
    display: block;
    margin-bottom: 7px;
    color: #111827;
    font-size: 18px;
}

.document-help-card span {
    display: block;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 12px;
}

.badge.generated {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 900px) {
    .documents-help-grid,
    .document-readiness-grid {
        grid-template-columns: 1fr;
    }

    .readiness-item {
        flex-direction: column;
    }
}

.ai-idea {
    white-space: pre-wrap;
    line-height: 1.6;
    color: #334155;
}

.error-text {
    color: #991b1b;
    background: #fee2e2;
    border-radius: 12px;
    padding: 14px;
    white-space: pre-wrap;
}

.badge.converted {
    background: #dcfce7;
    color: #166534;
}

.badge.failed {
    background: #fee2e2;
    color: #991b1b;
}

.document-help-card.featured {
    border: 2px solid #2563eb;
    background: #eff6ff;
}

.document-help-card.featured strong {
    color: #1d4ed8;
}

.document-help-card form {
    margin-top: 12px;
}

.badge.final_synthesis_docx,
.badge.final_synthesis_pdf {
    background: #dbeafe;
    color: #1d4ed8;
}

.ai-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ai-section-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    background: #f8fafc;
}

.ai-section-card h4 {
    margin: 0 0 8px;
    color: #111827;
}

.ai-section-card p {
    margin: 0 0 14px;
    color: #64748b;
    line-height: 1.5;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ai-text-box {
    white-space: pre-wrap;
    line-height: 1.7;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    min-height: 260px;
    color: #334155;
}

.ai-text-box.original {
    background: #f8fafc;
}

.ai-text-box.suggested {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.badge.applied {
    background: #dcfce7;
    color: #166534;
}

.badge.generated {
    background: #dbeafe;
    color: #1d4ed8;
}

@media (max-width: 1000px) {
    .ai-section-grid,
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.ai-text-box.compact {
    min-height: 180px;
    max-height: 360px;
    overflow-y: auto;
}

.badge.edited {
    background: #fef3c7;
    color: #92400e;
}

.badge.profile-linked {
    background: #dcfce7;
    color: #166534;
}

.applicant-profile-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    background: #f8fafc;
}

.applicant-profile-card strong {
    display: block;
    margin-bottom: 6px;
}

.applicant-profile-card span {
    display: block;
    color: #64748b;
}

.quality-blocked {
    border-left: 6px solid #dc2626;
    background: #fef2f2;
}

.quality-pill {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.quality-pill.ok {
    background: #dcfce7;
    color: #166534;
}

.quality-pill.warning {
    background: #fef3c7;
    color: #92400e;
}

.quality-pill.error {
    background: #fee2e2;
    color: #991b1b;
}

.quality-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.quality-counter {
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.quality-counter strong {
    display: block;
    font-size: 28px;
    margin-bottom: 6px;
}

.quality-counter.error strong {
    color: #991b1b;
}

.quality-counter.warning strong {
    color: #92400e;
}

.quality-counter.total strong {
    color: #1d4ed8;
}

.quality-counter span {
    color: #64748b;
    font-weight: 800;
}

.quality-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quality-item {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.quality-item.error {
    border-left: 6px solid #dc2626;
}

.quality-item.warning {
    border-left: 6px solid #f59e0b;
}

.quality-item h4 {
    margin: 8px 0 5px;
}

.quality-item p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.quality-item small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-weight: 700;
}

.quality-error-label {
    color: #991b1b;
    white-space: nowrap;
}

.quality-warning-label {
    color: #92400e;
    white-space: nowrap;
}

.empty-validation.success {
    border-left: 6px solid #16a34a;
}

.empty-validation.danger {
    border-left: 6px solid #dc2626;
}

@media (max-width: 900px) {
    .quality-summary-grid {
        grid-template-columns: 1fr;
    }

    .quality-item {
        flex-direction: column;
    }
}

.version-text-box {
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

.badge.manual {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.ai_initial {
    background: #dcfce7;
    color: #166534;
}

.badge.auto_before_ai_section_apply,
.badge.auto_before_quality_clean,
.badge.auto_before_final_docx,
.badge.auto_before_final_pdf,
.badge.auto_before_restore {
    background: #fef3c7;
    color: #92400e;
}

.audit-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: flex-start;
}

.audit-marker {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    margin-top: 18px;
    background: #2563eb;
    box-shadow: 0 0 0 5px #dbeafe;
}

.audit-item.ai .audit-marker {
    background: #7c3aed;
    box-shadow: 0 0 0 5px #ede9fe;
}

.audit-item.user .audit-marker {
    background: #16a34a;
    box-shadow: 0 0 0 5px #dcfce7;
}

.audit-item.system .audit-marker {
    background: #f59e0b;
    box-shadow: 0 0 0 5px #fef3c7;
}

.audit-content {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
}

.audit-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.audit-header h4 {
    margin: 8px 0 0;
    color: #111827;
}

.audit-header small {
    color: #64748b;
    white-space: nowrap;
    font-weight: 700;
}

.audit-content p {
    margin: 10px 0 0;
    color: #475569;
    line-height: 1.5;
}

.audit-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.audit-footer span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.metadata-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.metadata-item {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
    padding: 14px;
}

.metadata-item strong {
    display: block;
    margin-bottom: 6px;
    color: #111827;
}

.metadata-item span {
    display: block;
    color: #475569;
    white-space: pre-wrap;
    word-break: break-word;
}

.badge.ai {
    background: #ede9fe;
    color: #6d28d9;
}

.badge.user {
    background: #dcfce7;
    color: #166534;
}

.badge.system {
    background: #fef3c7;
    color: #92400e;
}

.btn-small.active {
    background: #1d4ed8;
    color: #ffffff;
}

@media (max-width: 900px) {
    .audit-header {
        flex-direction: column;
    }

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

.executive-hero {
    border-radius: 22px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
}

.executive-hero h3 {
    margin: 6px 0 8px;
    font-size: 28px;
    color: #111827;
}

.executive-hero p {
    margin: 0;
    color: #475569;
    line-height: 1.5;
}

.executive-hero.ok {
    border-left: 8px solid #16a34a;
    background: #f0fdf4;
}

.executive-hero.warning {
    border-left: 8px solid #f59e0b;
    background: #fffbeb;
}

.executive-hero.error {
    border-left: 8px solid #dc2626;
    background: #fef2f2;
}

.executive-hero.progress {
    border-left: 8px solid #2563eb;
    background: #eff6ff;
}

.executive-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.executive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.executive-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
}

.executive-card span {
    display: block;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 8px;
}

.executive-card strong {
    display: block;
    color: #111827;
    font-size: 22px;
    margin-bottom: 8px;
}

.executive-card p {
    margin: 0 0 12px;
    color: #475569;
    line-height: 1.5;
}

.executive-card a {
    font-weight: 800;
    color: #2563eb;
    text-decoration: none;
}

.executive-card.ok,
.executive-card.ready {
    border-left: 6px solid #16a34a;
}

.executive-card.warning {
    border-left: 6px solid #f59e0b;
}

.executive-card.error {
    border-left: 6px solid #dc2626;
}

.executive-card.not_validated,
.executive-card.progress {
    border-left: 6px solid #2563eb;
}

.final-doc-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.final-doc-status article {
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.final-doc-status article.ok {
    background: #dcfce7;
    border-color: #86efac;
}

.final-doc-status article.pending {
    background: #fef3c7;
    border-color: #fde68a;
}

.final-doc-status strong {
    display: block;
    margin-bottom: 6px;
    color: #111827;
}

.final-doc-status span {
    color: #475569;
    font-weight: 800;
}

.next-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.next-step {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.next-step.high {
    border-left: 6px solid #dc2626;
}

.next-step.medium {
    border-left: 6px solid #f59e0b;
}

.next-step.low {
    border-left: 6px solid #2563eb;
}

.next-step.ok {
    border-left: 6px solid #16a34a;
}

.next-step h4 {
    margin: 8px 0 5px;
    color: #111827;
}

.next-step p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.mini-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mini-list article {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
}

.mini-list strong {
    display: block;
    margin-bottom: 5px;
    color: #111827;
}

.mini-list span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
}

.mini-list a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 800;
}

.audit-timeline.compact {
    gap: 10px;
}

.audit-timeline.compact .audit-content {
    padding: 12px;
}

.audit-timeline.compact .audit-marker {
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .executive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .executive-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .executive-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {
    .executive-grid,
    .final-doc-status {
        grid-template-columns: 1fr;
    }

    .next-step {
        flex-direction: column;
    }
}

.badge.final_delivery_zip {
    background: #ede9fe;
    color: #6d28d9;
}

.delivery-package-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    background: #f8fafc;
}

.delivery-package-card strong {
    display: block;
    margin-bottom: 8px;
    color: #111827;
}

.delivery-package-card span {
    display: block;
    color: #64748b;
    line-height: 1.5;
}

:root {
    --bg: #f3f6fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #0f172a;
    --muted: #64748b;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #dbeafe;
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 14px 32px rgba(15, 23, 42, 0.08);
    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body.app-body {
    background: linear-gradient(180deg, #eef3ff 0%, var(--bg) 180px, var(--bg) 100%);
    color: var(--text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    min-height: 100vh;
}

a {
    color: inherit;
}

.shell {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
}

.page-shell {
    padding: 28px 0 48px;
}

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(8, 20, 53, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    text-decoration: none;
}

.brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    font-weight: 900;
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
}

.brand-copy strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

.brand-copy span {
    display: block;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    margin-top: 3px;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-link {
    color: rgba(255,255,255,0.86);
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    transition: 0.2s ease;
}

.nav-link:hover {
    background: rgba(255,255,255,0.09);
    color: #ffffff;
}

.nav-link.active {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
}

/* Footer */
.app-footer {
    padding: 24px 0 32px;
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--muted);
    font-size: 14px;
}

/* Generic layout */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}

.page-header h2 {
    margin: 6px 0 8px;
    font-size: 34px;
    line-height: 1.08;
    color: var(--text);
}

.page-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    max-width: 860px;
}

.eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.panel,
.form-card,
.table-card,
.empty-state {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.panel,
.form-card {
    padding: 22px;
    margin-bottom: 20px;
}

.table-card {
    overflow: hidden;
}

.table-card.flat {
    box-shadow: none;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.section-title h3 {
    margin: 0 0 5px;
    font-size: 24px;
    color: var(--text);
}

.section-title p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-small,
.btn-danger {
    appearance: none;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.18s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
}

.btn-secondary {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
    background: #f8fafc;
}

.btn-small {
    background: #eff6ff;
    color: var(--primary-dark);
    border: 1px solid #bfdbfe;
    padding: 9px 12px;
    font-size: 13px;
}

.btn-small:hover {
    background: #dbeafe;
}

.btn-danger {
    background: #fff1f2;
    color: var(--danger);
    border: 1px solid #fecdd3;
    padding: 9px 12px;
    font-size: 13px;
}

.btn-danger:hover {
    background: #ffe4e6;
}

/* Cards / grids */
.documents-help-grid,
.detail-grid,
.quality-summary-grid,
.metadata-grid,
.document-readiness-grid {
    display: grid;
    gap: 16px;
}

.documents-help-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.document-readiness-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-help-card,
.quality-counter,
.metadata-item {
    border: 1px solid var(--border);
    background: var(--panel-soft);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.document-help-card.featured {
    border: 2px solid #93c5fd;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.document-help-card strong,
.quality-counter strong,
.metadata-item strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--text);
}

.document-help-card span,
.metadata-item span {
    color: var(--muted);
    line-height: 1.55;
}

.document-help-card form,
.document-help-card a.btn-primary,
.document-help-card a.btn-small {
    margin-top: 14px;
}

.text-block {
    margin-bottom: 18px;
}

.text-block h4 {
    margin: 0 0 6px;
    color: var(--text);
}

.text-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

/* Forms */
.form-section-title h3 {
    margin: 0 0 6px;
}

.form-section-title p {
    margin: 0 0 18px;
    color: var(--muted);
}

.form-group {
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 800;
    color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 12px 14px;
    background: #ffffff;
    color: var(--text);
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
    min-height: 110px;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
}

.table-responsive table {
    min-width: 1080px;
}

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

thead th {
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 900;
    vertical-align: top;
}

tbody td {
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
    color: #1e293b;
}

tbody tr:hover {
    background: #fbfdff;
}

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

.break-anywhere {
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 520px;
}

.actions-cell {
    min-width: 180px;
}

.actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.actions-group form {
    margin: 0;
}

.actions-cell .btn-small,
.actions-cell .btn-danger {
    white-space: nowrap;
}

/* Status / badges / tags */
.badge,
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.badge.generated,
.badge.ok {
    background: #dcfce7;
    color: #166534;
}

.badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.badge.manual,
.tag.user {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.ai,
.tag.ai {
    background: #ede9fe;
    color: #6d28d9;
}

.badge.system,
.tag.system {
    background: #fef3c7;
    color: #92400e;
}

.badge.final_delivery_zip {
    background: #ede9fe;
    color: #6d28d9;
}

/* Empty states / validation */
.empty-state,
.empty-validation {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed var(--border-strong);
    background: #f8fafc;
}

.empty-state.inner {
    margin-top: 6px;
}

.empty-state h3,
.empty-validation h4 {
    margin: 0 0 6px;
}

.empty-state p,
.empty-validation p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.empty-validation.success {
    background: #f0fdf4;
    border-left: 6px solid var(--success);
}

.empty-validation.danger {
    background: #fef2f2;
    border-left: 6px solid var(--danger);
}

/* Data list */
.data-list {
    display: grid;
    gap: 12px;
}

.data-list div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.data-list div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.data-list dt {
    font-weight: 900;
    color: #334155;
}

.data-list dd {
    margin: 0;
    color: #0f172a;
}

/* Readiness */
.document-readiness {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.document-readiness.ok {
    background: #dcfce7;
    color: #166534;
}

.document-readiness.warning {
    background: #fef3c7;
    color: #92400e;
}

.document-readiness.error {
    background: #fee2e2;
    color: #991b1b;
}

/* Utility */
.muted {
    color: var(--muted);
}

small.muted,
td small {
    color: var(--muted);
    display: block;
    margin-top: 4px;
    line-height: 1.4;
}

.version-text-box {
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

/* Existing advanced views compatibility */
.audit-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: flex-start;
}

.audit-marker {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    margin-top: 18px;
    background: #2563eb;
    box-shadow: 0 0 0 5px #dbeafe;
}

.audit-item.ai .audit-marker {
    background: #7c3aed;
    box-shadow: 0 0 0 5px #ede9fe;
}

.audit-item.user .audit-marker {
    background: #16a34a;
    box-shadow: 0 0 0 5px #dcfce7;
}

.audit-item.system .audit-marker {
    background: #f59e0b;
    box-shadow: 0 0 0 5px #fef3c7;
}

.audit-content {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
}

.audit-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.audit-header h4 {
    margin: 8px 0 0;
    color: #111827;
}

.audit-header small {
    color: var(--muted);
    white-space: nowrap;
    font-weight: 700;
}

.audit-content p {
    margin: 10px 0 0;
    color: #475569;
    line-height: 1.5;
}

.audit-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.audit-footer span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* Executive area compatibility */
.executive-hero {
    border-radius: 22px;
    padding: 24px;
    border: 1px solid var(--border);
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
}

.executive-hero h3 {
    margin: 6px 0 8px;
    font-size: 28px;
    color: #111827;
}

.executive-hero p {
    margin: 0;
    color: #475569;
    line-height: 1.5;
}

.executive-hero.ok { border-left: 8px solid #16a34a; background: #f0fdf4; }
.executive-hero.warning { border-left: 8px solid #f59e0b; background: #fffbeb; }
.executive-hero.error { border-left: 8px solid #dc2626; background: #fef2f2; }
.executive-hero.progress { border-left: 8px solid #2563eb; background: #eff6ff; }

.executive-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.executive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.executive-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
}

.executive-card span {
    display: block;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 8px;
}

.executive-card strong {
    display: block;
    color: #111827;
    font-size: 22px;
    margin-bottom: 8px;
}

.executive-card p {
    margin: 0 0 12px;
    color: #475569;
    line-height: 1.5;
}

.executive-card a {
    font-weight: 800;
    color: #2563eb;
    text-decoration: none;
}

.executive-card.ok,
.executive-card.ready { border-left: 6px solid #16a34a; }
.executive-card.warning { border-left: 6px solid #f59e0b; }
.executive-card.error { border-left: 6px solid #dc2626; }
.executive-card.not_validated,
.executive-card.progress { border-left: 6px solid #2563eb; }

.final-doc-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.final-doc-status article {
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    background: #f8fafc;
}

.final-doc-status article.ok {
    background: #dcfce7;
    border-color: #86efac;
}

.final-doc-status article.pending {
    background: #fef3c7;
    border-color: #fde68a;
}

.final-doc-status strong {
    display: block;
    margin-bottom: 6px;
    color: #111827;
}

.final-doc-status span {
    color: #475569;
    font-weight: 800;
}

.next-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.next-step {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.next-step.high { border-left: 6px solid #dc2626; }
.next-step.medium { border-left: 6px solid #f59e0b; }
.next-step.low { border-left: 6px solid #2563eb; }
.next-step.ok { border-left: 6px solid #16a34a; }

.next-step h4 {
    margin: 8px 0 5px;
    color: #111827;
}

.next-step p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.mini-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mini-list article {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
}

.mini-list strong {
    display: block;
    margin-bottom: 5px;
    color: #111827;
}

.mini-list span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
}

.mini-list a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 800;
}

/* Responsive */
@media (max-width: 1200px) {
    .executive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 980px) {
    .page-header,
    .section-title,
    .executive-hero,
    .audit-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-grid,
    .quality-summary-grid,
    .metadata-grid,
    .document-readiness-grid,
    .form-row,
    .final-doc-status {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .shell {
        width: min(100% - 24px, 1440px);
    }

    .topbar-inner {
        min-height: auto;
        padding: 14px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-copy span {
        display: none;
    }

    .documents-help-grid,
    .executive-grid {
        grid-template-columns: 1fr;
    }

    .page-header h2 {
        font-size: 28px;
    }

    .next-step,
    .audit-item {
        grid-template-columns: 1fr;
    }

    .audit-marker {
        display: none;
    }
}

/* === BLOQUE 20B: UNIFICACION VISUAL TOTAL === */
:root {
    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-border: #e2e8f0;
    --ui-primary: #2563eb;
    --ui-primary-dark: #1d4ed8;
    --ui-success: #16a34a;
    --ui-warning: #d97706;
    --ui-danger: #dc2626;
    --ui-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --ui-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
    --ui-radius: 22px;
}

html { scroll-behavior: smooth; }
body.app-body,
body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem),
        linear-gradient(180deg, #f8fbff 0%, var(--ui-bg) 45%, #eef3f9 100%);
    color: var(--ui-text);
    min-height: 100vh;
}

.shell {
    width: min(100% - 48px, 1440px);
    margin: 0 auto;
}

.topbar {
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand,
.brand:hover {
    color: #fff;
    text-decoration: none;
}

.brand-logo,
.brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 21px;
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.28);
}

.brand-copy strong {
    display: block;
    color: #fff;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.brand-copy span {
    display: block;
    color: #cbd5e1;
    font-size: 12px;
    margin-top: 2px;
}

.main-nav,
.topbar nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-link,
.topbar nav a {
    color: #dbeafe;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    transition: 0.15s ease;
}

.nav-link:hover,
.topbar nav a:hover,
.nav-link.active {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    text-decoration: none;
}

.page-shell,
.container {
    padding: 30px 0 44px;
}

.app-footer {
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: 13px;
    padding: 22px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.page-header,
.hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
    border-radius: 26px;
    box-shadow: var(--ui-shadow);
    padding: 26px;
    margin-bottom: 22px;
}

.page-header::after,
.hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -90px;
    top: -110px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37,99,235,.16), transparent 68%);
    pointer-events: none;
}

.page-header > *,
.hero > * { position: relative; z-index: 1; }

.page-header {
    align-items: center;
}

.page-header h2,
.hero h2 {
    color: var(--ui-text);
    letter-spacing: -0.04em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.page-header p,
.hero p {
    max-width: 920px;
    color: var(--ui-muted);
    line-height: 1.55;
}

.eyebrow {
    color: var(--ui-primary);
    letter-spacing: .12em;
}

.panel,
.card,
.form-card,
.empty-state,
.table-card,
.analysis-card,
.document-help-card,
.executive-card,
.quality-counter,
.budget-counter,
.budget-rule,
.metadata-item,
.page-box,
.text-block {
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-soft);
}

.panel,
.form-card,
.empty-state,
.table-card {
    border-radius: var(--ui-radius);
}

.panel,
.form-card {
    padding: 22px;
    margin-bottom: 20px;
}

.card,
.document-help-card,
.analysis-card,
.executive-card,
.metadata-item,
.text-block,
.page-box {
    border-radius: 18px;
}

.section-title {
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.section-title h3,
.panel h3 {
    color: var(--ui-text);
    letter-spacing: -0.02em;
}

.section-title p,
.panel p,
.card p,
.document-help-card span,
.analysis-card p,
.empty-state p {
    color: var(--ui-muted);
}

.header-actions,
.hero-actions,
.form-actions,
.actions-cell,
.actions-group,
.executive-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.header-actions,
.hero-actions,
.executive-hero-actions {
    justify-content: flex-end;
}

.actions-cell,
.actions-group {
    min-width: max-content;
}

.actions-cell form,
.header-actions form,
.form-actions form,
.executive-hero-actions form,
.actions-group form {
    margin: 0;
}

.btn-primary,
.btn-secondary,
.btn-small,
.btn-danger {
    min-height: 38px;
    border-radius: 12px;
    gap: 7px;
    line-height: 1.1;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border .12s ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-small:hover,
.btn-danger:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark));
    box-shadow: 0 10px 24px rgba(37, 99, 235, .24);
}

.btn-secondary {
    background: #f8fafc;
    border: 1px solid var(--ui-border);
    color: #1e293b;
}

.btn-small {
    background: #0f766e;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
}

.btn-small.active {
    background: #134e4a;
    outline: 3px solid rgba(20, 184, 166, .18);
}

.btn-danger {
    box-shadow: 0 8px 18px rgba(220, 38, 38, .18);
}

.table-responsive,
.table-card,
.mini-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-card.flat {
    box-shadow: none;
    border-radius: 18px;
    border: 1px solid var(--ui-border);
}

.table-card table,
.table-responsive table,
.mini-table {
    min-width: 920px;
}

table {
    table-layout: auto;
    background: #fff;
}

th {
    position: sticky;
    top: 76px;
    z-index: 2;
    background: #f8fafc;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
}

td,
th {
    border-bottom: 1px solid var(--ui-border);
}

td,
td strong,
td small,
.data-list dd,
.metadata-item span,
.audit-content p,
.version-text-box,
.page-box pre,
.text-block p,
.document-item p,
.requirement-item p,
.mini-list article,
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

td small {
    display: block;
    margin-top: 4px;
    color: var(--ui-muted);
    line-height: 1.35;
}

.actions-cell {
    white-space: nowrap;
}

.badge,
.tag,
.quality-pill,
.document-readiness {
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .01em;
}

.tag {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #e0e7ff;
}

.badge,
.quality-pill,
.document-readiness {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge.ready,
.badge.ok,
.badge.completed,
.quality-pill.ok,
.document-readiness.ok,
.document-readiness.ready {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.badge.warning,
.quality-pill.warning,
.document-readiness.warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge.error,
.quality-pill.error,
.document-readiness.error,
.badge.failed {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.badge.draft,
.badge.uploaded,
.badge.extracted,
.badge.analyzed,
.badge.progress,
.badge.not_validated,
.document-readiness.progress,
.quality-pill.progress {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.detail-grid,
.cards-grid,
.documents-help-grid,
.quality-summary-grid,
.budget-summary-grid,
.budget-rules-grid,
.metadata-grid,
.document-readiness-grid,
.executive-grid,
.analysis-grid {
    align-items: stretch;
}

.quality-summary-grid,
.budget-summary-grid,
.metadata-grid,
.document-readiness-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.documents-help-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.budget-summary-grid {
    display: grid;
    gap: 14px;
}

.budget-counter,
.quality-counter {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.quality-counter strong,
.budget-counter strong {
    overflow-wrap: anywhere;
}

.budget-rule.ok,
.quality-counter.total {
    border-left: 6px solid var(--ui-success);
}

.budget-rule.error,
.quality-counter.error {
    border-left: 6px solid var(--ui-danger);
}

.quality-counter.warning {
    border-left: 6px solid var(--ui-warning);
}

.form-card {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.form-section-title {
    background: #f8fafc;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    padding: 16px;
    margin: 18px 0 16px;
}

.form-section-title:first-child {
    margin-top: 0;
}

.form-section-title h3 {
    margin: 0 0 5px;
    letter-spacing: -0.02em;
}

.form-section-title p {
    margin: 0;
    color: var(--ui-muted);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-row.three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-group label {
    color: #334155;
    font-weight: 900;
    margin-bottom: 7px;
}

input,
select,
textarea {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 13px;
    transition: border .12s ease, box-shadow .12s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.audit-timeline {
    gap: 14px;
}

.audit-item {
    grid-template-columns: 24px minmax(0, 1fr);
}

.audit-content,
.next-step,
.mini-list article,
.page-box,
.text-block,
.metadata-item {
    background: #fff;
}

.audit-header,
.audit-footer,
.next-step {
    flex-wrap: wrap;
}

.audit-footer {
    gap: 10px;
}

.version-text-box,
.page-box pre {
    max-width: 100%;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    background: #f8fafc;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    padding: 12px;
    color: #334155;
    line-height: 1.5;
}

.page-box pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}

.executive-hero {
    box-shadow: var(--ui-shadow-soft);
}

.executive-card,
.document-help-card,
.next-step,
.analysis-card {
    transition: transform .12s ease, box-shadow .12s ease;
}

.executive-card:hover,
.document-help-card:hover,
.next-step:hover,
.analysis-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow);
}

.mini-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
}

.mini-list article strong,
.mini-list article span {
    min-width: 0;
}

.empty-validation,
.empty-state.inner {
    border-radius: 16px;
}

@media (max-width: 1100px) {
    .page-header,
    .hero,
    .executive-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions,
    .hero-actions,
    .executive-hero-actions {
        justify-content: flex-start;
    }

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

@media (max-width: 820px) {
    .shell { width: min(100% - 24px, 1440px); }

    .topbar-inner {
        padding: 12px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav,
    .topbar nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .page-shell,
    .container { padding-top: 18px; }

    .page-header,
    .hero,
    .panel,
    .form-card { padding: 18px; }

    .page-header h2,
    .hero h2 { font-size: 26px; }

    .cards-grid,
    .executive-grid,
    .detail-grid,
    .form-row,
    .form-row.three-cols,
    .final-doc-status,
    .analysis-grid {
        grid-template-columns: 1fr !important;
    }

    .header-actions,
    .hero-actions,
    .form-actions,
    .actions-cell,
    .actions-group,
    .executive-hero-actions {
        width: 100%;
        align-items: stretch;
    }

    .header-actions > a,
    .header-actions > form,
    .hero-actions > a,
    .form-actions > a,
    .form-actions > button,
    .actions-cell > a,
    .actions-cell > form,
    .actions-group > a,
    .actions-group > form,
    .executive-hero-actions > a,
    .executive-hero-actions > form {
        flex: 1 1 180px;
    }

    .header-actions button,
    .actions-cell button,
    .actions-group button,
    .executive-hero-actions button {
        width: 100%;
    }

    .mini-list article {
        grid-template-columns: 1fr;
    }

    .table-card table,
    .table-responsive table,
    .mini-table {
        min-width: 760px;
    }
}

@media (max-width: 520px) {
    .brand-copy span { display: none; }
    .page-header h2,
    .hero h2 { font-size: 23px; }
    .btn-primary,
    .btn-secondary,
    .btn-small,
    .btn-danger { width: 100%; }
    .table-card table,
    .table-responsive table,
    .mini-table { min-width: 680px; }
}

/* BLOQUE_21C_ADAPTACION_TIPO_DOCUMENTAL */
.document-aware-header .header-actions,
.actions-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.guide-panel,
.notice-card.warning {
    border-color: rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.96));
}

.doc-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.doc-type-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    padding: 14px;
}

.doc-type-grid span {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.doc-type-grid strong {
    display: block;
    color: #0f172a;
    line-height: 1.35;
}

.money-nowrap,
.budget-preview-table td:nth-last-child(-n+3),
.budget-preview-table th:nth-last-child(-n+3) {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
}

.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.budget-preview-table table {
    table-layout: auto;
    min-width: 980px;
}

.budget-preview-table td,
.budget-preview-table th {
    vertical-align: top;
}

.budget-preview-table td:last-child,
.budget-preview-table th:last-child {
    text-align: right;
    min-width: 110px;
}

.budget-preview-table td:nth-child(6),
.budget-preview-table th:nth-child(6) {
    text-align: right;
    min-width: 130px;
}

.budget-preview-table td:nth-child(5),
.budget-preview-table th:nth-child(5) {
    text-align: right;
    min-width: 90px;
}

.budget-preview-table td:nth-child(3),
.budget-preview-table th:nth-child(3) {
    min-width: 96px;
}

.badge.neutral,
.badge.info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}

.badge.neutral {
    color: #334155;
    background: #f1f5f9;
}

.badge.info {
    color: #1d4ed8;
    background: #dbeafe;
}

.requirement-item.modality-item {
    border-left: 4px solid #2563eb;
}

@media (max-width: 980px) {
    .doc-type-grid {
        grid-template-columns: 1fr;
    }

    .document-aware-header .header-actions,
    .actions-group {
        justify-content: flex-start;
    }
}

/* BLOQUE_21C_FIX_HEADER_BOTONES_TABLAS_V4_START */

/* ==========================================================
   1) HEADER / HERO DE PÁGINAS
   Evita que una botonera larga deje el título en una columna mínima.
   ========================================================== */

.page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
}

.page-header > div:first-child {
  flex: 1 1 520px !important;
  min-width: 320px !important;
  max-width: 100% !important;
}

.page-header h1,
.page-header h2,
.page-header h3 {
  max-width: 100% !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
  line-height: 1.08 !important;
}

.page-header p {
  max-width: 780px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.page-header .header-actions,
.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Cuando hay muchos botones, que pasen abajo y no compriman el título */
.page-header .header-actions {
  flex: 1 1 100% !important;
  margin-top: 6px !important;
}

/* ==========================================================
   2) BOTONES
   Texto visible siempre, especialmente botones verdes.
   ========================================================== */

a[class*="btn"],
button[class*="btn"],
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-info,
.btn-small,
.button,
button,
input[type="submit"] {
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-weight: 800 !important;
}

/* Azul principal */
a.btn-primary,
button.btn-primary,
.btn-primary {
  color: #ffffff !important;
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
}

a.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:hover {
  color: #ffffff !important;
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Secundario */
a.btn-secondary,
button.btn-secondary,
.btn-secondary {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

a.btn-secondary:hover,
button.btn-secondary:hover,
.btn-secondary:hover {
  color: #0f172a !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Rojo */
a.btn-danger,
button.btn-danger,
.btn-danger {
  color: #dc2626 !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
}

a.btn-danger:hover,
button.btn-danger:hover,
.btn-danger:hover {
  color: #ffffff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Verde / éxito / abrir / ver */
a.btn-success,
button.btn-success,
.btn-success,
a.btn-green,
button.btn-green,
.btn-green,
a.success,
button.success,
.success,
a.open,
button.open,
.open,
a.view,
button.view,
.view,
a[href*="dashboard"].btn,
a[href*="dashboard"].btn-primary,
a[href*="dashboard"].btn-secondary,
a[href*="dashboard"] {
  color: #ffffff !important;
  background: #047857 !important;
  border: 1px solid #047857 !important;
}

a.btn-success:hover,
button.btn-success:hover,
.btn-success:hover,
a.btn-green:hover,
button.btn-green:hover,
.btn-green:hover,
a.success:hover,
button.success:hover,
.success:hover,
a.open:hover,
button.open:hover,
.open:hover,
a.view:hover,
button.view:hover,
.view:hover,
a[href*="dashboard"]:hover {
  color: #ffffff !important;
  background: #065f46 !important;
  border-color: #065f46 !important;
}

/* Botones pequeños */
a.btn-small,
button.btn-small,
.btn-small,
.table-card a,
.table-card button,
.table-responsive a,
.table-responsive button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  min-width: 44px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Evita enlaces azules sobre fondos verdes */
.btn-success *,
.btn-green *,
.success *,
.open *,
.view *,
a[href*="dashboard"] * {
  color: #ffffff !important;
}

/* ==========================================================
   3) TABLAS
   Reparación general sin transformar a tarjetas.
   ========================================================== */

.table-card,
.table-card.flat,
.table-responsive {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 18px !important;
}

/* Mata pseudo-elementos que puedan dibujar textos/filas duplicadas */
.table-card::before,
.table-card::after,
.table-responsive::before,
.table-responsive::after,
table::before,
table::after,
thead::before,
thead::after,
tbody::before,
tbody::after,
tr::before,
tr::after,
th::before,
th::after {
  content: none !important;
  display: none !important;
}

.table-card table,
.table-responsive table,
.panel table {
  display: table !important;
  width: 100% !important;
  min-width: 1080px !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

.table-card thead,
.table-responsive thead,
.panel table thead {
  display: table-header-group !important;
  position: static !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}

.table-card tbody,
.table-responsive tbody,
.panel table tbody {
  display: table-row-group !important;
}

.table-card tr,
.table-responsive tr,
.panel table tr {
  display: table-row !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.table-card th,
.table-card td,
.table-responsive th,
.table-responsive td,
.panel table th,
.panel table td {
  display: table-cell !important;
  position: static !important;
  vertical-align: middle !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px 16px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  transform: none !important;
  overflow: visible !important;
}

.table-card thead th,
.table-responsive thead th,
.panel table thead th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.table-card tbody td,
.table-responsive tbody td,
.panel table tbody td {
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #eef2f7 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.table-card tbody tr:hover td,
.table-responsive tbody tr:hover td,
.panel table tbody tr:hover td {
  background: #f9fafb !important;
}

.table-card td small,
.table-responsive td small,
.panel table td small {
  display: block !important;
  margin-top: 5px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Columnas compactas */
.table-card th:first-child,
.table-card td:first-child,
.table-responsive th:first-child,
.table-responsive td:first-child,
.panel table th:first-child,
.panel table td:first-child,
.table-card th:last-child,
.table-card td:last-child,
.table-responsive th:last-child,
.table-responsive td:last-child,
.panel table th:last-child,
.panel table td:last-child {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Estados */
.badge,
.status-badge,
.tag,
.pill,
[class*="badge"],
[class*="status"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1 !important;
  padding: 7px 10px !important;
}

/* Acciones en tablas */
.actions-group,
.table-actions,
td.actions,
td .actions-group,
td form {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Números y montos sin partir */
.money,
.amount,
.numeric,
.nowrap,
.no-wrap,
td[data-label*="Total"],
td[data-label*="Monto"],
td[data-label*="Costo"],
td[data-label*="Fecha"],
td[data-label*="Páginas"],
td[data-label*="Paginas"] {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Textos largos con corte controlado */
.break-anywhere,
.file-name,
.long-text {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* ==========================================================
   4) MOBILE / TABLET
   Mantiene tablas con scroll horizontal. No las convierte en cards.
   ========================================================== */

@media (max-width: 1200px) {
  .page-header {
    flex-direction: column !important;
  }

  .page-header > div:first-child {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-header .header-actions {
    width: 100% !important;
  }

  .table-card table,
  .table-responsive table,
  .panel table {
    min-width: 1080px !important;
  }

  .table-card thead,
  .table-responsive thead,
  .panel table thead {
    display: table-header-group !important;
  }

  .table-card tr,
  .table-responsive tr,
  .panel table tr {
    display: table-row !important;
  }

  .table-card th,
  .table-card td,
  .table-responsive th,
  .table-responsive td,
  .panel table th,
  .panel table td {
    display: table-cell !important;
  }

  .table-card td::before,
  .table-responsive td::before,
  .panel table td::before {
    content: none !important;
    display: none !important;
  }
}

/* BLOQUE_21C_FIX_HEADER_BOTONES_TABLAS_V4_END */

/* BLOQUE_21C_FIX_BOTONES_ACCIONES_V5_START */

/* ==========================================================
   BOTONES DE ACCIONES VISIBLES
   Este bloque debe quedar al final del CSS.
   Corrige botones verdes con texto azul/oscuro heredado.
   ========================================================== */

/* Botón verde de acción principal dentro de tablas */
.actions-cell a.btn-small,
.actions-cell button.btn-small,
td.actions-cell a.btn-small,
td.actions-cell button.btn-small,
td .actions-group a.btn-small,
td .actions-group button.btn-small,
.table-card td a.btn-small,
.table-card td button.btn-small,
.table-responsive td a.btn-small,
.table-responsive td button.btn-small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 36px !important;
  padding: 9px 13px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Por defecto, el btn-small de acciones es verde con texto blanco */
.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.actions-cell button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
td.actions-cell button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
td .actions-group button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.table-card td button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.table-responsive td button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) {
  color: #ffffff !important;
  background-color: #047857 !important;
  background: #047857 !important;
  border: 1px solid #047857 !important;
  box-shadow: 0 10px 22px rgba(4, 120, 87, .18) !important;
}

/* Hover verde */
.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.actions-cell button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td.actions-cell button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td .actions-group button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-card td button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-responsive td button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover {
  color: #ffffff !important;
  background-color: #065f46 !important;
  background: #065f46 !important;
  border-color: #065f46 !important;
}

/* Botón peligro se mantiene rojo */
.actions-cell a.btn-danger,
.actions-cell button.btn-danger,
td.actions-cell a.btn-danger,
td.actions-cell button.btn-danger,
td .actions-group a.btn-danger,
td .actions-group button.btn-danger,
.table-card td a.btn-danger,
.table-card td button.btn-danger,
.table-responsive td a.btn-danger,
.table-responsive td button.btn-danger {
  color: #dc2626 !important;
  background-color: #fff1f2 !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
}

.actions-cell a.btn-danger:hover,
.actions-cell button.btn-danger:hover,
td.actions-cell a.btn-danger:hover,
td.actions-cell button.btn-danger:hover,
td .actions-group a.btn-danger:hover,
td .actions-group button.btn-danger:hover,
.table-card td a.btn-danger:hover,
.table-card td button.btn-danger:hover,
.table-responsive td a.btn-danger:hover,
.table-responsive td button.btn-danger:hover {
  color: #ffffff !important;
  background-color: #dc2626 !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Botón primario se mantiene azul */
.actions-cell a.btn-primary,
.actions-cell button.btn-primary,
td.actions-cell a.btn-primary,
td.actions-cell button.btn-primary,
td .actions-group a.btn-primary,
td .actions-group button.btn-primary,
.table-card td a.btn-primary,
.table-card td button.btn-primary,
.table-responsive td a.btn-primary,
.table-responsive td button.btn-primary {
  color: #ffffff !important;
  background-color: #2563eb !important;
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
}

/* Botón secundario se mantiene claro */
.actions-cell a.btn-secondary,
.actions-cell button.btn-secondary,
td.actions-cell a.btn-secondary,
td.actions-cell button.btn-secondary,
td .actions-group a.btn-secondary,
td .actions-group button.btn-secondary,
.table-card td a.btn-secondary,
.table-card td button.btn-secondary,
.table-responsive td a.btn-secondary,
.table-responsive td button.btn-secondary {
  color: #0f172a !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

/* Fuerza color blanco también en spans/iconos internos si existieran */
.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary) *,
.actions-cell button.btn-small:not(.btn-danger):not(.btn-secondary) *,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary) *,
td.actions-cell button.btn-small:not(.btn-danger):not(.btn-secondary) *,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary) *,
td .actions-group button.btn-small:not(.btn-danger):not(.btn-secondary) * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Evita que links genéricos dentro de acciones hereden azul */
td.actions-cell a,
td .actions-group a {
  text-decoration: none !important;
}

/* BLOQUE_21C_FIX_BOTONES_ACCIONES_V5_END */

/* BLOQUE_21C_FIX_BOTONES_VERDES_V6_START */

/* ==========================================================
   FIX DEFINITIVO: TEXTO BLANCO EN BOTONES VERDES
   Debe quedar al final de admin.css.
   ========================================================== */

/* Botones verdes detectados por clase */
.btn-success,
.btn-green,
.btn-view,
.btn-open,
.btn-download,
.btn-confirm,
.success,
.green,
.view,
.open,
.download,
.confirm {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border-color: #047857 !important;
}

/* Links verdes en cualquier estado */
a.btn-success,
a.btn-success:link,
a.btn-success:visited,
a.btn-success:hover,
a.btn-success:active,
a.btn-green,
a.btn-green:link,
a.btn-green:visited,
a.btn-green:hover,
a.btn-green:active,
a.btn-view,
a.btn-view:link,
a.btn-view:visited,
a.btn-view:hover,
a.btn-view:active,
a.btn-open,
a.btn-open:link,
a.btn-open:visited,
a.btn-open:hover,
a.btn-open:active,
a.btn-download,
a.btn-download:link,
a.btn-download:visited,
a.btn-download:hover,
a.btn-download:active,
a.btn-confirm,
a.btn-confirm:link,
a.btn-confirm:visited,
a.btn-confirm:hover,
a.btn-confirm:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

/* Botón "Ver" en tablas: normalmente es <a class="btn-small">Ver</a> */
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border: 1px solid #047857 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* Botones verdes genéricos creados con .btn-small + href */
a.btn-small[href]:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
a.btn-small[href]:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
a.btn-small[href]:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
a.btn-small[href]:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
a.btn-small[href]:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border-color: #047857 !important;
}

/* Botones verdes tipo dashboard */
a[href*="dashboard"].btn,
a[href*="dashboard"].btn:link,
a[href*="dashboard"].btn:visited,
a[href*="dashboard"].btn:hover,
a[href*="dashboard"].btn:active,
a[href*="dashboard"].btn-small,
a[href*="dashboard"].btn-small:link,
a[href*="dashboard"].btn-small:visited,
a[href*="dashboard"].btn-small:hover,
a[href*="dashboard"].btn-small:active,
a[href*="executive"].btn,
a[href*="executive"].btn:link,
a[href*="executive"].btn:visited,
a[href*="executive"].btn:hover,
a[href*="executive"].btn:active,
a[href*="executive"].btn-small,
a[href*="executive"].btn-small:link,
a[href*="executive"].btn-small:visited,
a[href*="executive"].btn-small:hover,
a[href*="executive"].btn-small:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border: 1px solid #047857 !important;
  text-decoration: none !important;
}

/* Texto/iconos internos dentro de botones verdes */
.btn-success *,
.btn-green *,
.btn-view *,
.btn-open *,
.btn-download *,
.btn-confirm *,
.success *,
.green *,
.view *,
.open *,
.download *,
.confirm *,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) *,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) *,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) *,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Hover verde oscuro, siempre con texto blanco */
.btn-success:hover,
.btn-green:hover,
.btn-view:hover,
.btn-open:hover,
.btn-download:hover,
.btn-confirm:hover,
.success:hover,
.green:hover,
.view:hover,
.open:hover,
.download:hover,
.confirm:hover,
td.actions-cell a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
td .actions-group a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-card td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
.table-responsive td a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
a.btn-small[href]:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #065f46 !important;
  background-color: #065f46 !important;
  border-color: #065f46 !important;
}

/* Botones rojos: no tocar como verde */
a.btn-danger,
a.btn-danger:link,
a.btn-danger:visited,
button.btn-danger {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  background: #fff1f2 !important;
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

a.btn-danger:hover,
button.btn-danger:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Botones azules: mantener blanco */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
button.btn-primary,
.btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Botones secundarios: mantener oscuro */
a.btn-secondary,
a.btn-secondary:link,
a.btn-secondary:visited,
button.btn-secondary,
.btn-secondary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* BLOQUE_21C_FIX_BOTONES_VERDES_V6_END */

/* BLOQUE_21C_FIX_BOTONES_VERDES_V7_START */

/* ==========================================================
   FIX DEFINITIVO DE BOTONES VERDES
   Motivo:
   Algunas reglas globales de enlaces pisan el color de texto de
   botones verdes. Este bloque queda al final de admin.css y usa
   selectores más específicos.
   ========================================================== */

/* 1) Botones verdes genéricos por clase */
html body a.btn-small,
html body a.btn-small:link,
html body a.btn-small:visited,
html body a.btn-small:hover,
html body a.btn-small:active,
html body button.btn-small,
html body input.btn-small,
html body a.btn-success,
html body a.btn-success:link,
html body a.btn-success:visited,
html body a.btn-success:hover,
html body a.btn-success:active,
html body button.btn-success,
html body a.btn-green,
html body a.btn-green:link,
html body a.btn-green:visited,
html body a.btn-green:hover,
html body a.btn-green:active,
html body button.btn-green,
html body a.btn-view,
html body a.btn-view:link,
html body a.btn-view:visited,
html body a.btn-view:hover,
html body a.btn-view:active,
html body button.btn-view,
html body a.btn-download,
html body a.btn-download:link,
html body a.btn-download:visited,
html body a.btn-download:hover,
html body a.btn-download:active,
html body button.btn-download {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border: 1px solid #047857 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2) Botones verdes dentro de cualquier celda de tabla */
html body table td a.btn-small,
html body table td a.btn-small:link,
html body table td a.btn-small:visited,
html body table td a.btn-small:hover,
html body table td a.btn-small:active,
html body table td button.btn-small,
html body .table-card table td a.btn-small,
html body .table-card table td a.btn-small:link,
html body .table-card table td a.btn-small:visited,
html body .table-card table td a.btn-small:hover,
html body .table-card table td a.btn-small:active,
html body .table-responsive table td a.btn-small,
html body .table-responsive table td a.btn-small:link,
html body .table-responsive table td a.btn-small:visited,
html body .table-responsive table td a.btn-small:hover,
html body .table-responsive table td a.btn-small:active,
html body td.actions-cell a.btn-small,
html body td.actions-cell a.btn-small:link,
html body td.actions-cell a.btn-small:visited,
html body td.actions-cell a.btn-small:hover,
html body td.actions-cell a.btn-small:active,
html body td .actions-group a.btn-small,
html body td .actions-group a.btn-small:link,
html body td .actions-group a.btn-small:visited,
html body td .actions-group a.btn-small:hover,
html body td .actions-group a.btn-small:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border: 1px solid #047857 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* 3) Botones verdes dentro de paneles/formularios sin clase btn-primary */
html body .panel a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
html body .panel a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
html body .panel a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
html body .panel a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
html body .panel a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active,
html body .panel button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
html body .card a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
html body .card a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):link,
html body .card a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):visited,
html body .card a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):hover,
html body .card a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary):active,
html body .form-card a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary),
html body .form-card button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border: 1px solid #047857 !important;
}

/* 4) Botones verdes que son submit dentro de formularios */
html body form button.btn-small,
html body form button.btn-success,
html body form button.btn-green,
html body form input[type="submit"].btn-small,
html body form input[type="submit"].btn-success,
html body form input[type="submit"].btn-green {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #047857 !important;
  background-color: #047857 !important;
  border: 1px solid #047857 !important;
}

/* 5) Hover: verde oscuro, texto blanco */
html body a.btn-small:hover,
html body button.btn-small:hover,
html body input.btn-small:hover,
html body a.btn-success:hover,
html body button.btn-success:hover,
html body a.btn-green:hover,
html body button.btn-green:hover,
html body a.btn-view:hover,
html body button.btn-view:hover,
html body a.btn-download:hover,
html body button.btn-download:hover,
html body table td a.btn-small:hover,
html body .table-card table td a.btn-small:hover,
html body .table-responsive table td a.btn-small:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #065f46 !important;
  background-color: #065f46 !important;
  border-color: #065f46 !important;
}

/* 6) Eliminar/rojo: mantenerlo rojo y legible */
html body a.btn-danger,
html body a.btn-danger:link,
html body a.btn-danger:visited,
html body button.btn-danger,
html body table td a.btn-danger,
html body table td a.btn-danger:link,
html body table td a.btn-danger:visited,
html body .table-card table td a.btn-danger,
html body .table-card table td a.btn-danger:link,
html body .table-card table td a.btn-danger:visited {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  background: #fff1f2 !important;
  background-color: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
}

html body a.btn-danger:hover,
html body button.btn-danger:hover,
html body table td a.btn-danger:hover,
html body .table-card table td a.btn-danger:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* 7) Primario azul: mantenerlo azul */
html body a.btn-primary,
html body a.btn-primary:link,
html body a.btn-primary:visited,
html body button.btn-primary,
html body input.btn-primary,
html body .panel a.btn-primary,
html body .panel button.btn-primary,
html body form button.btn-primary,
html body form input[type="submit"].btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #2563eb !important;
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* 8) Secundario: mantenerlo claro */
html body a.btn-secondary,
html body a.btn-secondary:link,
html body a.btn-secondary:visited,
html body button.btn-secondary,
html body input.btn-secondary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* 9) Cualquier texto interno dentro de botones verdes */
html body a.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) *,
html body button.btn-small:not(.btn-danger):not(.btn-secondary):not(.btn-primary) *,
html body a.btn-success *,
html body button.btn-success *,
html body a.btn-green *,
html body button.btn-green *,
html body a.btn-view *,
html body button.btn-view *,
html body a.btn-download *,
html body button.btn-download * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* BLOQUE_21C_FIX_BOTONES_VERDES_V7_END */

/* ============================================================
   Bloque 23D - Semáforo visual de compatibilidad idea-convocatoria
   ============================================================ */

.compatibility-panel,
.compat-panel,
.compatibility-card {
  border-radius: 22px !important;
  padding: 22px !important;
  border: 1px solid rgba(37, 99, 235, .18) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08) !important;
}

.compatibility-panel *,
.compat-panel *,
.compatibility-card * {
  color: inherit;
}

.compat-ok,
.compatibility-panel.compat-ok,
.compat-panel.compat-ok {
  border-color: rgba(22, 163, 74, .28) !important;
  background: linear-gradient(135deg, #ecfdf5, #ffffff) !important;
}

.compat-warning,
.compatibility-panel.compat-warning,
.compat-panel.compat-warning {
  border-color: rgba(245, 158, 11, .32) !important;
  background: linear-gradient(135deg, #fffbeb, #ffffff) !important;
}

.compat-danger,
.compatibility-panel.compat-danger,
.compat-panel.compat-danger {
  border-color: rgba(220, 38, 38, .32) !important;
  background: linear-gradient(135deg, #fef2f2, #ffffff) !important;
}

.compat-block,
.compatibility-panel.compat-block,
.compat-panel.compat-block {
  border-color: rgba(127, 29, 29, .42) !important;
  background: linear-gradient(135deg, #fee2e2, #ffffff) !important;
}

.compatibility-panel .metric-row,
.compat-panel .metric-row,
.compatibility-card .metric-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.compatibility-panel .metric-row:last-child,
.compat-panel .metric-row:last-child,
.compatibility-card .metric-row:last-child {
  border-bottom: 0;
}

.compatibility-panel .metric-label,
.compat-panel .metric-label,
.compatibility-card .metric-label {
  font-weight: 850;
  color: #0f172a !important;
}

.compatibility-panel .metric-value,
.compat-panel .metric-value,
.compatibility-card .metric-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #334155 !important;
}

.compat-decision {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.08);
}

.compat-decision h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.compat-decision p {
  margin: 0;
  color: #475569 !important;
}

.compat-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  background: #e0f2fe;
  color: #075985 !important;
}

.compat-ok .compat-badge {
  background: #dcfce7;
  color: #166534 !important;
}

.compat-warning .compat-badge {
  background: #fef3c7;
  color: #92400e !important;
}

.compat-danger .compat-badge,
.compat-block .compat-badge {
  background: #fee2e2;
  color: #991b1b !important;
}

@media (max-width: 760px) {
  .compatibility-panel .metric-row,
  .compat-panel .metric-row,
  .compatibility-card .metric-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   Bloque 24A - Auth, usuarios y formularios
   ============================================================ */
.hero-card,
.content-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06);
    margin-bottom: 20px;
}
.hero-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
}
.hero-card h1 { margin: 6px 0; font-size: 32px; }
.eyebrow { color: #2563eb; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: 13px; margin: 0; }
.muted { color: #64748b; }
.hero-actions, .actions-group { display: flex; flex-wrap: wrap; gap: 10px; }
.form-stack { display: grid; gap: 14px; }
.form-stack label { font-weight: 900; color: #0f172a; }
.form-stack input, .form-stack select, .form-stack textarea {
    width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 12px; padding: 11px 13px; font: inherit; background: #fff;
}
.check-row { display: flex !important; align-items: center; gap: 10px; }
.check-row input { width: auto; }
.btn-primary, .btn-secondary, .btn-danger, .btn-small {
    display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 12px; padding: 9px 13px; font-weight: 900; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-primary { background: #2563eb; color: #ffffff !important; }
.btn-secondary { background: #ffffff; color: #111827 !important; border-color: #cbd5e1; }
.btn-danger { background: #dc2626; color: #ffffff !important; }
.btn-small { font-size: 13px; padding: 7px 10px; }
.alert-box { padding: 13px 15px; border-radius: 14px; margin-bottom: 14px; font-weight: 800; }
.alert-box.danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-box.success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.text-box { border-radius: 14px; border: 1px solid #cbd5e1; background: #f8fafc; padding: 14px; overflow-wrap: anywhere; }
.badge { display: inline-flex; border-radius: 999px; padding: 5px 10px; background: #e0f2fe; color: #075985; font-weight: 900; font-size: 12px; }

/* ============================================================
   Bloque 24B - Forbidden y permisos visuales
   ============================================================ */

.auth-forbidden-card {
    max-width: 760px;
    margin: 40px auto;
    text-align: left;
}

.forbidden-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #fee2e2;
    color: #991b1b;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 18px;
}

.auth-forbidden-card h1 {
    margin: 0 0 10px;
    font-size: 30px;
    color: #0f172a;
}

.info-list {
    margin: 18px 0;
    border-top: 1px solid #e5e7eb;
}

.info-list > div {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.permission-hidden {
    display: none !important;
}

/* ============================================================
   Bloque 24C - Permisos finos por rol
   ============================================================ */
.role-notice {
    border-radius: 16px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
    padding: 14px 16px;
    font-weight: 800;
    margin: 0 0 18px;
}
.role-notice strong { color: #7c2d12; }
.permission-muted { opacity: .55; pointer-events: none; }
.action-hidden-by-role { display: none !important; }

/* ============================================================
   Fix 24C.2 - Botones visibles en pantalla Usuarios
   ============================================================ */

.table-actions,
td.actions,
.user-actions,
.actions-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.table-actions form,
td.actions form,
.user-actions form,
.actions-cell form {
    display: inline-flex;
    margin: 0;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-warning,
.btn-success,
button.btn,
button.btn-primary,
button.btn-secondary,
button.btn-danger,
button.btn-warning,
button.btn-success,
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-danger,
a.btn-warning,
a.btn-success {
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary,
a.btn-primary,
button.btn-primary {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a !important;
}

.btn-success,
a.btn-success,
button.btn-success {
    background: #047857;
    border: 1px solid #047857;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(4, 120, 87, .18);
}

.btn-warning,
a.btn-warning,
button.btn-warning,
.reset-password-btn,
button.reset-password-btn {
    background: #f59e0b !important;
    border: 1px solid #d97706 !important;
    color: #111827 !important;
    box-shadow: 0 10px 22px rgba(245, 158, 11, .20);
}

.btn-danger,
a.btn-danger,
button.btn-danger,
.delete-btn,
button.delete-btn {
    background: #dc2626 !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, .18);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.reset-password-btn:hover,
.delete-btn:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-danger:disabled,
button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

form[action*="reset-password"] button,
form[action*="reset_password"] button {
    background: #f59e0b !important;
    border: 1px solid #d97706 !important;
    color: #111827 !important;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 900;
    white-space: nowrap;
}

form[action*="delete"] button,
form[action*="eliminar"] button {
    background: #dc2626 !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 900;
    white-space: nowrap;
}

table th:last-child,
table td:last-child {
    min-width: 300px;
}

/* ============================================================
   Fix 24C.3 - Usuarios: botones definitivos con contraste
   ============================================================ */

.users-table-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06);
    overflow: hidden;
    margin-bottom: 24px;
}

.users-table-scroll {
    overflow-x: auto;
}

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

.users-table th,
.users-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.users-table th {
    background: #f8fafc;
    color: #0f172a;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
    text-align: left;
}

.users-actions-th,
.users-actions-td {
    min-width: 420px !important;
    width: 420px !important;
}

.users-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.users-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.user-action-btn,
.users-actions a.user-action-btn,
.users-actions button.user-action-btn {
    appearance: none !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    min-width: 104px !important;
    min-height: 42px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.users-actions .user-btn-edit,
.users-actions a.user-btn-edit {
    background: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(4, 120, 87, .18) !important;
}

.users-actions .user-btn-reset,
.users-actions button.user-btn-reset {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: #111827 !important;
    box-shadow: 0 10px 22px rgba(245, 158, 11, .22) !important;
}

.users-actions .user-btn-delete,
.users-actions button.user-btn-delete {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, .20) !important;
}

.users-actions .user-action-btn:hover {
    transform: translateY(-1px);
    filter: brightness(.96);
}

.user-self-note {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 800;
    white-space: nowrap;
}

/* ============================================================
   Fix 24C.4 - Usuarios: tabla sin encabezado desplazado
   ============================================================ */

.users-table-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.users-table-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    margin: 0 !important;
}

.users-table thead,
.users-table tbody,
.users-table tr {
    margin: 0 !important;
    padding: 0 !important;
}

.users-table thead {
    display: table-header-group !important;
}

.users-table tbody {
    display: table-row-group !important;
}

.users-table tr {
    display: table-row !important;
}

.users-table th,
.users-table td {
    display: table-cell !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.users-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
    height: auto !important;
}

.users-table td {
    color: #0f172a !important;
    font-size: 15px !important;
}

.users-table-card::before,
.users-table-card::after,
.users-table-scroll::before,
.users-table-scroll::after,
.users-table::before,
.users-table::after,
.users-table thead::before,
.users-table thead::after {
    content: none !important;
    display: none !important;
}

.users-actions-th,
.users-actions-td {
    min-width: 420px !important;
    width: 420px !important;
}

.users-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.users-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.user-action-btn,
.users-actions a.user-action-btn,
.users-actions button.user-action-btn {
    appearance: none !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    min-width: 104px !important;
    min-height: 42px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.users-actions .user-btn-edit,
.users-actions a.user-btn-edit {
    background: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.users-actions .user-btn-reset,
.users-actions button.user-btn-reset {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: #111827 !important;
}

.users-actions .user-btn-delete,
.users-actions button.user-btn-delete {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Elimina líneas decorativas heredadas que estaban quedando arriba del encabezado */
.users-table-card .decor-line,
.users-table-card .line,
.users-table-card .table-line,
.users-table-card .section-line {
    display: none !important;
}

/* ============================================================
   Fix 24C.5 - Usuarios: tabla limpia sin espacio superior
   ============================================================ */

.users-page-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.users-page-card,
.users-page-card * {
    box-sizing: border-box !important;
}

.users-page-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.users-page-table {
    width: 100% !important;
    min-width: 1080px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: auto !important;
}

.users-page-table thead {
    display: table-header-group !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.users-page-table tbody {
    display: table-row-group !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-page-table tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-page-table th,
.users-page-table td {
    display: table-cell !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    vertical-align: middle !important;
    text-align: left !important;
    height: auto !important;
}

.users-page-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
}

.users-page-table td {
    color: #0f172a !important;
    font-size: 15px !important;
}

.users-page-table th:nth-child(1),
.users-page-table td:nth-child(1) {
    width: 70px !important;
}

.users-page-table th:nth-child(2),
.users-page-table td:nth-child(2) {
    min-width: 290px !important;
}

.users-page-table th:nth-child(7),
.users-page-table td:nth-child(7) {
    min-width: 430px !important;
    width: 430px !important;
}

.users-page-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-page-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-page-btn,
.users-page-actions a.users-page-btn,
.users-page-actions button.users-page-btn {
    appearance: none !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    min-width: 108px !important;
    min-height: 42px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.users-page-btn-edit {
    background: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.users-page-btn-reset {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: #111827 !important;
}

.users-page-btn-delete {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

.users-page-current-user {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* Neutraliza estilos viejos que dejaban una franja vacía arriba de la tabla */
.users-table-card,
.users-table-scroll,
.users-table {
    min-height: 0 !important;
    height: auto !important;
}

.users-page-card::before,
.users-page-card::after,
.users-page-table-wrap::before,
.users-page-table-wrap::after,
.users-page-table::before,
.users-page-table::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   Fix 24C.6 - Usuarios: anulacion total de estilos heredados
   ============================================================ */

.users-clean-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.users-clean-card,
.users-clean-card div,
.users-clean-card table,
.users-clean-card thead,
.users-clean-card tbody,
.users-clean-card tr,
.users-clean-card th,
.users-clean-card td {
    box-sizing: border-box !important;
}

.users-clean-card::before,
.users-clean-card::after,
.users-clean-table::before,
.users-clean-table::after,
.users-clean-table thead::before,
.users-clean-table thead::after,
.users-clean-table tbody::before,
.users-clean-table tbody::after,
.users-clean-table tr::before,
.users-clean-table tr::after {
    display: none !important;
    content: none !important;
}

.users-clean-table {
    width: 100% !important;
    min-width: 1080px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-clean-table thead {
    display: table-header-group !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-clean-table tbody {
    display: table-row-group !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-clean-table tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-clean-table th,
.users-clean-table td {
    display: table-cell !important;
    vertical-align: middle !important;
    height: auto !important;
}

/* Regla clave: elimina cualquier alto reservado por estilos viejos */
.users-clean-card > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* ============================================================
   Fix 24C.7 - Usuarios: quitar sticky/offset heredado del encabezado
   ============================================================ */

/*
   Causa del espacio superior:
   algún estilo global anterior está aplicando position: sticky / top / transform
   sobre thead, tr o th. Esto desplaza el encabezado hacia abajo.
   Estas reglas lo anulan solo en /admin/users.
*/

.users-final-card {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.users-final-scroll {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.users-final-table {
    width: 100% !important;
    min-width: 1080px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: auto !important;

    position: static !important;
    top: auto !important;
    transform: none !important;
}

.users-final-table,
.users-final-table thead,
.users-final-table tbody,
.users-final-table tr,
.users-final-table th,
.users-final-table td {
    box-sizing: border-box !important;
}

.users-final-table thead,
.users-final-table tbody,
.users-final-table tr,
.users-final-table th,
.users-final-table td {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
}

.users-final-table thead {
    display: table-header-group !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.users-final-table tbody {
    display: table-row-group !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.users-final-table tr {
    display: table-row !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.users-final-table th,
.users-final-table td {
    display: table-cell !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.users-final-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
    z-index: auto !important;
}

.users-final-table td {
    color: #0f172a !important;
    font-size: 15px !important;
}

.users-final-table th:nth-child(1),
.users-final-table td:nth-child(1) {
    width: 70px !important;
}

.users-final-table th:nth-child(2),
.users-final-table td:nth-child(2) {
    min-width: 290px !important;
}

.users-final-table th:nth-child(7),
.users-final-table td:nth-child(7) {
    min-width: 430px !important;
    width: 430px !important;
}

.users-final-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-final-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.users-final-btn,
.users-final-actions a.users-final-btn,
.users-final-actions button.users-final-btn {
    appearance: none !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    min-width: 108px !important;
    min-height: 42px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.users-final-btn-edit {
    background: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.users-final-btn-reset {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: #111827 !important;
}

.users-final-btn-delete {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

.users-final-current-user {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.users-final-card::before,
.users-final-card::after,
.users-final-scroll::before,
.users-final-scroll::after,
.users-final-table::before,
.users-final-table::after,
.users-final-table thead::before,
.users-final-table thead::after,
.users-final-table tbody::before,
.users-final-table tbody::after,
.users-final-table tr::before,
.users-final-table tr::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === BLOQUE 26.4A VISUAL PROFESIONAL START === */
:root {
  --pi-bg: #f5f7fb;
  --pi-surface: #ffffff;
  --pi-surface-soft: #f8fafc;
  --pi-ink: #0f172a;
  --pi-text: #1e293b;
  --pi-muted: #64748b;
  --pi-line: #dbe5f1;
  --pi-line-soft: #e7edf6;
  --pi-primary: #1d4ed8;
  --pi-primary-2: #2563eb;
  --pi-primary-soft: #eff6ff;
  --pi-cyan: #0891b2;
  --pi-green: #059669;
  --pi-green-soft: #ecfdf5;
  --pi-amber: #d97706;
  --pi-amber-soft: #fffbeb;
  --pi-red: #dc2626;
  --pi-red-soft: #fef2f2;
  --pi-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --pi-shadow-sm: 0 8px 22px rgba(15, 23, 42, .06);
  --pi-radius: 20px;
  --pi-radius-sm: 14px;
}

html {
  background: var(--pi-bg);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(37,99,235,.14), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(8,145,178,.10), transparent 26%),
    var(--pi-bg) !important;
  color: var(--pi-text) !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  overflow-x: hidden;
}

body, .container, main, section, article, div, table, td, th {
  box-sizing: border-box;
}

.container {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 28px 28px 44px !important;
  overflow-x: hidden;
}

.topbar {
  background: linear-gradient(135deg, #071526 0%, #0f2b50 48%, #123b77 100%) !important;
  color: #fff;
  padding: 16px 28px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  position: sticky;
  top: 0;
  z-index: 60;
}

.brand-icon {
  background: linear-gradient(135deg, var(--pi-primary-2), var(--pi-cyan)) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .35);
}

.topbar nav {
  gap: 8px !important;
  flex-wrap: wrap;
}

.topbar nav a {
  border-radius: 999px;
  padding: 8px 11px;
  color: #e2e8f0 !important;
  text-decoration: none !important;
}

.topbar nav a:hover {
  background: rgba(255,255,255,.10);
  color: #fff !important;
}

.page-header,
.hero,
.panel,
.card,
.form-card,
.table-card,
.empty-state,
.content-card,
.workspace-flow-panel,
.workflow-main-panel {
  border: 1px solid var(--pi-line-soft) !important;
  border-radius: var(--pi-radius) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--pi-shadow-sm) !important;
}

.page-header,
.hero {
  align-items: flex-start !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #eef6ff 100%) !important;
}

.page-header h2,
.hero h2,
.panel h2,
.card h2,
.panel h3,
.card h3 {
  color: var(--pi-ink) !important;
  letter-spacing: -0.02em;
}

.eyebrow,
.section-kicker {
  color: var(--pi-primary) !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
}

p,
.muted,
.card p,
.panel p,
.page-header p {
  color: var(--pi-muted) !important;
}

.btn-primary,
.btn-secondary,
.btn-small,
.btn-danger,
.btn,
button {
  border-radius: 12px !important;
  min-height: 38px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-primary,
.btn.green {
  background: linear-gradient(135deg, var(--pi-primary-2), var(--pi-primary)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .22) !important;
}

.btn-primary:hover,
.btn.green:hover,
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, .28) !important;
}

.btn-secondary,
.btn.secondary {
  background: #eef2f7 !important;
  color: #1e293b !important;
  border: 1px solid #dbe5f1 !important;
}

.btn-small {
  background: #0f766e !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--pi-red) !important;
  color: #fff !important;
}

.header-actions,
.hero-actions,
.form-actions,
.actions,
.actions-group,
.actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

input,
select,
textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  background: #fff !important;
  color: var(--pi-text) !important;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--pi-primary-2) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
}

.table-card,
.table-responsive,
.table-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

th,
td {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
  vertical-align: top !important;
}

th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.actions-cell,
td:last-child {
  white-space: normal !important;
}

.badge,
.status-pill,
.workspace-flow-status,
.mini-status {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.badge.generated,
.badge.ok,
.status-pill.ok,
.workspace-flow-status.success {
  background: var(--pi-green-soft) !important;
  color: #047857 !important;
  border-color: #bbf7d0 !important;
}

.badge.failed,
.status-pill.danger,
.workspace-flow-status.danger {
  background: var(--pi-red-soft) !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

.workspace-flow-grid,
.documents-help-grid,
.ai-section-grid,
.cards-grid {
  align-items: stretch;
}

.document-help-card,
.workspace-flow-card,
.ai-section-card {
  border: 1px solid var(--pi-line-soft) !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.ai-core-project-panel {
  border: 1px solid #bfdbfe !important;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 70%) !important;
  box-shadow: var(--pi-shadow) !important;
}

.ai-core-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ai-core-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  margin-top: 16px;
}

.ai-core-box {
  background: rgba(255,255,255,.88);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 16px;
}

.ai-core-box textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
}

.ai-core-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ai-core-actions a,
.ai-core-actions button {
  width: 100%;
  text-align: center;
}

.generated-files-table .file-name-cell {
  max-width: 0 !important;
  line-height: 1.45;
}

.generated-files-table .file-type-cell { width: 86px !important; }
.generated-files-table .file-size-cell { width: 100px !important; }
.generated-files-table .file-action-cell { width: 135px !important; }

@media (max-width: 980px) {
  .container { padding: 18px 14px 34px !important; }
  .page-header,
  .hero,
  .workspace-flow-header,
  .section-title {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .workspace-flow-grid,
  .documents-help-grid,
  .cards-grid,
  .ai-core-grid {
    grid-template-columns: 1fr !important;
  }
  .ai-core-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: static;
    padding: 14px !important;
  }
  .topbar,
  .brand,
  .topbar nav {
    align-items: flex-start;
  }
  .topbar nav {
    width: 100%;
  }
  .topbar nav a {
    background: rgba(255,255,255,.08);
  }
  .header-actions a,
  .header-actions button,
  .actions a,
  .actions button,
  .actions-group a,
  .actions-group button {
    width: 100%;
  }
  .table-card table,
  .table-card thead,
  .table-card tbody,
  .table-card tr,
  .table-card th,
  .table-card td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  .table-card thead { display: none; }
  .table-card tr {
    border: 1px solid var(--pi-line);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 12px;
    background: #fff;
  }
  .table-card td {
    border-bottom: 0 !important;
    padding: 7px 0 !important;
  }
}
/* === BLOQUE 26.4A VISUAL PROFESIONAL END === */



/* ============================================================
   Bloque 26.4A.1 - Logo innovador Proyectista IA
   ============================================================ */

.brand-proyectista {
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
    min-width: 0;
    color: #fff !important;
    text-decoration: none !important;
}

.brand-logo-innovation {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 17px !important;
    background:
        radial-gradient(circle at 20% 15%, rgba(56,189,248,.28), transparent 44%),
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
    box-shadow:
        0 14px 32px rgba(37,99,235,.35),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
    overflow: hidden;
}

.brand-logo-innovation svg {
    width: 40px !important;
    height: 40px !important;
    display: block;
}

.brand-proyectista .brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.08;
}

.brand-proyectista .brand-copy strong {
    display: block;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em;
}

.brand-proyectista .brand-copy span {
    display: block;
    margin-top: 3px;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 650;
    white-space: nowrap;
}

.login-brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 20% 15%, rgba(56,189,248,.32), transparent 42%),
        linear-gradient(135deg, #eff6ff, #ecfdf5);
    box-shadow:
        0 18px 36px rgba(37,99,235,.24),
        inset 0 1px 0 rgba(255,255,255,.88);
}

.login-brand-logo svg {
    width: 52px;
    height: 52px;
    display: block;
}

@media (max-width: 760px) {
    .brand-proyectista .brand-copy span {
        display: none !important;
    }

    .brand-logo-innovation {
        width: 43px !important;
        height: 43px !important;
        flex-basis: 43px !important;
        border-radius: 15px !important;
    }

    .brand-logo-innovation svg {
        width: 36px !important;
        height: 36px !important;
    }
}


/* ============================================================
   Bloque visual - Header profesional fijo + navegación documental
   Evita que el menú superior se pierda al hacer scroll.
   ============================================================ */

.topbar,
.app-topbar,
header.topbar,
.main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
}

.project-document-nav,
.document-nav,
.workflow-tabs,
.project-tabs,
.sticky-project-nav,
.project-subnav,
nav[aria-label="Navegación documental del proyecto"] {
    position: sticky !important;
    top: 122px !important;
    z-index: 1100 !important;
    background: rgba(248, 250, 252, 0.96) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(203, 213, 225, 0.85);
}

/* Evita que un contenedor superior corte elementos sticky */
body,
.layout,
.page,
.main,
.content,
.page-shell,
.project-shell,
.admin-shell {
    overflow-x: hidden;
}

/* Separación visual cuando hay header + subnav sticky */
.project-page,
.page-content,
main {
    scroll-margin-top: 190px;
}

@media (max-width: 900px) {
    .project-document-nav,
    .document-nav,
    .workflow-tabs,
    .project-tabs,
    .sticky-project-nav,
    .project-subnav,
    nav[aria-label="Navegación documental del proyecto"] {
        top: 96px !important;
    }
}

@media (max-width: 680px) {
    .topbar,
    .app-topbar,
    header.topbar,
    .main-header {
        position: sticky !important;
        top: 0 !important;
    }

    .project-document-nav,
    .document-nav,
    .workflow-tabs,
    .project-tabs,
    .sticky-project-nav,
    .project-subnav,
    nav[aria-label="Navegación documental del proyecto"] {
        top: 84px !important;
        overflow-x: auto;
    }
}