:root {
    --cd-navy: #24475c;
    --cd-navy-dark: #1d3a4a;
    --cd-sidebar-active-bg: #2a5468;
    --cd-accent: #d92b1f;
    --cd-accent-soft: rgba(217, 43, 31, .08);
    --cd-bg: #f5f6f7;
    --cd-card-border: rgba(20, 40, 50, .12);
    --cd-text: #1c2b33;
    --cd-text-muted: #5b6b73;
    --cd-text-faint: #93a2a9;
    --cd-sidebar-text: #93a8b3;
    --cd-sidebar-dot: #5c7783;
}

body.cd-app {
    background: var(--cd-bg);
    color: var(--cd-text);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Compacta el .alert de Bootstrap (mensajes de éxito/error del layout) —
   el padding por default se ve desproporcionado contra el resto de la app. */
.alert {
    padding: 10px 16px;
    border-radius: 8px;
    font: 500 13px 'IBM Plex Sans';
    margin-bottom: 16px;
}

.cd-sidebar {
    background: var(--cd-navy-dark);
    min-height: 100vh;
    width: 230px;
    flex-shrink: 0;
    padding: 22px 0;
}

.cd-sidebar .cd-brand {
    padding: 0 22px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 14px;
}

.cd-sidebar .cd-brand-logo {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
}

.cd-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cd-sidebar-text);
    padding: 10px 22px 10px 25px;
    border-left: 3px solid transparent;
    font-size: 13px;
    font-weight: 500;
}

.cd-sidebar .nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cd-sidebar-dot);
    flex-shrink: 0;
}

.cd-sidebar .nav-link.active {
    color: #fff;
    background: var(--cd-sidebar-active-bg);
    border-left-color: var(--cd-accent);
    font-weight: 600;
    padding-left: 22px;
}

.cd-sidebar .nav-link.active .nav-dot {
    background: #fff;
}

.cd-sidebar .nav-link.disabled {
    pointer-events: none;
}

.cd-topbar {
    background: #fff;
    border-bottom: 1px solid var(--cd-card-border);
    padding: 0 28px;
    height: 62px;
}

.cd-content {
    padding: 28px;
}

.cd-card {
    background: #fff;
    border: 1px solid var(--cd-card-border);
    border-radius: 10px;
}

.cd-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cd-text-faint);
    letter-spacing: .4px;
}

.btn-cd-outline {
    border: 1px solid var(--cd-card-border);
    background: #fff;
    color: var(--cd-text);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
}

.btn-cd-outline .cd-plus {
    color: var(--cd-accent);
    font-weight: 700;
}

.btn-cd-outline:hover {
    background: var(--cd-bg);
}

.btn-cd-outline:disabled,
.btn-cd-outline.disabled {
    opacity: .5;
    pointer-events: none;
}

.badge-cd-soft {
    background: var(--cd-accent-soft);
    color: var(--cd-accent);
    font-weight: 500;
}

.cd-owner-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    margin-top: 2px;
    text-decoration: none;
    color: inherit;
}

.cd-owner-row:hover {
    background: var(--cd-bg);
    color: inherit;
}

.cd-owner-row.active {
    background: rgba(36, 71, 92, .08);
    border-left-color: var(--cd-accent);
}

.cd-owner-row .cd-owner-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-text);
}

.cd-owner-row.active .cd-owner-name {
    font-weight: 700;
}

.cd-owner-row .cd-owner-meta {
    font-size: 11.5px;
    color: var(--cd-text-muted);
    margin-top: 2px;
}

/* Formularios (ver mockups/CityDepas_Mockups.dc.html, 1a "Formulario de solicitante") */

.cd-form-panel {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.cd-form-title {
    font: 700 24px 'IBM Plex Sans';
    color: var(--cd-text);
    text-align: center;
    margin-top: 14px;
}

.cd-form-subtitle {
    font: italic 400 13px 'IBM Plex Sans';
    color: var(--cd-text-muted);
    text-align: center;
    margin-top: 4px;
}

.cd-form-section {
    font: 700 13px 'IBM Plex Sans';
    color: var(--cd-text);
    margin: 20px 0 10px;
}

.cd-form-section:first-of-type {
    margin-top: 0;
}

.cd-field-label {
    display: block;
    font: 600 11px 'IBM Plex Sans';
    color: var(--cd-text-muted);
    margin-bottom: 4px;
}

.cd-field {
    background: var(--cd-bg);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 10px 12px;
    font: 400 13px 'IBM Plex Sans';
    color: var(--cd-text);
    width: 100%;
}

.cd-field:focus {
    background: #fff;
    border-color: var(--cd-navy);
    outline: none;
    box-shadow: none;
    color: var(--cd-text);
}

textarea.cd-field {
    resize: vertical;
}

.cd-pill-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cd-pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cd-pill-choice label {
    background: var(--cd-bg);
    color: var(--cd-text-muted);
    border-radius: 6px;
    padding: 8px 16px;
    font: 600 12px 'IBM Plex Sans';
    cursor: pointer;
    margin: 0;
}

.cd-pill-choice input:checked + label {
    background: var(--cd-navy);
    color: #fff;
}

.cd-pill-choice input:focus-visible + label {
    outline: 2px solid var(--cd-navy);
    outline-offset: 1px;
}

.cd-submit-btn {
    background: var(--cd-navy);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 14px;
    font: 700 14px 'IBM Plex Sans';
    border: none;
    width: 100%;
    display: block;
    margin-top: 26px;
}

.cd-submit-btn:hover {
    background: var(--cd-navy-dark);
    color: #fff;
}

.cd-form-cancel {
    display: block;
    text-align: center;
    font: 500 12.5px 'IBM Plex Sans';
    color: var(--cd-text-muted);
    margin-top: 14px;
}

/* Par de botones lado a lado (ver mockups/CityDepas_Mockups.dc.html, 5c) —
   para pantallas con Cancelar + acción principal alineados a la derecha,
   a diferencia de cd-submit-btn/cd-form-cancel que son de ancho completo
   y apilados para los formularios CRUD simples. */
.cd-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cd-card-border);
}

.cd-btn-cancel {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--cd-card-border);
    border-radius: 8px;
    padding: 10px 18px;
    font: 600 13px 'IBM Plex Sans';
    color: var(--cd-text);
    text-decoration: none;
}

.cd-btn-cancel:hover {
    background: var(--cd-bg);
    color: var(--cd-text);
}

.cd-btn-primary {
    background: var(--cd-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font: 600 13px 'IBM Plex Sans';
}

.cd-btn-primary:hover {
    background: var(--cd-navy-dark);
    color: #fff;
}

.cd-btn-primary:disabled {
    background: var(--cd-text-faint);
    cursor: not-allowed;
}

/* Inventario (ver mockups/CityDepas_Mockups.dc.html, 3a) */

.cd-switch {
    width: 34px;
    height: 18px;
    border-radius: 20px;
    border: 1px solid #b7bec2;
    background: #ced3d6;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    cursor: pointer;
}

.cd-switch.is-on {
    background: var(--cd-navy);
    border-color: var(--cd-navy);
    justify-content: flex-end;
}

.cd-switch-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}

.cd-inv-row {
    display: grid;
    padding: 9px 4px;
    border-bottom: 1px solid var(--cd-card-border);
    align-items: center;
    font: 500 13px 'IBM Plex Sans';
    color: var(--cd-text);
}

.cd-inv-row.is-inactive {
    opacity: .45;
}

.cd-inv-row.is-inactive .cd-inv-name {
    text-decoration: line-through;
}

.cd-inv-head {
    display: grid;
    padding: 7px 4px;
    border-bottom: 2px solid var(--cd-text);
    font: 700 10.5px 'IBM Plex Sans';
    letter-spacing: .4px;
    color: var(--cd-text-faint);
}

/* Tablas con DataTables, ajustadas a la tipografía del resto de la app en
   vez del estilo genérico de Bootstrap (mismo tamaño/fuente que las listas
   maestro-detalle de Residencias/Unidades/Inquilinos). */

.cd-table {
    font-family: 'IBM Plex Sans', sans-serif;
}

.cd-table thead th {
    font: 700 10.5px 'IBM Plex Sans';
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--cd-text-faint);
    border-bottom: 2px solid var(--cd-text) !important;
    padding: 8px 4px;
    white-space: nowrap;
}

.cd-table tbody td {
    font: 500 13px 'IBM Plex Sans';
    color: var(--cd-text);
    padding: 10px 4px;
    vertical-align: middle;
    border-bottom: 1px solid var(--cd-card-border) !important;
}

.cd-table tbody tr:last-child td {
    border-bottom: none !important;
}

.cd-table .cd-mono {
    font-family: 'IBM Plex Mono';
}

div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper .dataTables_length select {
    font: 400 13px 'IBM Plex Sans';
}

div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_paginate {
    font: 400 12.5px 'IBM Plex Sans';
    color: var(--cd-text-muted);
}

/* Flatpickr, ajustado al sistema de diseño (ver mockups/CityDepas_Mockups.dc.html) */

.flatpickr-calendar {
    font-family: 'IBM Plex Sans', sans-serif;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(20, 40, 50, .14);
    border: 1px solid var(--cd-card-border);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    display: none;
}

.flatpickr-months .flatpickr-month {
    color: var(--cd-text);
}

.flatpickr-current-month {
    font: 700 14px 'IBM Plex Sans';
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font: 700 14px 'IBM Plex Sans';
    color: var(--cd-text);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--cd-text-muted);
    fill: var(--cd-text-muted);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--cd-navy);
    fill: var(--cd-navy);
}

span.flatpickr-weekday {
    font: 700 11px 'IBM Plex Sans';
    letter-spacing: .3px;
    color: var(--cd-text-faint);
}

.flatpickr-day {
    font: 500 13px 'IBM Plex Sans';
    color: var(--cd-text);
    border-radius: 6px;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--cd-text-faint);
}

.flatpickr-day:hover {
    background: var(--cd-bg);
    border-color: var(--cd-bg);
}

.flatpickr-day.today {
    border-color: var(--cd-accent);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--cd-navy);
    border-color: var(--cd-navy);
    color: #fff;
}

.cd-field.is-invalid {
    background: rgba(217, 43, 31, .06);
    box-shadow: inset 0 0 0 1px var(--cd-accent);
}

.cd-pill-choice.is-invalid {
    padding: 6px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--cd-accent);
    background: rgba(217, 43, 31, .04);
}

.cd-inv-tag {
    font: 700 10px 'IBM Plex Sans';
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: 20px;
    width: fit-content;
}

/* HAS-126: contenedor tipo hoja para la vista previa en pantalla del
   contrato. El HTML interior (contratos/_contrato_body.php) es el mismo que
   consume el PDF vía dompdf — solo el CSS que lo envuelve difiere entre
   pantalla e impresión, igual que una hoja de estilos print/screen normal. */
.cd-contract-sheet {
    background: #fff;
    border: 1px solid var(--cd-card-border);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    padding: 48px 56px;
    max-width: 800px;
    margin: 0 auto;
    font: 400 13px 'IBM Plex Sans';
    color: #1a1a1a;
    line-height: 1.6;
}

.cd-contract-sheet .cd-contract h1 {
    font: 700 18px 'IBM Plex Sans';
    text-align: center;
    margin-bottom: 20px;
}

.cd-contract-sheet .cd-contract h2 {
    font: 700 14px 'IBM Plex Sans';
    margin: 22px 0 8px;
    border-bottom: 1px solid var(--cd-card-border);
    padding-bottom: 4px;
}

.cd-contract-sheet .cd-contract p {
    margin: 0 0 10px;
    text-align: justify;
}

.cd-contract-sheet .cd-contract-placeholder-note {
    color: var(--cd-accent);
    font-style: italic;
}

.cd-contract-sheet .cd-contract-data {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}

.cd-contract-sheet .cd-contract-data td {
    padding: 6px 10px;
    border: 1px solid var(--cd-card-border);
}

.cd-contract-sheet .cd-contract-data td:first-child {
    font-weight: 600;
    width: 40%;
}

.cd-contract-sheet .cd-contract-signatures {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}

.cd-contract-sheet .cd-contract-signatures div {
    width: 45%;
    border-top: 1px solid #000;
    text-align: center;
    padding-top: 6px;
    font: 400 12px 'IBM Plex Sans';
}