:root {

    --timed-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
                        "Segoe UI", sans-serif;
    /* Colores principales TIMED Paciente */
    --timed-primary:      #00b7bd;  /* turquesa header/login */
    --timed-primary-dark: #00949b;
    --timed-primary-soft: #e0f7f8;  /* fondos suaves / hovers */

    /* Danger/Eliminar */
    --timed-danger:       #e55a67;  /* rojo suave para acciones destructivas */
    --timed-danger-dark:  #c8495a;
    --timed-danger-soft:  #fce8ea;

    /* Estados (como tu tablero: críticos, alertas, normales) */
    --timed-critical: #ff4b5c;
    --timed-alert:    #ffb300;
    --timed-normal:   #00c853;
    --timed-nodata:   #9e9e9e;

    /* Neutros */
    --timed-bg:       #f5f7fb;  /* fondo general */
    --timed-card:     #ffffff;
    --timed-border:   #e4e9f2;
    --timed-text:     #222b45;
    --timed-text-soft:#8f9bb3;

    /* Sombras y radios */
    --timed-radius-lg: 24px;
    --timed-radius-md: 18px;
    --timed-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html, body {
    height: 100%;
    font-family: var(--timed-font-family) !important;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--timed-bg);
    color: var(--timed-text);
}

/* APLICA LA MISMA FUENTE A TODO EL SITIO */
html, body {
    height: 100%;
    font-family: var(--timed-font-family) !important;
}

/* Refuerzo para componentes que el template cambia (navbar, sidebar, botones, etc.) */
body,
h1, h2, h3, h4, h5, h6,
.navbar, .sidebar-nav, .left-sidebar,
.btn, .btn *, 
a, label,
input, select, textarea, button,
.card, .table, .page-wrapper {
    font-family: var(--timed-font-family) !important;
}

/* Cards principales de panel (Signos vitales, Mapa de la salud, etc.) */
.card-health-module {
    border: 0;
    border-radius: 1.25rem;
    background-color: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 250px auto; /* mismo tamaño que SIGNOS VITALES */
}

/* ================================
   TÍTULOS Y SUBTÍTULOS GENERALES
   ================================ */

/* Ajuste general para todos los títulos de tarjeta */
.card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #424242;              /* gris muy oscuro */
}

/* Subtítulo estándar reutilizable en todo el sitio */
.tp-subtitle {
    font-size: 1rem;
    color: #6b7280;              /* gris medio */
    margin-bottom: 0.25rem;
}

/* Normalizar h6 a tamaño base del sistema (igual que tp-subtitle) */
h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Alinea tipografía de las secciones Médico / Paciente en Historia Clínica */
.card-health-module .tp-historia-tags,
.card-health-module .tp-historia-tags .disease-tag,
.card-health-module h6.card-title {
    font-size: 1rem;
}

.card-health-module .tp-historia-tags .disease-tag {
    font-size: 1rem;
}

.tp-section-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    padding-bottom: 0.85rem;
}

/* Responsive para todos los headers de sección */
@media (max-width: 768px) {
    .tp-section-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ================================
   SIDEBAR ALIGNMENT FIXES
   ================================ */
/* Ensure icon and label stay on same line and do not wrap */
.left-sidebar .sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.left-sidebar .sidebar-nav a i {
    min-width: 20px;
    text-align: center;
    font-size: 1.05rem;
}

.left-sidebar .sidebar-nav .hide-menu {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Give sidebar slightly more room to avoid wrapping labels in desktop layout */
.left-sidebar {
    min-width: 230px;
}

@media (max-width: 1200px) {
    .left-sidebar { min-width: 200px; }
}

@media (max-width: 768px) {
    /* revert to original stacked behavior on small screens */
    .left-sidebar .sidebar-nav a { display: inline-flex; gap: 8px; }
    .left-sidebar { min-width: auto; }
}

/* Variante opcional si quieres más separación debajo del subtítulo */
.tp-subtitle + * {
    margin-top: 0.5rem;
}

/* ================================
   BREADCRUMB ELEGANTE (Page Titles)
   ================================ */
.page-titles {
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(250,250,250,0.98));
    padding: 10px 18px;
    margin: 0 -24px 20px -24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-titles h4,
.page-titles .text-themecolor {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--timed-primary-dark);
}

.page-titles .breadcrumb {
    padding: 0;
    margin: 0;
    background: transparent;
    font-size: 13px;
    color: var(--timed-text-soft);
}

.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: none !important;
    content: "›";
    color: rgba(15,23,42,0.18);
    font-size: 12px;
    margin: 0 8px;
}

.page-titles .breadcrumb .breadcrumb-item a {
    color: var(--timed-text-soft);
    text-decoration: none;
}

.page-titles .breadcrumb .breadcrumb-item.active {
    color: var(--timed-primary-dark);
    font-weight: 600;
}

@media (max-width: 768px) {
    .page-titles {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin: 0 -18px 18px -18px;
        padding: 10px 14px;
    }
}

/* Cards grandes */
.tp-card {
    background-color: var(--timed-card);
    border-radius: var(--timed-radius-lg);
    box-shadow: var(--timed-shadow-soft);
    padding: 20px 24px;
}

/* Cards pequeñas (actividad física, glucosa, etc.) */
.tp-card-sm {
    background-color: var(--timed-card);
    border-radius: var(--timed-radius-md);
    box-shadow: var(--timed-shadow-soft);
    padding: 16px 18px;
}

/* Títulos de sección */
.tp-section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Background con círculos gris muy claro como en tu screenshot */
.tp-card-bg-circles {
    position: relative;
    overflow: hidden;
}

.tp-card-bg-circles::before,
.tp-card-bg-circles::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #f1f3f7;
    opacity: 0.7;
    pointer-events: none;
}

.tp-card-bg-circles::before {
    width: 220px;
    height: 220px;
    right: -80px;
    top: -60px;
}

.tp-card-bg-circles::after {
    width: 320px;
    height: 320px;
    right: -120px;
    bottom: -140px;
}

/* Botón principal TIMED */
.btn-timed-primary {
    border-radius: 999px;
    padding: 10px 18px;
    background-color: var(--timed-primary);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(0, 183, 189, 0.45);
    transition: transform .15s ease,
                box-shadow .15s ease,
                background-color .15s ease,
                filter .15s ease;
}

.btn-timed-primary:hover {
    background-color: var(--timed-primary-dark);
    box-shadow: 0 12px 24px rgba(0, 148, 155, 0.55);
    transform: translateY(-1px);
}

.btn-timed-primary:active {
    background-color: #007c85;
    box-shadow: 0 6px 14px rgba(0, 124, 133, 0.55);
    transform: translateY(1px);
}

/* Botón secundario TIMED (para regresar, cancelar, etc.) */
.btn-timed-secondary {
    border-radius: 999px;
    padding: 10px 18px;
    background-color: #64748b;    /* gris slate elegante */
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(100, 116, 139, 0.35);
    transition: transform .15s ease,
                box-shadow .15s ease,
                background-color .15s ease;
}

.btn-timed-secondary:hover {
    background-color: #475569;    /* slate más oscuro */
    box-shadow: 0 12px 24px rgba(71, 85, 105, 0.45);
    transform: translateY(-1px);
}

.btn-timed-secondary:active {
    background-color: #334155;
    box-shadow: 0 6px 14px rgba(51, 65, 85, 0.45);
    transform: translateY(1px);
}

/* Botón danger TIMED (para eliminar, cancelar acciones peligrosas) */
.btn-timed-danger {
    border-radius: 999px;
    padding: 10px 18px;
    background-color: var(--timed-danger);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(229, 90, 103, 0.45);
    transition: transform .15s ease,
                box-shadow .15s ease,
                background-color .15s ease;
    border: none;
}

.btn-timed-danger:hover {
    background-color: var(--timed-danger-dark);
    box-shadow: 0 12px 24px rgba(200, 73, 90, 0.55);
    transform: translateY(-1px);
}

.btn-timed-danger:active {
    background-color: #b03e4d;
    box-shadow: 0 6px 14px rgba(176, 62, 77, 0.55);
    transform: translateY(1px);
}

/* ================= INDICADORES RESUMEN (Críticos / Alertas / Normales / Sin datos) ================ */

.tp-indicator-card {
    /* mismo estilo base que .tp-card */
    background-color: var(--timed-card);
    border-radius: var(--timed-radius-lg);
    box-shadow: var(--timed-shadow-soft);
    border: none;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* círculos de fondo, igual que en las tarjetas del mapa de la salud */
.tp-indicator-card::before,
.tp-indicator-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #01c0c861;
    opacity: 0.7;
    pointer-events: none;
}

.tp-indicator-card::before {
    width: 160px;
    height: 160px;
    right: -60px;
    top: -70px;
}

.tp-indicator-card::after {
    width: 220px;
    height: 220px;
    right: -80px;
    bottom: -110px;
}

.tp-indicator-card .card-body {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* por encima de los círculos */
    z-index: 1;
}

.tp-indicator-content {
    text-align: center;
}

.tp-indicator-value {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}

/* texto "Críticos / Alertas..." igual que en mapa de la salud */
.tp-indicator-label {
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: none;
    color: #0f172a;
}

/* Colores solo para el número, el fondo es el mismo que las tarjetas */
.tp-indicator-critical  .tp-indicator-value { color: var(--timed-critical); }
.tp-indicator-alert     .tp-indicator-value { color: var(--timed-alert);    }
.tp-indicator-normal    .tp-indicator-value { color: var(--timed-normal);   }
.tp-indicator-nodata    .tp-indicator-value { color: var(--timed-nodata);   }

/* ============================
   TARJETA SIGNOS VITALES
   ============================ */

.tp-vitals-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 1rem 1rem 1.5rem;
    box-shadow: 0 18px 35px rgba(15, 35, 52, 0.08);
    overflow: hidden;
}

/* Fondos con círculos suaves como en el mapa de la salud */
.tp-vitals-card::before,
.tp-vitals-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tp-vitals-card::before {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -120px;
}

.tp-vitals-card::after {
    width: 170px;
    height: 170px;
    bottom: -70px;
    right: -40px;
}

/* Título */
.tp-vitals-title, 
.card-health-module .card-title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #424242;
    margin-bottom: 1rem;
}

/* Indicador de últimos registros en gráficas */
.tp-chart-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #0369a1;
    letter-spacing: 0.02em;
}

.tp-chart-indicator i {
    font-size: 0.9rem;
    color: #0284c7;
}

/* Efecto hover opcional */
.tp-chart-indicator:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #7dd3fc;
}

/* Lista de signos vitales */
.tp-vitals-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Item */
.tp-vital {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Columna del ícono + línea vertical */
.tp-vital-icon-wrap {
    position: relative;
    padding-right: .5rem;
}

.tp-vital-icon-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46px;
    width: 2px;
    transform: translateX(-50%);
    bottom: -22px;
    background: linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.5),
        rgba(148, 163, 184, 0)
    );
}

/* Quitar la línea al último */
.tp-vital:last-child .tp-vital-icon-wrap::after {
    display: none;
}

/* Contenedor del ícono */
.tp-vital-icon {
    width: 44px;
    height: 44px;
    border-radius: 18px;
    background: linear-gradient(135deg,
        rgba(14, 165, 233, 0.18),
        rgba(59, 130, 246, 0.06)
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-vital-icon img {
    max-width: 26px;
    max-height: 26px;
    display: block;
}

/* Texto */
.tp-vital-body {
    flex: 1;
}

.tp-vital-label {
    font-size: 1rem;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: .15rem;
}

.tp-vital-value-row {
    font-size: .95rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: baseline;
}

.tp-vital-value {
    color: #0f172a;
}

.tp-vital-unit {
    color: #2563eb; /* azul del esquema de salud */
}

.tp-vital-separator {
    color: #94a3b8;
}

.tp-vital-date {
    color: #64748b;
    font-weight: 500;
}

/* Responsive: que respire un poco más en pantallas pequeñas */
@media (max-width: 575.98px) {
    .tp-vitals-card {
        border-radius: 18px;
        padding: 1.25rem 1.25rem 1rem;
    }
}

/* =========================================================
   MAPA DE LA SALUD
   ========================================================= */
   

/* Contenedor general */
.health-map {
    margin-top: 1.5rem;
}

/* Título de cada sección (Críticos / Alerta / Normales) */
.health-map-section-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0.9rem 0 0.25rem;  /* menos margen */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.9;
}

/* Reducir espacio entre filas de pills */
.health-map .row.g-2 {
    --bs-gutter-y: 0.35rem;   /* antes ~0.5rem */
}

/* Ajuste del icono en el título */
.health-map-section-title i {
    font-size: 0.85rem;
}

/* Estado vacío */
.health-map-empty {
    padding: 3rem 0;
    color: #6b7280; /* gris suave */
}

.health-map-empty h6 {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #111827;
}

.health-map-empty p {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* Círculo del ícono "+" en estado vacío */
.health-map-empty .circle-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px dashed rgba(148, 163, 184, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(11, 183, 131, 0.05); /* halo verde muy suave */
}

/* Píldoras (chips) de valores */
.health-map-pill {
    border-radius: 999px;
    padding: 0.25rem 0.5rem;              /* menos padding */
    border: 1px solid rgba(15, 23, 42, 0.06);
    background-color: rgba(255, 255, 255, 0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;                     /* antes 80px+ */
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
    font-size: 0.68rem;                   /* texto más pequeño */
    text-align: center;
    transition: all 0.15s ease-in-out;
}

/* Nombre corto y unidades */
.health-map-pill small {
    display: block;
    opacity: 0.75;
    line-height: 1.05;    /* líneas más cerradas */
}

/* Valor principal */
.health-map-pill .health-value {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;    /* más compacto */
    line-height: 1.05;
    margin: 0.05rem 0;    /* casi sin margen vertical */
}


/* Píldoras clicables (para futuras acciones) */
.health-pill-click {
    cursor: pointer;
}

/* Hover */
.health-pill-click:hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}


/* Variantes por estado (solo se tocan colores, no tamaño) */
.health-map-pill.critico {
    border-color: rgba(220, 53, 69, 0.35);
    background: #fee2e2;
}
.health-map-pill.critico .health-value { color: #dc3545; }

.health-map-pill.alerta {
    border-color: rgba(255, 193, 7, 0.4);
    background: #fff8e4;
}
.health-map-pill.alerta .health-value { color: #eab104; }

.health-map-pill.normal {
    border-color: rgba(40, 167, 69, 0.4);
    background: #00c8532b;
}
.health-map-pill.normal .health-value { color: #28a745; }

/* Aún más compacto en móviles */
@media (max-width: 575.98px) {
    .health-map-pill {
        padding: 0.2rem 0.35rem;
        min-height: 46px;
        font-size: 0.64rem;
    }

    .health-map-pill .health-value {
        font-size: 0.82rem;
    }

    .health-map .row.g-2 {
        --bs-gutter-y: 0.25rem;
    }
}

/* =========================
   ESTADO EN MODAL (PARÁMETROS)
   ========================= */

/* Crítico = rojo */
.health-config-card.is-critico {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.03);
}

.health-config-card.is-critico .health-config-name {
    color: #d32f2f;
}

/* Control / alerta = amarillo */
.health-config-card.is-control {
    border-color: #ffb300;
    background: rgba(255, 179, 0, 0.03);
}

.health-config-card.is-control .health-config-name {
    color: #ef6c00;
}

/* Opcional: normales = verde suave (por si después quieres marcarlo) */
.health-config-card.is-normal {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.02);
}

/* Pill pequeña de estado dentro de la tarjeta (si la quieres usar) */
.health-config-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.health-config-status-pill.critico {
    background: rgba(244, 67, 54, 0.16);
    color: #b71c1c;
}

.health-config-status-pill.control {
    background: rgba(255, 179, 0, 0.16);
    color: #e65100;
}

.health-config-status-pill.normal {
    background: rgba(76, 175, 80, 0.16);
    color: #1b5e20;
}

/* =========================
   ESTADO EN MODAL (GRUPOS)
   ========================= */

.health-group-header {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.health-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.25rem;
}

/* Puntito de color según estado dominante del grupo */
.health-group-dot.critico { background: #f44336; }
.health-group-dot.control { background: #ffb300; }
.health-group-dot.normal  { background: #4caf50; }


/* =========================================================
   HISTORIA CLÍNICA – CARD, HEADER Y TAGS
   ========================================================= */

/* Header del card: título + botón */
.tp-historia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Título principal del módulo (coherente con tp-vitals-title) */
.tp-historia-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0;
}

/* Botón "Agregar mi Historia Clínica" */
.tp-historia-btn {
    border-radius: 999px;
    padding: 0.45rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Línea divisoria suave */
.tp-section-divider {
    margin: 0.75rem 0 1rem;
    border-color: rgba(148, 163, 184, 0.4);
}

/* Subtítulo descriptivo */
.tp-historia-subtitle,
.card-health-module .card-subtitle {
    font-size: .9rem;
    color: #6f6f6f;
    margin-bottom: 0.75rem;
}

/* Etiquetas "MÉDICO / PACIENTE" */
.tp-historia-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
}

.tp-historia-labels .tp-badge {
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Colores suaves para las tp-badges (no se pisa el bg-danger global) */
.tp-historia-labels .tp-badge.tp-bg-danger {
    background-color: #fee2e2;
    color: #b91c1c;
}

.tp-historia-labels .tp-badge.tp-bg-info {
    background-color: #dbeafe;
    color: #1d4ed8;
}

/* Título de cada columna (médico / paciente) */
.tp-historia-column-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #343435;
    margin-bottom: 0.5rem;
}

/* Contenedor de tags (ya traes d-flex flex-wrap gap-2, esto solo armoniza) */
.tp-historia-tags {
    display: flex;
    flex-direction: column;   /* uno debajo de otro */
    gap: 0.35rem;             /* separación vertical entre renglones */
}

/* Cada tag ocupa todo el ancho de la columna */
.tp-historia-tags .disease-tag {
    width: 100%;
    justify-content: flex-start;
}

/* Tag de enfermedad */
.disease-tag {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;              /* ← antes 0.78rem aprox. */
    background-color: #ffffff;       /* base blanca */
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Icono de check */
.disease-tag i {
    font-size: 0.8rem;
    color: #22c55e;
}

/* Variante fondo rojo suave (para datos del médico) */
.bg-danger-bg {
    background-color: #fee2e2; /* rojo pastel */
    border-color: rgba(239, 68, 68, 0.35);
}

/* Variante fondo azul suave (para datos del paciente) */
.bg-info-bg {
    background-color: #e0f2fe; /* azul pastel */
    border-color: rgba(37, 99, 235, 0.35);
}

/* Refuerzo de color en los textos fuertes */
.bg-danger-bg .text-danger,
.bg-info-bg .text-info {
    font-weight: 700;
}

/* Responsivo: header en columnas en móviles y tags full width si se desea */
@media (max-width: 575.98px) {
    .tp-historia-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .disease-tag {
        width: 100%;
        justify-content: flex-start;
        font-size: 0.76rem;
    }
}

/* ================================
   DIRECTORIO MÉDICO - UNIFICAR TIPOGRAFÍA
   ================================ */
/* Asegura que los labels, tabs, inputs y resultados mantengan 1rem */
.card-health-module .filter-label,
.card-health-module .nav-tabs.profile-tab .nav-link,
.card-health-module .tab-content,
.card-health-module .tab-content .filter-label,
.card-health-module .form-control,
.card-health-module .form-select,
.card-health-module .text-muted,
#contenedorResultados {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .card-health-module .nav-tabs.profile-tab .nav-link {
        font-size: 0.95rem; /* ligeramente más pequeño en móviles */
    }
}

/* =========================================================
   DIAGNÓSTICOS FINALES – CONSULTAS TIMEDFILE
   ========================================================= */

/* Acordeón principal dentro del card */
.tp-dx-accordion .accordion-item {
    border: 0;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    background-color: #ffffff;
}

/* Header del acordeón (botón) */
.tp-dx-header {
    background-color: #f9fafb;
    padding: 0.75rem 1.25rem;
}

/* Texto del header (fecha + doctor) */
.tp-dx-date-badge {
    display: inline-block;
    color: #f9fafb;
    border-radius: 999px;
    font-size: 1rem; /* unificado con resto del tema */
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Ajuste del icono de flecha del acordeón */
.accordion-button.tp-dx-header::after {
    transform: scale(0.9);
}

.accordion-button.tp-dx-header:not(.collapsed)::after {
    transform: rotate(-180deg) scale(0.9);
}

/* Quitar fondo azul de Bootstrap al estar expandido */
.accordion-button.tp-dx-header {
    background-color: #01c0c8;
    box-shadow: none;
}

/* Título interno "Historia clínica" */
.tp-dx-section-title {
    font-size: 1rem; /* unificado con tp-subtitle / h6 */
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

/* Cada renglón de diagnóstico */
.tp-dx-row {
    padding: 0.45rem 0.25rem 0.45rem 0.75rem;
    border-left: 3px solid #e5e7eb;
    margin-bottom: 0.35rem;
}

/* Etiqueta de origen (médico / paciente) */
.tp-dx-origin {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.12rem;
}

/* Colores consistentes con Historia Clínica */
.tp-dx-origin.dx-medico {
    color: #b91c1c;   /* rojo médico */
}

.tp-dx-origin.dx-paciente {
    color: #1d4ed8;   /* azul paciente */
}

/* Contenido del diagnóstico */
.tp-dx-content {
    font-size: 1rem;
}

/* Responsivo */
@media (max-width: 575.98px) {
    .tp-dx-date-badge {
        width: 100%;
        text-align: left;
    }

    .tp-dx-header {
        padding: 0.6rem 0.9rem;
    }

    .tp-dx-row {
        padding-left: 0.6rem;
    }
}

/* ================================
   ANTECEDENTES HEREDO-FAMILIARES (COMPACTO)
   ================================ */

.tp-heredo-item {
    padding: 0.65rem 0.85rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
}

.tp-heredo-item:hover {
    border-color: rgba(0, 183, 189, 0.35);
    box-shadow: 0 4px 12px rgba(0, 183, 189, 0.08);
    transform: translateY(-1px);
}

.tp-heredo-label {
    font-size: 1rem;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

/* Botones Sí/No compactos con colores del sistema */
.tp-heredo-item .btn-group-sm .btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    letter-spacing: 0.02em;
}

/* Asegura que los botones dentro de tp-heredo-item (radios/checkboxes) tengan mismo tamaño que patologicos */
.tp-heredo-item .btn-group .btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
}

.tp-heredo-item .btn-outline-success {
    border-color: var(--timed-primary);
    color: var(--timed-primary);
}

.tp-heredo-item .btn-outline-success:hover {
    background-color: var(--timed-primary);
    border-color: var(--timed-primary);
    color: #ffffff;
}

.tp-heredo-item .btn-check:checked + .btn-outline-success {
    background-color: var(--timed-primary);
    border-color: var(--timed-primary);
    color: #ffffff;
}

.tp-heredo-item .btn-outline-danger {
    border-color: #94a3b8;
    color: #64748b;
}

.tp-heredo-item .btn-outline-danger:hover {
    background-color: #64748b;
    border-color: #64748b;
    color: #ffffff;
}

.tp-heredo-item .btn-check:checked + .btn-outline-danger {
    background-color: #64748b;
    border-color: #64748b;
    color: #ffffff;
}

/* Input de parentesco compacto */
.tp-heredo-item .form-control-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
}

/* Responsive */
@media (max-width: 768px) {
    .tp-heredo-item {
        padding: 0.6rem;
    }
    
    .tp-heredo-label {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }
}

/* Form labels inside the Patológicos tab should match tp-subtitle size */
#patologicos .form-label {
    font-size: 1rem;
}


/* ================================
   ESTUDIOS RADIOLÓGICOS 
   ================================ */

.tp-dt-wrap{
  margin-top: 1rem;
}

/* Controles DataTables (Mostrar / Buscar) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  margin-bottom: .75rem;
}

.dataTables_wrapper .dataTables_filter input{
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.45);
  padding: .55rem .75rem;
  outline: none;
}

.dataTables_wrapper .dataTables_length select{
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.45);
  padding: .45rem .65rem;
  outline: none;
}

/* Tabla base */
table.tp-dt{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 14px !important; /* espacio vertical entre filas */
  background: transparent !important;
  margin: 0 !important;
}

/* Encabezado tipo “cápsula” */
table.tp-dt.tp-dt--pillhead thead tr{
  background: linear-gradient(135deg, var(--timed-primary-dark), var(--timed-primary));
}

table.tp-dt.tp-dt--pillhead thead th{
  color: #fff !important;
  border: none !important;
  padding: 16px 18px !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Redondeado del encabezado (izq/der) */
table.tp-dt.tp-dt--pillhead thead th:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
table.tp-dt.tp-dt--pillhead thead th:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Cuerpo: filas como “tarjetas” */
table.tp-dt tbody tr{
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transform: translateZ(0);
}

table.tp-dt tbody td{
  border: none !important;
  padding: 18px 18px !important;
  vertical-align: middle;
  color: #0f172a;
  background: transparent !important;
}

/* Redondeo de cada “tarjeta fila” */
table.tp-dt tbody td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
table.tp-dt tbody td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Hover elegante */
table.tp-dt tbody tr:hover{
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}
table.tp-dt tbody tr:hover td{
  background: rgba(0, 183, 189, 0.06) !important; /* TIMED suave */
}

/* Estado “Sin datos” */
table.tp-dt tbody td.dataTables_empty{
  background: rgba(148,163,184,.10) !important;
  color: #64748b;
  font-weight: 600;
  border-radius: 14px;
}

/* Paginate */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(0, 183, 189, .15) !important;
  border: 1px solid rgba(0, 183, 189, .25) !important;
}

/* =========================================
   PÍLDORAS / BADGES dentro de la tabla
   ========================================= */

/* "Lugar" tipo cápsula (como AB IMAGEN SUBROGADO) */
.tp-chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--timed-primary);
  box-shadow: 0 10px 20px rgba(0, 183, 189, .20);
}

/* Acción: botón circular pequeño (si lo usas en radiología) */
.tp-action-pill{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(0, 183, 189, .30);
  background: rgba(0, 183, 189, .12);
  color: var(--timed-primary-dark) !important;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tp-action-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 183, 189, .18);
  background: rgba(0, 183, 189, .18);
}

/* Pill “Radiología” */ 
.tp-pill { 
    display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     padding: 4px 12px;
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.02em;
 } 
 
 .tp-pill-rx { 
    background: #e0f2fe;    /* azul claro */ 
    color: #0369a1;
 } 
 
 .tp-pill-dot { 
    width: 8px;
     height: 8px;
     border-radius: 999px;
     background: #0ea5e9;
 }

 /* =========================================
   ROWS MÁS LLAMATIVOS (TIMED)
   ========================================= */

/* Aumenta el contraste entre filas */
table.tp-dt tbody tr{
  position: relative;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Acento lateral izquierdo (tipo “card highlight”) */
table.tp-dt tbody tr::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--timed-primary), var(--timed-primary-dark));
  opacity: .95;
}

/* Da un poco más de “aire” y mejora lectura */
table.tp-dt tbody td{
  padding: 18px 18px !important;
}

/* Hover más notorio, pero limpio */
table.tp-dt tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

table.tp-dt tbody tr:hover td{
  background: rgba(0, 183, 189, 0.08) !important;
}

/* Opcional: resalta el texto del estudio al pasar el mouse */
table.tp-dt tbody tr:hover td:nth-child(4){
  color: #0f172a;
  font-weight: 700;
}

/* Si te aparece espacio raro por el pseudo-elemento, asegúrate de esto */
table.tp-dt tbody td:first-child{
  padding-left: 22px !important; /* deja espacio visual junto al acento */
}

.tp-dt-wrap{
  background: rgba(148, 163, 184, 0.06);
  border-radius: 16px;
  padding: 14px;
}

/* =========================================
   FIX DESFASE DATATABLES (thead vs tbody)
   ========================================= */

/* 1) Asegura que DataTables no rompa widths */
table.tp-dt {
  table-layout: fixed !important;     /* clave para alinear columnas */
  width: 100% !important;
}

/* 2) Evita que el responsive wrapper meta scroll horizontal raro */
.tp-dt-wrap,
.tp-dt-wrap .dataTables_scrollBody {
  overflow: visible !important;
}

/* 3) Si usas "border-spacing" para separación, NO uses pseudo-elementos en <tr> */
table.tp-dt tbody tr::before {
  display: none !important; /* elimina el acento lateral en tr (rompe layout en tablas) */
}

/* 4) En su lugar, crea el acento lateral dentro de la primera celda (stable) */
table.tp-dt tbody td:first-child{
  position: relative;
  padding-left: 26px !important; /* espacio para la barra */
}

table.tp-dt tbody td:first-child::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--timed-primary), var(--timed-primary-dark));
}

/* 5) Mantén el look “card” pero en celdas (no en tr) */
table.tp-dt tbody tr{
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

table.tp-dt tbody td{
  background: #fff !important;
  border-top: none !important;
  border-bottom: none !important;
  /* sombra aplicada a la fila “simulada” por celdas */
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Redondeado por fila (por celdas) */
table.tp-dt tbody td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
table.tp-dt tbody td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Evita que cada celda tenga su propia sombra separada visualmente */
table.tp-dt tbody td:not(:first-child){
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Hover: aplica color sin mover columnas */
table.tp-dt tbody tr:hover td{
  background: rgba(0, 183, 189, 0.08) !important;
}




/* ================================
   ESTUDIOS LABORATORIO (TIMED PACIENTE)
   ================================ */

.tp-lab-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    /* Si quieres recordar el abstract-2, podrías agregar aquí:
       background-image: url('../assets/svg/shapes/abstract-2.svg');
       background-position: right top;
       background-size: 350px auto;
       background-repeat: no-repeat;
    */
}

/* Pill “Laboratorio” */
.tp-pill-lab {
    background: #dcfce7;   /* verde claro */
    color: #166534;        /* verde oscuro */
}

/* La base de .tp-pill y .tp-pill-dot ya está declarada y se reutiliza */

/* Tabla */
.tp-lab-table-wrapper {
    margin-top: 1.25rem;
}

.tp-lab-table {
    font-size: 0.9rem;
}

.tp-lab-thead {
    background: #020617;   /* mismo header oscuro que Radiológicos */
    color: #f9fafb;
}

.tp-lab-thead th {
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.tp-lab-table tbody tr {
    transition: background 0.15s ease, transform 0.08s ease;
}

.tp-lab-table tbody tr:hover {
    background: #ecfeff;   /* un azul/verde muy suave para diferenciar de Rx si quieres */
}

/* Botón acción */
.tp-lab-action {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .tp-lab-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* ================================
   NAV-TABS PERSONALIZADOS (TIMED)
   ================================ */
.nav-tabs.profile-tab {
    border-bottom: 2px solid var(--timed-border);
    margin-bottom: 0;
}

.nav-tabs.profile-tab .nav-item {
    margin-bottom: -2px;
}

.nav-tabs.profile-tab .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--timed-text-soft);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.875rem 1.5rem;
    transition: all 0.25s ease;
    background: transparent;
}

.nav-tabs.profile-tab .nav-link:hover {
    color: var(--timed-primary);
    background: var(--timed-primary-soft);
    border-bottom-color: var(--timed-primary-soft);
    border-radius: 0.5rem 0.5rem 0 0;
}

.nav-tabs.profile-tab .nav-link.active {
    color: var(--timed-primary);
    background: transparent;
    border-bottom-color: var(--timed-primary);
    font-weight: 600;
}

/* Responsive para tabs */
@media (max-width: 576px) {
    .nav-tabs.profile-tab .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* ===============================================
   SELECT2 - AJUSTE DE TAMAÑO PARA FORM-CONTROL
   =============================================== */

/* Contenedor principal del select2 */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border: 1px solid var(--timed-border) !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus state */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--timed-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 183, 189, 0.25) !important;
}

/* Texto renderizado dentro del select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 30px !important; /* Espacio para la flecha del dropdown */
    color: var(--timed-text) !important;
    white-space: nowrap !important; /* Evitar salto de línea */
    overflow: hidden !important; /* Ocultar texto que sobresale */
    text-overflow: ellipsis !important; /* Agregar "..." si el texto es muy largo */
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--timed-text-soft) !important;
}

/* Flecha del dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem) !important;
    top: 1px !important;
    right: 0.75rem !important;
}

/* Dropdown abierto */
.select2-container--default .select2-dropdown {
    border: 1px solid var(--timed-border) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Opciones del dropdown */
.select2-container--default .select2-results__option {
    font-size: 1rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* Opción hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--timed-primary-soft) !important;
    color: var(--timed-primary-dark) !important;
}

/* Opción seleccionada */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--timed-primary) !important;
    color: #ffffff !important;
}

/* ===============================================
   TIMED - SELECT2 HELPERS (clase .timed-select2)
   Uso: agregar la clase `timed-select2` al contenedor generado
   por Select2 para asegurar alineación/alto consistentes.
   Ejemplo JS: $('#selTipoMedicamento').data('select2').$container.addClass('timed-select2');
   =============================================== */

.select2-container.timed-select2.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container.timed-select2.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: normal !important;
}

.select2-container.timed-select2.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem) !important;
    top: 1px !important;
    right: 0.75rem !important;
}

/* ===============================================
   WIZARD / VISTA: Ajustes Select2 que antes estaban
   en la vista `agregarMedicamento.php`. Se mantienen
   aquí para centralizar estilos.
   =============================================== */
.validation-wizard .select2-container--default .select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0.375rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}
.validation-wizard .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: normal !important;
    padding-left: 8px !important;
}
.validation-wizard .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    top: 0 !important;
    right: 0.75rem !important;
}

/* Helper visual reusable para tarjetas con imagen hero */
.tp-card-hero {
    background-position: right top;
    background-size: 350px auto;
}

/* ================================
   ESTILOS DE TABLAS TIMED
   ================================ */

/* Tabla base con diseño minimalista */
.table {
    font-size: 1rem;
    color: var(--timed-text);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: var(--timed-radius-md);
    overflow: hidden;
    border: 2px solid var(--timed-border);
}

/* Header de tabla TIMED */
.table thead th {
    background: linear-gradient(180deg, #01c0c8 0%, #00a8b0 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 1rem 1.25rem;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(1, 192, 200, 0.1);
}

.table thead th:last-child {
    border-right: none;
}

/* Primera columna del header con borde redondeado izquierdo */
.table thead th:first-child {
    border-top-left-radius: var(--timed-radius-md);
    border-bottom-left-radius: 0;
}

/* Última columna del header con borde redondeado derecho */
.table thead th:last-child {
    border-top-right-radius: var(--timed-radius-md);
    border-bottom-right-radius: 0;
}

/* Iconos en el header */
.table thead th i {
    margin-right: 6px;
    opacity: 0.95;
    font-size: 0.9rem;
}

/* Filas del body */
.table tbody tr {
    background-color: #ffffff;
    border-bottom: 1px solid var(--timed-border);
}

/* Celdas del body */
.table tbody td {
    padding: 0.5rem 1rem;
    vertical-align: middle;
    color: var(--timed-text);
    border-bottom: 1px solid var(--timed-border);
    font-size: 1rem;
    line-height: 1.4;
    border-left: none;
    border-right: none;
}

/* Asegura truncamiento de textos largos dentro de celdas (h5, subtítulos) */
.table tbody td h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px 0;
}

/* Primera celda con texto destacado */
.table tbody td:first-child {
    font-weight: 600;
    color: var(--timed-primary);
}

/* Filas alternadas con efecto sutil */
.table tbody tr:nth-child(even) {
    background-color: rgba(1, 192, 200, 0.02);
}

/* Última fila sin borde inferior */
.table tbody tr:last-child td {
    border-bottom: none;
}

/* Última fila - bordes redondeados */
.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--timed-radius-md);
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--timed-radius-md);
}

/* Texto destacado en tablas */
.table tbody td strong {
    color: var(--timed-primary);
    font-weight: 600;
}

/* Variante con header claro */
.table thead.table-light th {
    background: #f8fafc;
    color: var(--timed-text);
    border-bottom: 2px solid #01c0c8;
}

/* Badges en tablas con estilo minimalista */
.table .badge {
    padding: 5px 10px;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
}

.table .badge i {
    font-size: 0.7rem;
}

/* Colores de badges minimalistas */
.table .badge.bg-info {
    background-color: rgba(1, 192, 200, 0.1) !important;
    color: var(--timed-primary);
    border-color: rgba(1, 192, 200, 0.3);
}

.table .badge.bg-danger {
    background-color: rgba(255, 75, 92, 0.1) !important;
    color: var(--timed-critical);
    border-color: rgba(255, 75, 92, 0.3);
}

.table .badge.bg-primary {
    background-color: rgba(37, 99, 235, 0.1) !important;
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.3);
}

.table .badge.bg-success {
    background-color: rgba(0, 200, 83, 0.1) !important;
    color: var(--timed-normal);
    border-color: rgba(0, 200, 83, 0.3);
}

.table .badge.bg-warning {
    background-color: rgba(255, 179, 0, 0.1) !important;
    color: var(--timed-alert);
    border-color: rgba(255, 179, 0, 0.3);
}

/* Mensaje cuando no hay datos */
.table tbody td.text-center {
    padding: 3rem 2rem;
    font-size: 1rem;

/* TIMED: Badges reutilizables para estatus y módulos */
.tp-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
}

.tp-badge-success {
    background-color: #01c0c8; /* color solicitado */
    color: #ffffff;
    border-color: rgba(1, 192, 200, 0.16);
    box-shadow: 0 6px 14px rgba(1, 192, 200, 0.10);
    font-size: 1rem; /* mismo tamaño del sistema */
    padding: 6px 12px;
}

/* Aumentar especificidad para badges combinadas con .badge (bootstrap) */
.badge.tp-badge.tp-badge-success {
    background-color: #01c0c8 !important;
    color: #ffffff !important;
    border-color: rgba(1, 192, 200, 0.16) !important;
    font-size: 1rem !important;
    padding: 6px 12px !important;
}

.badge.tp-badge.tp-badge-pending {
    background-color: rgba(255, 179, 0, 0.08) !important;
    color: var(--timed-alert) !important;
    border-color: rgba(255, 179, 0, 0.14) !important;
}

.badge.tp-badge.tp-badge-danger {
    background-color: rgba(229, 90, 103, 0.08) !important;
    color: var(--timed-danger) !important;
    border-color: rgba(229, 90, 103, 0.14) !important;
}

.tp-badge-pending {
    background-color: rgba(255, 179, 0, 0.08);
    color: var(--timed-alert);
    border-color: rgba(255, 179, 0, 0.14);
}

.tp-badge-danger {
    background-color: rgba(229, 90, 103, 0.08);
    color: var(--timed-danger);
    border-color: rgba(229, 90, 103, 0.14);
}
    color: var(--timed-text-soft);
    background: linear-gradient(135deg, rgba(1, 192, 200, 0.02) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.table tbody td.text-center i {
    font-size: 1.2rem;
    margin-right: 8px;
    opacity: 0.7;
    color: var(--timed-primary);
}

/* Animación de carga sutil */
@keyframes tableFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table tbody tr {
    animation: tableFadeIn 0.3s ease-out backwards;
}

.table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.table tbody tr:nth-child(5) { animation-delay: 0.25s; }

/* Tabla responsive */
.table-responsive {
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar personalizado para tablas */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--timed-bg);
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--timed-primary);
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--timed-primary-dark);
}

/* Tabla bordered moderna */
.table-bordered {
    border: 1px solid var(--timed-border);
    border-radius: 12px;
    overflow: hidden;
}

.table-bordered thead th,
.table-bordered tbody td {
    border: 1px solid var(--timed-border);
}

/* Tabla striped con color TIMED suave */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 183, 189, 0.03);
}

/* Tabla pequeña (compacta) */
.table-sm thead th,
.table-sm tbody td {
    padding: 10px 12px;
    font-size: 0.85rem;
}

/* Responsive: en móviles hacer las celdas más pequeñas */
@media (max-width: 768px) {
    .table thead th,
    .table tbody td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
    
    .table thead th {
        font-size: 0.75rem;
    }
    
    .table .badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}
/* ===============================================
   USER DROPDOWN MENU - HEADER
   =============================================== */

/* Dropdown item est�ndar */
.user-dropdown-item {
    transition: all 0.3s ease;
    color: var(--timed-text);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.user-dropdown-item i {
    width: 20px;
    font-size: 1.1rem;
    color: var(--timed-primary);
    margin-right: 1rem;
}

.user-dropdown-item:hover {
    background-color: var(--timed-primary-soft) !important;
    color: var(--timed-primary-dark) !important;
    text-decoration: none;
}

/* Item de logout con estilo especial */
.user-dropdown-logout {
    transition: all 0.3s ease;
    color: var(--timed-danger);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.user-dropdown-logout i {
    width: 20px;
    font-size: 1.1rem;
    margin-right: 1rem;
}

.user-dropdown-logout span {
    font-weight: 500;
}

.user-dropdown-logout:hover {
    background-color: var(--timed-danger-soft) !important;
    text-decoration: none;
}

/* Link del profile dropdown en header */
.user-profile-link {
    gap: 0.5rem;
}

.user-profile-link .user-avatar-small {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid var(--timed-primary);
}

.user-profile-link .chevron-icon {
    font-size: 0.7rem;
}

/* Dropdown menu container */
.user-dropdown-menu {
    min-width: 280px;
    border: none;
    border-radius: 12px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    background-color: var(--timed-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Header del dropdown con info del usuario */
.user-dropdown-header {
    border-color: var(--timed-border) !important;
}

.user-dropdown-header .user-avatar-large {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 2px solid var(--timed-primary);
}

.user-dropdown-header h6 {
    color: var(--timed-text);
    font-weight: 600;
}

/* Border superior del logout */
.user-dropdown-logout-section {
    border-color: var(--timed-border) !important;
}

/* Override: tablas compactas sin separación entre filas y sin hover (Medicamentos) */
table.tp-dt {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

table.tp-dt thead th {
    /* mantener header como está */
}

/* Asegura que las filas no se muestren como tarjetas */
table.tp-dt tbody tr,
table.tp-dt tbody td {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Elimina cualquier efecto hover visual */
table.tp-dt tbody tr:hover,
table.tp-dt tbody tr:hover td {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Asegura separación cero y que las celdas mantengan padding sin crear visual gaps */
table.tp-dt tbody td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ================================
   MODALES - Mejorar visibilidad de textareas
   ================================ */
/* Zona específica: modal 'modal-fullscreen-sm-down' usado en Nueva Alergia */
.modal-fullscreen-sm-down .modal-content .modal-body .form-control,
.modal-fullscreen-sm-down .modal-content .modal-body textarea.form-control {
    background-color: #f5f8fb; /* ligero contraste respecto al fondo blanco */
    border: 1px solid var(--timed-border);
    color: var(--timed-text);
    box-shadow: inset 0 2px 6px rgba(15,23,42,0.03);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}

.modal-fullscreen-sm-down .modal-content textarea.form-control {
    min-height: 120px;
    resize: none; /* desactivar redimensionamiento según solicitud */
}

.modal-fullscreen-sm-down .modal-content .form-control:focus,
.modal-fullscreen-sm-down .modal-content textarea.form-control:focus {
    border-color: var(--timed-primary);
    box-shadow: 0 6px 18px rgba(0,183,189,0.12);
    outline: none;
}

.modal-fullscreen-sm-down .modal-content .modal-body .row > .col-xs-12,
.modal-fullscreen-sm-down .modal-content .modal-body .row > .col-12 {
    margin-bottom: 0.6rem;
}