/******************************************************************************
 * Proyecto : DoctorPet
 * Archivo  : site.css
 * Módulo   : Diseño general
 ******************************************************************************/


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    --dp-primary: #167d7f;
    --dp-primary-dark: #116466;
    --dp-primary-light: #e9f7f6;
    --dp-secondary: #38a3a5;
    --dp-accent: #f3a953;
    --dp-danger: #dc5a5a;
    --dp-success: #38a169;
    --dp-warning: #d99a2b;
    --dp-background: #f5f8f9;
    --dp-surface: #ffffff;
    --dp-text: #24343d;
    --dp-text-muted: #74838c;
    --dp-border: #e3eaed;
    --dp-shadow-sm: 0 2px 8px rgba(31, 56, 65, 0.05);
    --dp-shadow: 0 8px 25px rgba(31, 56, 65, 0.08);
    --dp-radius-sm: 8px;
    --dp-radius: 12px;
    --dp-radius-lg: 18px;
}


/* ==========================================================================
   BASE
   ========================================================================== */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}


@media (min-width: 768px) {

    html {
        font-size: 15px;
    }
}


body {
    margin: 0;
    min-height: 100vh;
}


.doctorpet-body {
    background: var(--dp-background);
    color: var(--dp-text);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
}


a {
    text-decoration: none;
}


.text-muted {
    color: var(--dp-text-muted) !important;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.doctorpet-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}


.doctorpet-navbar {
    min-height: 68px;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--dp-border);
    box-shadow: 0 2px 12px rgba(25, 52, 61, 0.04);
    backdrop-filter: blur(8px);
}


/* ==========================================================================
   LOGO / MARCA
   ========================================================================== */

.doctorpet-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-right: 28px;
}


.doctorpet-brand-icon {
    width: 39px;
    height: 39px;
    border-radius: 11px;
    background: linear-gradient( 135deg, var(--dp-primary), var(--dp-secondary) );
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 5px 13px rgba(22, 125, 127, 0.20);
}


.doctorpet-brand-text {
    color: var(--dp-text);
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.5px;
}


    .doctorpet-brand-text span {
        color: var(--dp-primary);
    }


/* ==========================================================================
   MENÚ PRINCIPAL
   ========================================================================== */

.doctorpet-nav {
    gap: 4px;
}


    .doctorpet-nav .nav-link {
        color: #52616a;
        font-weight: 500;
        border-radius: 9px;
        padding: 9px 11px !important;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: background-color 0.15s ease, color 0.15s ease;
    }


        .doctorpet-nav .nav-link i {
            font-size: 0.95rem;
        }


        .doctorpet-nav .nav-link:hover,
        .doctorpet-nav .nav-link:focus {
            color: var(--dp-primary);
            background: var(--dp-primary-light);
        }


/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.doctorpet-dropdown {
    border: 1px solid var(--dp-border);
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px !important;
    min-width: 220px;
    box-shadow: var(--dp-shadow);
}


    .doctorpet-dropdown .dropdown-header {
        color: var(--dp-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 6px 10px 8px;
    }


    .doctorpet-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        color: #48575f;
        font-weight: 500;
        border-radius: 8px;
    }


        .doctorpet-dropdown .dropdown-item i {
            width: 20px;
            color: var(--dp-primary);
            text-align: center;
        }


        .doctorpet-dropdown .dropdown-item:hover,
        .doctorpet-dropdown .dropdown-item:focus {
            color: var(--dp-primary-dark);
            background: var(--dp-primary-light);
        }


        .doctorpet-dropdown .dropdown-item.text-danger {
            color: var(--dp-danger) !important;
        }


            .doctorpet-dropdown .dropdown-item.text-danger i {
                color: var(--dp-danger);
            }


/* ==========================================================================
   USUARIO
   ========================================================================== */

.doctorpet-user-area {
    margin-left: 16px;
}


.doctorpet-user-button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 5px 8px;
    color: var(--dp-text);
    transition: background-color 0.15s ease;
}


    .doctorpet-user-button:hover {
        background: #f2f6f7;
    }


.doctorpet-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--dp-primary), var(--dp-secondary) );
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
}


.doctorpet-user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}


.doctorpet-user-name {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
}


.doctorpet-user-role {
    color: var(--dp-text-muted);
    font-size: 0.70rem;
    margin-top: 3px;
}


.doctorpet-user-menu {
    min-width: 245px;
}


.doctorpet-user-menu-header {
    padding: 8px 10px;
    overflow-wrap: anywhere;
}


/* ==========================================================================
   NAVBAR MOBILE
   ========================================================================== */

.doctorpet-toggler {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--dp-border);
    border-radius: 9px;
    color: var(--dp-primary);
    font-size: 1.45rem;
}


    .doctorpet-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(22, 125, 127, 0.13);
    }


/* ==========================================================================
   CONTENIDO
   ========================================================================== */

.doctorpet-page {
    flex: 1;
    width: 100%;
}


.doctorpet-main {
    width: 100%;
    min-height: calc(100vh - 130px);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.doctorpet-footer {
    background: var(--dp-surface);
    border-top: 1px solid var(--dp-border);
    color: var(--dp-text-muted);
    font-size: 0.82rem;
}


.doctorpet-footer-content {
    min-height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}


.doctorpet-footer-brand {
    color: var(--dp-primary);
    font-weight: 700;
}


.doctorpet-footer-separator {
    margin: 0 6px;
    color: #bdc9ce;
}


/* ==========================================================================
   CARDS GENERALES
   ========================================================================== */

.card {
    border-color: var(--dp-border);
    border-radius: var(--dp-radius);
}


    .card.shadow-sm {
        box-shadow: var(--dp-shadow-sm) !important;
    }


.card-header {
    border-bottom: 1px solid var(--dp-border);
}


/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.15s ease;
}


.btn-primary {
    --bs-btn-bg: var(--dp-primary);
    --bs-btn-border-color: var(--dp-primary);
    --bs-btn-hover-bg: var(--dp-primary-dark);
    --bs-btn-hover-border-color: var(--dp-primary-dark);
    --bs-btn-active-bg: var(--dp-primary-dark);
    --bs-btn-active-border-color: var(--dp-primary-dark);
}


.btn-outline-primary {
    --bs-btn-color: var(--dp-primary);
    --bs-btn-border-color: var(--dp-primary);
    --bs-btn-hover-bg: var(--dp-primary);
    --bs-btn-hover-border-color: var(--dp-primary);
    --bs-btn-active-bg: var(--dp-primary);
    --bs-btn-active-border-color: var(--dp-primary);
}


.btn-outline-doctorpet {
    color: var(--dp-primary);
    border: 1px solid var(--dp-primary);
    background: white;
}


    .btn-outline-doctorpet:hover {
        color: white;
        background: var(--dp-primary);
        border-color: var(--dp-primary);
    }


/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.form-control,
.form-select {
    min-height: 42px;
    border-color: #dce5e8;
    border-radius: 8px;
}


textarea.form-control {
    min-height: auto;
}


.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(22, 125, 127, 0.60);
    box-shadow: 0 0 0 0.2rem rgba(22, 125, 127, 0.10);
}


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


.form-label {
    color: #485860;
    font-weight: 600;
    font-size: 0.88rem;
}


/* ==========================================================================
   TABLAS
   ========================================================================== */

.table {
    --bs-table-color: var(--dp-text);
}


    .table > :not(caption) > * > * {
        border-bottom-color: #edf1f2;
        padding: 0.85rem 0.9rem;
    }


    .table thead th {
        color: #65747c;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.25px;
        white-space: nowrap;
    }


.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #f8fbfb;
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    border-radius: 6px;
    font-weight: 600;
    padding: 0.42em 0.65em;
}


/* ==========================================================================
   ALERTAS
   ========================================================================== */

.alert {
    border-radius: 10px;
    border-width: 1px;
}


/* ==========================================================================
   PÁGINAS
   ========================================================================== */

.container,
.container-fluid {
    --bs-gutter-x: 1.6rem;
}


/* ==========================================================================
   VALIDACIÓN
   ========================================================================== */

.field-validation-error {
    font-size: 0.82rem;
}


.input-validation-error {
    border-color: #dc6b6b;
}


/* ==========================================================================
   FOCUS
   ========================================================================== */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(22, 125, 127, 0.12);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .doctorpet-navbar {
        padding: 11px 0;
    }


    .doctorpet-nav {
        margin-top: 16px;
        gap: 2px;
    }


        .doctorpet-nav .nav-link {
            padding: 10px 8px !important;
        }


    .doctorpet-user-area {
        margin: 12px 0 4px;
        padding-top: 12px;
        border-top: 1px solid var(--dp-border);
    }


    .doctorpet-user-button {
        width: 100%;
    }


    .doctorpet-user-info {
        flex: 1;
    }


    .doctorpet-dropdown {
        border: none;
        box-shadow: none;
        margin-top: 0 !important;
        padding-left: 22px;
    }


    .doctorpet-public-actions {
        margin-top: 14px;
    }
}


@media (max-width: 767.98px) {

    .doctorpet-brand-text {
        font-size: 1.2rem;
    }


    .doctorpet-brand-icon {
        width: 36px;
        height: 36px;
    }


    .doctorpet-footer-content {
        padding: 15px 0;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 5px;
    }


    .container,
    .container-fluid {
        --bs-gutter-x: 1.25rem;
    }
}

/* ==========================================================================
   HOME PÚBLICO
   ========================================================================== */

.dp-home-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 85% 20%, rgba(56, 163, 165, 0.12), transparent 28% ), linear-gradient( 135deg, #f8fcfc 0%, #ffffff 50%, #eef8f7 100% );
}


.min-vh-home {
    min-height: calc(100vh - 126px);
    padding-top: 55px;
    padding-bottom: 65px;
}


.dp-home-content {
    position: relative;
    z-index: 2;
}


.dp-home-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    background: var(--dp-primary-light);
    color: var(--dp-primary-dark);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 22px;
}


    .dp-home-badge i {
        color: var(--dp-primary);
    }


.dp-home-title {
    max-width: 650px;
    margin: 0;
    color: #20343c;
    font-size: clamp(2.6rem, 5vw, 4.3rem);
    line-height: 1.05;
    font-weight: 780;
    letter-spacing: -2px;
}


    .dp-home-title span {
        display: block;
        margin-top: 8px;
        color: var(--dp-primary);
    }


.dp-home-description {
    max-width: 620px;
    margin-top: 25px;
    margin-bottom: 0;
    color: #667982;
    font-size: 1.08rem;
    line-height: 1.8;
}


.dp-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}


.dp-home-btn-primary,
.dp-home-btn-secondary {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 650;
}


.dp-home-btn-primary {
    background: var(--dp-primary);
    border-color: var(--dp-primary);
    color: white;
    box-shadow: 0 7px 18px rgba(22, 125, 127, 0.20);
}


    .dp-home-btn-primary:hover {
        background: var(--dp-primary-dark);
        border-color: var(--dp-primary-dark);
        color: white;
        transform: translateY(-1px);
    }


.dp-home-btn-secondary {
    background: white;
    border: 1px solid #d6e1e4;
    color: var(--dp-text);
}


    .dp-home-btn-secondary:hover {
        color: var(--dp-primary);
        border-color: rgba(22, 125, 127, 0.50);
        background: #fbfefe;
    }


.dp-home-features {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 38px;
}


.dp-home-feature {
    display: flex;
    align-items: center;
    gap: 11px;
}


.dp-home-feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: white;
    color: var(--dp-primary);
    box-shadow: var(--dp-shadow-sm);
}


.dp-home-feature div {
    display: flex;
    flex-direction: column;
}


.dp-home-feature strong {
    color: #344951;
    font-size: 0.84rem;
}


.dp-home-feature span:not(.dp-home-feature-icon) {
    margin-top: 2px;
    color: var(--dp-text-muted);
    font-size: 0.75rem;
}


/* ==========================================================================
   HOME VISUAL
   ========================================================================== */

.dp-home-visual {
    position: relative;
    min-height: 535px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.dp-home-visual-circle {
    position: absolute;
    border-radius: 50%;
}


    .dp-home-visual-circle.circle-one {
        width: 410px;
        height: 410px;
        background: rgba(22, 125, 127, 0.08);
    }


    .dp-home-visual-circle.circle-two {
        width: 320px;
        height: 320px;
        background: rgba(56, 163, 165, 0.10);
    }


.dp-home-main-card {
    position: relative;
    width: min(370px, 90%);
    padding: 46px 38px 35px;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: 30px;
    box-shadow: 0 28px 70px rgba(27, 76, 80, 0.13);
    z-index: 3;
}


.dp-home-main-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient( 135deg, var(--dp-primary), var(--dp-secondary) );
    color: white;
    font-size: 2rem;
    box-shadow: 0 15px 30px rgba(22, 125, 127, 0.22);
}


.dp-home-main-card h2 {
    margin-bottom: 8px;
    color: #2a4048;
    font-size: 2rem;
    font-weight: 760;
}


    .dp-home-main-card h2 span {
        color: var(--dp-primary);
    }


.dp-home-main-card > p {
    max-width: 245px;
    margin: 0 auto 28px;
    color: var(--dp-text-muted);
    line-height: 1.6;
}


.dp-home-status-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    text-align: left;
    border: 1px solid var(--dp-border);
    border-radius: 12px;
    background: #fbfdfd;
}


.dp-home-status-icon {
    color: var(--dp-success);
    font-size: 1.35rem;
}


.dp-home-status-card div {
    display: flex;
    flex-direction: column;
}


.dp-home-status-card strong {
    color: #40535b;
    font-size: 0.82rem;
}


.dp-home-status-card small {
    margin-top: 2px;
    color: var(--dp-text-muted);
}


.dp-home-paw {
    position: absolute;
    color: rgba(22, 125, 127, 0.08);
    font-size: 2.5rem;
    transform: rotate(-20deg);
}


    .dp-home-paw.paw-one {
        top: 30px;
        left: 35px;
    }


    .dp-home-paw.paw-two {
        right: 30px;
        bottom: 35px;
        transform: rotate(20deg);
    }


.dp-home-pet-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 12px;
}


.dp-home-pet-icon {
    color: var(--dp-primary);
    font-size: 1rem;
}


.dp-home-pet-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c7d3d7;
}


.dp-home-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    min-width: 175px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(225, 235, 237, 0.9);
    border-radius: 13px;
    box-shadow: 0 15px 35px rgba(37, 71, 77, 0.10);
    z-index: 4;
}


    .dp-home-floating-card div {
        display: flex;
        flex-direction: column;
    }


    .dp-home-floating-card strong {
        color: #405159;
        font-size: 0.80rem;
    }


    .dp-home-floating-card small {
        margin-top: 2px;
        color: var(--dp-text-muted);
        font-size: 0.69rem;
    }


.dp-floating-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}


.dp-floating-calendar {
    top: 85px;
    right: 0;
}


.dp-floating-history {
    bottom: 80px;
    left: 0;
}


/* ==========================================================================
   SERVICIOS HOME
   ========================================================================== */

.dp-home-services {
    padding: 85px 0 95px;
    background: white;
    border-top: 1px solid var(--dp-border);
}


.dp-home-section-title {
    max-width: 660px;
    margin: 0 auto 50px;
    text-align: center;
}


    .dp-home-section-title > span {
        color: var(--dp-primary);
        font-size: 0.78rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }


    .dp-home-section-title h2 {
        margin: 10px 0 13px;
        color: #294048;
        font-size: clamp(1.8rem, 3vw, 2.5rem);
        font-weight: 750;
    }


    .dp-home-section-title p {
        margin: 0;
        color: var(--dp-text-muted);
        line-height: 1.7;
    }


.dp-service-card {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--dp-border);
    border-radius: 16px;
    background: white;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}


    .dp-service-card:hover {
        transform: translateY(-4px);
        border-color: rgba(22, 125, 127, 0.25);
        box-shadow: var(--dp-shadow);
    }


.dp-service-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.25rem;
}


.dp-service-card h3 {
    margin-bottom: 10px;
    color: #344a52;
    font-size: 1.05rem;
    font-weight: 700;
}


.dp-service-card p {
    margin: 0;
    color: var(--dp-text-muted);
    line-height: 1.7;
    font-size: 0.88rem;
}


/* ==========================================================================
   ESCÁNER QR
   ========================================================================== */

.dp-scan-page {
    min-height: calc(100vh - 126px);
    padding: 65px 0 80px;
    background: linear-gradient( 145deg, #f5fafb, #ffffff );
}


.dp-scan-header {
    margin-bottom: 28px;
    text-align: center;
}


.dp-scan-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient( 135deg, var(--dp-primary), var(--dp-secondary) );
    color: white;
    font-size: 1.55rem;
    box-shadow: 0 12px 25px rgba(22, 125, 127, 0.18);
}


.dp-scan-header h1 {
    margin-bottom: 10px;
    color: #2d444c;
    font-size: 1.8rem;
    font-weight: 750;
}


.dp-scan-header p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--dp-text-muted);
    line-height: 1.65;
}


.dp-scan-card {
    border-radius: 18px;
}


.dp-scanner-message {
    min-height: 275px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 25px;
    text-align: center;
    border: 2px dashed #d7e4e6;
    border-radius: 15px;
    background: #f9fcfc;
}


    .dp-scanner-message > i {
        color: var(--dp-primary);
        font-size: 3rem;
    }


    .dp-scanner-message strong {
        margin-top: 8px;
        color: #42565e;
    }


    .dp-scanner-message span {
        max-width: 320px;
        color: var(--dp-text-muted);
        font-size: 0.85rem;
    }


.dp-qr-reader {
    overflow: hidden;
    border: 1px solid var(--dp-border) !important;
    border-radius: 14px;
}


.dp-scan-security {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding: 0 8px;
    color: var(--dp-text-muted);
    font-size: 0.78rem;
}


    .dp-scan-security > i {
        color: var(--dp-primary);
        font-size: 1.15rem;
    }


    .dp-scan-security div {
        display: flex;
        flex-direction: column;
    }


    .dp-scan-security strong {
        color: #54676f;
    }


    .dp-scan-security span {
        margin-top: 3px;
    }


/* ==========================================================================
   HOME RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .min-vh-home {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 30px;
    }


    .dp-home-content {
        text-align: center;
    }


    .dp-home-title,
    .dp-home-description {
        margin-left: auto;
        margin-right: auto;
    }


    .dp-home-actions,
    .dp-home-features {
        justify-content: center;
    }


    .dp-home-visual {
        margin-top: 20px;
        min-height: 500px;
    }


    .dp-floating-calendar {
        right: 7%;
    }


    .dp-floating-history {
        left: 7%;
    }
}


@media (max-width: 575.98px) {

    .dp-home-title {
        font-size: 2.45rem;
        letter-spacing: -1.3px;
    }


    .dp-home-description {
        font-size: 0.98rem;
    }


    .dp-home-actions {
        flex-direction: column;
    }


    .dp-home-btn-primary,
    .dp-home-btn-secondary {
        width: 100%;
    }


    .dp-home-features {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }


    .dp-home-visual {
        min-height: 445px;
    }


    .dp-home-main-card {
        width: 88%;
        padding: 38px 25px 28px;
    }


    .dp-home-visual-circle.circle-one {
        width: 310px;
        height: 310px;
    }


    .dp-home-visual-circle.circle-two {
        width: 250px;
        height: 250px;
    }


    .dp-home-floating-card {
        min-width: auto;
        padding: 10px 12px;
    }


    .dp-floating-calendar {
        top: 40px;
        right: 0;
    }


    .dp-floating-history {
        bottom: 35px;
        left: 0;
    }


    .dp-home-services {
        padding: 65px 0 70px;
    }
}

/* ==========================================================================
   LOGIN DOCTORPET
   ========================================================================== */

.dp-login-page {
    min-height: calc(100vh - 126px);
    display: flex;
    align-items: center;
    padding: 45px 0;
    background: radial-gradient( circle at 15% 15%, rgba(56, 163, 165, 0.08), transparent 25% ), linear-gradient( 145deg, #f3f9f9, #fbfdfd );
}


.dp-login-shell {
    max-width: 1080px;
    min-height: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(218, 229, 232, 0.9);
    border-radius: 24px;
    box-shadow: 0 30px 75px rgba(35, 69, 76, 0.12);
}


/* ==========================================================================
   PANEL IZQUIERDO
   ========================================================================== */

.dp-login-brand-panel {
    position: relative;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    padding: 36px 42px 28px;
    overflow: hidden;
    color: white;
    background: linear-gradient( 145deg, #116466 0%, #167d7f 48%, #319a9b 100% );
}


    .dp-login-brand-panel::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        top: -170px;
        right: -170px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
    }


    .dp-login-brand-panel::after {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        bottom: -180px;
        left: -130px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
    }


.dp-login-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    color: white;
    font-size: 1.35rem;
    font-weight: 500;
    z-index: 2;
}


    .dp-login-logo:hover {
        color: white;
    }


    .dp-login-logo strong {
        font-weight: 800;
    }


.dp-login-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.15);
}


.dp-login-brand-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}


.dp-login-illustration {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}


    .dp-login-illustration::before {
        content: "";
        position: absolute;
        width: 125px;
        height: 125px;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.08);
        transform: rotate(8deg);
    }


.dp-login-illustration-main {
    position: relative;
    width: 83px;
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: white;
    color: var(--dp-primary);
    font-size: 2rem;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
    z-index: 2;
}


.dp-login-decoration {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.50);
}


.dp-login-decoration-1 {
    top: 0;
    right: 0;
    font-size: 1.05rem;
}


.dp-login-decoration-2 {
    bottom: 6px;
    left: 4px;
    font-size: 1.25rem;
}


.dp-login-decoration-3 {
    bottom: 0;
    right: 7px;
}


.dp-login-eyebrow {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.73rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.dp-login-brand-content h1 {
    max-width: 410px;
    margin: 0;
    color: white;
    font-size: 2.4rem;
    line-height: 1.12;
    font-weight: 720;
    letter-spacing: -1.3px;
}


    .dp-login-brand-content h1 span {
        display: block;
        color: #bde8e5;
    }


.dp-login-brand-content > p {
    max-width: 395px;
    margin: 20px 0 25px;
    color: rgba(255, 255, 255, 0.77);
    line-height: 1.7;
    font-size: 0.93rem;
}


.dp-login-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


    .dp-login-benefits > div {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.80rem;
    }


    .dp-login-benefits i {
        width: 29px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.10);
        color: white;
    }


.dp-login-brand-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.70rem;
    z-index: 2;
}


/* ==========================================================================
   PANEL DERECHO
   ========================================================================== */

.dp-login-form-panel {
    display: flex;
    align-items: center;
    padding: 50px 60px;
    background: white;
}


.dp-login-form-wrapper {
    width: 100%;
    max-width: 410px;
    margin: auto;
}


.dp-login-mobile-logo {
    display: none;
}


.dp-login-form-header {
    margin-bottom: 30px;
}


.dp-login-form-eyebrow {
    color: var(--dp-primary);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


.dp-login-form-header h2 {
    margin: 7px 0 8px;
    color: #2a4048;
    font-size: 2rem;
    font-weight: 760;
    letter-spacing: -0.7px;
}


.dp-login-form-header p {
    margin: 0;
    color: var(--dp-text-muted);
    line-height: 1.6;
}


/* ==========================================================================
   CAMPOS
   ========================================================================== */

.dp-login-field {
    margin-bottom: 20px;
}


.dp-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


.dp-login-field .form-label {
    margin-bottom: 7px;
    color: #41545c;
    font-size: 0.82rem;
}


.dp-login-forgot {
    margin-bottom: 7px;
    color: var(--dp-primary);
    font-size: 0.76rem;
    font-weight: 600;
}


    .dp-login-forgot:hover {
        color: var(--dp-primary-dark);
        text-decoration: underline;
    }


.dp-login-input-wrapper {
    position: relative;
}


    .dp-login-input-wrapper .form-control {
        min-height: 50px;
        padding: 10px 45px 10px 44px;
        border: 1px solid #dbe5e7;
        border-radius: 10px;
        background: #fbfdfd;
        font-size: 0.88rem;
    }


        .dp-login-input-wrapper .form-control::placeholder {
            color: #a7b3b8;
        }


        .dp-login-input-wrapper .form-control:focus {
            background: white;
            border-color: rgba(22, 125, 127, 0.65);
            box-shadow: 0 0 0 0.2rem rgba(22, 125, 127, 0.09);
        }


.dp-login-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #83949b;
    z-index: 3;
}


.dp-login-password-toggle {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #84949a;
    border-radius: 7px;
}


    .dp-login-password-toggle:hover {
        color: var(--dp-primary);
        background: var(--dp-primary-light);
    }


.dp-login-options {
    margin: -2px 0 22px;
    color: #60727a;
    font-size: 0.80rem;
}


    .dp-login-options .form-check-input {
        margin-top: 0.2em;
    }


/* ==========================================================================
   BOTÓN LOGIN
   ========================================================================== */

.dp-login-submit {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--dp-primary);
    border: 1px solid var(--dp-primary);
    border-radius: 10px;
    color: white;
    font-weight: 650;
    box-shadow: 0 8px 20px rgba(22, 125, 127, 0.18);
}


    .dp-login-submit:hover,
    .dp-login-submit:focus {
        color: white;
        background: var(--dp-primary-dark);
        border-color: var(--dp-primary-dark);
    }


    .dp-login-submit i {
        transition: transform 0.15s ease;
    }


    .dp-login-submit:hover i {
        transform: translateX(3px);
    }


/* ==========================================================================
   VALIDACIÓN
   ========================================================================== */

.dp-login-validation:empty {
    display: none;
}


.dp-login-validation {
    margin-bottom: 20px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 0.80rem;
}


.dp-login-field .text-danger {
    display: block;
    margin-top: 5px;
    font-size: 0.74rem;
}


/* ==========================================================================
   DIVISOR
   ========================================================================== */

.dp-login-divider {
    position: relative;
    display: flex;
    align-items: center;
    margin: 25px 0 18px;
    color: #98a5aa;
    font-size: 0.72rem;
}


    .dp-login-divider::before,
    .dp-login-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--dp-border);
    }


    .dp-login-divider span {
        padding: 0 12px;
    }


/* ==========================================================================
   QR
   ========================================================================== */

.dp-login-qr-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    text-align: left;
    border: 1px solid var(--dp-border);
    border-radius: 10px;
    background: white;
    color: #485c64;
}


    .dp-login-qr-button:hover {
        color: var(--dp-primary);
        border-color: rgba(22, 125, 127, 0.40);
        background: #fbfefe;
    }


.dp-login-qr-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.05rem;
}


.dp-login-qr-button > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}


.dp-login-qr-button strong {
    color: #40545c;
    font-size: 0.79rem;
}


.dp-login-qr-button small {
    margin-top: 2px;
    color: var(--dp-text-muted);
    font-size: 0.68rem;
}


/* ==========================================================================
   INFORMACIÓN
   ========================================================================== */

.dp-login-help {
    display: flex;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f6f9fa;
    color: #78888f;
    font-size: 0.70rem;
    line-height: 1.5;
}


    .dp-login-help i {
        margin-top: 1px;
        color: var(--dp-primary);
    }


.dp-login-return {
    margin-top: 20px;
    text-align: center;
}


    .dp-login-return a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #76868d;
        font-size: 0.76rem;
    }


        .dp-login-return a:hover {
            color: var(--dp-primary);
        }


/* ==========================================================================
   LOGIN RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-login-page {
        padding: 30px 0;
    }


    .dp-login-shell {
        max-width: 560px;
        display: block;
        min-height: auto;
    }


    .dp-login-brand-panel {
        display: none;
    }


    .dp-login-form-panel {
        min-height: 620px;
        padding: 45px 55px;
    }


    .dp-login-mobile-logo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 38px;
        color: #344a52;
        font-size: 1.25rem;
    }


        .dp-login-mobile-logo > span {
            width: 37px;
            height: 37px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: linear-gradient( 135deg, var(--dp-primary), var(--dp-secondary) );
            color: white;
        }


        .dp-login-mobile-logo strong {
            color: var(--dp-primary);
        }
}


@media (max-width: 575.98px) {

    .dp-login-page {
        padding: 0;
        background: white;
    }


        .dp-login-page .container {
            padding: 0;
        }


    .dp-login-shell {
        max-width: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }


    .dp-login-form-panel {
        min-height: calc(100vh - 58px);
        padding: 38px 24px 45px;
    }


    .dp-login-mobile-logo {
        margin-bottom: 32px;
    }


    .dp-login-form-header h2 {
        font-size: 1.75rem;
    }


    .dp-login-label-row {
        align-items: flex-end;
    }
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.dp-dashboard {
    padding: 32px 0 50px;
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 32px;
    padding: 24px 26px;
    border: 1px solid var(--dp-border);
    border-radius: 18px;
    background: linear-gradient( 135deg, #ffffff 0%, #f8fcfc 100% );
    box-shadow: var(--dp-shadow-sm);
}


.dp-dashboard-clinic {
    display: flex;
    align-items: center;
    gap: 18px;
}


.dp-dashboard-logo {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #dae5e7;
    border-radius: 16px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.8rem;
}


    .dp-dashboard-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
        background: white;
    }


.dp-dashboard-eyebrow {
    color: var(--dp-primary);
    font-size: 0.70rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


.dp-dashboard-welcome-text h1 {
    margin: 3px 0 7px;
    color: #293f47;
    font-size: 1.65rem;
    font-weight: 750;
    letter-spacing: -0.5px;
}


.dp-dashboard-welcome-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--dp-text-muted);
    font-size: 0.80rem;
}


.dp-dashboard-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 50px;
    background: var(--dp-primary-light);
    color: var(--dp-primary-dark);
    font-size: 0.68rem;
    font-weight: 700;
}


.dp-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}


    .dp-dashboard-actions .btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 9px;
        font-size: 0.82rem;
    }


.dp-action-count {
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    padding: 0 5px;
    border-radius: 50px;
    background: #dc3545;
    color: white;
    font-size: 0.62rem;
}


/* ==========================================================================
   SECCIONES
   ========================================================================== */

.dp-dashboard-section {
    margin-bottom: 30px;
}


.dp-section-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}


    .dp-section-heading h2 {
        margin: 0;
        color: #334951;
        font-size: 1rem;
        font-weight: 720;
    }


    .dp-section-heading p {
        margin: 3px 0 0;
        color: var(--dp-text-muted);
        font-size: 0.76rem;
    }


/* ==========================================================================
   ESTADÍSTICAS PRINCIPALES
   ========================================================================== */

.dp-stat-card {
    height: 100%;
    display: block;
    padding: 18px 19px;
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    background: white;
    color: inherit;
    box-shadow: 0 3px 12px rgba(36, 70, 77, 0.035);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}


    .dp-stat-card:hover {
        color: inherit;
        transform: translateY(-2px);
        border-color: rgba(22, 125, 127, 0.22);
        box-shadow: 0 9px 24px rgba(36, 70, 77, 0.08);
    }


.dp-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}


.dp-stat-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}


.dp-stat-blue {
    background: #edf5ff;
    color: #427abd;
}


.dp-stat-green {
    background: #eaf8f4;
    color: #27836d;
}


.dp-stat-purple {
    background: #f2effc;
    color: #7560ae;
}


.dp-stat-orange {
    background: #fff4e8;
    color: #be772d;
}


.dp-stat-arrow {
    color: #b4c0c4;
    font-size: 0.78rem;
}


.dp-stat-value {
    margin-bottom: 2px;
    color: #263c44;
    font-size: 1.85rem;
    font-weight: 750;
    line-height: 1;
}


.dp-stat-title {
    margin-top: 7px;
    color: #455961;
    font-size: 0.80rem;
    font-weight: 650;
}


.dp-stat-description {
    margin-top: 2px;
    color: var(--dp-text-muted);
    font-size: 0.69rem;
}


/* ==========================================================================
   MINI ESTADÍSTICAS
   ========================================================================== */

.dp-mini-stat {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}


a.dp-mini-stat:hover {
    color: inherit;
    background: white;
    border-color: rgba(22, 125, 127, 0.25);
}


.dp-mini-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}


.dp-mini-stat > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


.dp-mini-stat strong {
    color: #31474f;
    font-size: 1.22rem;
    line-height: 1.1;
}


.dp-mini-stat span:not(.dp-mini-icon) {
    margin-top: 3px;
    color: #52666e;
    font-size: 0.72rem;
    font-weight: 650;
}


.dp-mini-stat small {
    margin-top: 1px;
    color: var(--dp-text-muted);
    font-size: 0.64rem;
}


.dp-mini-stat-danger {
    border-color: rgba(220, 53, 69, 0.24);
    background: #fffafa;
}


    .dp-mini-stat-danger .dp-mini-icon {
        background: #fcebed;
        color: #cc3d4c;
    }


    .dp-mini-stat-danger strong,
    .dp-mini-stat-danger span:not(.dp-mini-icon) {
        color: #b63643;
    }


/* ==========================================================================
   TARJETAS DEL DASHBOARD
   ========================================================================== */

.dp-dashboard-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 70, 77, 0.04);
}


.dp-dashboard-card-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f2;
}


.dp-card-title {
    display: flex;
    align-items: center;
    gap: 11px;
}


.dp-card-title-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}


.dp-card-title h3 {
    margin: 0;
    color: #344a52;
    font-size: 0.89rem;
    font-weight: 700;
}


.dp-card-title p {
    margin: 2px 0 0;
    color: var(--dp-text-muted);
    font-size: 0.67rem;
}


.dp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--dp-primary);
    font-size: 0.72rem;
    font-weight: 650;
}


    .dp-card-link:hover {
        color: var(--dp-primary-dark);
    }


/* ==========================================================================
   AGENDA
   ========================================================================== */

.dp-appointment-item {
    min-height: 72px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto 26px;
    align-items: center;
    gap: 13px;
    padding: 12px 18px;
    border-bottom: 1px solid #edf1f2;
}


    .dp-appointment-item:last-child {
        border-bottom: none;
    }


    .dp-appointment-item:hover {
        background: #fafcfc;
    }


.dp-appointment-time {
    display: flex;
    flex-direction: column;
    padding-right: 13px;
    border-right: 1px solid var(--dp-border);
}


    .dp-appointment-time strong {
        color: var(--dp-primary-dark);
        font-size: 0.91rem;
    }


    .dp-appointment-time span {
        color: var(--dp-text-muted);
        font-size: 0.59rem;
    }


.dp-appointment-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


.dp-appointment-pet {
    overflow: hidden;
    color: #364b53;
    font-size: 0.80rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}


    .dp-appointment-pet:hover {
        color: var(--dp-primary);
    }


.dp-appointment-main > span {
    margin-top: 2px;
    overflow: hidden;
    color: var(--dp-text-muted);
    font-size: 0.67rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.dp-appointment-status span {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 50px;
    background: #f2f6f7;
    color: #60747b;
    font-size: 0.63rem;
    font-weight: 650;
}


.dp-row-action {
    color: #a6b4b9;
}


    .dp-row-action:hover {
        color: var(--dp-primary);
    }


/* ==========================================================================
   RECORDATORIOS
   ========================================================================== */

.dp-reminder-item {
    position: relative;
    min-height: 67px;
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 17px;
    border-bottom: 1px solid #edf1f2;
}


    .dp-reminder-item:last-child {
        border-bottom: none;
    }


.dp-reminder-marker {
    width: 4px;
    height: 34px;
    border-radius: 10px;
    background: var(--dp-primary);
}


.dp-reminder-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .dp-reminder-main strong {
        overflow: hidden;
        color: #3d5159;
        font-size: 0.75rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .dp-reminder-main span {
        margin-top: 2px;
        overflow: hidden;
        color: var(--dp-text-muted);
        font-size: 0.65rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


.dp-reminder-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


    .dp-reminder-date strong {
        color: #53666e;
        font-size: 0.72rem;
    }


    .dp-reminder-date span {
        margin-top: 2px;
        color: #cc3d4c;
        font-size: 0.58rem;
        font-weight: 700;
    }


.dp-reminder-overdue {
    background: #fffafa;
}


    .dp-reminder-overdue .dp-reminder-marker {
        background: #dc3545;
    }


/* ==========================================================================
   HOSPITALIZACIÓN
   ========================================================================== */

.dp-hospital-item {
    min-height: 75px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-bottom: 1px solid #edf1f2;
    color: inherit;
}


    .dp-hospital-item:last-child {
        border-bottom: none;
    }


    .dp-hospital-item:hover {
        color: inherit;
        background: #fafcfc;
    }


.dp-patient-avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--dp-primary-light);
    color: var(--dp-primary-dark);
    font-size: 0.82rem;
    font-weight: 750;
}


.dp-hospital-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .dp-hospital-main strong {
        color: #3b5058;
        font-size: 0.78rem;
    }


    .dp-hospital-main > span {
        margin-top: 2px;
        color: var(--dp-text-muted);
        font-size: 0.63rem;
    }


    .dp-hospital-main small {
        margin-top: 3px;
        color: #718288;
        font-size: 0.60rem;
    }


.dp-hospital-location {
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


    .dp-hospital-location strong {
        color: #556970;
        font-size: 0.67rem;
    }


    .dp-hospital-location span {
        color: var(--dp-text-muted);
        font-size: 0.60rem;
    }


.dp-hospital-item > i {
    color: #a7b4b9;
    font-size: 0.72rem;
}


/* ==========================================================================
   CUIDADOS
   ========================================================================== */

.dp-care-item {
    min-height: 70px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 44px 16px;
    align-items: center;
    gap: 11px;
    padding: 11px 17px;
    border-bottom: 1px solid #edf1f2;
    color: inherit;
}


    .dp-care-item:last-child {
        border-bottom: none;
    }


    .dp-care-item:hover {
        color: inherit;
        background: #fafcfc;
    }


.dp-care-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf7f4;
    color: #37806f;
}


.dp-care-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .dp-care-main strong {
        color: #3d5159;
        font-size: 0.76rem;
    }


    .dp-care-main span {
        margin-top: 2px;
        overflow: hidden;
        color: var(--dp-text-muted);
        font-size: 0.63rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


.dp-care-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 6px;
    border-radius: 8px;
    background: #f5f8f9;
}


    .dp-care-date strong {
        color: #465b63;
        font-size: 0.82rem;
        line-height: 1;
    }


    .dp-care-date span {
        margin-top: 2px;
        color: var(--dp-text-muted);
        font-size: 0.56rem;
        text-transform: uppercase;
    }


.dp-care-item > i {
    color: #a7b4b9;
    font-size: 0.72rem;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.dp-empty-state {
    min-height: 255px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
}


.dp-empty-state-small {
    min-height: 210px;
}


.dp-empty-state > span {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 14px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.2rem;
}


.dp-empty-state strong {
    color: #445961;
    font-size: 0.84rem;
}


.dp-empty-state p {
    max-width: 280px;
    margin: 4px 0 12px;
    color: var(--dp-text-muted);
    font-size: 0.70rem;
    line-height: 1.5;
}


/* ==========================================================================
   SUPERADMIN
   ========================================================================== */

.dp-page-header {
    margin-bottom: 27px;
}


.dp-page-eyebrow {
    color: var(--dp-primary);
    font-size: 0.70rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


.dp-page-header h1 {
    margin: 4px 0 6px;
    color: #2d434b;
    font-size: 1.8rem;
    font-weight: 750;
}


.dp-page-header p {
    max-width: 650px;
    margin: 0;
    color: var(--dp-text-muted);
    font-size: 0.82rem;
}


.dp-superadmin-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 23px;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    color: inherit;
    box-shadow: var(--dp-shadow-sm);
}


a.dp-superadmin-card:hover {
    color: inherit;
    border-color: rgba(22, 125, 127, 0.28);
    transform: translateY(-2px);
}


.dp-superadmin-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.3rem;
}


.dp-superadmin-content {
    display: flex;
    flex-direction: column;
}


    .dp-superadmin-content > span {
        color: var(--dp-text-muted);
        font-size: 0.73rem;
    }


    .dp-superadmin-content strong {
        margin: 2px 0 5px;
        color: #31474f;
        font-size: 1.8rem;
    }


    .dp-superadmin-content small {
        color: var(--dp-primary);
        font-size: 0.67rem;
    }


/* ==========================================================================
   DASHBOARD RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }


    .dp-dashboard-actions {
        width: 100%;
    }


        .dp-dashboard-actions .btn {
            flex: 1;
            justify-content: center;
        }
}


@media (max-width: 767.98px) {

    .dp-dashboard {
        padding-top: 22px;
    }


    .dp-dashboard-welcome {
        padding: 18px;
    }


    .dp-dashboard-logo {
        width: 58px;
        height: 58px;
        border-radius: 13px;
    }


    .dp-dashboard-welcome-text h1 {
        font-size: 1.3rem;
    }


    .dp-dashboard-actions {
        flex-direction: column;
    }


        .dp-dashboard-actions .btn {
            width: 100%;
        }


    .dp-appointment-item {
        grid-template-columns: 58px minmax(0, 1fr) 20px;
    }


    .dp-appointment-status {
        display: none;
    }


    .dp-hospital-item {
        grid-template-columns: 38px minmax(0, 1fr) 16px;
    }


    .dp-hospital-location {
        display: none;
    }
}


@media (max-width: 575.98px) {

    .dp-dashboard-clinic {
        align-items: flex-start;
    }


    .dp-dashboard-logo {
        width: 52px;
        height: 52px;
    }


    .dp-dashboard-welcome-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }


    .dp-stat-card {
        padding: 15px;
    }


    .dp-stat-value {
        font-size: 1.55rem;
    }


    .dp-stat-title {
        font-size: 0.73rem;
    }


    .dp-stat-description {
        display: none;
    }


    .dp-mini-stat {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }


    .dp-card-title-icon {
        display: none;
    }


    .dp-dashboard-card-header {
        padding: 14px 15px;
    }


    .dp-card-link {
        font-size: 0.65rem;
    }


    .dp-care-item {
        grid-template-columns: 35px minmax(0, 1fr) 40px;
    }


        .dp-care-item > i {
            display: none;
        }
}

/* ==========================================================================
   DETALLE DEL PACIENTE
   ========================================================================== */

.dp-patient-page {
    padding: 26px 0 50px;
}

.dp-patient-back {
    margin-bottom: 15px;
}

    .dp-patient-back a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--dp-text-muted);
        font-size: 0.76rem;
        font-weight: 600;
    }

        .dp-patient-back a:hover {
            color: var(--dp-primary);
        }


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-patient-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 22px 24px;
    border: 1px solid var(--dp-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-patient-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.dp-patient-photo {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 4px solid white;
    border-radius: 22px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    box-shadow: 0 5px 18px rgba(34, 68, 75, 0.12);
    font-size: 2rem;
}

    .dp-patient-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-patient-heading {
    min-width: 0;
}

.dp-patient-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .dp-patient-name-row h1 {
        margin: 0;
        color: #2c424a;
        font-size: 1.75rem;
        font-weight: 760;
        letter-spacing: -0.5px;
    }

.dp-patient-code {
    margin-top: 2px;
    color: var(--dp-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.dp-status-active,
.dp-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 50px;
    font-size: 0.63rem;
    font-weight: 700;
}

.dp-status-active {
    background: #eaf8f1;
    color: #28765d;
}

    .dp-status-active > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #39a378;
    }

.dp-status-inactive {
    background: #f0f2f3;
    color: #75838a;
}

.dp-patient-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 17px;
    margin-top: 13px;
    color: #667981;
    font-size: 0.69rem;
}

    .dp-patient-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .dp-patient-meta i {
        color: #8aa0a7;
    }

.dp-patient-primary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

    .dp-patient-primary-actions .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-radius: 9px;
        font-size: 0.76rem;
    }


/* ==========================================================================
   NAVEGACIÓN DEL PACIENTE
   ========================================================================== */

.dp-patient-navigation {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 19px 0 24px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--dp-border);
    border-radius: 12px;
    background: white;
    scrollbar-width: thin;
}

.dp-patient-nav-item {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #677980;
    font-size: 0.69rem;
    font-weight: 620;
    white-space: nowrap;
}

    .dp-patient-nav-item:hover {
        color: var(--dp-primary);
        background: #f6fafa;
    }

    .dp-patient-nav-item.active {
        background: var(--dp-primary-light);
        color: var(--dp-primary-dark);
    }

.dp-patient-nav-more {
    cursor: pointer;
}


/* ==========================================================================
   TARJETAS
   ========================================================================== */

.dp-patient-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 15px rgba(36, 70, 77, 0.035);
}

.dp-patient-card-header {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 17px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-patient-card-header > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.dp-patient-card-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}

.dp-patient-card-warning {
    background: #fff4e8;
    color: #b77830;
}

.dp-patient-card-header h2 {
    margin: 0;
    color: #3b5058;
    font-size: 0.86rem;
    font-weight: 720;
}

.dp-patient-card-header p {
    margin: 2px 0 0;
    color: var(--dp-text-muted);
    font-size: 0.64rem;
}

.dp-patient-card-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dp-primary);
    font-size: 0.67rem;
    font-weight: 650;
}


/* ==========================================================================
   DATOS DEL PACIENTE
   ========================================================================== */

.dp-patient-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dp-patient-info-item {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px 18px;
    border-right: 1px solid #edf1f2;
    border-bottom: 1px solid #edf1f2;
}

    .dp-patient-info-item:nth-child(2n) {
        border-right: none;
    }

    .dp-patient-info-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .dp-patient-info-item > span {
        margin-bottom: 4px;
        color: var(--dp-text-muted);
        font-size: 0.64rem;
    }

    .dp-patient-info-item strong {
        color: #43575f;
        font-size: 0.77rem;
        font-weight: 650;
    }

        .dp-patient-info-item strong a {
            color: var(--dp-primary);
        }

    .dp-patient-info-item small {
        margin-left: 5px;
        color: #8a999f;
        font-size: 0.58rem;
        font-weight: 500;
    }

.dp-value-positive {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2f826a;
}


/* ==========================================================================
   ACCIONES CLÍNICAS
   ========================================================================== */

.dp-clinical-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dp-clinical-action {
    min-height: 74px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-right: 1px solid #edf1f2;
    border-bottom: 1px solid #edf1f2;
    color: inherit;
}

    .dp-clinical-action:nth-child(2n) {
        border-right: none;
    }

    .dp-clinical-action:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .dp-clinical-action:hover {
        color: inherit;
        background: #fafcfc;
    }

    .dp-clinical-action > span {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
    }

    .dp-clinical-action > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-clinical-action strong {
        color: #40555d;
        font-size: 0.74rem;
    }

    .dp-clinical-action small {
        margin-top: 2px;
        overflow: hidden;
        color: var(--dp-text-muted);
        font-size: 0.61rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-clinical-action > i {
        color: #a6b4b9;
        font-size: 0.68rem;
    }


/* ==========================================================================
   INFORMACIÓN CLÍNICA
   ========================================================================== */

.dp-clinical-alert-section {
    padding: 5px 17px;
}

.dp-clinical-alert {
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-clinical-alert:last-child {
        border-bottom: none;
    }

.dp-clinical-alert-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #495e66;
    font-size: 0.70rem;
    font-weight: 700;
}

    .dp-clinical-alert-label i {
        color: #c18442;
    }

.dp-clinical-alert p {
    margin: 8px 0 0;
    color: #65777e;
    font-size: 0.71rem;
    line-height: 1.55;
}

.dp-clinical-alert .dp-clinical-empty {
    color: #98a5aa;
    font-style: italic;
}


/* ==========================================================================
   QR
   ========================================================================== */

.dp-patient-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px;
    text-align: center;
}

.dp-patient-qr-image {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    padding: 9px;
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    background: white;
}

    .dp-patient-qr-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.dp-patient-qr > strong {
    color: #3d525a;
    font-size: 0.85rem;
}

.dp-patient-qr > span {
    margin-top: 2px;
    color: var(--dp-text-muted);
    font-size: 0.63rem;
}

.dp-patient-qr p {
    max-width: 270px;
    margin: 11px 0 16px;
    color: var(--dp-text-muted);
    font-size: 0.68rem;
    line-height: 1.55;
}

.dp-patient-qr .btn {
    font-size: 0.72rem;
}


/* ==========================================================================
   COMUNICACIONES
   ========================================================================== */

.dp-communication-action {
    min-height: 64px;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid #edf1f2;
    color: inherit;
}

    .dp-communication-action:last-child {
        border-bottom: none;
    }

    .dp-communication-action:hover {
        color: inherit;
        background: #fafcfc;
    }

    .dp-communication-action > span {
        width: 33px;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #f0f7f7;
        color: var(--dp-primary);
    }

    .dp-communication-action > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-communication-action strong {
        color: #41565e;
        font-size: 0.72rem;
    }

    .dp-communication-action small {
        color: var(--dp-text-muted);
        font-size: 0.60rem;
    }

    .dp-communication-action > i {
        color: #a8b5ba;
        font-size: 0.66rem;
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-patient-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-patient-primary-actions {
        width: 100%;
    }

        .dp-patient-primary-actions > .btn {
            flex: 1;
            justify-content: center;
        }
}


@media (max-width: 767.98px) {

    .dp-patient-profile {
        align-items: flex-start;
    }

    .dp-patient-photo {
        width: 72px;
        height: 72px;
        border-radius: 17px;
    }

    .dp-patient-name-row h1 {
        font-size: 1.4rem;
    }

    .dp-patient-meta {
        gap: 6px 11px;
    }

    .dp-patient-primary-actions {
        flex-wrap: wrap;
    }

        .dp-patient-primary-actions > .btn {
            min-width: 130px;
        }

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

    .dp-patient-info-item,
    .dp-patient-info-item:nth-child(2n) {
        border-right: none;
        border-bottom: 1px solid #edf1f2;
    }

        .dp-patient-info-item:last-child {
            border-bottom: none;
        }
}


@media (max-width: 575.98px) {

    .dp-patient-page {
        padding-top: 18px;
    }

    .dp-patient-header {
        padding: 17px;
    }

    .dp-patient-profile {
        gap: 13px;
    }

    .dp-patient-photo {
        width: 61px;
        height: 61px;
        border-radius: 14px;
    }

    .dp-patient-meta span {
        font-size: 0.63rem;
    }

    .dp-patient-primary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
    }

        .dp-patient-primary-actions > .btn {
            min-width: 0;
        }

    .dp-clinical-actions-grid {
        grid-template-columns: 1fr;
    }

    .dp-clinical-action,
    .dp-clinical-action:nth-child(2n) {
        border-right: none;
        border-bottom: 1px solid #edf1f2;
    }

        .dp-clinical-action:last-child {
            border-bottom: none;
        }
}

/* ==========================================================================
   LISTADO DE PACIENTES
   ========================================================================== */

.dp-pets-page {
    padding: 28px 0 50px;
}


/* ==========================================================================
   CABECERA DE LISTADOS
   ========================================================================== */

.dp-list-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
}

    .dp-list-page-header h1 {
        margin: 4px 0 5px;
        color: #2d434b;
        font-size: 1.75rem;
        font-weight: 760;
        letter-spacing: -0.5px;
    }

    .dp-list-page-header p {
        max-width: 600px;
        margin: 0;
        color: var(--dp-text-muted);
        font-size: 0.78rem;
    }

.dp-list-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-list-page-actions .btn {
        min-height: 41px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-radius: 9px;
        font-size: 0.76rem;
    }


/* ==========================================================================
   ALERTA
   ========================================================================== */

.dp-alert-modern {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    border: 0;
    border-radius: 10px;
    font-size: 0.76rem;
}


/* ==========================================================================
   INDICADORES
   ========================================================================== */

.dp-list-stat {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: white;
    box-shadow: 0 3px 12px rgba(35, 69, 76, 0.035);
}

.dp-list-stat-icon {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1rem;
}

.dp-list-stat-icon-success {
    background: #eaf8f1;
    color: #2c8468;
}

.dp-list-stat > div {
    display: flex;
    flex-direction: column;
}

.dp-list-stat strong {
    color: #324850;
    font-size: 1.28rem;
    line-height: 1.1;
}

.dp-list-stat span:not(.dp-list-stat-icon) {
    margin-top: 3px;
    color: var(--dp-text-muted);
    font-size: 0.67rem;
}


/* ==========================================================================
   BUSCADOR
   ========================================================================== */

.dp-search-card {
    margin-bottom: 20px;
    padding: 13px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: white;
    box-shadow: 0 3px 12px rgba(35, 69, 76, 0.025);
}

.dp-search-layout {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-search-input {
    position: relative;
    flex: 1;
}

    .dp-search-input > i {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: #88999f;
        z-index: 2;
    }

    .dp-search-input .form-control {
        min-height: 42px;
        padding-left: 40px;
        border-radius: 9px;
        background: #fbfdfd;
        font-size: 0.76rem;
    }

.dp-search-layout .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 9px;
    font-size: 0.73rem;
}


/* ==========================================================================
   CONTENEDOR DEL LISTADO
   ========================================================================== */

.dp-pets-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-pets-card-header {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-pets-card-header h2 {
        margin: 0;
        color: #3a5058;
        font-size: 0.87rem;
        font-weight: 720;
    }

    .dp-pets-card-header p {
        margin: 3px 0 0;
        color: var(--dp-text-muted);
        font-size: 0.64rem;
    }

.dp-result-count {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 50px;
    background: #f2f6f7;
    color: #697b82;
    font-size: 0.62rem;
    font-weight: 650;
}


/* ==========================================================================
   TABLA
   ========================================================================== */

.dp-pets-table-wrapper {
    overflow-x: auto;
}

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

    .dp-pets-table thead th {
        padding: 11px 15px;
        border-bottom: 1px solid #e8edef;
        background: #f8fafb;
        color: #75868c;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.35px;
        white-space: nowrap;
    }

    .dp-pets-table tbody td {
        padding: 12px 15px;
        border-bottom: 1px solid #edf1f2;
        color: #53666e;
        font-size: 0.71rem;
        vertical-align: middle;
    }

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

    .dp-pets-table tbody tr {
        transition: background 0.12s ease;
    }

        .dp-pets-table tbody tr:hover {
            background: #fafcfc;
        }


/* ==========================================================================
   IDENTIDAD DEL PACIENTE
   ========================================================================== */

.dp-pet-identity {
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
}

    .dp-pet-identity:hover {
        color: inherit;
    }

.dp-pet-list-photo {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1rem;
}

    .dp-pet-list-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-pet-list-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dp-pet-list-name strong {
        max-width: 160px;
        overflow: hidden;
        color: #3c5159;
        font-size: 0.77rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.dp-pet-identity:hover strong {
    color: var(--dp-primary);
}

.dp-pet-list-name small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #87969c;
    font-size: 0.59rem;
}


/* ==========================================================================
   CÓDIGO / MICROCHIP
   ========================================================================== */

.dp-pet-code {
    display: block;
    color: #566970;
    font-size: 0.69rem;
    font-weight: 650;
}

.dp-pet-microchip {
    max-width: 145px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    overflow: hidden;
    color: #909ea3;
    font-size: 0.57rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ==========================================================================
   ESPECIE
   ========================================================================== */

.dp-pet-species {
    min-width: 105px;
    display: flex;
    flex-direction: column;
}

    .dp-pet-species strong {
        color: #4c6068;
        font-size: 0.70rem;
    }

    .dp-pet-species span {
        margin-top: 2px;
        color: #87969c;
        font-size: 0.60rem;
    }


/* ==========================================================================
   PROPIETARIO
   ========================================================================== */

.dp-pet-owner {
    max-width: 190px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #53676e;
}

    .dp-pet-owner i {
        color: #8ba0a7;
    }

    .dp-pet-owner span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-pet-owner:hover {
        color: var(--dp-primary);
    }


/* ==========================================================================
   PESO
   ========================================================================== */

.dp-pet-weight {
    color: #435860;
    font-size: 0.73rem;
    font-weight: 650;
    white-space: nowrap;
}

    .dp-pet-weight small {
        color: #8b999f;
        font-size: 0.57rem;
        font-weight: 500;
    }

.dp-table-empty-value {
    color: #a6b1b5;
}


/* ==========================================================================
   ESTADO
   ========================================================================== */

.dp-pet-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 0.59rem;
    font-weight: 700;
    white-space: nowrap;
}

.dp-pet-status-active {
    background: #eaf8f1;
    color: #28765d;
}

    .dp-pet-status-active > span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #38a174;
    }

.dp-pet-status-inactive {
    background: #eff2f3;
    color: #75858b;
}


/* ==========================================================================
   ACCIONES
   ========================================================================== */

.dp-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

    .dp-table-actions .btn {
        min-height: 31px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 7px;
        font-size: 0.63rem;
    }

.dp-table-more {
    width: 31px;
    padding-left: 0;
    padding-right: 0;
}


/* ==========================================================================
   VACÍO
   ========================================================================== */

.dp-pets-empty {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-pets-empty > span {
        width: 61px;
        height: 61px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        border-radius: 17px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
        font-size: 1.45rem;
    }

    .dp-pets-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.92rem;
        font-weight: 700;
    }

    .dp-pets-empty p {
        max-width: 340px;
        margin: 6px 0 17px;
        color: var(--dp-text-muted);
        font-size: 0.71rem;
        line-height: 1.55;
    }


/* ==========================================================================
   LISTA MÓVIL
   ========================================================================== */

.dp-pets-mobile-list {
    display: none;
}

.dp-pet-mobile-card {
    padding: 16px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-pet-mobile-card:last-child {
        border-bottom: none;
    }

.dp-pet-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dp-pet-mobile-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dp-pet-mobile-profile > span:last-child {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-pet-mobile-profile strong {
        overflow: hidden;
        color: #3d525a;
        font-size: 0.78rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-pet-mobile-profile small {
        margin-top: 2px;
        color: var(--dp-text-muted);
        font-size: 0.59rem;
    }

.dp-pet-mobile-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 15px 0;
    padding: 13px;
    border-radius: 10px;
    background: #f8fafb;
}

    .dp-pet-mobile-info > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-pet-mobile-info span {
        color: #8b999f;
        font-size: 0.57rem;
    }

    .dp-pet-mobile-info strong {
        margin-top: 2px;
        overflow: hidden;
        color: #52666e;
        font-size: 0.67rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.dp-pet-mobile-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 7px;
}

    .dp-pet-mobile-actions .btn {
        min-height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 8px;
        font-size: 0.68rem;
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-pets-table {
        min-width: 900px;
    }
}


@media (max-width: 767.98px) {

    .dp-list-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-list-page-actions {
        width: 100%;
    }

        .dp-list-page-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .dp-search-layout {
        align-items: stretch;
        flex-direction: column;
    }

        .dp-search-layout .btn {
            width: 100%;
        }

    .dp-pets-table-wrapper {
        display: none;
    }

    .dp-pets-mobile-list {
        display: block;
    }
}


@media (max-width: 575.98px) {

    .dp-pets-page {
        padding-top: 20px;
    }

    .dp-list-page-header h1 {
        font-size: 1.5rem;
    }

    .dp-list-stat {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 13px;
    }

    .dp-list-stat-icon {
        width: 36px;
        height: 36px;
    }

    .dp-pets-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

/* ==========================================================================
   PROPIETARIOS
   ========================================================================== */

.dp-owners-page,
.dp-owner-page {
    padding: 28px 0 50px;
}

.dp-owners-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-owners-table-wrapper {
    overflow-x: auto;
}


/* ==========================================================================
   IDENTIDAD PROPIETARIO
   ========================================================================== */

.dp-owner-identity {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
}

    .dp-owner-identity:hover {
        color: inherit;
    }

.dp-owner-avatar {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--dp-primary-light);
    color: var(--dp-primary-dark);
    font-size: 0.70rem;
    font-weight: 750;
}

.dp-owner-identity > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dp-owner-identity strong {
    overflow: hidden;
    color: #3d525a;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dp-owner-identity:hover strong {
    color: var(--dp-primary);
}

.dp-owner-identity small {
    margin-top: 2px;
    color: #8a999f;
    font-size: 0.58rem;
}

.dp-owner-identification {
    color: #566970;
    font-size: 0.69rem;
    font-weight: 650;
}

.dp-owner-contact {
    display: flex;
    flex-direction: column;
}

    .dp-owner-contact strong {
        color: #50646c;
        font-size: 0.69rem;
        font-weight: 650;
    }

    .dp-owner-contact span {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        color: #588c77;
        font-size: 0.57rem;
    }

.dp-owner-email {
    max-width: 190px;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #52666e;
    font-size: 0.68rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .dp-owner-email:hover {
        color: var(--dp-primary);
    }


/* ==========================================================================
   DETALLE PROPIETARIO
   ========================================================================== */

.dp-owner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 22px 24px;
    border: 1px solid var(--dp-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-owner-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 17px;
}

.dp-owner-profile-avatar {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 19px;
    background: var(--dp-primary-light);
    color: var(--dp-primary-dark);
    font-size: 1.2rem;
    font-weight: 760;
}

.dp-owner-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

    .dp-owner-title h1 {
        margin: 2px 0;
        color: #2e444c;
        font-size: 1.6rem;
        font-weight: 760;
        letter-spacing: -0.4px;
    }

.dp-owner-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 9px;
    color: #697c83;
    font-size: 0.67rem;
}

    .dp-owner-header-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .dp-owner-header-meta i {
        color: #8ba0a7;
    }

.dp-owner-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-owner-header-actions .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 9px;
        font-size: 0.74rem;
    }


/* ==========================================================================
   INFORMACIÓN
   ========================================================================== */

.dp-owner-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ==========================================================================
   OBSERVACIONES
   ========================================================================== */

.dp-owner-notes {
    min-height: 110px;
    padding: 18px;
}

    .dp-owner-notes p {
        margin: 0;
        color: #5d7077;
        font-size: 0.72rem;
        line-height: 1.65;
    }

.dp-owner-notes-empty {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #96a3a8;
    font-size: 0.70rem;
}


/* ==========================================================================
   MASCOTAS DEL PROPIETARIO
   ========================================================================== */

.dp-owner-pet-item {
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 15px;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid #edf1f2;
    color: inherit;
}

    .dp-owner-pet-item:last-child {
        border-bottom: none;
    }

    .dp-owner-pet-item:hover {
        color: inherit;
        background: #fafcfc;
    }

.dp-owner-pet-photo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}

    .dp-owner-pet-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-owner-pet-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dp-owner-pet-item strong {
    color: #40545c;
    font-size: 0.74rem;
}

.dp-owner-pet-item > div > span {
    margin-top: 2px;
    color: #7d8e94;
    font-size: 0.61rem;
}

.dp-owner-pet-item small {
    margin-top: 2px;
    color: #9aa6aa;
    font-size: 0.56rem;
}

.dp-owner-pet-active {
    padding: 3px 7px;
    border-radius: 50px;
    background: #eaf8f1;
    color: #28765d;
    font-size: 0.56rem;
    font-weight: 700;
}

.dp-owner-pet-item > i {
    color: #a8b5ba;
    font-size: 0.67rem;
}

.dp-owner-pets-empty {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
}

    .dp-owner-pets-empty > span {
        width: 49px;
        height: 49px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        border-radius: 13px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
    }

    .dp-owner-pets-empty strong {
        color: #455961;
        font-size: 0.78rem;
    }

    .dp-owner-pets-empty p {
        max-width: 260px;
        margin: 5px 0 14px;
        color: var(--dp-text-muted);
        font-size: 0.67rem;
        line-height: 1.5;
    }


/* ==========================================================================
   MÓVIL
   ========================================================================== */

.dp-owners-mobile-list {
    display: none;
}

.dp-owner-mobile-card {
    padding: 16px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-owner-mobile-card:last-child {
        border-bottom: none;
    }

.dp-owner-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dp-owner-mobile-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dp-owner-mobile-profile > span:last-child {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-owner-mobile-profile strong {
        overflow: hidden;
        color: #3d525a;
        font-size: 0.76rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-owner-mobile-profile small {
        margin-top: 2px;
        color: var(--dp-text-muted);
        font-size: 0.58rem;
    }

.dp-owner-mobile-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 15px 0;
    padding: 13px;
    border-radius: 10px;
    background: #f8fafb;
}

    .dp-owner-mobile-info > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-owner-mobile-info span {
        color: #8b999f;
        font-size: 0.56rem;
    }

    .dp-owner-mobile-info strong {
        margin-top: 2px;
        overflow: hidden;
        color: #52666e;
        font-size: 0.66rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-owners-table-wrapper {
        overflow-x: auto;
    }

        .dp-owners-table-wrapper .dp-pets-table {
            min-width: 920px;
        }

    .dp-owner-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-owner-header-actions {
        width: 100%;
    }

        .dp-owner-header-actions .btn {
            flex: 1;
            justify-content: center;
        }
}

@media (max-width: 767.98px) {

    .dp-owners-table-wrapper {
        display: none;
    }

    .dp-owners-mobile-list {
        display: block;
    }

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

        .dp-owner-info-grid .dp-patient-info-item {
            border-right: none;
            border-bottom: 1px solid #edf1f2;
        }

            .dp-owner-info-grid .dp-patient-info-item:last-child {
                border-bottom: none;
            }
}

@media (max-width: 575.98px) {

    .dp-owners-page,
    .dp-owner-page {
        padding-top: 20px;
    }

    .dp-owner-header {
        padding: 17px;
    }

    .dp-owner-profile {
        align-items: flex-start;
        gap: 12px;
    }

    .dp-owner-profile-avatar {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        font-size: 0.90rem;
    }

    .dp-owner-title h1 {
        font-size: 1.3rem;
    }

    .dp-owner-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   AGENDA
   ========================================================================== */

.dp-agenda-page {
    padding: 28px 0 50px;
}


/* ==========================================================================
   FECHA PRINCIPAL
   ========================================================================== */

.dp-agenda-date-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: white;
    box-shadow: 0 3px 12px rgba(35, 69, 76, 0.03);
}

.dp-agenda-date-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dp-agenda-calendar-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1rem;
}

.dp-agenda-date-main > div {
    display: flex;
    flex-direction: column;
}

    .dp-agenda-date-main > div > span {
        color: var(--dp-text-muted);
        font-size: 0.62rem;
    }

.dp-agenda-date-main strong {
    margin-top: 2px;
    color: #40555d;
    font-size: 0.83rem;
    font-weight: 700;
    text-transform: capitalize;
}

.dp-agenda-today-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 50px;
    background: #eaf8f1;
    color: #28765d;
    font-size: 0.61rem;
    font-weight: 700;
}

    .dp-agenda-today-badge i {
        font-size: 0.38rem;
    }


/* ==========================================================================
   ICONOS RESUMEN
   ========================================================================== */

.dp-agenda-icon-warning {
    background: #fff5e8;
    color: #b47b37;
}

.dp-agenda-icon-muted {
    background: #f1f3f4;
    color: #718087;
}


/* ==========================================================================
   NAVEGACIÓN DE FECHA
   ========================================================================== */

.dp-agenda-navigation {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 13px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: white;
}

.dp-agenda-date-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.dp-agenda-date-input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .dp-agenda-date-input label {
        color: #667a81;
        font-size: 0.61rem;
        font-weight: 650;
    }

    .dp-agenda-date-input .form-control {
        min-width: 180px;
        min-height: 40px;
        border-radius: 8px;
        font-size: 0.72rem;
    }

.dp-agenda-date-form .btn,
.dp-agenda-day-navigation .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    font-size: 0.70rem;
}

.dp-agenda-day-navigation {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .dp-agenda-day-navigation .btn:first-child,
    .dp-agenda-day-navigation .btn:last-child {
        width: 40px;
    }


/* ==========================================================================
   LISTA DE CITAS
   ========================================================================== */

.dp-agenda-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-agenda-list {
    padding: 5px 18px;
}

.dp-appointment-item {
    display: grid;
    grid-template-columns: 58px 20px minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 112px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-appointment-item:last-child {
        border-bottom: none;
    }


/* Hora */

.dp-appointment-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 20px 4px 15px 0;
}

    .dp-appointment-time strong {
        color: #3d525a;
        font-size: 0.82rem;
    }

    .dp-appointment-time span {
        margin-top: 2px;
        color: #8c999e;
        font-size: 0.57rem;
    }


/* Línea de tiempo */

.dp-appointment-line {
    position: relative;
}

    .dp-appointment-line::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e1e8ea;
    }

    .dp-appointment-line > span {
        position: absolute;
        top: 24px;
        left: 50%;
        width: 9px;
        height: 9px;
        transform: translateX(-50%);
        border: 2px solid white;
        border-radius: 50%;
        background: var(--dp-primary);
        box-shadow: 0 0 0 2px var(--dp-primary-light);
    }


/* Contenido */

.dp-appointment-content {
    min-width: 0;
    padding: 16px 18px 16px 9px;
}

.dp-appointment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.dp-appointment-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dp-appointment-pet-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 0.83rem;
}

.dp-appointment-patient > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dp-appointment-patient a {
    color: #3e535b;
    font-size: 0.76rem;
    font-weight: 700;
}

    .dp-appointment-patient a:hover {
        color: var(--dp-primary);
    }

.dp-appointment-patient span {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: #85949a;
    font-size: 0.59rem;
}

.dp-appointment-details {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr);
    gap: 20px;
    margin-top: 13px;
}

    .dp-appointment-details > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-appointment-details span {
        color: #89989e;
        font-size: 0.56rem;
    }

    .dp-appointment-details strong {
        margin-top: 3px;
        overflow: hidden;
        color: #566970;
        font-size: 0.66rem;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


/* Estados */

.dp-appointment-status {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 0.57rem;
    font-weight: 700;
}

.dp-appointment-pending {
    background: #fff5df;
    color: #946923;
}

.dp-appointment-confirmed {
    background: #e8f4f7;
    color: #317381;
}

.dp-appointment-completed {
    background: #e9f8f1;
    color: #28765d;
}

.dp-appointment-cancelled {
    background: #fdeeee;
    color: #a75454;
}

.dp-appointment-noshow {
    background: #eff1f2;
    color: #68777d;
}

.dp-appointment-default {
    background: #f1f3f4;
    color: #65757b;
}


/* Acciones */

.dp-appointment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 0 15px 12px;
}

    .dp-appointment-actions .btn {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 7px;
        font-size: 0.62rem;
    }


/* ==========================================================================
   AGENDA VACÍA
   ========================================================================== */

.dp-agenda-empty {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-agenda-empty > span {
        width: 61px;
        height: 61px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        border-radius: 17px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
        font-size: 1.4rem;
    }

    .dp-agenda-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.90rem;
        font-weight: 700;
    }

    .dp-agenda-empty p {
        margin: 6px 0 17px;
        color: var(--dp-text-muted);
        font-size: 0.70rem;
    }


/* ==========================================================================
   FORMULARIOS DOCTORPET
   ========================================================================== */

.dp-form-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px 0 50px;
}

.dp-form-page-header {
    margin-bottom: 21px;
}

.dp-form-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.dp-form-heading-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.15rem;
}

.dp-form-heading h1 {
    margin: 2px 0 3px;
    color: #2e444c;
    font-size: 1.5rem;
    font-weight: 760;
}

.dp-form-heading p {
    margin: 0;
    color: var(--dp-text-muted);
    font-size: 0.72rem;
}

.dp-form-validation:empty {
    display: none;
}

.dp-form-validation {
    border-radius: 10px;
    font-size: 0.70rem;
}

.dp-form-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-form-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-form-card-header > span {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
    }

    .dp-form-card-header h2 {
        margin: 0;
        color: #3e535b;
        font-size: 0.84rem;
        font-weight: 720;
    }

    .dp-form-card-header p {
        margin: 2px 0 0;
        color: var(--dp-text-muted);
        font-size: 0.62rem;
    }

.dp-form-card-body {
    padding: 20px;
}

.dp-form-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 17px;
}

    .dp-form-footer-actions .btn {
        min-height: 41px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 9px;
        font-size: 0.73rem;
    }


/* ==========================================================================
   RESPONSIVE AGENDA
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-agenda-navigation {
        align-items: stretch;
        flex-direction: column;
    }

    .dp-agenda-day-navigation {
        justify-content: flex-end;
    }

    .dp-appointment-item {
        grid-template-columns: 55px 18px minmax(0, 1fr);
    }

    .dp-appointment-actions {
        grid-column: 3;
        justify-content: flex-end;
        padding: 0 0 13px 8px;
    }
}


@media (max-width: 767.98px) {

    .dp-agenda-date-form {
        align-items: stretch;
        flex-direction: column;
    }

    .dp-agenda-date-input .form-control {
        width: 100%;
        min-width: 0;
    }

    .dp-agenda-date-form .btn {
        width: 100%;
    }

    .dp-appointment-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


@media (max-width: 575.98px) {

    .dp-agenda-page {
        padding-top: 20px;
    }

    .dp-agenda-date-card {
        align-items: flex-start;
    }

    .dp-agenda-date-main strong {
        font-size: 0.72rem;
    }

    .dp-appointment-item {
        grid-template-columns: 44px 14px minmax(0, 1fr);
    }

    .dp-appointment-time strong {
        font-size: 0.70rem;
    }

    .dp-appointment-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-appointment-actions {
        flex-wrap: wrap;
    }

    .dp-form-card-body {
        padding: 15px;
    }

    .dp-form-footer-actions {
        flex-direction: column-reverse;
    }

        .dp-form-footer-actions .btn {
            width: 100%;
        }
}

/* ==========================================================================
   HISTORIA CLÍNICA
   ========================================================================== */

.dp-clinical-history-page,
.dp-clinical-details-page,
.dp-clinical-form-page {
    padding: 28px 0 50px;
}


/* ==========================================================================
   CABECERA HISTORIA
   ========================================================================== */

.dp-clinical-history-header,
.dp-clinical-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-clinical-history-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.dp-clinical-history-avatar {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 17px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.35rem;
}

    .dp-clinical-history-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-clinical-history-header h1,
.dp-clinical-details-header h1 {
    margin: 2px 0;
    color: #30464e;
    font-size: 1.55rem;
    font-weight: 760;
}

.dp-clinical-history-meta,
.dp-clinical-details-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
    color: #71848b;
    font-size: 0.64rem;
}

    .dp-clinical-history-meta span,
    .dp-clinical-details-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

.dp-clinical-history-actions,
.dp-clinical-details-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-clinical-history-actions .btn,
    .dp-clinical-details-actions .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 9px;
        font-size: 0.71rem;
    }

.dp-clinical-stat-date {
    background: #edf3fb;
    color: #587da8;
}

.dp-clinical-last-date {
    font-size: 0.94rem !important;
}


/* ==========================================================================
   HISTORIA / TIMELINE
   ========================================================================== */

.dp-clinical-history-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-clinical-timeline {
    padding: 7px 20px;
}

.dp-clinical-timeline-item {
    display: grid;
    grid-template-columns: 48px 24px minmax(0, 1fr);
    min-height: 145px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-clinical-timeline-item:last-child {
        border-bottom: none;
    }

.dp-clinical-timeline-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

    .dp-clinical-timeline-date strong {
        color: #3c5159;
        font-size: 1rem;
        line-height: 1;
    }

    .dp-clinical-timeline-date span {
        margin-top: 3px;
        color: var(--dp-primary);
        font-size: 0.56rem;
        font-weight: 750;
    }

    .dp-clinical-timeline-date small {
        margin-top: 2px;
        color: #929fa4;
        font-size: 0.54rem;
    }

.dp-clinical-timeline-line {
    position: relative;
}

    .dp-clinical-timeline-line::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e0e8ea;
    }

    .dp-clinical-timeline-line > span {
        position: absolute;
        top: 24px;
        left: 50%;
        width: 10px;
        height: 10px;
        transform: translateX(-50%);
        border: 2px solid white;
        border-radius: 50%;
        background: var(--dp-primary);
        box-shadow: 0 0 0 2px var(--dp-primary-light);
    }

.dp-clinical-timeline-content {
    min-width: 0;
    padding: 17px 5px 17px 12px;
}

.dp-clinical-visit-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

    .dp-clinical-visit-top > div {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
    }

.dp-clinical-visit-title {
    color: #3e535b;
    font-size: 0.77rem;
    font-weight: 720;
}

    .dp-clinical-visit-title:hover {
        color: var(--dp-primary);
    }

.dp-clinical-visit-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8b999e;
    font-size: 0.56rem;
}

.dp-clinical-prescription-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 50px;
    background: #eaf8f1;
    color: #337a63;
    font-size: 0.56rem;
    font-weight: 700;
}

.dp-clinical-visit-info {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) 90px;
    gap: 18px;
    margin-top: 13px;
}

    .dp-clinical-visit-info > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-clinical-visit-info span {
        color: #8c999e;
        font-size: 0.55rem;
    }

    .dp-clinical-visit-info strong {
        margin-top: 3px;
        overflow: hidden;
        color: #566970;
        font-size: 0.65rem;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.dp-clinical-visit-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

    .dp-clinical-visit-footer .btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 7px;
        font-size: 0.61rem;
    }


/* ==========================================================================
   HISTORIA VACÍA
   ========================================================================== */

.dp-clinical-empty {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-clinical-empty > span {
        width: 61px;
        height: 61px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        border-radius: 17px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
        font-size: 1.35rem;
    }

    .dp-clinical-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-clinical-empty p {
        max-width: 330px;
        margin: 6px 0 16px;
        color: var(--dp-text-muted);
        font-size: 0.68rem;
    }


/* ==========================================================================
   DETALLE CONSULTA
   ========================================================================== */

.dp-clinical-section-card,
.dp-clinical-side-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    background: white;
    box-shadow: 0 3px 13px rgba(35, 69, 76, 0.035);
}

.dp-clinical-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 17px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-clinical-section-header > span,
    .dp-clinical-side-title > span:first-child {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
    }

    .dp-clinical-section-header h2,
    .dp-clinical-side-title h2 {
        margin: 0;
        color: #40555d;
        font-size: 0.80rem;
        font-weight: 720;
    }

    .dp-clinical-section-header p {
        margin: 2px 0 0;
        color: var(--dp-text-muted);
        font-size: 0.59rem;
    }

.dp-clinical-text-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dp-clinical-text-item {
    min-height: 125px;
    padding: 16px 18px;
    border-right: 1px solid #edf1f2;
    border-bottom: 1px solid #edf1f2;
}

    .dp-clinical-text-item:nth-child(2n) {
        border-right: none;
    }

.dp-clinical-text-full {
    grid-column: 1 / -1;
    min-height: auto;
    border-right: none;
}

.dp-clinical-text-item span {
    display: block;
    margin-bottom: 6px;
    color: #85949a;
    font-size: 0.57rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dp-clinical-text-item p {
    margin: 0;
    color: #566970;
    font-size: 0.70rem;
    line-height: 1.65;
    white-space: pre-line;
}

.dp-clinical-diagnosis {
    background: #fbfdfd;
}


/* ==========================================================================
   PANEL LATERAL
   ========================================================================== */

.dp-clinical-side-title {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-bottom: 1px solid #edf1f2;
}

.dp-clinical-side-count {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 50px;
    background: #f0f4f5;
    color: #65777d;
    font-size: 0.57rem;
    font-weight: 700;
}

.dp-clinical-patient-card {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: inherit;
}

    .dp-clinical-patient-card:hover {
        color: inherit;
        background: #fafcfc;
    }

.dp-clinical-patient-avatar {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}

    .dp-clinical-patient-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-clinical-patient-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dp-clinical-patient-card strong {
    color: #40555d;
    font-size: 0.73rem;
}

.dp-clinical-patient-card span {
    margin-top: 2px;
    color: #839198;
    font-size: 0.57rem;
}

.dp-clinical-patient-card small {
    margin-top: 3px;
    color: #75878d;
    font-size: 0.59rem;
}

.dp-clinical-patient-card > i {
    color: #a5b2b6;
    font-size: 0.65rem;
}


/* ==========================================================================
   SIGNOS VITALES
   ========================================================================== */

.dp-vitals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .dp-vitals-grid > div {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 13px;
        border-right: 1px solid #edf1f2;
        border-bottom: 1px solid #edf1f2;
    }

        .dp-vitals-grid > div:nth-child(2n) {
            border-right: none;
        }

        .dp-vitals-grid > div > span {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 8px;
            background: #f3f7f8;
            color: #668188;
        }

        .dp-vitals-grid > div > div {
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

    .dp-vitals-grid small {
        color: #8a989d;
        font-size: 0.54rem;
    }

    .dp-vitals-grid strong {
        margin-top: 2px;
        color: #495e66;
        font-size: 0.68rem;
    }

.dp-vital-full {
    grid-column: 1 / -1;
    border-right: none !important;
}


/* ==========================================================================
   RECETAS
   ========================================================================== */

.dp-prescription-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 18px;
    text-align: center;
}

    .dp-prescription-empty > i {
        margin-bottom: 8px;
        color: #94a3a8;
        font-size: 1.3rem;
    }

    .dp-prescription-empty strong {
        color: #52666e;
        font-size: 0.72rem;
    }

    .dp-prescription-empty p {
        max-width: 240px;
        margin: 5px 0 13px;
        color: var(--dp-text-muted);
        font-size: 0.62rem;
    }

.dp-prescription-list {
    padding: 7px 13px;
}

.dp-prescription-item {
    padding: 11px 2px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-prescription-item:last-child {
        border-bottom: none;
    }

.dp-prescription-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

    .dp-prescription-item-header > div {
        display: flex;
        flex-direction: column;
    }

    .dp-prescription-item-header strong {
        color: #485c64;
        font-size: 0.66rem;
    }

    .dp-prescription-item-header > div > span {
        margin-top: 2px;
        color: #89979c;
        font-size: 0.55rem;
    }

    .dp-prescription-item-header > span {
        padding: 3px 6px;
        border-radius: 50px;
        background: var(--dp-primary-light);
        color: var(--dp-primary-dark);
        font-size: 0.53rem;
        font-weight: 650;
    }

.dp-prescription-actions {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

    .dp-prescription-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border-radius: 6px;
        font-size: 0.57rem;
    }

.dp-prescription-new {
    padding: 12px 13px;
    border-top: 1px solid #edf1f2;
}


/* ==========================================================================
   NUEVA CONSULTA
   ========================================================================== */

.dp-clinical-form-page {
    max-width: 1100px;
    margin: 0 auto;
}

.dp-consultation-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 50px;
    background: #e9f8f1;
    color: #337960;
    font-size: 0.61rem;
    font-weight: 700;
}

.dp-vitals-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.dp-input-unit {
    position: relative;
}

    .dp-input-unit .form-control {
        padding-right: 43px;
    }

    .dp-input-unit > span {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        color: #84949a;
        font-size: 0.63rem;
        font-weight: 650;
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-clinical-history-header,
    .dp-clinical-details-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-clinical-history-actions,
    .dp-clinical-details-actions {
        width: 100%;
    }

        .dp-clinical-history-actions .btn,
        .dp-clinical-details-actions .btn {
            flex: 1;
            justify-content: center;
        }

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


@media (max-width: 767.98px) {

    .dp-clinical-visit-info {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dp-clinical-text-grid {
        grid-template-columns: 1fr;
    }

    .dp-clinical-text-item,
    .dp-clinical-text-item:nth-child(2n) {
        border-right: none;
    }

    .dp-clinical-text-full {
        grid-column: auto;
    }
}


@media (max-width: 575.98px) {

    .dp-clinical-history-page,
    .dp-clinical-details-page,
    .dp-clinical-form-page {
        padding-top: 20px;
    }

    .dp-clinical-history-header,
    .dp-clinical-details-header {
        padding: 16px;
    }

    .dp-clinical-history-avatar {
        width: 55px;
        height: 55px;
        border-radius: 14px;
    }

    .dp-clinical-history-header h1,
    .dp-clinical-details-header h1 {
        font-size: 1.3rem;
    }

    .dp-clinical-timeline {
        padding: 5px 12px;
    }

    .dp-clinical-timeline-item {
        grid-template-columns: 39px 18px minmax(0, 1fr);
    }

    .dp-clinical-visit-top {
        flex-direction: column;
    }

    .dp-vitals-grid,
    .dp-vitals-form-grid {
        grid-template-columns: 1fr;
    }

        .dp-vitals-grid > div {
            border-right: none;
        }
}

/* ==========================================================================
   HOSPITALIZACIÓN
   ========================================================================== */

.dp-hospital-page,
.dp-hospital-details-page,
.dp-hospital-form-page {
    padding: 28px 0 50px;
}

.dp-hospital-form-page {
    max-width: 1050px;
    margin: 0 auto;
}


/* Filtros */

.dp-hospital-filter {
    display: flex;
    gap: 7px;
}

    .dp-hospital-filter .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 9px;
        font-size: 0.70rem;
    }


/* Resumen */

.dp-hospital-stat-active {
    background: #fdeeee;
    color: #af5555;
}


/* Lista */

.dp-hospital-list-card,
.dp-hospital-evolution-card,
.dp-hospital-info-card,
.dp-hospital-discharge-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-hospital-list {
    padding: 6px 18px;
}

.dp-hospital-item {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(320px, 2fr) 115px auto;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-hospital-item:last-child {
        border-bottom: none;
    }

.dp-hospital-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-hospital-patient-avatar {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 11px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
}

    .dp-hospital-patient-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-hospital-patient > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dp-hospital-patient a {
    color: #40555d;
    font-size: 0.73rem;
    font-weight: 720;
}

    .dp-hospital-patient a:hover {
        color: var(--dp-primary);
    }

.dp-hospital-patient span {
    margin-top: 1px;
    color: #8a989e;
    font-size: 0.56rem;
}

.dp-hospital-patient small {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #74868c;
    font-size: 0.57rem;
}

.dp-hospital-data {
    min-width: 0;
    display: grid;
    grid-template-columns: 110px 110px minmax(120px, 1fr);
    gap: 18px;
}

    .dp-hospital-data > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-hospital-data span {
        color: #8b999e;
        font-size: 0.53rem;
    }

    .dp-hospital-data strong {
        margin-top: 2px;
        overflow: hidden;
        color: #52666e;
        font-size: 0.64rem;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-hospital-data small {
        margin-top: 2px;
        color: #89979c;
        font-size: 0.54rem;
    }

.dp-hospital-status-active,
.dp-hospital-status-discharged {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 50px;
    font-size: 0.56rem;
    font-weight: 700;
}

.dp-hospital-status-active {
    background: #fdeeee;
    color: #a64e4e;
}

    .dp-hospital-status-active i {
        font-size: 0.36rem;
    }

.dp-hospital-status-discharged {
    background: #eaf8f1;
    color: #337960;
}

.dp-hospital-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 7px;
    font-size: 0.60rem;
}


/* Empty */

.dp-hospital-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-hospital-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: var(--dp-primary-light);
        color: var(--dp-primary);
        font-size: 1.4rem;
    }

    .dp-hospital-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-hospital-empty p {
        margin: 6px 0 0;
        color: var(--dp-text-muted);
        font-size: 0.67rem;
    }


/* ==========================================================================
   DETALLE
   ========================================================================== */

.dp-hospital-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-hospital-details-patient {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dp-hospital-details-avatar {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 17px;
    background: var(--dp-primary-light);
    color: var(--dp-primary);
    font-size: 1.3rem;
}

    .dp-hospital-details-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-hospital-details-header h1 {
    margin: 2px 0;
    color: #30464e;
    font-size: 1.5rem;
    font-weight: 760;
}

.dp-hospital-details-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
    color: #71848b;
    font-size: 0.62rem;
}

    .dp-hospital-details-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.dp-hospital-details-actions {
    display: flex;
    gap: 7px;
}

    .dp-hospital-details-actions .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 9px;
        font-size: 0.69rem;
    }


/* Información */

.dp-hospital-info-list {
    padding: 5px 14px;
}

    .dp-hospital-info-list > div {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        padding: 11px 0;
        border-bottom: 1px solid #edf1f2;
    }

        .dp-hospital-info-list > div:last-child {
            border-bottom: none;
        }

    .dp-hospital-info-list span {
        color: #89979c;
        font-size: 0.58rem;
    }

    .dp-hospital-info-list strong {
        color: #4d626a;
        font-size: 0.62rem;
        font-weight: 650;
        text-align: right;
    }

.dp-hospital-text-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #a45050 !important;
}

    .dp-hospital-text-active i {
        font-size: 0.36rem;
    }

.dp-hospital-text-discharged {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #347a62 !important;
}

.dp-hospital-reason,
.dp-hospital-initial-condition {
    padding: 17px;
    color: #566970;
    font-size: 0.69rem;
    line-height: 1.65;
    white-space: pre-line;
}


/* ==========================================================================
   EVOLUCIONES
   ========================================================================== */

.dp-hospital-evolution-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 240px;
    padding: 35px;
    text-align: center;
}

    .dp-hospital-evolution-empty > i {
        margin-bottom: 8px;
        color: #95a5aa;
        font-size: 1.5rem;
    }

    .dp-hospital-evolution-empty strong {
        color: #52666e;
        font-size: 0.74rem;
    }

    .dp-hospital-evolution-empty p {
        max-width: 320px;
        margin: 5px 0 14px;
        color: var(--dp-text-muted);
        font-size: 0.63rem;
    }

.dp-hospital-evolution-list {
    padding: 4px 18px;
}

.dp-hospital-evolution-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    border-bottom: 1px solid #edf1f2;
}

    .dp-hospital-evolution-item:last-child {
        border-bottom: none;
    }

.dp-hospital-evolution-marker {
    position: relative;
}

    .dp-hospital-evolution-marker::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e1e8ea;
    }

    .dp-hospital-evolution-marker span {
        position: absolute;
        top: 21px;
        left: 50%;
        width: 9px;
        height: 9px;
        transform: translateX(-50%);
        border: 2px solid white;
        border-radius: 50%;
        background: var(--dp-primary);
        box-shadow: 0 0 0 2px var(--dp-primary-light);
    }

.dp-hospital-evolution-content {
    padding: 16px 4px 18px 12px;
}

.dp-hospital-evolution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .dp-hospital-evolution-header > div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dp-hospital-evolution-header strong {
        color: #435860;
        font-size: 0.69rem;
    }

    .dp-hospital-evolution-header > div span {
        color: #8b999e;
        font-size: 0.57rem;
    }

    .dp-hospital-evolution-header > span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #72858b;
        font-size: 0.58rem;
    }


/* Vitales evolución */

.dp-hospital-vitals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 13px;
}

    .dp-hospital-vitals > div {
        display: flex;
        flex-direction: column;
        padding: 9px;
        border: 1px solid #edf1f2;
        border-radius: 8px;
        background: #fafcfc;
    }

    .dp-hospital-vitals span {
        color: #8c999e;
        font-size: 0.52rem;
    }

    .dp-hospital-vitals strong {
        margin-top: 2px;
        color: #50656c;
        font-size: 0.64rem;
    }

.dp-hospital-evolution-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 13px;
}

    .dp-hospital-evolution-text > div {
        min-width: 0;
    }

    .dp-hospital-evolution-text span {
        color: #87969b;
        font-size: 0.54rem;
        font-weight: 650;
        text-transform: uppercase;
    }

    .dp-hospital-evolution-text p {
        margin: 4px 0 0;
        color: #596d74;
        font-size: 0.64rem;
        line-height: 1.55;
        white-space: pre-line;
    }


/* ==========================================================================
   EGRESO EN DETALLE
   ========================================================================== */

.dp-hospital-discharge-card {
    border-color: #d7eee3;
}

.dp-hospital-discharge-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 17px;
    border-bottom: 1px solid #e4f1eb;
    background: #fbfefd;
}

    .dp-hospital-discharge-header > span {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #e7f7ef;
        color: #347b61;
    }

    .dp-hospital-discharge-header h2 {
        margin: 0;
        color: #40555d;
        font-size: 0.8rem;
    }

    .dp-hospital-discharge-header p {
        margin: 2px 0 0;
        color: #84949a;
        font-size: 0.57rem;
    }

.dp-hospital-discharge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .dp-hospital-discharge-grid > div {
        padding: 17px;
        border-right: 1px solid #edf1f2;
    }

        .dp-hospital-discharge-grid > div:last-child {
            border-right: none;
        }

    .dp-hospital-discharge-grid span {
        color: #86959a;
        font-size: 0.55rem;
        font-weight: 650;
        text-transform: uppercase;
    }

    .dp-hospital-discharge-grid p {
        margin: 5px 0 0;
        color: #566970;
        font-size: 0.67rem;
        line-height: 1.6;
        white-space: pre-line;
    }


/* Formularios */

.dp-hospital-form-icon {
    background: #edf5f7;
    color: #497b84;
}

.dp-discharge-icon {
    background: #e8f7ef;
    color: #347b61;
}


/* ==========================================================================
   RESPONSIVE HOSPITALIZACIÓN
   ========================================================================== */

@media (max-width: 1199.98px) {

    .dp-hospital-item {
        grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.5fr) 110px auto;
    }
}


@media (max-width: 991.98px) {

    .dp-hospital-item {
        grid-template-columns: 1fr auto;
    }

    .dp-hospital-data {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 1fr);
        padding-left: 53px;
    }

    .dp-hospital-status {
        grid-column: 1;
        padding-left: 53px;
    }

    .dp-hospital-actions {
        grid-column: 2;
    }

    .dp-hospital-details-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-hospital-details-actions {
        width: 100%;
    }

        .dp-hospital-details-actions .btn {
            flex: 1;
            justify-content: center;
        }
}


@media (max-width: 767.98px) {

    .dp-hospital-filter {
        width: 100%;
    }

        .dp-hospital-filter .btn {
            flex: 1;
            justify-content: center;
        }

    .dp-hospital-vitals {
        grid-template-columns: repeat(2, 1fr);
    }

    .dp-hospital-evolution-text,
    .dp-hospital-discharge-grid {
        grid-template-columns: 1fr;
    }

        .dp-hospital-discharge-grid > div {
            border-right: none;
            border-bottom: 1px solid #edf1f2;
        }

            .dp-hospital-discharge-grid > div:last-child {
                border-bottom: none;
            }
}


@media (max-width: 575.98px) {

    .dp-hospital-page,
    .dp-hospital-details-page,
    .dp-hospital-form-page {
        padding-top: 20px;
    }

    .dp-hospital-item {
        grid-template-columns: 1fr;
    }

    .dp-hospital-data {
        grid-column: auto;
        grid-template-columns: 1fr 1fr;
        padding-left: 0;
    }

    .dp-hospital-status,
    .dp-hospital-actions {
        grid-column: auto;
        padding-left: 0;
    }

        .dp-hospital-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .dp-hospital-details-header {
        padding: 16px;
    }

    .dp-hospital-details-avatar {
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .dp-hospital-details-header h1 {
        font-size: 1.3rem;
    }

    .dp-hospital-vitals {
        grid-template-columns: 1fr 1fr;
    }

    .dp-hospital-evolution-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   LABORATORIO
   ========================================================================== */

.dp-lab-page,
.dp-lab-form-page {
    padding: 28px 0 50px;
}

.dp-lab-form-page {
    max-width: 1050px;
    margin: 0 auto;
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-lab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-lab-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dp-lab-patient-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 17px;
    background: #edf6f8;
    color: #4d7d89;
    font-size: 1.25rem;
}

    .dp-lab-patient-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-lab-header h1 {
    margin: 2px 0;
    color: #30464e;
    font-size: 1.5rem;
    font-weight: 760;
}

.dp-lab-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
    color: #71848b;
    font-size: 0.62rem;
}

    .dp-lab-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.dp-lab-header-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    font-size: 0.7rem;
}


/* ==========================================================================
   RESUMEN
   ========================================================================== */

.dp-lab-stat-pending {
    background: #fff5df;
    color: #a97928;
}


/* ==========================================================================
   LISTADO
   ========================================================================== */

.dp-lab-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-lab-list {
    padding: 6px 18px;
}

.dp-lab-item {
    display: grid;
    grid-template-columns: 130px minmax(180px, 1.4fr) minmax(170px, 1fr) 160px auto;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-lab-item:last-child {
        border-bottom: none;
    }

.dp-lab-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-lab-date-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #f1f6f7;
    color: #63828a;
}

.dp-lab-date > div {
    display: flex;
    flex-direction: column;
}

.dp-lab-date strong {
    color: #4e626a;
    font-size: 0.64rem;
}

.dp-lab-date span {
    margin-top: 1px;
    color: #8a989d;
    font-size: 0.52rem;
}

.dp-lab-test,
.dp-lab-veterinarian {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dp-lab-test span,
    .dp-lab-veterinarian span {
        color: #8c999e;
        font-size: 0.52rem;
    }

    .dp-lab-test strong,
    .dp-lab-veterinarian strong {
        margin-top: 3px;
        overflow: hidden;
        color: #50656d;
        font-size: 0.64rem;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.dp-lab-result-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.dp-lab-status-completed,
.dp-lab-status-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: 700;
}

.dp-lab-status-completed {
    background: #eaf8f1;
    color: #337960;
}

.dp-lab-status-pending {
    background: #fff5df;
    color: #9b712b;
}

.dp-lab-result-status small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.53rem;
}

.dp-lab-actions {
    display: flex;
    gap: 5px;
}

    .dp-lab-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 7px;
        font-size: 0.58rem;
    }


/* ==========================================================================
   EMPTY
   ========================================================================== */

.dp-lab-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-lab-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: #edf6f8;
        color: #4f7c87;
        font-size: 1.35rem;
    }

    .dp-lab-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-lab-empty p {
        max-width: 320px;
        margin: 6px 0 15px;
        color: var(--dp-text-muted);
        font-size: 0.66rem;
    }


/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.dp-lab-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 50px;
    background: #edf6f8;
    color: #4e7882;
    font-size: 0.6rem;
    font-weight: 700;
}

.dp-lab-result-icon {
    background: #eef6f8;
    color: #4f7d88;
}

.dp-lab-result-textarea {
    min-height: 220px;
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
}


/* ==========================================================================
   BOTÓN VOLVER
   ========================================================================== */

.dp-back-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    color: #72858b;
    font-size: 0.63rem;
}

    .dp-back-button:hover {
        color: var(--dp-primary);
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-lab-item {
        grid-template-columns: 120px minmax(160px, 1fr) 150px auto;
    }

    .dp-lab-veterinarian {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .dp-lab-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-lab-header-actions {
        width: 100%;
    }

        .dp-lab-header-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .dp-lab-item {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .dp-lab-date {
        grid-column: 1;
    }

    .dp-lab-test {
        grid-column: 1;
    }

    .dp-lab-result-status {
        grid-column: 1;
    }

    .dp-lab-actions {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
        flex-direction: column;
    }
}


@media (max-width: 575.98px) {

    .dp-lab-page,
    .dp-lab-form-page {
        padding-top: 20px;
    }

    .dp-lab-header {
        padding: 16px;
    }

    .dp-lab-patient-avatar {
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .dp-lab-header h1 {
        font-size: 1.3rem;
    }

    .dp-lab-list {
        padding: 4px 13px;
    }
}

/* ==========================================================================
   PROCEDIMIENTOS CLÍNICOS
   ========================================================================== */

.dp-procedure-page,
.dp-procedure-details-page,
.dp-procedure-form-page {
    padding: 28px 0 50px;
}

.dp-procedure-form-page {
    max-width: 1050px;
    margin: 0 auto;
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-procedure-header,
.dp-procedure-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-procedure-patient,
.dp-procedure-details-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dp-procedure-patient-avatar,
.dp-procedure-details-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 17px;
    background: #f0f6f7;
    color: #547c83;
    font-size: 1.25rem;
}

    .dp-procedure-patient-avatar img,
    .dp-procedure-details-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-procedure-header h1,
.dp-procedure-details-header h1 {
    margin: 2px 0;
    color: #30464e;
    font-size: 1.5rem;
    font-weight: 760;
}

.dp-procedure-meta,
.dp-procedure-details-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
    color: #71848b;
    font-size: 0.62rem;
}

    .dp-procedure-meta span,
    .dp-procedure-details-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.dp-procedure-header-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    font-size: 0.69rem;
}

.dp-procedure-followup-icon {
    background: #fff5df;
    color: #9d762d;
}


/* ==========================================================================
   LISTADO
   ========================================================================== */

.dp-procedure-card,
.dp-procedure-detail-card,
.dp-procedure-side-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-procedure-list {
    padding: 6px 18px;
}

.dp-procedure-item {
    display: grid;
    grid-template-columns: 125px minmax(200px, 1.5fr) minmax(170px, 1fr) 135px auto;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-procedure-item:last-child {
        border-bottom: none;
    }

.dp-procedure-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-procedure-date > span {
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: #f1f6f7;
        color: #63828a;
    }

    .dp-procedure-date > div {
        display: flex;
        flex-direction: column;
    }

    .dp-procedure-date strong {
        color: #4d626a;
        font-size: 0.63rem;
    }

    .dp-procedure-date small {
        margin-top: 1px;
        color: #89979c;
        font-size: 0.54rem;
    }

.dp-procedure-main,
.dp-procedure-vet,
.dp-procedure-followup {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dp-procedure-main span,
    .dp-procedure-vet span,
    .dp-procedure-followup span {
        color: #8b999e;
        font-size: 0.52rem;
    }

    .dp-procedure-main strong,
    .dp-procedure-vet strong {
        margin-top: 3px;
        overflow: hidden;
        color: #50656d;
        font-size: 0.64rem;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-procedure-main > span {
        color: var(--dp-primary);
        font-weight: 650;
    }

    .dp-procedure-followup strong {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        color: #856825;
        font-size: 0.61rem;
    }

    .dp-procedure-followup small {
        margin-top: 3px;
        color: #9aa6aa;
        font-size: 0.56rem;
    }

.dp-procedure-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 7px;
    font-size: 0.59rem;
}


/* ==========================================================================
   SIN PROCEDIMIENTOS
   ========================================================================== */

.dp-procedure-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-procedure-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: #eef6f7;
        color: #527c84;
        font-size: 1.35rem;
    }

    .dp-procedure-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-procedure-empty p {
        max-width: 330px;
        margin: 6px 0 15px;
        color: var(--dp-text-muted);
        font-size: 0.66rem;
    }


/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.dp-procedure-form-icon {
    background: #eef6f7;
    color: #527c84;
}

.dp-procedure-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 50px;
    background: #edf6f8;
    color: #4e7882;
    font-size: 0.6rem;
    font-weight: 700;
}


/* ==========================================================================
   DETALLE
   ========================================================================== */

.dp-procedure-followup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 50px;
    background: #fff5df;
    color: #8a6724;
    font-size: 0.61rem;
    font-weight: 700;
}

.dp-procedure-detail-text {
    padding: 18px;
    color: #566970;
    font-size: 0.69rem;
    line-height: 1.65;
    white-space: pre-line;
}

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

    .dp-procedure-detail-grid > div {
        min-height: 145px;
        padding: 18px;
        border-right: 1px solid #edf1f2;
    }

        .dp-procedure-detail-grid > div:last-child {
            border-right: none;
        }

    .dp-procedure-detail-grid span {
        display: block;
        margin-bottom: 6px;
        color: #87959a;
        font-size: 0.55rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .dp-procedure-detail-grid p {
        margin: 0;
        color: #586c74;
        font-size: 0.67rem;
        line-height: 1.6;
        white-space: pre-line;
    }

.dp-procedure-complication {
    background: #fffafa;
}

    .dp-procedure-complication span {
        color: #a75b5b;
    }


/* ==========================================================================
   INFORMACIÓN LATERAL
   ========================================================================== */

.dp-procedure-info-list {
    padding: 5px 14px;
}

    .dp-procedure-info-list > div {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        padding: 11px 0;
        border-bottom: 1px solid #edf1f2;
    }

        .dp-procedure-info-list > div:last-child {
            border-bottom: none;
        }

    .dp-procedure-info-list span {
        color: #89979c;
        font-size: 0.57rem;
    }

    .dp-procedure-info-list strong {
        color: #4e626a;
        font-size: 0.61rem;
        font-weight: 650;
        text-align: right;
    }

.dp-procedure-followup-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #886826 !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .dp-procedure-item {
        grid-template-columns: 120px minmax(170px, 1fr) 130px auto;
    }

    .dp-procedure-vet {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .dp-procedure-header,
    .dp-procedure-details-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-procedure-header-actions {
        width: 100%;
    }

        .dp-procedure-header-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .dp-procedure-item {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .dp-procedure-date,
    .dp-procedure-main,
    .dp-procedure-followup {
        grid-column: 1;
    }

    .dp-procedure-actions {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
    }

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

        .dp-procedure-detail-grid > div {
            border-right: none;
            border-bottom: 1px solid #edf1f2;
        }

            .dp-procedure-detail-grid > div:last-child {
                border-bottom: none;
            }
}


@media (max-width: 575.98px) {

    .dp-procedure-page,
    .dp-procedure-details-page,
    .dp-procedure-form-page {
        padding-top: 20px;
    }

    .dp-procedure-header,
    .dp-procedure-details-header {
        padding: 16px;
    }

    .dp-procedure-patient-avatar,
    .dp-procedure-details-avatar {
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .dp-procedure-header h1,
    .dp-procedure-details-header h1 {
        font-size: 1.3rem;
    }

    .dp-procedure-list {
        padding: 4px 13px;
    }
}

/* ==========================================================================
   VACUNACIÓN
   ========================================================================== */

.dp-vaccine-page,
.dp-vaccine-form-page {
    padding: 28px 0 50px;
}

.dp-vaccine-form-page {
    max-width: 1050px;
    margin: 0 auto;
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-vaccine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-vaccine-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dp-vaccine-patient-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 17px;
    background: #edf7f3;
    color: #4a806b;
    font-size: 1.25rem;
}

    .dp-vaccine-patient-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-vaccine-header h1 {
    margin: 2px 0;
    color: #30464e;
    font-size: 1.5rem;
    font-weight: 760;
}

.dp-vaccine-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 14px;
    margin-top: 7px;
    color: #71848b;
    font-size: 0.62rem;
}

    .dp-vaccine-meta strong {
        color: #536970;
        font-weight: 700;
    }

    .dp-vaccine-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.dp-vaccine-header-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    font-size: 0.69rem;
}


/* ==========================================================================
   INDICADORES
   ========================================================================== */

.dp-vaccine-next-icon {
    background: #fff5df;
    color: #997329;
}

.dp-vaccine-last-icon {
    background: #eef3fb;
    color: #58759f;
}


/* ==========================================================================
   HISTORIAL
   ========================================================================== */

.dp-vaccine-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-vaccine-list {
    padding: 6px 18px;
}

.dp-vaccine-item {
    display: grid;
    grid-template-columns: 125px minmax(180px, 1.2fr) minmax(200px, 1.3fr) 145px minmax(150px, 1fr);
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-vaccine-item:last-child {
        border-bottom: none;
    }

.dp-vaccine-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-vaccine-date > span {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: #edf7f3;
        color: #4b816b;
    }

    .dp-vaccine-date > div {
        display: flex;
        flex-direction: column;
    }

    .dp-vaccine-date strong {
        color: #4d626a;
        font-size: 0.63rem;
    }

    .dp-vaccine-date small {
        margin-top: 1px;
        color: #89979c;
        font-size: 0.53rem;
    }

.dp-vaccine-name,
.dp-vaccine-vet,
.dp-vaccine-next {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dp-vaccine-name span,
    .dp-vaccine-vet span,
    .dp-vaccine-next span,
    .dp-vaccine-product span {
        color: #8b999e;
        font-size: 0.52rem;
    }

    .dp-vaccine-name strong,
    .dp-vaccine-vet strong {
        margin-top: 3px;
        overflow: hidden;
        color: #50656d;
        font-size: 0.64rem;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-vaccine-name strong {
        color: #3f6960;
    }

.dp-vaccine-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

    .dp-vaccine-product > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .dp-vaccine-product strong {
        margin-top: 3px;
        overflow: hidden;
        color: #53676e;
        font-size: 0.61rem;
        font-weight: 630;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.dp-vaccine-next strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #886827;
    font-size: 0.61rem;
}

.dp-vaccine-next small {
    margin-top: 3px;
    color: #99a5a9;
    font-size: 0.56rem;
}


/* ==========================================================================
   EMPTY
   ========================================================================== */

.dp-vaccine-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-vaccine-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: #edf7f3;
        color: #4b806b;
        font-size: 1.4rem;
    }

    .dp-vaccine-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-vaccine-empty p {
        max-width: 330px;
        margin: 6px 0 15px;
        color: var(--dp-text-muted);
        font-size: 0.66rem;
    }


/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.dp-vaccine-form-icon {
    background: #edf7f3;
    color: #4b806b;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .dp-vaccine-item {
        grid-template-columns: 120px minmax(160px, 1fr) minmax(160px, 1fr) 140px;
    }

    .dp-vaccine-vet {
        display: none;
    }
}


@media (max-width: 991.98px) {

    .dp-vaccine-item {
        grid-template-columns: 110px minmax(160px, 1fr) 140px;
    }

    .dp-vaccine-product {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .dp-vaccine-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-vaccine-header-actions {
        width: 100%;
    }

        .dp-vaccine-header-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .dp-vaccine-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dp-vaccine-date,
    .dp-vaccine-name,
    .dp-vaccine-next {
        grid-column: 1;
    }
}


@media (max-width: 575.98px) {

    .dp-vaccine-page,
    .dp-vaccine-form-page {
        padding-top: 20px;
    }

    .dp-vaccine-header {
        padding: 16px;
    }

    .dp-vaccine-patient-avatar {
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .dp-vaccine-header h1 {
        font-size: 1.3rem;
    }

    .dp-vaccine-list {
        padding: 4px 13px;
    }
}

/* ==========================================================================
   PREVENCIÓN / DESPARASITACIÓN
   ========================================================================== */

.dp-prevention-page,
.dp-prevention-form-page {
    padding: 28px 0 50px;
}

.dp-prevention-form-page {
    max-width: 1050px;
    margin: 0 auto;
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-prevention-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 17px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-prevention-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dp-prevention-patient-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 17px;
    background: #edf7f3;
    color: #4c806c;
    font-size: 1.25rem;
}

    .dp-prevention-patient-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.dp-prevention-header h1 {
    margin: 2px 0;
    color: #30464e;
    font-size: 1.5rem;
    font-weight: 760;
}

.dp-prevention-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 14px;
    margin-top: 7px;
    color: #71848b;
    font-size: 0.62rem;
}

    .dp-prevention-meta strong {
        color: #536970;
        font-weight: 700;
    }

    .dp-prevention-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.dp-prevention-header-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    font-size: 0.69rem;
}


/* ==========================================================================
   INDICADORES
   ========================================================================== */

.dp-prevention-upcoming-icon {
    background: #fff5df;
    color: #997329;
}

.dp-prevention-overdue-icon {
    background: #fff0f0;
    color: #a65353;
}

.dp-prevention-last-icon {
    background: #eef3fb;
    color: #58759f;
}


/* ==========================================================================
   HISTORIAL
   ========================================================================== */

.dp-prevention-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-prevention-list {
    padding: 6px 18px;
}

.dp-prevention-item {
    display: grid;
    grid-template-columns: 125px minmax(200px, 1.4fr) 120px 155px minmax(160px, 1fr);
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-prevention-item:last-child {
        border-bottom: none;
    }

.dp-prevention-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-prevention-date > span {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: #edf7f3;
        color: #4b806b;
    }

    .dp-prevention-date > div {
        display: flex;
        flex-direction: column;
    }

    .dp-prevention-date strong {
        color: #4d626a;
        font-size: 0.63rem;
    }

    .dp-prevention-date small {
        margin-top: 1px;
        color: #89979c;
        font-size: 0.53rem;
    }

.dp-prevention-main,
.dp-prevention-dose,
.dp-prevention-next,
.dp-prevention-vet {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dp-prevention-main span,
    .dp-prevention-dose span,
    .dp-prevention-next span,
    .dp-prevention-vet span {
        color: #8b999e;
        font-size: 0.52rem;
    }

    .dp-prevention-main > span {
        color: var(--dp-primary);
        font-weight: 650;
    }

    .dp-prevention-main strong,
    .dp-prevention-dose strong,
    .dp-prevention-vet strong {
        margin-top: 3px;
        overflow: hidden;
        color: #50656d;
        font-size: 0.64rem;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-prevention-main strong {
        color: #3f6960;
    }

    .dp-prevention-next strong {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        color: #886827;
        font-size: 0.61rem;
    }

    .dp-prevention-next small {
        margin-top: 3px;
        color: #99a5a9;
        font-size: 0.55rem;
    }

.dp-prevention-date-overdue {
    color: #a75353 !important;
}

.dp-prevention-overdue-label {
    color: #a75353 !important;
    font-weight: 700;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.dp-prevention-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-prevention-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: #edf7f3;
        color: #4b806b;
        font-size: 1.4rem;
    }

    .dp-prevention-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-prevention-empty p {
        max-width: 340px;
        margin: 6px 0 15px;
        color: var(--dp-text-muted);
        font-size: 0.66rem;
    }


/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.dp-prevention-form-icon {
    background: #edf7f3;
    color: #4b806b;
}

.dp-prevention-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 50px;
    background: #edf6f8;
    color: #4e7882;
    font-size: 0.6rem;
    font-weight: 700;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .dp-prevention-item {
        grid-template-columns: 120px minmax(180px, 1fr) 130px minmax(150px, 1fr);
    }

    .dp-prevention-dose {
        display: none;
    }
}


@media (max-width: 991.98px) {

    .dp-prevention-item {
        grid-template-columns: 115px minmax(170px, 1fr) 145px;
    }

    .dp-prevention-vet {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .dp-prevention-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-prevention-header-actions {
        width: 100%;
    }

        .dp-prevention-header-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .dp-prevention-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dp-prevention-date,
    .dp-prevention-main,
    .dp-prevention-next {
        grid-column: 1;
    }
}


@media (max-width: 575.98px) {

    .dp-prevention-page,
    .dp-prevention-form-page {
        padding-top: 20px;
    }

    .dp-prevention-header {
        padding: 16px;
    }

    .dp-prevention-patient-avatar {
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .dp-prevention-header h1 {
        font-size: 1.3rem;
    }

    .dp-prevention-list {
        padding: 4px 13px;
    }
}

/* ==========================================================================
   RECORDATORIOS
   ========================================================================== */

.dp-reminders-page,
.dp-reminder-form-page {
    padding: 28px 0 50px;
}

.dp-reminder-form-page {
    max-width: 1050px;
    margin: 0 auto;
}


/* ==========================================================================
   INDICADORES
   ========================================================================== */

.dp-reminder-pending-icon {
    background: #fff5df;
    color: #987128;
}

.dp-reminder-overdue-icon {
    background: #fff0f0;
    color: #a45151;
}


/* ==========================================================================
   FILTROS
   ========================================================================== */

.dp-reminder-filter-card {
    margin-bottom: 18px;
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    background: white;
    box-shadow: 0 3px 12px rgba(35, 69, 76, 0.03);
}

.dp-reminder-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
}

    .dp-reminder-filter > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .dp-reminder-filter strong {
        color: #4c6169;
        font-size: 0.68rem;
    }

    .dp-reminder-filter span {
        margin-top: 2px;
        color: #8a989d;
        font-size: 0.56rem;
    }

.dp-reminder-filter-buttons {
    display: flex;
    gap: 6px;
}

    .dp-reminder-filter-buttons .btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 8px;
        font-size: 0.59rem;
    }


/* ==========================================================================
   LISTADO
   ========================================================================== */

.dp-reminder-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-reminder-list {
    padding: 5px 18px;
}

.dp-reminder-item {
    display: grid;
    grid-template-columns: 120px minmax(240px, 1.7fr) minmax(150px, 1fr) minmax(145px, 0.9fr) 105px auto;
    align-items: center;
    gap: 17px;
    padding: 16px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-reminder-item:last-child {
        border-bottom: none;
    }

.dp-reminder-item-overdue {
    background: linear-gradient( 90deg, rgba(183, 81, 81, 0.045), transparent 25% );
}

.dp-reminder-item-completed {
    opacity: 0.75;
}


/* ==========================================================================
   FECHA
   ========================================================================== */

.dp-reminder-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-reminder-date > span {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: #f0f6f7;
        color: #5f8088;
    }

    .dp-reminder-date > .dp-reminder-date-danger {
        background: #fff0f0;
        color: #a55252;
    }

    .dp-reminder-date > div {
        display: flex;
        flex-direction: column;
    }

    .dp-reminder-date strong {
        color: #4e626a;
        font-size: 0.63rem;
    }

    .dp-reminder-date small {
        margin-top: 1px;
        color: #89979c;
        font-size: 0.53rem;
    }


/* ==========================================================================
   CONTENIDO
   ========================================================================== */

.dp-reminder-main {
    min-width: 0;
}

.dp-reminder-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
}

.dp-reminder-type,
.dp-reminder-source {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: 700;
}

.dp-reminder-type {
    background: #edf6f7;
    color: #547780;
}

.dp-reminder-source {
    background: #f3f1fa;
    color: #716694;
}

.dp-reminder-main > strong {
    display: block;
    overflow: hidden;
    color: #485f67;
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dp-reminder-main p {
    display: -webkit-box;
    overflow: hidden;
    margin: 3px 0 0;
    color: #7d8e94;
    font-size: 0.56rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dp-reminder-channels {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

    .dp-reminder-channels span {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: #778b92;
        font-size: 0.5rem;
    }


/* ==========================================================================
   PACIENTE / RESPONSABLE
   ========================================================================== */

.dp-reminder-patient,
.dp-reminder-responsible {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dp-reminder-patient > span,
    .dp-reminder-responsible > span {
        color: #8b999e;
        font-size: 0.51rem;
    }

    .dp-reminder-patient a {
        display: flex;
        flex-direction: column;
        margin-top: 3px;
        text-decoration: none;
    }

    .dp-reminder-patient strong,
    .dp-reminder-responsible strong {
        margin-top: 3px;
        overflow: hidden;
        color: #52676f;
        font-size: 0.62rem;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dp-reminder-patient a strong {
        margin-top: 0;
        color: var(--dp-primary);
    }

    .dp-reminder-patient small {
        overflow: hidden;
        margin-top: 1px;
        color: #89979d;
        font-size: 0.52rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


/* ==========================================================================
   ESTADOS
   ========================================================================== */

.dp-reminder-state {
    display: flex;
    justify-content: flex-start;
}

.dp-reminder-status-pending,
.dp-reminder-status-overdue,
.dp-reminder-status-completed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 50px;
    font-size: 0.53rem;
    font-weight: 700;
}

.dp-reminder-status-pending {
    background: #fff5df;
    color: #927026;
}

.dp-reminder-status-overdue {
    background: #fff0f0;
    color: #a24e4e;
}

.dp-reminder-status-completed {
    background: #eaf8f1;
    color: #34785f;
}


/* ==========================================================================
   ACCIONES
   ========================================================================== */

.dp-reminder-actions {
    display: flex;
    gap: 4px;
}

    .dp-reminder-actions form {
        margin: 0;
    }

    .dp-reminder-actions .btn {
        width: 31px;
        height: 29px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 7px;
        font-size: 0.62rem;
    }


/* ==========================================================================
   EMPTY
   ========================================================================== */

.dp-reminder-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-reminder-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: #eef6f7;
        color: #567c84;
        font-size: 1.35rem;
    }

    .dp-reminder-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-reminder-empty p {
        max-width: 340px;
        margin: 6px 0 15px;
        color: var(--dp-text-muted);
        font-size: 0.66rem;
    }


/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.dp-reminder-form-icon {
    background: #fff5df;
    color: #92702a;
}

.dp-reminder-edit-icon {
    background: #eef3fb;
    color: #5c7598;
}


/* ==========================================================================
   CANALES
   ========================================================================== */

.dp-reminder-channel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dp-reminder-channel-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid #e6edef;
    border-radius: 12px;
    background: #fafcfc;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

    .dp-reminder-channel-option:hover {
        border-color: #cfdfe1;
        background: white;
        transform: translateY(-1px);
    }

.dp-reminder-channel-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 0.9rem;
}

.dp-reminder-email-icon {
    background: #eef3fb;
    color: #54739d;
}

.dp-reminder-whatsapp-icon {
    background: #edf8f1;
    color: #41805b;
}

.dp-reminder-channel-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .dp-reminder-channel-content strong {
        color: #4c6169;
        font-size: 0.65rem;
    }

    .dp-reminder-channel-content small {
        margin-top: 2px;
        color: #86969c;
        font-size: 0.54rem;
    }

.dp-reminder-channel-option .form-check-input {
    cursor: pointer;
}

.dp-reminder-notification-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 13px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #f5f8f9;
    color: #75878d;
    font-size: 0.55rem;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .dp-reminder-item {
        grid-template-columns: 115px minmax(220px, 1.5fr) minmax(145px, 1fr) 100px auto;
    }

    .dp-reminder-responsible {
        display: none;
    }
}


@media (max-width: 991.98px) {

    .dp-reminder-item {
        grid-template-columns: 110px minmax(220px, 1fr) 100px auto;
    }

    .dp-reminder-patient {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .dp-reminder-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .dp-reminder-filter-buttons {
        width: 100%;
    }

        .dp-reminder-filter-buttons .btn {
            flex: 1;
            justify-content: center;
        }

    .dp-reminder-item {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 15px 0;
    }

    .dp-reminder-date,
    .dp-reminder-main,
    .dp-reminder-state {
        grid-column: 1;
    }

    .dp-reminder-actions {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
        flex-direction: column;
    }

    .dp-reminder-channel-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {

    .dp-reminders-page,
    .dp-reminder-form-page {
        padding-top: 20px;
    }

    .dp-reminder-filter-buttons {
        flex-direction: column;
    }

        .dp-reminder-filter-buttons .btn {
            width: 100%;
        }

    .dp-reminder-list {
        padding: 4px 13px;
    }
}

/* ==========================================================================
   COMUNICACIONES
   ========================================================================== */

.dp-communications-page,
.dp-communication-form-page,
.dp-communication-details-page {
    padding: 28px 0 50px;
}

.dp-communication-form-page,
.dp-communication-details-page {
    max-width: 1100px;
    margin: 0 auto;
}


/* ==========================================================================
   INDICADORES
   ========================================================================== */

.dp-communication-prepared-icon {
    background: #fff5df;
    color: #92702a;
}

.dp-communication-failed-icon {
    background: #fff0f0;
    color: #a45454;
}


/* ==========================================================================
   LISTADO
   ========================================================================== */

.dp-communications-card {
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 4px 16px rgba(35, 69, 76, 0.04);
}

.dp-communications-list {
    padding: 5px 18px;
}

.dp-communication-item {
    display: grid;
    grid-template-columns: 120px minmax(180px, 1.2fr) 115px minmax(180px, 1fr) 105px auto;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f2;
}

    .dp-communication-item:last-child {
        border-bottom: none;
    }

.dp-communication-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-communication-date > span {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: #f0f6f7;
        color: #5b7c84;
    }

    .dp-communication-date > div,
    .dp-communication-owner,
    .dp-communication-recipient {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

        .dp-communication-date strong,
        .dp-communication-owner strong,
        .dp-communication-recipient strong {
            overflow: hidden;
            color: #50656d;
            font-size: 0.62rem;
            font-weight: 650;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .dp-communication-date small,
        .dp-communication-owner small {
            margin-top: 2px;
            color: #8a989d;
            font-size: 0.52rem;
        }

        .dp-communication-owner > span,
        .dp-communication-recipient > span {
            color: #8b999e;
            font-size: 0.51rem;
        }

        .dp-communication-owner strong,
        .dp-communication-recipient strong {
            margin-top: 3px;
        }


/* ==========================================================================
   CANALES
   ========================================================================== */

.dp-channel-whatsapp,
.dp-channel-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 50px;
    font-size: 0.54rem;
    font-weight: 700;
}

.dp-channel-whatsapp {
    background: #edf8f1;
    color: #3d7e58;
}

.dp-channel-email {
    background: #edf3fb;
    color: #52739c;
}


/* ==========================================================================
   ESTADOS
   ========================================================================== */

.dp-communication-status-prepared,
.dp-communication-status-sent,
.dp-communication-status-failed,
.dp-communication-status-cancelled,
.dp-communication-status-default {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 4px 7px;
    border-radius: 50px;
    font-size: 0.53rem;
    font-weight: 700;
}

.dp-communication-status-prepared {
    background: #fff5df;
    color: #92702a;
}

.dp-communication-status-sent {
    background: #eaf8f1;
    color: #35785f;
}

.dp-communication-status-failed {
    background: #fff0f0;
    color: #a34f4f;
}

.dp-communication-status-cancelled {
    background: #f0f2f3;
    color: #6c7d83;
}

.dp-communication-status-default {
    background: #f4f6f7;
    color: #697c83;
}


/* ==========================================================================
   ACCIONES
   ========================================================================== */

.dp-communication-actions {
    display: flex;
    justify-content: flex-end;
}

    .dp-communication-actions .btn {
        width: 31px;
        height: 29px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 7px;
        font-size: 0.62rem;
    }


/* ==========================================================================
   EMPTY
   ========================================================================== */

.dp-communications-empty {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .dp-communications-empty > span {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        border-radius: 17px;
        background: #eef6f7;
        color: #587b83;
        font-size: 1.35rem;
    }

    .dp-communications-empty h3 {
        margin: 0;
        color: #40555d;
        font-size: 0.9rem;
    }

    .dp-communications-empty p {
        max-width: 330px;
        margin: 6px 0 0;
        color: var(--dp-text-muted);
        font-size: 0.66rem;
    }


/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.dp-communication-form-icon {
    background: #edf6f7;
    color: #547a83;
}

.dp-communication-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f5f8f9;
    color: #74878d;
}

    .dp-communication-info > i {
        margin-top: 1px;
        color: #5d8189;
    }

    .dp-communication-info > div {
        display: flex;
        flex-direction: column;
    }

    .dp-communication-info strong {
        color: #536970;
        font-size: 0.6rem;
    }

    .dp-communication-info span {
        margin-top: 2px;
        font-size: 0.55rem;
    }


/* ==========================================================================
   DETALLE
   ========================================================================== */

.dp-communication-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--dp-border);
    border-radius: 16px;
    background: white;
    box-shadow: var(--dp-shadow-sm);
}

.dp-communication-details-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.dp-communication-details-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    background: #edf6f7;
    color: #527a82;
    font-size: 1.2rem;
}

.dp-communication-details-title h1 {
    margin: 2px 0 0;
    color: #30464e;
    font-size: 1.35rem;
    font-weight: 750;
}

.dp-communication-details-title p {
    margin: 4px 0 0;
    color: #829297;
    font-size: 0.58rem;
}

.dp-communication-info-card,
.dp-communication-content-card {
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    background: white;
    box-shadow: 0 3px 13px rgba(35, 69, 76, 0.035);
}

.dp-communication-info-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-communication-info-header i {
        color: var(--dp-primary);
    }

    .dp-communication-info-header h2 {
        margin: 0;
        color: #4b6169;
        font-size: 0.7rem;
    }

.dp-communication-info-list {
    padding: 7px 16px;
}

    .dp-communication-info-list > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 10px 0;
        border-bottom: 1px solid #edf1f2;
    }

        .dp-communication-info-list > div:last-child {
            border-bottom: none;
        }

    .dp-communication-info-list span {
        color: #8b999e;
        font-size: 0.51rem;
    }

    .dp-communication-info-list strong,
    .dp-communication-info-list a {
        color: #52676f;
        font-size: 0.62rem;
        font-weight: 650;
        text-decoration: none;
    }

    .dp-communication-info-list a {
        color: var(--dp-primary);
    }

.dp-text-whatsapp {
    color: #3f7f5b !important;
}

.dp-text-email {
    color: #53749c !important;
}

.dp-communication-content-card {
    padding: 18px;
}

.dp-communication-content-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    color: #849399;
    font-size: 0.55rem;
    font-weight: 650;
}

.dp-communication-subject {
    color: #40555d;
    font-size: 0.85rem;
    font-weight: 700;
}

.dp-communication-message {
    color: #53676f;
    font-size: 0.68rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.dp-communication-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid #f0d1d1;
    border-radius: 10px;
    background: #fff5f5;
    color: #a25252;
}

    .dp-communication-error > div {
        display: flex;
        flex-direction: column;
    }

    .dp-communication-error strong {
        font-size: 0.62rem;
    }

    .dp-communication-error span {
        margin-top: 2px;
        font-size: 0.56rem;
    }

.dp-communication-danger-actions {
    display: flex;
    justify-content: flex-end;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .dp-communication-item {
        grid-template-columns: 115px minmax(170px, 1fr) 105px minmax(165px, 1fr) auto;
    }

    .dp-communication-state {
        display: none;
    }
}


@media (max-width: 991.98px) {

    .dp-communication-item {
        grid-template-columns: 110px minmax(180px, 1fr) 105px auto;
    }

    .dp-communication-recipient {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .dp-communication-item {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 15px 0;
    }

    .dp-communication-date,
    .dp-communication-owner,
    .dp-communication-channel {
        grid-column: 1;
    }

    .dp-communication-actions {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
    }

    .dp-communication-details-header {
        align-items: stretch;
        flex-direction: column;
    }

        .dp-communication-details-header .btn {
            justify-content: center;
        }
}


@media (max-width: 575.98px) {

    .dp-communications-page,
    .dp-communication-form-page,
    .dp-communication-details-page {
        padding-top: 20px;
    }

    .dp-communications-list {
        padding: 4px 13px;
    }
}

/* ==========================================================================
   REPORTES
   ========================================================================== */

.dp-reports-page {
    padding: 28px 0 55px;
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

.dp-reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

    .dp-reports-header h1 {
        margin: 2px 0 4px;
        color: #30464e;
        font-size: 1.55rem;
        font-weight: 760;
    }

    .dp-reports-header p {
        margin: 0;
        color: #7c8d93;
        font-size: 0.65rem;
    }

        .dp-reports-header p strong {
            color: #536970;
        }

    .dp-reports-header .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 39px;
        border-radius: 9px;
        font-size: 0.67rem;
    }


/* ==========================================================================
   FILTRO
   ========================================================================== */

.dp-reports-filter {
    margin-bottom: 12px;
    padding: 17px 18px;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 3px 14px rgba(35, 69, 76, 0.035);
}

.dp-reports-filter-heading {
    margin-bottom: 14px;
}

    .dp-reports-filter-heading > div {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .dp-reports-filter-heading i {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #edf6f7;
        color: #577b83;
    }

    .dp-reports-filter-heading div div {
        display: flex;
        flex-direction: column;
    }

    .dp-reports-filter-heading strong {
        color: #4c626a;
        font-size: 0.66rem;
    }

    .dp-reports-filter-heading span {
        margin-top: 1px;
        color: #8a999e;
        font-size: 0.54rem;
    }

.dp-reports-filter-actions {
    display: flex;
    gap: 6px;
}

    .dp-reports-filter-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 38px;
        border-radius: 8px;
        font-size: 0.61rem;
    }


/* ==========================================================================
   PERÍODO
   ========================================================================== */

.dp-reports-period {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 17px;
    color: #819197;
    font-size: 0.56rem;
}

    .dp-reports-period i {
        color: var(--dp-primary);
    }

    .dp-reports-period strong {
        color: #586e76;
    }


/* ==========================================================================
   KPIS
   ========================================================================== */

.dp-report-kpi {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: white;
    box-shadow: 0 3px 13px rgba(35, 69, 76, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .dp-report-kpi:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 17px rgba(35, 69, 76, 0.055);
    }

.dp-report-kpi-icon {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    font-size: 0.92rem;
}

.dp-report-kpi > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dp-report-kpi strong {
    color: #405860;
    font-size: 1.15rem;
    font-weight: 760;
    line-height: 1.1;
}

.dp-report-kpi span:not(.dp-report-kpi-icon) {
    margin-top: 3px;
    color: #7d8f95;
    font-size: 0.56rem;
}

.dp-report-kpi small {
    margin-top: 2px;
    color: #9aa6aa;
    font-size: 0.49rem;
}

.dp-report-kpi-pets {
    background: #edf7f3;
    color: #4a806b;
}

.dp-report-kpi-owners {
    background: #edf3fb;
    color: #56739a;
}

.dp-report-kpi-appointments {
    background: #f0f6f7;
    color: #587a82;
}

.dp-report-kpi-visits {
    background: #f2eff9;
    color: #716796;
}

.dp-report-kpi-procedures {
    background: #fff4e8;
    color: #9b703d;
}

.dp-report-kpi-hospital {
    background: #fff0f0;
    color: #a15454;
}

.dp-report-kpi-vaccines {
    background: #edf8f1;
    color: #3f7c59;
}

.dp-report-kpi-reminders {
    background: #fff5df;
    color: #927129;
}


/* ==========================================================================
   SECCIONES
   ========================================================================== */

.dp-report-section {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: white;
    box-shadow: 0 3px 14px rgba(35, 69, 76, 0.035);
}

.dp-report-section-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 16px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-report-section-header > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.dp-report-section-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #edf6f7;
    color: #577b83;
    font-size: 0.75rem;
}

.dp-report-upcoming-icon {
    background: #fff5df;
    color: #927129;
}

.dp-report-section-header h2 {
    margin: 0;
    color: #495f67;
    font-size: 0.72rem;
    font-weight: 700;
}

.dp-report-section-header p {
    margin: 2px 0 0;
    color: #8b999e;
    font-size: 0.53rem;
}


/* ==========================================================================
   TABLAS
   ========================================================================== */

.dp-report-table {
    font-size: 0.59rem;
}

    .dp-report-table thead th {
        padding: 10px 13px;
        border-bottom: 1px solid #e6edef;
        background: #f8fafb;
        color: #71838a;
        font-size: 0.52rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .dp-report-table tbody td {
        padding: 10px 13px;
        border-color: #edf1f2;
        color: #586c74;
        vertical-align: middle;
    }

    .dp-report-table tbody tr:hover {
        background: #fbfcfc;
    }

.dp-report-date {
    display: flex;
    flex-direction: column;
}

    .dp-report-date strong {
        color: #50656d;
        font-size: 0.58rem;
    }

    .dp-report-date small {
        margin-top: 1px;
        color: #929fa3;
        font-size: 0.48rem;
    }

.dp-report-patient-link {
    color: var(--dp-primary);
    font-weight: 650;
    text-decoration: none;
}

    .dp-report-patient-link:hover {
        text-decoration: underline;
    }

.dp-report-status,
.dp-report-category,
.dp-report-followup,
.dp-report-active,
.dp-report-vaccine-overdue,
.dp-report-vaccine-upcoming {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 3px 6px;
    border-radius: 50px;
    font-size: 0.49rem;
    font-weight: 700;
    white-space: nowrap;
}

.dp-report-status {
    background: #f2f5f6;
    color: #63767d;
}

.dp-report-category {
    background: #edf6f7;
    color: #557a82;
}

.dp-report-followup {
    background: #fff5df;
    color: #8c6a27;
}

.dp-report-active {
    background: #eaf8f1;
    color: #35775e;
}

.dp-report-vaccine-overdue {
    background: #fff0f0;
    color: #a04e4e;
}

.dp-report-vaccine-upcoming {
    background: #fff5df;
    color: #8d6b27;
}


/* ==========================================================================
   VACÍOS
   ========================================================================== */

.dp-report-empty {
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 20px;
    color: #8b999e;
    font-size: 0.58rem;
}

    .dp-report-empty i {
        color: #9bacb1;
        font-size: 0.78rem;
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767.98px) {

    .dp-reports-header {
        align-items: stretch;
        flex-direction: column;
    }

        .dp-reports-header .btn {
            justify-content: center;
        }

    .dp-reports-filter-actions {
        width: 100%;
    }

        .dp-reports-filter-actions .btn {
            flex: 1;
        }
}


@media (max-width: 575.98px) {

    .dp-reports-page {
        padding-top: 20px;
    }

    .dp-reports-filter {
        padding: 14px;
    }

    .dp-report-kpi {
        min-height: 84px;
        padding: 12px;
    }

    .dp-report-kpi-icon {
        width: 36px;
        height: 36px;
    }

    .dp-report-kpi strong {
        font-size: 1rem;
    }
}

/* ==========================================================================
   CONFIGURACIÓN
   ========================================================================== */

.dp-config-page,
.dp-catalog-page,
.dp-catalog-form-page,
.dp-catalog-details-page {
    padding: 28px 0 55px;
}

.dp-catalog-form-page,
.dp-catalog-details-page {
    max-width: 1000px;
    margin: 0 auto;
}

.dp-config-page-header,
.dp-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .dp-config-page-header h1,
    .dp-catalog-header h1 {
        margin: 2px 0 4px;
        color: #30464e;
        font-size: 1.55rem;
        font-weight: 760;
    }

    .dp-config-page-header p,
    .dp-catalog-header p {
        margin: 0;
        color: #7d8e94;
        font-size: .65rem;
    }


/* Clínica */

.dp-config-clinic-card {
    margin-bottom: 26px;
    border: 1px solid var(--dp-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(35,69,76,.04);
}

.dp-config-clinic-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.dp-config-logo {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: #f7fafb;
    color: #638089;
    font-size: 1.45rem;
}

    .dp-config-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 5px;
    }

.dp-config-clinic-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

    .dp-config-clinic-title h2 {
        margin: 0;
        color: #3c535b;
        font-size: 1rem;
        font-weight: 750;
    }

.dp-config-clinic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
}

    .dp-config-clinic-meta span {
        color: #819197;
        font-size: .57rem;
    }

    .dp-config-clinic-meta i {
        margin-right: 3px;
        color: var(--dp-primary);
    }

.dp-config-contact-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #edf1f2;
}

    .dp-config-contact-grid > div {
        padding: 14px 18px;
        border-right: 1px solid #edf1f2;
    }

        .dp-config-contact-grid > div:last-child {
            border-right: none;
        }

    .dp-config-contact-grid span,
    .dp-config-contact-grid strong {
        display: block;
    }

    .dp-config-contact-grid span {
        color: #8a999e;
        font-size: .51rem;
    }

        .dp-config-contact-grid span i {
            margin-right: 3px;
        }

    .dp-config-contact-grid strong {
        margin-top: 3px;
        color: #50666e;
        font-size: .61rem;
    }


/* Estado */

.dp-config-status-active,
.dp-config-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 4px 7px;
    border-radius: 50px;
    font-size: .52rem;
    font-weight: 700;
}

.dp-config-status-active {
    background: #eaf8f1;
    color: #39775e;
}

.dp-config-status-inactive {
    background: #f0f2f3;
    color: #718087;
}


/* Secciones */

.dp-config-section {
    margin-bottom: 27px;
}

.dp-config-section-heading {
    margin-bottom: 12px;
}

    .dp-config-section-heading > div {
        display: flex;
        align-items: center;
        gap: 9px;
    }

.dp-config-section-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #edf6f7;
    color: #577a82;
}

.dp-config-section-heading h2 {
    margin: 0;
    color: #485e66;
    font-size: .74rem;
}

.dp-config-section-heading p {
    margin: 2px 0 0;
    color: #8b999e;
    font-size: .53rem;
}


/* módulos */

.dp-config-module-card {
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 13px rgba(35,69,76,.03);
}

.dp-config-module-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #edf6f7;
    color: #587b83;
    font-size: 1rem;
}

.dp-config-module-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .dp-config-module-content span {
        color: #7c8d93;
        font-size: .54rem;
    }

    .dp-config-module-content strong {
        margin-top: 1px;
        color: #415860;
        font-size: 1.1rem;
    }

    .dp-config-module-content small {
        color: #94a1a5;
        font-size: .49rem;
    }


/* catálogos */

.dp-config-catalog-card {
    position: relative;
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 3px 13px rgba(35,69,76,.03);
    transition: .15s ease;
}

a.dp-config-catalog-card:hover {
    transform: translateY(-2px);
    border-color: #c9dfe0;
    box-shadow: 0 6px 18px rgba(35,69,76,.06);
}

.dp-config-catalog-static {
    cursor: default;
}

.dp-config-catalog-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #edf6f7;
    color: #587b83;
    font-size: 1rem;
}

.dp-config-catalog-card h3 {
    margin: 0 0 3px;
    color: #4b6068;
    font-size: .67rem;
}

.dp-config-catalog-card strong {
    display: block;
    color: #405860;
    font-size: 1rem;
}

.dp-config-catalog-card small {
    display: block;
    margin-top: 1px;
    color: #8d9ca1;
    font-size: .49rem;
}

.dp-config-arrow {
    margin-left: auto;
    color: #a2afb3;
    font-size: .7rem;
}

.dp-config-version {
    width: fit-content;
    padding: 2px 6px;
    border-radius: 50px;
    background: #edf6f7;
    color: #557981 !important;
    font-size: .53rem !important;
}


/* ==========================================================================
   CATÁLOGOS
   ========================================================================== */

.dp-catalog-filter,
.dp-catalog-list-card {
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(35,69,76,.035);
}

.dp-catalog-filter {
    margin-bottom: 16px;
    padding: 16px;
}

.dp-catalog-filter-actions {
    display: flex;
    gap: 6px;
}

.dp-catalog-list-card {
    overflow: hidden;
}

.dp-catalog-table {
    font-size: .6rem;
}

    .dp-catalog-table thead th {
        padding: 10px 14px;
        border-bottom: 1px solid #e5edef;
        background: #f8fafb;
        color: #72848a;
        font-size: .52rem;
        font-weight: 700;
    }

    .dp-catalog-table tbody td {
        padding: 11px 14px;
        border-color: #edf1f2;
        color: #586c74;
    }

.dp-catalog-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dp-catalog-name > span {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: #edf6f7;
        color: #5b7e86;
    }

.dp-catalog-actions {
    display: inline-flex;
    gap: 5px;
}

    .dp-catalog-actions form {
        display: inline;
    }

    .dp-catalog-actions .btn {
        width: 31px;
        height: 29px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 7px;
        font-size: .61rem;
    }

.dp-catalog-days {
    display: inline-flex;
    padding: 3px 6px;
    border-radius: 50px;
    background: #f2f6f7;
    color: #61757d;
    font-size: .51rem;
}


/* vacío */

.dp-catalog-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #8a999e;
    text-align: center;
}

    .dp-catalog-empty > i {
        margin-bottom: 9px;
        color: #88a2a8;
        font-size: 1.4rem;
    }

    .dp-catalog-empty h3 {
        margin: 0;
        color: #52676f;
        font-size: .75rem;
    }

    .dp-catalog-empty p {
        margin: 4px 0 0;
        font-size: .54rem;
    }


/* formularios */

.dp-catalog-active-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding: 13px 14px;
    border: 1px solid #e4ecee;
    border-radius: 10px;
    background: #f8fafb;
}

    .dp-catalog-active-switch > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .dp-catalog-active-switch strong {
        color: #536970;
        font-size: .62rem;
    }

    .dp-catalog-active-switch span {
        margin-top: 2px;
        color: #89989d;
        font-size: .52rem;
    }


/* detalles */

.dp-catalog-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid var(--dp-border);
    border-radius: 15px;
    background: #fff;
}

    .dp-catalog-details-header > div {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.dp-catalog-detail-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #edf6f7;
    color: #587b83;
    font-size: 1rem;
}

.dp-catalog-details-header h1 {
    margin: 2px 0 5px;
    color: #40565e;
    font-size: 1.1rem;
}

.dp-catalog-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f2;
}

    .dp-catalog-card-heading h2 {
        margin: 0;
        color: #4b6068;
        font-size: .69rem;
    }

    .dp-catalog-card-heading p {
        margin: 2px 0 0;
        color: #8b999e;
        font-size: .51rem;
    }


/* responsive */

@media (max-width: 767.98px) {

    .dp-config-page-header,
    .dp-catalog-header,
    .dp-catalog-details-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dp-config-contact-grid {
        grid-template-columns: 1fr 1fr;
    }

        .dp-config-contact-grid > div {
            border-bottom: 1px solid #edf1f2;
        }

    .dp-catalog-filter-actions {
        width: 100%;
    }

        .dp-catalog-filter-actions .btn {
            flex: 1;
        }
}


@media (max-width: 575.98px) {

    .dp-config-page,
    .dp-catalog-page,
    .dp-catalog-form-page,
    .dp-catalog-details-page {
        padding-top: 20px;
    }

    .dp-config-clinic-main {
        align-items: flex-start;
    }

    .dp-config-contact-grid {
        grid-template-columns: 1fr;
    }

        .dp-config-contact-grid > div {
            border-right: none;
        }
}

/* ==========================================================================
   DOCTORPET - AJUSTE GLOBAL DE TIPOGRAFÍA
   Mejora de legibilidad en todas las pantallas
   ========================================================================== */

/*
 * Texto base general
 */
body {
    font-size: 15px;
}


/* ==========================================================================
   NAVEGACIÓN SUPERIOR
   ========================================================================== */

.navbar .nav-link {
    font-size: 0.88rem !important;
}

.navbar-brand {
    font-size: 1.15rem !important;
}

.navbar .dropdown-item {
    font-size: 0.84rem !important;
}

.dp-user-name,
.dp-user-role {
    font-size: 0.78rem !important;
}


/* ==========================================================================
   TÍTULOS GENERALES
   ========================================================================== */

.dp-page-eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
}

main h1,
.dp-pets-header h1,
.dp-config-page-header h1,
.dp-catalog-header h1,
.dp-reports-header h1 {
    font-size: 1.75rem !important;
}

main h2 {
    font-size: 1.15rem;
}

main h3 {
    font-size: 1rem;
}


/* ==========================================================================
   DESCRIPCIONES Y TEXTO SECUNDARIO
   ========================================================================== */

main p,
main .text-muted {
    font-size: 0.82rem;
}

main small,
main .small {
    font-size: 0.75rem !important;
}


/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

main .form-label {
    font-size: 0.82rem !important;
    font-weight: 600;
}

main .form-control,
main .form-select {
    font-size: 0.86rem !important;
}

    main .form-control::placeholder {
        font-size: 0.82rem;
    }

main .form-check-label {
    font-size: 0.82rem !important;
}


/* ==========================================================================
   BOTONES
   ========================================================================== */

main .btn {
    font-size: 0.80rem !important;
}

main .btn-sm {
    font-size: 0.75rem !important;
}


/* ==========================================================================
   TABLAS
   ========================================================================== */

main table {
    font-size: 0.82rem !important;
}

    main table thead th {
        font-size: 0.72rem !important;
    }

    main table tbody td {
        font-size: 0.80rem !important;
    }


/* ==========================================================================
   BADGES / ESTADOS
   ========================================================================== */

main .badge,
.dp-config-status-active,
.dp-config-status-inactive,
.dp-report-status,
.dp-report-category,
.dp-report-followup,
.dp-report-active,
.dp-report-vaccine-overdue,
.dp-report-vaccine-upcoming {
    font-size: 0.70rem !important;
}


/* ==========================================================================
   TARJETAS DE INDICADORES
   ========================================================================== */

.dp-list-stat strong,
.dp-report-kpi strong,
.dp-config-module-content strong,
.dp-config-catalog-card strong {
    font-size: 1.30rem !important;
}

.dp-list-stat span,
.dp-report-kpi span:not(.dp-report-kpi-icon),
.dp-config-module-content span,
.dp-config-catalog-card h3 {
    font-size: 0.78rem !important;
}

.dp-report-kpi small,
.dp-config-module-content small,
.dp-config-catalog-card small {
    font-size: 0.70rem !important;
}


/* ==========================================================================
   PACIENTES / MASCOTAS
   ========================================================================== */

.dp-pet-name,
.dp-patient-name {
    font-size: 0.88rem !important;
}

.dp-pets-table td,
.dp-pets-table th {
    font-size: 0.80rem !important;
}


/* ==========================================================================
   CONFIGURACIÓN
   ========================================================================== */

.dp-config-page-header p,
.dp-catalog-header p {
    font-size: 0.82rem !important;
}

.dp-config-clinic-title h2 {
    font-size: 1.15rem !important;
}

.dp-config-clinic-meta span {
    font-size: 0.76rem !important;
}

.dp-config-contact-grid span {
    font-size: 0.72rem !important;
}

.dp-config-contact-grid strong {
    font-size: 0.82rem !important;
}

.dp-config-section-heading h2 {
    font-size: 0.92rem !important;
}

.dp-config-section-heading p {
    font-size: 0.74rem !important;
}

.dp-catalog-table {
    font-size: 0.82rem !important;
}

    .dp-catalog-table thead th {
        font-size: 0.72rem !important;
    }

    .dp-catalog-table tbody td {
        font-size: 0.80rem !important;
    }


/* ==========================================================================
   REPORTES
   ========================================================================== */

.dp-reports-header p {
    font-size: 0.82rem !important;
}

.dp-report-section-header h2 {
    font-size: 0.92rem !important;
}

.dp-report-section-header p {
    font-size: 0.72rem !important;
}

.dp-report-table {
    font-size: 0.80rem !important;
}

    .dp-report-table thead th {
        font-size: 0.70rem !important;
    }

    .dp-report-table tbody td {
        font-size: 0.78rem !important;
    }

.dp-report-date strong {
    font-size: 0.78rem !important;
}

.dp-report-date small {
    font-size: 0.68rem !important;
}


/* ==========================================================================
   TEXTO DE ESTADOS VACÍOS
   ========================================================================== */

.dp-catalog-empty h3,
.dp-report-empty h3 {
    font-size: 0.95rem !important;
}

.dp-catalog-empty p,
.dp-report-empty,
.dp-report-empty span {
    font-size: 0.78rem !important;
}


/* ==========================================================================
   PANTALLAS GRANDES
   ========================================================================== */

@media (min-width: 1400px) {

    body {
        font-size: 16px;
    }

    main .form-control,
    main .form-select {
        font-size: 0.90rem !important;
    }

    main table tbody td {
        font-size: 0.84rem !important;
    }

    main table thead th {
        font-size: 0.75rem !important;
    }
}


/* ==========================================================================
   MÓVILES
   ========================================================================== */

@media (max-width: 575.98px) {

    body {
        font-size: 14px;
    }

    main h1,
    .dp-pets-header h1,
    .dp-config-page-header h1,
    .dp-catalog-header h1,
    .dp-reports-header h1 {
        font-size: 1.45rem !important;
    }
}