:root {
    --color-primary: #0B5D56;
    --color-secondary: #2DD4BF;
    --color-bg: #EEF7F6;
    --color-action: #2563EB;
    --color-dark: #0F172A;
    --color-muted: #64748B;
    --color-card: #FFFFFF;
    --radius-lg: 20px;
}

body {
    background: var(--color-bg);
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--color-dark);
}

/* NAVBAR */
.navbar {
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
}

.navbar .nav-link {
    border-radius: 10px;
    padding: 8px 12px;
    transition: all .25s ease;
}

.navbar .nav-link:hover {
    background: rgba(45, 212, 191, 0.12);
    color: var(--color-primary);
}

/* CARDS */
.app-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 93, 86, 0.08);
    box-shadow: 0 10px 28px rgba(11, 93, 86, 0.06);
    transition: all .25s ease;
}

.app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(11, 93, 86, 0.10);
}

/* BOTONES */
.btn-primary-soft {
    background: var(--color-action);
    color: #fff;
    border-radius: 12px;
    border: none;
    transition: all .25s ease;
}

.btn-primary-soft:hover{
    background: var(--color-action);
    color:#fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(37,99,235,0.25);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    border-radius: 12px;
}

/* TEXTOS */
.text-primary-app {
    color: var(--color-primary);
}

h1, h2, h3, h4, h5 {
    color: var(--color-dark);
}

/* TÍTULOS MÉDICOS */
.titulo-seccion-medica {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 800;
    border-left: 5px solid var(--color-primary);
    padding-left: 12px;
    margin-bottom: 15px;
}

/* BLOQUES CLÍNICOS */
.bloque-clinico {
    background: rgba(45, 212, 191, 0.05);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 15px;
    border: 1px solid rgba(45, 212, 191, 0.15);
    transition: all .25s ease;
}

.bloque-clinico:hover {
    background: #ffffff;
    border-color: rgba(45, 212, 191, 0.30);
}

/* CONSULTAS */
.consulta-historial-card {
    background: #ffffff;
    border: 1px solid rgba(11, 93, 86, 0.10);
    border-left: 6px solid var(--color-primary);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 22px rgba(11, 93, 86, 0.06);
}

.consulta-fecha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45, 212, 191, 0.14);
    color: var(--color-primary);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
}

.metric-mini {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    height: 100%;
}

.metric-mini small {
    display: block;
    color: var(--color-muted);
    margin-bottom: 6px;
}

.metric-mini strong {
    font-size: 20px;
    color: var(--color-dark);
}

.texto-clinico {
    background: #F8FAFC;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid #E2E8F0;
}

/* TABLAS */
.table thead th {
    color: var(--color-dark);
    font-weight: 800;
    border-bottom: 1px solid #E2E8F0;
}

.table tbody tr:hover {
    background: rgba(45, 212, 191, 0.05);
}

/* ALERTAS */
.alert-success {
    background: rgba(45, 212, 191, 0.14);
    border: 1px solid rgba(45, 212, 191, 0.30);
    color: #064E3B;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .app-card {
        border-radius: 16px;
    }

    h1 {
        font-size: 30px;
    }
}

/* HOVER PREMIUM BOTONES */

.btn{
    transition: all .25s ease;
}

.btn:hover{
    transform: translateY(-1px);
}

.btn-primary-soft:hover{
    background: var(--color-action);
    color:#fff;
    transform: translateY(-1px);
    box-shadow:0 6px 15px rgba(37,99,235,.25);
}

.btn-primary:hover{
    box-shadow:0 6px 15px rgba(37,99,235,.25);
}

.btn-outline-primary:hover{
    box-shadow:0 6px 15px rgba(37,99,235,.15);
}

.btn-outline-secondary:hover{
    box-shadow:0 6px 15px rgba(100,116,139,.15);
}

.btn-outline-danger:hover{
    box-shadow:0 6px 15px rgba(220,38,38,.15);
}
/* =========================
   KPI CARDS DASHBOARD
========================= */

.row.g-3.mb-4 > .col-12.col-md-3 .app-card{
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--color-primary);
    min-height: 125px;
    padding: 18px !important;
}
.row.g-3.mb-4 > .col-12.col-md-3 .app-card h2{
    font-size: 30px !important;
    margin-bottom: 8px;
}

.row.g-3.mb-4 > .col-12.col-md-3 .app-card p{
    margin-bottom: 8px;
}

.row.g-3.mb-4 > .col-12.col-md-3 .app-card i{
    font-size: 34px !important;
}
.row.g-3.mb-4 > .col-12.col-md-3 .app-card::after{
    width: 55px;
    height: 55px;
    right: -12px;
    bottom: -12px;
    background: rgba(45,212,191,0.08);
}

.row.g-3.mb-4 > .col-12.col-md-3 .app-card::after{
    content: "";
    position: absolute;
   width: 70px;
height: 70px;
right: -18px;
bottom: -18px;
    background: rgba(45, 212, 191, 0.10);
    border-radius: 50%;
}

.row.g-3.mb-4 > .col-12.col-md-3 .app-card p{
    font-weight: 600;
}

.row.g-3.mb-4 > .col-12.col-md-3 .app-card h2{
    color: var(--color-dark);
    font-size: 34px;
}

.row.g-3.mb-4 > .col-12.col-md-3 .app-card i{
    color: var(--color-primary) !important;
    position: relative;
    z-index: 2;
}
/* =========================
   ACCIONES FICHA PACIENTE
========================= */

.accion-rapida-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:68px;
    text-decoration:none;
    border-radius:16px;
    background:#ffffff;
    border:1px solid rgba(11,93,86,0.12);
    color:var(--color-dark);
    font-weight:700;
    transition:all .25s ease;
}

.accion-rapida-card i{
    font-size:20px;
    color:var(--color-primary);
}

.accion-rapida-card:hover{
    transform:translateY(-2px);
    border-color:var(--color-action);
    box-shadow:0 10px 22px rgba(37,99,235,.12);
    color:var(--color-action);
}

.accion-rapida-card:hover i{
    color:var(--color-action);
}

.accion-principal{
    background:var(--color-action);
    color:#fff;
    border-color:var(--color-action);
}

.accion-principal i{
    color:#fff;
}

.accion-principal:hover{
    color:#fff;
    filter:brightness(.96);
}

.accion-principal:hover i{
    color:#fff;
}

.lista-acciones-mini{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.lista-acciones-mini a{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:var(--color-dark);
    background:#ffffff;
    border:1px solid #E2E8F0;
    border-radius:12px;
    padding:7px 10px;
font-size:13px;
    transition:all .22s ease;
}

.lista-acciones-mini a i{
    color:var(--color-primary);
}

.lista-acciones-mini a:hover{
    background:rgba(45,212,191,0.08);
    border-color:rgba(45,212,191,0.35);
    color:var(--color-primary);
    transform:translateX(2px);
}
/* DATOS COMPACTOS DEL PACIENTE */
.datos-paciente-mini{
    background:rgba(45,212,191,0.05);
    border:1px solid rgba(45,212,191,0.18);
    border-radius:16px;
    padding:12px 14px;
}

.dato-mini{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px dashed rgba(15,23,42,0.12);
    font-size:13px;
}

.dato-mini:last-child{
    border-bottom:none;
}

.dato-mini span{
    color:var(--color-muted);
}

.dato-mini strong{
    color:var(--color-dark);
    text-align:right;
}