/* ============================================================
   PALETA DE COLORES - VERDE OSCURO (ARBOL/CESPED) Y BLANCO (Hardcoded)
   ============================================================ */
:root {
    --verde-900: #1b5e20;
    --verde-800: #2e7d32;
    --verde-700: #388e3c;
    --verde-600: #43a047;
    --verde-500: #4caf50;
    --verde-400: #66bb6a;
    --verde-300: #81c784;
    --verde-200: #a5d6a7;
    --verde-100: #c8e6c9;
    --verde-50: #e8f5e9;
    --blanco: #ffffff;
    --gris-50: #fafafa;
    --gris-100: #f3f3f3;
    --gris-150: #ececec;
    --gris-200: #e0e0e0;
    --gris-400: #9e9e9e;
    --gris-500: #777777;
    --gris-600: #6b6b6b;
    --gris-700: #555555;
    --gris-800: #444444;
    --gris-900: #2b2b2b;
    --gris-fondo: #f5f5f5;
    --naranja-600: #e65100;
    --naranja-100: #fff3e0;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f5f5;
    color: #2b2b2b;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: #4caf50;
    color: #ffffff;
}

/* ============================================================
   LOGIN
   ============================================================ */
.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.fondo-login {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 30%, #4caf50 60%, #66bb6a 100%);
}

.fondo-login::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}

.orbita {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
    animation: flotar 10s ease-in-out infinite alternate;
}

.orbita-a {
    width: 440px;
    height: 440px;
    top: -130px;
    right: -110px;
    background: rgba(255,255,255,0.25);
}

.orbita-b {
    width: 380px;
    height: 380px;
    bottom: -120px;
    left: -100px;
    background: rgba(239,83,80,0.35);
    animation-delay: 3s;
}

@keyframes flotar {
    from { transform: translateY(-16px) scale(1); }
    to   { transform: translateY(16px) scale(1.03); }
}

.escena-login {
    position: relative;
    z-index: 2;
    padding: 40px 24px;
    width: 100%;
    max-width: 960px;
    text-align: center;
}

.marca-login {
    color: #ffffff;
    margin-bottom: 50px;
}

.logo-login {
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #ffffff;
    color: #4caf50;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.logo-login-img {
    width: 430px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 22px;
    display: block;
}

.marca-login h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.25);
}

.marca-login p {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 8px;
}

.selector-cuentas h2 {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 36px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.lista-cuentas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 36px;
}

.cuenta {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-family: inherit;
    padding: 8px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cuenta:hover {
    transform: translateY(-8px);
}

.avatar-cuenta {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 700;
    color: #ffffff;
    border: 3px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s;
    overflow: hidden;
}

.avatar-cuenta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cuenta:hover .avatar-cuenta {
    transform: scale(1.12);
    border-color: #ffffff;
    box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}

.grado-1 { background: linear-gradient(135deg, #2e7d32, #4caf50); }
.grado-2 { background: linear-gradient(135deg, #4caf50, #a5d6a7); }
.grado-3 { background: linear-gradient(135deg, #1b5e20, #43a047); }
.grado-4 { background: linear-gradient(135deg, #43a047, #81c784); }
.grado-5 { background: linear-gradient(135deg, #388e3c, #66bb6a); }

.avatar-otro {
    background: rgba(255,255,255,0.12) !important;
    border: 3px dashed rgba(255,255,255,0.5) !important;
    color: #ffffff;
    font-size: 1.4rem;
}

.nombre-cuenta {
    font-size: 0.95rem;
    font-weight: 600;
}

.rol-cuenta {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.7;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.abierto {
    opacity: 1;
    visibility: visible;
}

.modal-login {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    position: relative;
    transform: translateY(30px) scale(0.94);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.abierto .modal-login {
    transform: translateY(0) scale(1);
}

.modal-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f3f3f3;
    color: #777777;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.modal-cerrar:hover {
    background: #e8f5e9;
    color: #4caf50;
    transform: rotate(90deg);
}

.modal-avatar {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(76,175,80,0.35);
    overflow: hidden;
}

.modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-titulo {
    color: #2b2b2b;
    font-size: 1.3rem;
    font-weight: 700;
}

.modal-rol {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777777;
    margin: 6px 0 20px;
}

.alerta {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    margin-bottom: 18px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerta svg {
    flex-shrink: 0;
}

.alerta.exito-alerta {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.campo {
    text-align: left;
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444444;
    margin-bottom: 6px;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
    background: #ffffff;
    color: #2b2b2b;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.18);
}

.campo input[readonly] {
    background: #fafafa;
    color: #555555;
    cursor: default;
}

.campo-password {
    position: relative;
}

.campo-password input {
    padding-right: 48px;
}

.ver-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9e9e9e;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.ver-password:hover,
.ver-password.visible {
    color: #4caf50;
}
.campo-password input::-ms-reveal,
.campo-password input::-ms-clear { display: none; }
.campo-password input::-webkit-credentials-auto-fill-button,
.campo-password input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
    display: inline-block;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: inherit;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4caf50, #a5d6a7);
    color: #ffffff;
    margin-top: 8px;
    box-shadow: 0 6px 18px rgba(76,175,80,0.3);
    letter-spacing: 0.3px;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(76,175,80,0.4);
}

.btn-cancelar {
    background: none;
    border: none;
    color: #777777;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    padding: 8px 16px;
    transition: color 0.2s;
}

.btn-cancelar:hover {
    color: #4caf50;
}

body.modal-abierto {
    overflow: hidden;
}

/* ============================================================
   INSTALADOR
   ============================================================ */
.pagina-instalador {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    padding: 20px;
}

.tarjeta-instalador {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    padding: 40px;
    width: 100%;
    max-width: 520px;
}

.titulo-instalador {
    color: #4caf50;
    font-size: 1.4rem;
    margin-bottom: 20px;
    text-align: center;
}

.mensaje {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.mensaje.exito {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.mensaje.error {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.aviso {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 10px;
    padding: 16px;
    font-size: 0.88rem;
    margin: 18px 0;
}

.aviso ul {
    margin: 8px 0 0 20px;
}

.btn-primario {
    background: #4caf50;
    color: #ffffff;
    padding: 14px 30px;
    text-decoration: none;
    text-align: center;
}

.btn-primario:hover {
    background: #2e7d32;
}

.aviso-seguridad {
    margin-top: 16px;
    font-size: 0.78rem;
    color: #2e7d32;
    text-align: center;
    font-weight: 600;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: linear-gradient(180deg, #1b5e20 0%, #2e7d32 40%, #4caf50 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    overflow: hidden;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 22px;
    font-size: 1.2rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    position: relative;
}

.sidebar-logo-img {
    width: 230px;
    height: auto;
    object-fit: contain;
}

.btn-cerrar-sidebar {
    display: none;
}

.btn-cerrar-sidebar:hover {
    background: rgba(255,255,255,0.25);
}

.btn-cerrar-sidebar:active {
    transform: scale(0.9);
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.sidebar-nav:hover { scrollbar-color: rgba(255,255,255,0.18) transparent; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
.sidebar-nav:hover::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 12px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    transform: translateX(4px);
}

.sidebar-nav a.activo {
    background: #ffffff;
    color: #4caf50;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.sidebar-usuario {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px;
    border-top: 1px solid rgba(255,255,255,0.12);
    position: relative;
}

.sidebar-usuario .perfil {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #4caf50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sidebar-usuario .info {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    min-width: 0;
}

.sidebar-usuario .info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-usuario .info span {
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.sidebar-usuario .info .email-oculto {
    opacity: 0.85;
    text-transform: none;
    font-size: 0.72rem;
    letter-spacing: 0.8px;
    font-weight: 600;
    color: #a5d6a7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-cerrar-sesion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-cerrar-sesion:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}

.sidebar-usuario .perfil {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff;
}

.sidebar-usuario .perfil:hover .info strong {
    text-decoration: underline;
}

.avatar-foto {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.avatar-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   PERFIL DE USUARIO (DISEÑO COMPLETO)
   ============================================================ */
.perfil-hero {
    max-width: 900px;
    margin: 0 auto 24px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.perfil-banner {
    height: 150px;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 40%, #4caf50 100%);
    position: relative;
}

.perfil-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.15) 0%, transparent 45%);
}

.perfil-encabezado {
    text-align: center;
    padding: 0 24px 26px;
    margin-top: -58px;
    position: relative;
}

.perfil-foto-grande {
    width: 130px;
    height: 130px;
    margin: 0 auto 14px;
    position: relative;
    z-index: 2;
}

.perfil-foto-circulo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 6px solid #ffffff;
    box-shadow: 0 10px 28px rgba(46,125,50,0.4);
}

.perfil-foto-circulo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfil-foto-circulo span {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
}

.perfil-foto-editar {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(46,125,50,0.45);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.perfil-foto-editar:hover {
    transform: scale(1.12) rotate(8deg);
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    box-shadow: 0 8px 20px rgba(27,94,32,0.5);
}

/* ============================================================
   MODAL FOTO DE PERFIL
   ============================================================ */
.modal-foto-contenedor {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 26px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 460px;
    text-align: center;
    position: relative;
    transform: translateY(30px) scale(0.94);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 92vh;
    overflow-y: auto;
}

.modal-overlay.abierto .modal-foto-contenedor {
    transform: translateY(0) scale(1);
}

.modal-foto-titulo h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #2b2b2b;
    margin-bottom: 4px;
}

.modal-foto-titulo p {
    font-size: 0.82rem;
    color: #777777;
    margin-bottom: 20px;
}

.modal-foto-vista {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: linear-gradient(135deg, #c8e6c9, #e8f5e9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 6px solid #ffffff;
    box-shadow: 0 10px 30px rgba(46,125,50,0.35);
}

.modal-foto-vista img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-foto-inicial {
    color: #2e7d32;
    font-size: 3rem;
    font-weight: 800;
}

.modal-foto-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 18px;
    border: 2px dashed #a5d6a7;
    border-radius: 16px;
    background: #f0f9f1;
    color: #2e7d32;
    cursor: pointer;
    transition: all 0.25s;
}

.modal-foto-zona:hover {
    border-color: #4caf50;
    background: #e8f5e9;
}

.modal-foto-zona strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2e7d32;
}

.modal-foto-zona span {
    font-size: 0.75rem;
    color: #777777;
}

.modal-foto-archivo {
    display: none;
}

.modal-foto-contenedor .btn-guardar {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

.modal-foto-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.modal-foto-acciones form {
    margin: 0;
}

.btn-foto-quitar,
.btn-foto-cancelar {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-foto-quitar {
    background: #fdecea;
    border: 1.5px solid #e53935;
    color: #c62828;
}

.btn-foto-quitar:hover {
    background: #e53935;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76,175,80,0.35);
}

.btn-foto-cancelar {
    background: #f0f1f3;
    border: 1.5px solid #cfd3d8;
    color: #5f6368;
}

.btn-foto-cancelar:hover {
    background: #cfd3d8;
    color: #2d3135;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.perfil-nombre {
    font-size: 1.55rem;
    font-weight: 800;
    color: #2b2b2b;
    margin-bottom: 2px;
}

.perfil-email {
    font-size: 0.88rem;
    color: #777777;
    margin-bottom: 12px;
    word-break: break-all;
}

.perfil-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.perfil-stats {
    max-width: 900px;
    margin: 0 auto 24px;
}

.perfil-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.perfil-card {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}

.perfil-card-ancho {
    grid-column: 1 / -1;
}

.perfil-card-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.perfil-card-titulo h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #2b2b2b;
}

.perfil-card-icono {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(46,125,50,0.3);
}

.perfil-lista {
    display: flex;
    flex-direction: column;
}

.perfil-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.perfil-fila:last-child {
    border-bottom: none;
}

.perfil-fila-label {
    font-size: 0.8rem;
    color: #9e9e9e;
    flex-shrink: 0;
}

.perfil-fila-valor {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b2b2b;
    text-align: right;
    word-break: break-all;
}

.perfil-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.perfil-form .btn-guardar {
    margin-top: 10px;
    justify-content: center;
}

.perfil-form .campo input[type="file"] {
    padding: 9px 12px;
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-eliminar-foto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid #f5c6cb;
    background: #fdecea;
    color: #c62828;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.btn-eliminar-foto:hover {
    background: #f5c6cb;
    transform: scale(1.04);
}

.perfil-sin-actividad {
    font-size: 0.85rem;
    color: #9e9e9e;
    text-align: center;
    padding: 18px 0;
}

.perfil-actividad {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.perfil-actividad-item {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
}

.perfil-actividad-item:last-child {
    padding-bottom: 4px;
}

.perfil-actividad-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.perfil-actividad-item:last-child::before {
    display: none;
}

.perfil-actividad-punto {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #4caf50;
    border: 3px solid #e8f5e9;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(76,175,80,0.4);
}

.perfil-actividad-cuerpo strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2b2b2b;
}

.perfil-actividad-cuerpo p {
    font-size: 0.78rem;
    color: #777777;
    margin-top: 2px;
}

.perfil-actividad-cuerpo span {
    display: block;
    font-size: 0.7rem;
    color: #9e9e9e;
    margin-top: 4px;
}

.perfil-vacio {
    text-align: center;
    padding: 60px 20px;
    color: #777777;
}

.perfil-vacio h2 {
    margin: 14px 0 6px;
    color: #2b2b2b;
}

.perfil-vacio p {
    margin-bottom: 20px;
}

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

.overlay-sidebar {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.overlay-sidebar.activo {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */
.contenido {
    margin-left: 260px;
    padding: 30px 38px;
    min-height: 100vh;
}

.btn-menu {
    display: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #4caf50;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.btn-menu:active {
    transform: scale(0.92);
}

.barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 30px;
}

.titulo-barra {
    flex: 1;
    min-width: 0;
}

.barra-superior h1 {
    color: #4caf50;
    font-size: 1.7rem;
    font-weight: 700;
}

.barra-superior p {
    color: #777777;
    font-size: 0.9rem;
    margin-top: 3px;
}

/* ============================================================
   RELOJ MODERNO
   ============================================================ */
.reloj-moderno {
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    padding: 16px 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 24px rgba(76,175,80,0.35);
    position: relative;
    overflow: hidden;
}

.reloj-moderno::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.reloj-moderno .hora {
    font-size: 2.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    line-height: 1.1;
    position: relative;
}

.reloj-moderno .fecha {
    font-size: 0.8rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    text-align: center;
    position: relative;
}

/* ============================================================
   RELOJ CENTRO (INICIO)
   ============================================================ */
.reloj-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1b5e20, #388e3c, #4caf50);
    color: #ffffff;
    padding: 36px 52px 32px;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(27,94,32,0.4), 0 6px 20px rgba(76,175,80,0.25);
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}

.reloj-centro::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.reloj-centro .hora-grande {
    font-size: 4.2rem;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 4px;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.reloj-centro .fecha-grande {
    font-size: 1.1rem;
    font-weight: 500;
    color: #c8e6c9;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   CALENDARIO DE CITAS
   ============================================================ */
.calendario-citas {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.cal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.cal-titulo {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1b5e20;
    margin: 0;
}

.cal-nav {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(76,175,80,0.35);
    transition: transform 0.15s, box-shadow 0.2s;
}

.cal-nav:hover {
    box-shadow: 0 6px 20px rgba(76,175,80,0.5);
}

.cal-nav:active {
    transform: scale(0.9);
}

.cal-dias-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.cal-dias-semana span {
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #4caf50;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.cal-dia {
    min-height: 110px;
    background: rgba(232,245,233,0.45);
    border: 1px solid rgba(76,175,80,0.15);
    border-radius: 14px;
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cal-dia:hover {
    background: rgba(200,230,201,0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(76,175,80,0.2);
}

.cal-vacio {
    background: transparent;
    border: none;
    cursor: default;
    min-height: 110px;
}

.cal-vacio:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.cal-hoy {
    border: 2px solid #4caf50;
    background: rgba(200,230,201,0.6);
    box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}

.cal-numero {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2e7d32;
    align-self: flex-start;
    background: rgba(255,255,255,0.8);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.cal-citas {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.cal-cita-chip {
    background: #ffffff;
    border-left: 4px solid #4caf50;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.72rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.cal-cita-chip strong {
    color: #1b5e20;
    margin-right: 4px;
}

.cal-cita-mas {
    font-size: 0.7rem;
    color: #4caf50;
    font-weight: 600;
    padding: 2px 8px;
}

/* Contenedores de listas de citas */
.citas-contenedor {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    margin-top: 22px;
}

.citas-contenedor-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.citas-contenedor-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1b5e20;
}

.citas-contenedor-titulo h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.citas-contenedor-badge {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(76,175,80,0.3);
}

.citas-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.citas-lista-vacia {
    text-align: center;
    color: #999;
    font-size: 0.92rem;
    padding: 20px 0;
    margin: 0;
    border: 2px dashed #e0e0e0;
    border-radius: 14px;
}

.cita-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fafffa;
    border: 2px solid #e8f5e9;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.cita-item:hover {
    border-color: #4caf50;
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(76,175,80,0.15);
}

.cita-item-hora {
    min-width: 56px;
    padding: 8px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(76,175,80,0.3);
}

.cita-item-info {
    flex: 1;
    min-width: 0;
}

.cita-item-info strong {
    display: block;
    font-size: 0.95rem;
    color: #2b2b2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cita-item-info span {
    display: block;
    font-size: 0.82rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.cita-item-info small {
    display: block;
    font-size: 0.72rem;
    color: #4caf50;
    font-weight: 600;
    margin-top: 2px;
}

.cita-item-estado {
    padding: 5px 12px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Responsive contenedores */
@media (max-width: 768px) {
    .citas-contenedor {
        padding: 16px;
        border-radius: 18px;
    }

    .citas-contenedor-titulo h3 {
        font-size: 0.98rem;
    }

    .cita-item {
        gap: 10px;
        padding: 10px 12px;
    }

    .cita-item-hora {
        min-width: 48px;
        font-size: 0.75rem;
        padding: 6px 8px;
    }

    .cita-item-estado {
        font-size: 0.62rem;
        padding: 4px 8px;
    }
}

/* Modal de cita */
.modal-cita {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-cita.abierto {
    display: flex;
}

.modal-cita-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-cita-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    overflow: hidden;
    animation: modalEntrada 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalEntrada {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-cita-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
}

.modal-cita-cabecera h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.modal-cita-cerrar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

.modal-cita-cerrar:hover {
    background: rgba(255,255,255,0.35);
}

.modal-cita-cerrar:active {
    transform: scale(0.9);
}

.modal-cita-cuerpo {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-cita-cuerpo .campo-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4caf50;
    margin-bottom: 6px;
}

.modal-cita-cuerpo .campo-form input,
.modal-cita-cuerpo .campo-form select,
.modal-cita-cuerpo .campo-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #333;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.modal-cita-cuerpo .campo-form input:focus,
.modal-cita-cuerpo .campo-form select:focus,
.modal-cita-cuerpo .campo-form textarea:focus {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}

.modal-cita-cuerpo .campo-form input[readonly] {
    background: #f1f8e9;
    border-color: #a5d6a7;
    color: #1b5e20;
    font-weight: 600;
    cursor: default;
}

.modal-cita-error {
    color: #e53935;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    min-height: 18px;
}

.modal-cita-pie {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.btn-primario {
    padding: 11px 22px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(76,175,80,0.35);
    transition: transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
}

.btn-primario:hover {
    box-shadow: 0 6px 20px rgba(76,175,80,0.5);
}

.btn-primario:active {
    transform: scale(0.96);
}

.btn-primario:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secundario {
    padding: 11px 22px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    color: #555;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    font-family: inherit;
}

.btn-secundario:hover {
    border-color: #4caf50;
    color: #4caf50;
}

.btn-eliminar-cita {
    padding: 11px 22px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #c62828, #e53935);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(229,57,53,0.35);
    transition: transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-eliminar-cita:hover {
    box-shadow: 0 6px 20px rgba(229,57,53,0.5);
}

.btn-eliminar-cita:active {
    transform: scale(0.96);
}

.btn-eliminar-cita:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   MODAL CITA - LAYOUT MODERNO ORDENADO
   ============================================================ */
.campo-fila {
    display: grid;
    grid-template-columns: 1.45fr 0.9fr;
    gap: 14px;
}

@media (max-width: 520px) {
    .campo-fila {
        grid-template-columns: 1fr;
    }
}

.campo-form label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #2e7d32 !important;
    margin-bottom: 7px !important;
}

/* Selector de hora moderno - select + toggle pill AM/PM */
.hora-picker {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.hora-picker-select-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.hora-picker-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
    opacity: 0.9;
}

.hora-picker-select-wrap .campo-hora-select {
    width: 100%;
    padding: 11px 14px 11px 36px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 12px !important;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1b5e20 !important;
    background: #ffffff !important;
    cursor: pointer;
}

.hora-picker-select-wrap .campo-hora-select:focus {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.14) !important;
}

.periodo-toggle {
    display: flex;
    background: #f1f3f1;
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
    border: 1.5px solid #e8e8e8;
    align-self: stretch;
}

.periodo-btn {
    padding: 0 16px;
    border: none;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: transparent;
    color: #888;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    font-family: inherit;
    min-width: 44px;
}

.periodo-btn.activo {
    background: linear-gradient(135deg, #1b5e20, #43a047);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(27,94,32,0.3);
}

.periodo-btn:not(.activo):hover {
    color: #444;
    background: rgba(0,0,0,0.04);
}

/* Botones con spinner moderno */
.btn-primario,
.btn-secundario,
.btn-eliminar-cita,
.btn-confirmar-cancelar,
.btn-confirmar-eliminar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.btn-primario .btn-icono,
.btn-eliminar-cita .btn-icono,
.btn-confirmar-eliminar .btn-icono {
    flex-shrink: 0;
}

/* Spinner circular borde */
.btn-primario .btn-spinner,
.btn-confirmar-eliminar .btn-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2.2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: girarSpinner 0.65s linear infinite;
    flex-shrink: 0;
}

.btn-primario.cargando .btn-icono,
.btn-confirmar-eliminar.cargando .btn-icono {
    display: none;
}

.btn-primario.cargando .btn-spinner,
.btn-confirmar-eliminar.cargando .btn-spinner {
    display: block;
}

.btn-primario.cargando,
.btn-confirmar-eliminar.cargando {
    pointer-events: none;
    opacity: 0.85;
}

.btn-confirmar-cancelar:disabled,
.btn-confirmar-eliminar:disabled {
    opacity: 0.6;
    pointer-events: none;
}

@keyframes girarSpinner {
    to { transform: rotate(360deg); }
}

/* ============================================================
   MODAL CONFIRMAR ELIMINACIÓN - DISEÑO MODERNO PREMIUM
   ============================================================ */
.modal-confirmar {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-confirmar.abierto {
    display: flex;
}

.modal-confirmar-fondo {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 18, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-confirmar-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 2px 0 rgba(0,0,0,0.04) inset;
    padding: 28px 24px 22px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
    animation: modalEntrada 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-confirmar-icono-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 4px 14px rgba(229,57,53,0.12);
}

.modal-confirmar-titulo {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.modal-confirmar-mensaje {
    margin: 0 0 20px;
    font-size: 0.88rem;
    color: #666;
    line-height: 1.55;
    background: #fafaf9;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 12px 14px;
}

.modal-confirmar-botones {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-confirmar-cancelar {
    flex: 1;
    padding: 12px 18px;
    border: 1.5px solid #e8e8e8;
    background: #ffffff;
    color: #444;
}

.btn-confirmar-cancelar:hover {
    border-color: #c8e6c9;
    background: #f9fdf9;
    color: #2e7d32;
}

.btn-confirmar-cancelar:active,
.btn-confirmar-eliminar:active {
    transform: scale(0.97);
}

.btn-confirmar-eliminar {
    flex: 1;
    padding: 12px 18px;
    border: none;
    background: linear-gradient(135deg, #c62828, #e53935);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(229,57,53,0.32);
}

.btn-confirmar-eliminar:hover {
    box-shadow: 0 8px 24px rgba(229,57,53,0.4);
}

/* Pulido moderno del modal principal de cita */
.modal-cita-panel {
    max-width: 520px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

.modal-cita-cabecera {
    padding: 22px 26px !important;
    background: linear-gradient(135deg, #143d16 0%, #2e7d32 55%, #43a047 100%) !important;
    position: relative;
    overflow: hidden;
}

.modal-cita-cabecera::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 28%, rgba(255,255,255,0.14), transparent 52%);
    pointer-events: none;
}

.modal-cita-cabecera h3 {
    font-size: 1.18rem !important;
    letter-spacing: -0.02em;
    font-weight: 800 !important;
}

.modal-cita-cerrar {
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(6px);
}

.modal-cita-cuerpo {
    padding: 22px 24px !important;
    gap: 14px !important;
    background: #fcfcfc !important;
}

.modal-cita-cuerpo .campo-form input,
.modal-cita-cuerpo .campo-form select,
.modal-cita-cuerpo .campo-form textarea {
    border-width: 1.5px !important;
    background: #ffffff !important;
}

.modal-cita-pie {
    padding: 16px 24px !important;
    background: #ffffff !important;
    gap: 10px !important;
}

.modal-cita-pie .btn-secundario {
    border-width: 1.5px !important;
    background: #fafafa !important;
}

/* Botón seleccionar paciente */
.btn-seleccionar-paciente {
    width: 100%;
    padding: 12px 14px;
    border: 2px dashed #a5d6a7;
    border-radius: 12px;
    background: #f1f8e9;
    color: #4caf50;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.btn-seleccionar-paciente:hover {
    border-color: #4caf50;
    background: #e8f5e9;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.12);
}

/* Modal de selección de pacientes */
.modal-pacientes {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-pacientes.abierto {
    display: flex;
}

.modal-pacientes-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-pacientes-panel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 88vh;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalEntrada 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-pacientes-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
}

.modal-pacientes-cabecera h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.modal-pacientes-cerrar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

.modal-pacientes-cerrar:hover {
    background: rgba(255,255,255,0.35);
}

.modal-pacientes-cerrar:active {
    transform: scale(0.9);
}

.modal-pacientes-cuerpo {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
}

.buscador-pacientes {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    padding: 11px 14px;
    background: #fafafa;
    color: #888;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.buscador-pacientes:focus-within {
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}

.buscador-pacientes input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    color: #333;
}

.grid-pacientes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.tarjeta-paciente {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 2px solid #e8f5e9;
    border-radius: 14px;
    background: #fafffa;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.tarjeta-paciente:hover {
    border-color: #4caf50;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(76,175,80,0.18);
}

.tarjeta-paciente-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(76,175,80,0.3);
}

.tarjeta-paciente-info {
    min-width: 0;
}

.tarjeta-paciente-info strong {
    display: block;
    font-size: 0.9rem;
    color: #2b2b2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tarjeta-paciente-info span {
    display: block;
    font-size: 0.75rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.sin-pacientes {
    text-align: center;
    color: #999;
    font-size: 0.95rem;
    padding: 30px 0;
    grid-column: 1 / -1;
}

/* Paginación */
.paginacion-pacientes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    flex-shrink: 0;
}

.pag-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    color: #555;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
    font-family: inherit;
}

.pag-btn:hover:not(:disabled) {
    border-color: #4caf50;
    color: #4caf50;
}

.pag-btn.activo {
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(76,175,80,0.35);
}

.pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pag-btn:active:not(:disabled) {
    transform: scale(0.92);
}

/* Responsive modal pacientes */
@media (max-width: 768px) {
    .modal-pacientes {
        padding: 0;
    }

    .modal-pacientes-panel {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-pacientes-cuerpo {
        padding: 16px;
        flex: 1;
    }

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

    .paginacion-pacientes {
        gap: 6px;
    }
}

/* Responsive calendario */
@media (max-width: 768px) {
    .calendario-citas {
        padding: 14px;
        border-radius: 18px;
    }

    .cal-titulo {
        font-size: 1.1rem;
    }

    .cal-grid {
        gap: 4px;
    }

    .cal-dia {
        min-height: 72px;
        padding: 4px;
        border-radius: 10px;
    }

    .cal-vacio {
        min-height: 72px;
    }

    .cal-dias-semana {
        gap: 4px;
    }

    .cal-dias-semana span {
        font-size: 0.68rem;
    }

    .cal-numero {
        font-size: 0.8rem;
        width: 24px;
        height: 24px;
    }

    .cal-cita-chip {
        font-size: 0.62rem;
        padding: 3px 5px;
    }

    .modal-cita-panel {
        max-width: 100%;
    }
}

/* ============================================================
   TARJETAS DE ESTADISTICAS (INICIO)
   ============================================================ */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.tarjeta-estadistica {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-left: 5px solid #4caf50;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.tarjeta-estadistica:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(76,175,80,0.15);
}

.icono-tarjeta {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4caf50, #a5d6a7);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(76,175,80,0.3);
}

.tarjeta-estadistica .numero {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1.1;
}

.tarjeta-estadistica .etiqueta {
    font-size: 0.82rem;
    color: #777777;
}

/* ============================================================
   PANEL BIENVENIDA
   ============================================================ */
.panel-bienvenida {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.panel-bienvenida h2 {
    color: #4caf50;
    font-size: 1.15rem;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid #ececec;
}

.panel-bienvenida p {
    color: #777777;
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ============================================================
   FORMULARIO EXPEDIENTE
   ============================================================ */
.pagina-formulario {
    background: #f5f5f5;
}

.encabezado-formato {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    padding: 26px 30px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    border-left: 5px solid #4caf50;
}

.logo-formato {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4caf50, #a5d6a7);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(76,175,80,0.3);
}

.texto-encabezado h2 {
    color: #4caf50;
    font-size: 1.25rem;
    font-weight: 700;
}

.texto-encabezado p {
    color: #777777;
    font-size: 0.85rem;
    margin-top: 3px;
}

.alerta-importante {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 0.85rem;
    color: #2e7d32;
    margin-bottom: 24px;
}

.alerta-importante svg {
    flex-shrink: 0;
    color: #4caf50;
}

/* Secciones acordeon */
.seccion-formulario {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    margin-bottom: 28px;
    overflow: hidden;
}

.seccion-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.2s;
}

.seccion-titulo::-webkit-details-marker { display: none; }
.seccion-titulo::marker { display: none; content: ''; }

.seccion-titulo:hover {
    background: rgba(200,230,201,0.4);
}

.seccion-numero {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4caf50, #a5d6a7);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(76,175,80,0.25);
}

.seccion-texto {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: #2b2b2b;
}

.seccion-flecha {
    color: #9e9e9e;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.seccion-formulario[open] .seccion-flecha {
    transform: rotate(180deg);
}

.seccion-cuerpo {
    padding: 8px 24px 26px;
    border-top: 1px solid #ececec;
}

/* Grid de campos */
.grid-formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.campo-chico {
    min-width: 0;
}

.campo-nota {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2b2b2b;
    margin: 18px 0 14px;
}

.campo-nota:first-child {
    margin-top: 10px;
}

.campo-nota-seccion {
    font-size: 0.88rem;
    font-weight: 600;
    color: #4caf50;
    margin: 22px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
}

.sub-campo {
    margin-top: 10px;
}

.desc-fila {
    display: flex;
    gap: 8px;
    align-items: center;
}

.desc-fila + .desc-fila {
    margin-top: 12px;
}

.desc-fila input {
    flex: 1;
    min-width: 0;
}

.desc-quitar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #e3b7b7;
    border-radius: 10px;
    background: #fff5f5;
    color: #c0392b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.desc-quitar:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

/* Select estilizado */
.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%236b6b6b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
    cursor: pointer;
}

/* Textarea */
.campo textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkboxes y radios */
.checks-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

.check-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #2b2b2b;
    padding: 10px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.2s;
    user-select: none;
}

.check-box:hover {
    border-color: #a5d6a7;
    background: rgba(253,236,234,0.5);
}

.check-box input {
    display: none;
}

.check-marca {
    width: 20px;
    height: 20px;
    border: 2px solid #9e9e9e;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.check-marca::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2.5px solid #ffffff;
    border-bottom: 2.5px solid #ffffff;
    transform: rotate(-45deg) scale(0);
    transition: transform 0.2s;
    margin-top: -2px;
}

.check-box input:checked + .check-marca {
    background: #4caf50;
    border-color: #4caf50;
}

.check-box input:checked + .check-marca::after {
    transform: rotate(-45deg) scale(1);
}

.check-box input:checked ~ * {
    color: #4caf50;
    font-weight: 600;
}

/* Radio Si/No */
.radio-si-no {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: #2b2b2b;
    padding: 8px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.2s;
    user-select: none;
}

.radio-si-no:hover {
    border-color: #a5d6a7;
}

.radio-si-no input {
    display: none;
}

.radio-marca {
    width: 18px;
    height: 18px;
    border: 2px solid #9e9e9e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.radio-marca::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    transform: scale(0);
    transition: transform 0.2s;
}

.radio-si-no input:checked + .radio-marca {
    background: #4caf50;
    border-color: #4caf50;
}

.radio-si-no input:checked + .radio-marca::after {
    transform: scale(1);
}

.radio-si-no input:checked ~ .radio-marca,
.radio-si-no input:checked + .radio-marca + * {
    color: #4caf50;
    font-weight: 600;
}

/* Tabla Si/No */
.tabla-si-no {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.fila-si-no {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #ececec;
}

.fila-si-no:last-child {
    border-bottom: none;
}

.fila-si-no:hover {
    background: rgba(250,250,250,0.8);
}

.etiqueta-si-no {
    flex: 1;
    font-size: 0.9rem;
    color: #2b2b2b;
}

/* Declaracion y firma */
.declaracion-formulario {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    border-left: 5px solid #2e7d32;
}

.declaracion-formulario > p {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2b2b2b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 18px;
    text-align: center;
}

.firma-linea {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.firma-linea label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #555555;
}

.firma-linea input {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 2px solid #9e9e9e;
    border-radius: 0;
    font-size: 1rem;
    outline: none;
    text-align: center;
    transition: border-color 0.25s;
    background: transparent;
}

.firma-linea input:focus {
    border-bottom-color: #4caf50;
}

/* Botones del formulario */
.botones-formulario {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 22px;
}

.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 12px;
    background: #f3f3f3;
    color: #777777;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.btn-volver:hover {
    background: #e0e0e0;
    color: #2b2b2b;
}

.btn-guardar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4caf50, #a5d6a7);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-family: inherit;
    box-shadow: 0 6px 18px rgba(76,175,80,0.3);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-guardar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(76,175,80,0.4);
}

.btn-guardar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* Resultado del formulario */
.resultado-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.9rem;
}

.resultado-form.exito {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.resultado-form.error {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.resultado-form strong {
    font-size: 1rem;
}

.resultado-form span {
    font-size: 0.82rem;
    opacity: 0.85;
}

/* ============================================================
   STAT CARDS (USUARIOS / EXPEDIENTES)
   ============================================================ */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.stat-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-left: 4px solid #4caf50;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(76,175,80,0.15);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.stat-icon.rojo { background: linear-gradient(135deg, #4caf50, #a5d6a7); }
.stat-icon.verde { background: linear-gradient(135deg, #2e7d32, #4caf50); }
.stat-icon.naranja { background: linear-gradient(135deg, #e65100, #ff9800); }

.stat-numero {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1;
}

.stat-etiqueta {
    font-size: 0.78rem;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ============================================================
   USUARIO CARDS
   ============================================================ */
.grid-usuarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.card-usuario {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    border-top: 4px solid #4caf50;
}

.card-usuario:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(76,175,80,0.15);
}

.card-usuario.inactivo-card {
    border-top-color: #9e9e9e;
    opacity: 0.75;
}

.card-usuario-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px 14px;
}

.card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow: hidden;
}

.card-avatar-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.av-mant { background: linear-gradient(135deg, #2e7d32, #4caf50); }
.av-admin { background: linear-gradient(135deg, #555555, #777777); }
.av-user { background: linear-gradient(135deg, #4caf50, #a5d6a7); }

.card-info {
    flex: 1;
    min-width: 0;
}

.card-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #2b2b2b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-info p {
    font-size: 0.8rem;
    color: #777777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-usuario-body {
    padding: 0 22px 20px;
}

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-fecha {
    font-size: 0.75rem;
    color: #9e9e9e;
}

.card-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.card-acciones .btn-accion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

/* ============================================================
   EXPEDIENTE CARDS
   ============================================================ */
.grid-expedientes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 20px;
}

.card-expediente {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.card-expediente:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(76,175,80,0.15);
}

.card-exp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.card-exp-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.progreso-circ {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    margin-left: auto;
}

.progreso-circ svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    display: block;
}

.progreso-anillo-fondo {
    fill: none;
    stroke: rgba(255,255,255,0.25);
    stroke-width: 3.2;
}

.progreso-anillo {
    fill: none;
    stroke: #a5d6a7;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    transition: stroke-dashoffset 0.6s ease;
}

.progreso-circ.progreso-medio .progreso-anillo {
    stroke: #ffe082;
}

.progreso-circ.progreso-bajo .progreso-anillo {
    stroke: #ef9a9a;
}

.progreso-texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: #ffffff;
}

.card-num {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    position: relative;
}

.card-exp-body {
    padding: 20px 22px 16px;
}

.card-exp-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 14px;
}

.card-exp-datos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-exp-desc {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-exp-desc .dato {
    align-items: flex-start;
}

.card-exp-desc .dato::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 50%;
    background: #2e7d5b;
}

.dato {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #777777;
}

.dato svg {
    color: #a5d6a7;
    flex-shrink: 0;
}

.card-exp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid #ececec;
    background: rgba(250,250,250,0.8);
}

.card-exp-footer .card-fecha {
    font-size: 0.78rem;
    color: #777777;
}

/* ============================================================
   ESTADO VACIO
   ============================================================ */
.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}

.vacio-icono {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #a5d6a7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.estado-vacio h3 {
    font-size: 1.2rem;
    color: #2b2b2b;
}

.estado-vacio p {
    font-size: 0.9rem;
    color: #777777;
    max-width: 420px;
}

/* ============================================================
   PAGINACION
   ============================================================ */
.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 22px;
}

.btn-pag {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #4caf50;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1.5px solid #c8e6c9;
    transition: all 0.2s;
}

.btn-pag:hover, .btn-pag.activo {
    background: #4caf50;
    color: #ffffff;
    border-color: #4caf50;
    box-shadow: 0 4px 12px rgba(76,175,80,0.25);
}

/* ============================================================
   TABLAS RESPONSIVAS
   ============================================================ */
.tabla-contenedor {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.tabla-datos thead {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: #ffffff;
}

.tabla-datos th {
    padding: 16px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tabla-datos td {
    padding: 14px 18px;
    border-bottom: 1px solid #ececec;
}

.tabla-datos tbody tr:hover {
    background: rgba(250,250,250,0.8);
}

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

.num-expediente {
    color: #4caf50;
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================================
   BADGES Y DOTS
   ============================================================ */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-rojo { background: #e8f5e9; color: #2e7d32; }
.badge-gris { background: #f3f3f3; color: #555555; }
.badge-claro { background: #e8f5e9; color: #2e7d32; }
.badge-azul { background: #e3f2fd; color: #1565c0; }

.estado-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.estado-dot.activo { background: #4caf50; }
.estado-dot.inactivo { background: #9e9e9e; }

/* ============================================================
   BOTONES DE ACCION
   ============================================================ */
.acciones-fila {
    display: flex;
    gap: 6px;
}

.btn-accion {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-editar { background: #e8f5e9; color: #4caf50; }
.btn-editar:hover { background: #c8e6c9; transform: scale(1.08); }

.btn-perfil {
    background: #e3f2fd;
    color: #1976d2;
    text-decoration: none;
}

.btn-perfil:hover {
    background: #bbdefb;
    transform: scale(1.08);
}
.btn-eliminar { background: #fff3e0; color: #e65100; }
.btn-eliminar:hover { background: #ffe0b2; transform: scale(1.08); }
.btn-activar { background: #e8f5e9; color: #2e7d32; }
.btn-activar:hover { background: #c8e6c9; transform: scale(1.08); }

/* ============================================================
   ALERTAS
   ============================================================ */
.alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 0.88rem;
    margin-bottom: 20px;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* ============================================================
   BUSQUEDA
   ============================================================ */
.barra-busqueda {
    margin-bottom: 20px;
}

.busqueda-form {
    display: block;
}

.campo-busqueda {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid #e0e0e0;
    border-radius: 14px;
    padding: 8px 16px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.campo-busqueda:focus-within {
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}

.campo-busqueda svg {
    color: #9e9e9e;
    flex-shrink: 0;
}

.campo-busqueda input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.92rem;
    padding: 10px 0;
    background: transparent;
    color: #2b2b2b;
    min-width: 0;
}

.btn-limpiar {
    padding: 8px 16px;
    border-radius: 10px;
    background: #f3f3f3;
    color: #777777;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-limpiar:hover {
    background: #e0e0e0;
}

/* ============================================================
   VER EXPEDIENTE
   ============================================================ */
.exp-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.exp-badge-row .progreso-circ {
    margin-left: auto;
}

.progreso-circ-claro .progreso-anillo-fondo {
    stroke: #e8ece9;
}

.progreso-circ-claro .progreso-anillo {
    stroke: #2e7d5b;
}

.progreso-circ-claro .progreso-texto {
    color: #2e7d5b;
}

.progreso-circ-claro.progreso-medio .progreso-anillo,
.progreso-circ-claro.progreso-medio .progreso-texto {
    stroke: #f9a825;
    color: #f9a825;
}

.progreso-circ-claro.progreso-bajo .progreso-anillo,
.progreso-circ-claro.progreso-bajo .progreso-texto {
    stroke: #e53935;
    color: #e53935;
}

.progreso-leyenda {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2e7d5b;
    line-height: 1.4;
    white-space: nowrap;
}

/* ============================================================
   SEGUIMIENTOS
   ============================================================ */
.seg-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
}

.seg-row-2col .seccion-formulario {
    margin-bottom: 0;
}

.seg-box {
    background: #f8faf8;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-seguimientos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

.card-seguimiento {
    background: #ffffff;
    border: 1px solid #e8ece9;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.card-seguimiento:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.card-seg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    flex-wrap: wrap;
}

.card-seg-fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

.card-seg-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-verde {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.card-seg-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-seg-dato {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: #555;
}

.card-seg-dato strong {
    color: #333;
    flex-shrink: 0;
    min-width: 80px;
}

.card-seg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.78rem;
    color: #999;
}

@media (max-width: 768px) {
    .seg-row-2col {
        grid-template-columns: 1fr;
    }
}

.exp-fecha-creado {
    font-size: 0.8rem;
    color: #777777;
}

.ver-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 10px;
}

.ver-dato {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ver-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ver-valor {
    font-size: 0.95rem;
    color: #2b2b2b;
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(250,250,250,0.8);
    border-radius: 8px;
    border: 1px solid #ececec;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ver-full {
    font-size: 0.9rem;
    color: #555555;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(250,250,250,0.8);
    border-radius: 8px;
    border: 1px solid #ececec;
}

.ver-full .ver-label {
    display: inline;
    text-transform: none;
    font-size: 0.88rem;
}

.ver-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ver-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    background: #f3f3f3;
    color: #777777;
    border: 1px solid #e0e0e0;
}

.ver-check.marcado {
    background: #e8f5e9;
    color: #4caf50;
    border-color: #c8e6c9;
    font-weight: 600;
}

.ver-check.marcado::before {
    content: '\2713';
    font-weight: 700;
}

.ver-si-no {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.ver-si-no-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(250,250,250,0.8);
    border: 1px solid #ececec;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #2b2b2b;
}

.ver-si {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f3f3f3;
    color: #777777;
}

.ver-si.marcado {
    background: #e8f5e9;
    color: #4caf50;
}

.btn-ver-exp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4caf50, #a5d6a7);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    box-shadow: 0 3px 10px rgba(76,175,80,0.25);
}

.btn-ver-exp:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(76,175,80,0.35);
}

.btn-editar-exp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #ffffff;
    color: #2e7d5b;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #c8e6c9;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.btn-editar-exp:hover {
    background: #e8f5e9;
    transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */
/* ============================================================
   MAPEO ANATOMICO - SECCION 5
   ============================================================ */
.mapa-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid #e0e0e0;
}

.mapa-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border: none;
    background: #f8f8f8;
    color: #777777;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.mapa-tab:first-child { border-right: 1.5px solid #e0e0e0; }

.mapa-tab.activo {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: #ffffff;
}

.mapa-tab:hover:not(.activo) {
    background: #e8f5e9;
    color: #2e7d32;
}

.mapa-contenedor {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.mapa-paleta {
    width: 220px;
    flex-shrink: 0;
    background: #f8faf8;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.mapa-punta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1.5px solid #e8e8e8;
    font-size: 0.78rem;
    font-weight: 600;
    color: #444444;
    cursor: grab;
    user-select: none;
    transition: all 0.15s;
}

.mapa-punta-item:hover {
    border-color: #a5d6a7;
    background: #f0f9f1;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mapa-punta-item:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.mapa-punta-custom {
    border-style: dashed;
}

.mapa-punta-custom input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    padding: 0;
    cursor: text;
}

.mapa-punta-custom input::placeholder {
    color: #9e9e9e;
}

html[data-tema="oscuro"] .mapa-punta-custom input {
    color: #cbd5e1;
}

html[data-tema="oscuro"] .mapa-punta-custom input::placeholder {
    color: #64748b;
}

.mapa-punta-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mapa-imagen-wrap {
    flex: 1;
    min-width: 0;
}

.mapa-imagen-box {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    background: #fafafa;
    cursor: crosshair;
}

.mapa-imagen-box.modo-pincel {
    cursor: cell;
}

.mapa-trazo-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

/* Pincel para manchar la imagen - toolbar compacta */
.pincel-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pincel-modos {
    display: flex;
    background: #eef2ee;
    border-radius: 999px;
    padding: 2px;
}

.pincel-btn {
    border: none;
    background: transparent;
    color: #777777;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 999px;
    transition: all 0.2s;
}

.pincel-btn.activo {
    background: #ffffff;
    color: #1b5e20;
    box-shadow: 0 1px 5px rgba(0,0,0,0.18);
}

.pincel-sep {
    width: 1px;
    height: 20px;
    background: #e5e5e5;
    flex-shrink: 0;
}

.pincel-colores {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pincel-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.15s;
}

.pincel-swatch:hover {
    transform: scale(1.15);
}

.pincel-swatch.activo {
    border-color: #1b5e20;
    transform: scale(1.2);
}

#pincelColorCustom {
    width: 24px;
    height: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    padding: 1px;
    cursor: pointer;
    background: #ffffff;
}

.pincel-grosor {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pincel-grosor input[type="range"] {
    width: 70px;
    accent-color: #2e7d32;
    cursor: pointer;
}

.pincel-grosor span {
    font-size: 0.7rem;
    font-weight: 800;
    color: #1b5e20;
    background: #e8f5e9;
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 34px;
    text-align: center;
}

.pincel-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    color: #555555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pincel-icon-btn:hover {
    background: #f1f8e9;
    border-color: #a5d6a7;
    color: #1b5e20;
}

.pincel-icon-btn.danger:hover {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}

html[data-tema="oscuro"] .pincel-toolbar {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
}

html[data-tema="oscuro"] .pincel-modos {
    background: #1e293b !important;
}

html[data-tema="oscuro"] .pincel-btn {
    color: #94a3b8 !important;
}

html[data-tema="oscuro"] .pincel-btn.activo {
    background: #334155 !important;
    color: #86efac !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) !important;
}

html[data-tema="oscuro"] .pincel-sep {
    background: #334155 !important;
}

html[data-tema="oscuro"] .pincel-grosor span {
    color: #86efac !important;
    background: rgba(27,94,32,0.35) !important;
}

html[data-tema="oscuro"] .pincel-icon-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html[data-tema="oscuro"] .pincel-icon-btn:hover {
    color: #86efac !important;
    border-color: #2e7d32 !important;
}

html[data-tema="oscuro"] .pincel-icon-btn.danger:hover {
    color: #f87171 !important;
    border-color: #7f1d1d !important;
}

html[data-tema="oscuro"] .mapa-imagen-box.modo-pincel {
    cursor: cell !important;
}

.mapa-imagen {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.mapa-punto-marcado {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    transform: translate(-50%, -50%);
    cursor: move;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s;
}

.mapa-punto-marcado:hover {
    box-shadow: 0 3px 14px rgba(0,0,0,0.5);
    z-index: 10;
}

.mapa-punto-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
}

.mapa-punto-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c62828;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    border: 1.5px solid #ffffff;
}

.mapa-punto-marcado:hover .mapa-punto-del {
    display: flex;
}

/* ============================================================
   VER SEGUIMIENTO
   ============================================================ */
.seg-ver-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    margin-bottom: 22px;
    border-left: 5px solid #4caf50;
}

.seg-ver-fecha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: #2b2b2b;
}

.seg-ver-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.seg-ver-signos {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    border-left: 5px solid #2196f3;
}

.seg-ver-signos .ver-grid {
    margin-top: 10px;
}

.badge-bloqueado {
    background: linear-gradient(135deg, #c62828, #e53935);
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    box-shadow: 0 2px 8px rgba(198,40,40,0.3);
}

.badge-abierto {
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    box-shadow: 0 2px 8px rgba(46,125,50,0.3);
}

/* Bloquear boton rediseñado */
.seg-ver-bloquear {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 50%, #fce4ec 100%);
    border: 2px solid #ffcc80;
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.seg-ver-bloquear::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,152,0,0.08);
    pointer-events: none;
}

.seg-ver-bloquear::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(76,175,80,0.06);
    pointer-events: none;
}

.bloquear-icono-wrap {
    margin-bottom: 16px;
}

.bloquear-icono-circ {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9800, #f44336);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(76,175,80,0.35);
    animation: pulseAdvertencia 2s ease-in-out infinite;
}

@keyframes pulseAdvertencia {
    0%, 100% { box-shadow: 0 8px 24px rgba(76,175,80,0.35); }
    50% { box-shadow: 0 8px 32px rgba(76,175,80,0.55); }
}

.bloquear-texto {
    margin-bottom: 22px;
    position: relative;
}

.bloquear-texto h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 8px;
}

.bloquear-texto p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto;
}

.btn-bloquear-grand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 14px;
    background: linear-gradient(135deg, #c62828, #e53935, #ef5350);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(198,40,40,0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.btn-bloquear-grand::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s;
}

.btn-bloquear-grand:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(198,40,40,0.5);
}

.btn-bloquear-grand:hover::before {
    left: 100%;
}

html[data-tema="oscuro"] .seg-ver-bloquear {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    border-color: #475569 !important;
}

html[data-tema="oscuro"] .seg-ver-bloquear::before {
    background: rgba(255,152,0,0.12) !important;
}

html[data-tema="oscuro"] .seg-ver-bloquear::after {
    background: rgba(255,255,255,0.04) !important;
}

html[data-tema="oscuro"] .bloquear-texto h3 {
    color: #f1f5f9 !important;
}

html[data-tema="oscuro"] .bloquear-texto p {
    color: #cbd5e1 !important;
}

html[data-tema="oscuro"] .bloquear-texto p strong {
    color: #fbbf24 !important;
}

/* Mensaje de bloqueado rediseñado */
.seg-ver-bloqueado-msg {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border: none;
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 22px;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(27,94,32,0.3);
    position: relative;
    overflow: hidden;
}

.seg-ver-bloqueado-msg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08), transparent 60%);
    pointer-events: none;
}

.bloqueado-icono-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.bloqueado-texto {
    flex: 1;
    position: relative;
}

.bloqueado-texto h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #ffffff;
}

.bloqueado-texto p {
    font-size: 0.85rem;
    opacity: 0.9;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
}

.seg-ver-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid #ececec;
    font-size: 0.82rem;
    color: #999;
    margin-top: 10px;
}

/* Card link */
.card-seguimiento-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ============================================================
   SEGUIMIENTOS CARDS REDISEÑADAS
   ============================================================ */
.card-seguimiento {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.card-seguimiento:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.card-seg-bloqueado {
    opacity: 0.85;
}

.card-seg-bloqueado:hover {
    opacity: 1;
}

.card-seg-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-seg-id-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.card-seg-grupo {
    margin-bottom: 12px;
}

.card-seg-grupo:last-child {
    margin-bottom: 0;
}

.card-seg-grupo-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #4caf50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.card-seg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.card-seg-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f3f3f3;
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e8e8e8;
}

.card-seg-pill-verde {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.card-seg-grid-info {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.card-seg-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-seg-info-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.card-seg-info-valor {
    font-size: 0.85rem;
    font-weight: 700;
}

.card-seg-ceap {
    background: linear-gradient(135deg, #1b5e20, #4caf50);
    color: #ffffff;
    padding: 3px 12px;
    border-radius: 8px;
    display: inline-block;
}

.card-seg-estado-texto {
    font-size: 0.82rem;
    color: #555;
    font-weight: 500;
}

.card-seg-notas {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.card-seg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background: rgba(250,250,250,0.6);
}

.card-seg-autor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #999;
}

.card-seg-ver-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4caf50;
    transition: gap 0.2s;
}

.card-seguimiento-link:hover .card-seg-ver-link {
    gap: 8px;
    color: #2e7d32;
}

/* Readonly mapping */
.mapa-tabs-readonly {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid #e0e0e0;
}

.mapa-tab-ro {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: #f8f8f8;
    color: #777777;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.mapa-tab-ro:first-child { border-right: 1.5px solid #e0e0e0; }

.mapa-tab-ro.activo {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: #ffffff;
}

.mapa-readonly-box {
    margin-bottom: 10px;
}

.mapa-imagen-box-readonly {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    background: #fafafa;
    max-width: 700px;
}

.mapa-imagen-box-readonly .mapa-imagen {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.mapa-imagen-box-readonly .mapa-punto-marcado {
    cursor: default;
}

.seg-ver-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
}

.leyenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@media (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }

    .contenido {
        margin-left: 220px;
        padding: 26px 24px;
    }

    .barra-superior h1 {
        font-size: 1.45rem;
    }

    .reloj-centro .hora-grande {
        font-size: 3.8rem;
    }

    .tarjetas {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .grid-usuarios {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* ============================================================
   RESPONSIVE - MOVIL
   ============================================================ */
@media (max-width: 768px) {
    .sidebar {
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar.sidebar-abierta {
        transform: translateX(0);
    }

    .btn-cerrar-sidebar {
        display: inline-flex;
    }

    .contenido {
        margin-left: 0;
        padding: 18px;
    }

    .btn-menu {
        display: inline-flex;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 12;
    }

    body.menu-abierto .btn-menu {
        display: none;
    }

    .btn-cerrar-sidebar {
        display: none;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 13;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: none;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #e53935;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
        transition: transform 0.15s;
    }

    .btn-cerrar-sidebar:active {
        transform: scale(0.92);
    }

    body.menu-abierto .btn-cerrar-sidebar {
        display: inline-flex;
    }

    .barra-superior {
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 22px;
    }

    .titulo-barra {
        flex: 1;
    }

    .reloj-centro {
        padding: 24px 28px 20px;
        margin-bottom: 22px;
        border-radius: 20px;
    }

    .reloj-centro .hora-grande {
        font-size: 2.6rem;
    }

    .reloj-centro .fecha-grande {
        font-size: 0.82rem;
        letter-spacing: 1.5px;
    }

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

    .panel-bienvenida {
        padding: 22px;
    }

    /* Login */
    .escena-login {
        padding: 30px 18px;
    }

    .marca-login {
        margin-bottom: 38px;
    }

    .marca-login h1 {
        font-size: 1.7rem;
    }

    .logo-login {
        width: 78px;
        height: 78px;
    }

    .logo-login-img {
        width: 340px;
    }

    .avatar-cuenta {
        width: 86px;
        height: 86px;
        font-size: 1.8rem;
    }

    .lista-cuentas {
        gap: 24px;
    }

    .modal-login {
        padding: 34px 26px 28px;
        max-width: 400px;
    }

    /* Instalador */
    .pagina-instalador {
        padding: 16px;
    }

    .tarjeta-instalador {
        padding: 26px;
    }

    /* Formulario */
    .encabezado-formato {
        padding: 20px 22px;
        gap: 14px;
    }

    .logo-formato {
        width: 54px;
        height: 54px;
    }

    .texto-encabezado h2 {
        font-size: 1rem;
    }

    .seccion-titulo {
        padding: 16px 20px;
    }

    .seccion-cuerpo {
        padding: 6px 20px 22px;
    }

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

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

    .checks-fila {
        gap: 10px;
    }

    .check-box {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .radio-si-no {
        padding: 6px 12px;
        font-size: 0.83rem;
    }

    .fila-si-no {
        padding: 12px 14px;
    }

    .botones-formulario {
        flex-direction: column;
    }

    .btn-volver, .btn-guardar {
        justify-content: center;
    }

    /* Tabla responsiva */
    .tabla-datos thead {
        display: none;
    }

    .tabla-datos tbody tr {
        display: block;
        padding: 16px 18px;
        border-bottom: 1px solid #ececec;
    }

    .tabla-datos td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0;
        border: none;
    }

    .tabla-datos td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.78rem;
        color: #777777;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .campo-busqueda {
        flex-wrap: wrap;
    }

    .campo-busqueda input {
        width: 100%;
        min-width: 0;
    }

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

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

    .stats-row {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 18px;
    }

    .card-acciones {
        flex-direction: column;
    }

    .card-acciones .btn-accion {
        justify-content: center;
    }

    .barra-superior {
        flex-direction: column;
        align-items: stretch;
    }

    .barra-superior > .btn {
        align-self: flex-start;
    }
}

/* ============================================================
   RESPONSIVE - CELULAR PEQUENO
   ============================================================ */
@media (max-width: 768px) {
    .mapa-contenedor {
        flex-direction: column;
    }

    .mapa-paleta {
        width: 100%;
        max-height: 140px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

    .mapa-punta-item {
        font-size: 0.72rem;
        padding: 7px 10px;
    }
}

@media (max-width: 480px) {
    .contenido {
        padding: 14px;
    }

    .escena-login {
        padding: 22px 14px;
    }

    .marca-login h1 {
        font-size: 1.45rem;
    }

    .marca-login p {
        font-size: 0.82rem;
    }

    .selector-cuentas h2 {
        font-size: 0.95rem;
        margin-bottom: 28px;
    }

    .avatar-cuenta {
        width: 76px;
        height: 76px;
        font-size: 1.6rem;
    }

    .lista-cuentas {
        gap: 18px;
    }

    .nombre-cuenta {
        font-size: 0.85rem;
    }

    .modal-login {
        padding: 28px 18px 22px;
        border-radius: 20px;
    }

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

    .tarjeta-estadistica {
        padding: 20px;
    }

    .reloj-moderno {
        flex-direction: column;
        gap: 4px;
    }

    .barra-superior h1 {
        font-size: 1.25rem;
    }

    /* Formulario */
    .encabezado-formato {
        flex-direction: column;
        text-align: center;
        padding: 18px;
    }

    .seccion-titulo {
        padding: 14px 16px;
        gap: 10px;
    }

    .seccion-numero {
        width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }

    .seccion-texto {
        font-size: 0.9rem;
    }

    .campo input,
    .campo select,
    .campo textarea {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .paginacion {
        gap: 6px;
        padding: 16px;
    }

    .btn-pag {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

/* ============================================================
   BANNER PENDIENTES + HISTORIAL CITAS
   ============================================================ */
.banner-pendientes {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border: 1.5px solid #ffcc80;
    border-radius: 16px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(255,152,0,0.12);
}
.banner-pendientes-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #ff9800; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem; flex-shrink: 0;
}
.banner-pendientes-info { flex: 1; }
.banner-pendientes-info strong { display: block; color: #e65100; font-size: 0.92rem; }
.banner-pendientes-info span { font-size: 0.82rem; color: #6d4c41; }
.btn-banner-accion {
    padding: 10px 18px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #e65100, #ff9800); color: white;
    font-weight: 700; font-size: 0.85rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,152,0,0.3);
}
.historial-filtros {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 12px;
    background: white; border-radius: 14px; border: 1px solid #f0f0f0;
}
.filtro-btn {
    padding: 8px 14px; border: 1.5px solid #e0e0e0; border-radius: 999px;
    background: white; font-weight: 600; font-size: 0.82rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; color: #555;
}
.filtro-btn.activo { background: #1b5e20; color: white; border-color: #1b5e20; }
.filtro-count { background: rgba(0,0,0,0.08); padding: 2px 7px; border-radius: 999px; font-size: 0.75rem; }
.filtro-btn.activo .filtro-count { background: rgba(255,255,255,0.22); }
.historial-lista { display: flex; flex-direction: column; gap: 12px; }
.historial-item {
    background: white; border-radius: 16px; padding: 16px;
    border: 1px solid #f0f0f0; border-left: 4px solid #4caf50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.historial-item-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.historial-badge { padding: 4px 10px; border-radius: 999px; color: white; font-weight: 700; font-size: 0.75rem; }
.historial-fecha { font-size: 0.82rem; color: #888; font-weight: 600; }
.historial-paciente { display: block; font-size: 0.95rem; color: #1a1a1a; margin-bottom: 4px; }
.historial-motivo { display: block; font-size: 0.82rem; color: #666; }
.historial-obs { display: block; font-size: 0.8rem; color: #6d4c41; background: #fff8e1; padding: 6px 8px; border-radius: 8px; margin-top: 6px; }
.historial-meta { display: block; font-size: 0.75rem; color: #aaa; margin-top: 6px; }
.historial-item-acciones { margin-top: 10px; display: flex; gap: 8px; }
.btn-reagendar {
    padding: 8px 14px; border: 1.5px solid #c8e6c9; border-radius: 10px;
    background: #f1f8e9; color: #2e7d32; font-weight: 700; font-size: 0.82rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-reagendar:hover { background: #e8f5e9; border-color: #4caf50; }
.historial-reagendada-label { font-size: 0.82rem; color: #4caf50; font-weight: 700; background: #e8f5e9; padding: 6px 10px; border-radius: 8px; }
.historial-atendida-label { font-size: 0.82rem; color: #2e7d32; font-weight: 700; background: #e8f5e9; padding: 6px 10px; border-radius: 8px; }
.historial-vacio { text-align: center; padding: 40px 20px; background: white; border-radius: 16px; border: 1px dashed #c8e6c9; }
.historial-vacio p { color: #999; margin-top: 10px; }
.historial-cargando { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; background: white; border-radius: 16px; }
.spinner-historial { width: 32px; height: 32px; border: 3px solid #c8e6c9; border-top-color: #4caf50; border-radius: 50%; animation: girarSpinner 0.7s linear infinite; }
.reagendar-info { background: #f1f8e9; border: 1px solid #c8e6c9; padding: 10px 12px; border-radius: 10px; font-size: 0.88rem; color: #2e7d32; margin-bottom: 12px; }
.cal-dia.cal-pasado { opacity: 0.35; pointer-events: none; background: #fafafa; }
.cal-dia.cal-pasado .cal-numero { color: #aaa; }

/* Banner global flotante - responsive y ordenado */
.banner-global-pendientes {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border: 1.5px solid #ffcc80;
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    width: calc(100% - 24px);
    max-width: 520px;
    box-sizing: border-box;
}
.banner-global-pendientes .banner-global-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: #ff9800; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.9rem; flex-shrink: 0;
}
.banner-global-texto {
    flex: 1; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
    font-size: 0.88rem; color: #6d4c41; line-height: 1.3;
}
.banner-global-texto strong { color: #e65100; white-space: nowrap; }
.banner-global-texto span { white-space: nowrap; }
.banner-global-acciones {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.banner-global-cta {
    padding: 8px 14px; background: linear-gradient(135deg,#e65100,#ff9800);
    color: white; border-radius: 8px; font-weight: 700; font-size: 0.82rem;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(230,81,0,0.25);
}
.banner-global-cerrar {
    background: none; border: none; font-size: 1.25rem;
    cursor: pointer; color: #8d6e63; padding: 2px 6px; flex-shrink: 0; line-height: 1;
}
@media (max-width: 520px) {
    .banner-global-pendientes {
        left: 8px; right: 8px; transform: none;
        width: auto; max-width: none;
        padding: 10px 12px; gap: 10px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        align-items: flex-start;
        border-radius: 12px;
    }
    .banner-global-pendientes .banner-global-icon { width: 26px; height: 26px; font-size: 0.85rem; margin-top: 1px; }
    .banner-global-texto {
        flex: 1; min-width: 0;
        flex-direction: column; align-items: flex-start; gap: 1px;
        font-size: 0.78rem; line-height: 1.25;
        white-space: normal;
    }
    .banner-global-texto strong { font-size: 0.8rem; white-space: normal; color: #e65100; }
    .banner-global-texto .banner-global-sub {
        display: block; font-size: 0.72rem; color: #8d6e63;
        white-space: normal; line-height: 1.2;
    }
    .banner-global-acciones { gap: 6px; align-self: center; }
    .banner-global-cta { padding: 7px 12px; font-size: 0.78rem; }
    .banner-global-cerrar { font-size: 1.15rem; padding: 2px 4px; }
}

/* ============================================================
   MODO OSCURO - Overrides globales [data-tema="oscuro"]
   ============================================================ */

/* MODO OSCURO - Transiciones suaves globales */
html[data-tema="oscuro"] *, [data-tema="oscuro"] * {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* MODO OSCURO - body y fondo base */
html[data-tema="oscuro"] body,
[data-tema="oscuro"] body,
[data-tema="oscuro"] {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}
html[data-tema="oscuro"] {
    background: #0f172a;
    color-scheme: dark;
}

/* MODO OSCURO - contenido principal */
html[data-tema="oscuro"] .contenido,
[data-tema="oscuro"] .contenido {
    background: transparent;
    color: #e2e8f0;
}

/* MODO OSCURO - barra superior titulos */
html[data-tema="oscuro"] .barra-superior h1,
[data-tema="oscuro"] .barra-superior h1,
html[data-tema="oscuro"] .titulo-barra h1,
[data-tema="oscuro"] .titulo-barra h1 {
    color: #e2e8f0;
}
html[data-tema="oscuro"] .barra-superior p,
[data-tema="oscuro"] .barra-superior p,
html[data-tema="oscuro"] .titulo-barra p,
[data-tema="oscuro"] .titulo-barra p {
    color: #94a3b8;
}

/* MODO OSCURO - Cards genericas */
html[data-tema="oscuro"] .citas-contenedor,
html[data-tema="oscuro"] .calendario-citas,
html[data-tema="oscuro"] .perfil-card,
html[data-tema="oscuro"] .perfil-hero,
html[data-tema="oscuro"] .kpi-card,
html[data-tema="oscuro"] .chart-card,
html[data-tema="oscuro"] .tabla-wrap,
html[data-tema="oscuro"] .tabla-facturas,
html[data-tema="oscuro"] .tabla-pend,
html[data-tema="oscuro"] .tabla-comp,
html[data-tema="oscuro"] .search-card,
html[data-tema="oscuro"] .stat-card,
html[data-tema="oscuro"] .panel-pacientes,
html[data-tema="oscuro"] .panel-chat,
html[data-tema="oscuro"] .modal-login,
html[data-tema="oscuro"] .modal-cita-panel,
html[data-tema="oscuro"] .modal-pacientes-panel,
html[data-tema="oscuro"] .modal-confirmar-panel,
html[data-tema="oscuro"] .factura-papel,
html[data-tema="oscuro"] .reloj-centro,
html[data-tema="oscuro"] .reloj-moderno,
html[data-tema="oscuro"] .banner-pendientes,
html[data-tema="oscuro"] .banner-global-pendientes,
[data-tema="oscuro"] .citas-contenedor,
[data-tema="oscuro"] .calendario-citas,
[data-tema="oscuro"] .perfil-card,
[data-tema="oscuro"] .perfil-hero {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* MODO OSCURO - cards con blur - anula transparencia clara */
html[data-tema="oscuro"] .perfil-hero,
[data-tema="oscuro"] .perfil-hero,
html[data-tema="oscuro"] .perfil-card {
    background: #1e293b !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #334155;
}

/* MODO OSCURO - calendario especifico */
html[data-tema="oscuro"] .cal-dia {
    background: rgba(30,41,59,0.9);
    border-color: #334155;
}
html[data-tema="oscuro"] .cal-dia:hover {
    background: #334155;
}
html[data-tema="oscuro"] .cal-hoy {
    border-color: var(--verde-500);
    background: rgba(76,175,80,0.15);
}
html[data-tema="oscuro"] .cal-numero {
    background: #0f172a;
    color: #e2e8f0;
}
html[data-tema="oscuro"] .cal-cita-chip {
    background: #0f172a;
    color: #cbd5e1;
    border-left-color: var(--verde-500);
}
html[data-tema="oscuro"] .cal-cita-chip strong { color: #81c784; }
html[data-tema="oscuro"] .cal-dias-semana span { color: #94a3b8; }
html[data-tema="oscuro"] .cal-titulo { color: #e2e8f0; }

/* MODO OSCURO - cita items */
html[data-tema="oscuro"] .cita-item {
    background: #0f172a;
    border-color: #334155;
}
html[data-tema="oscuro"] .cita-item:hover { border-color: var(--verde-600); }
html[data-tema="oscuro"] .cita-item-info strong { color: #e2e8f0; }
html[data-tema="oscuro"] .cita-item-info span { color: #94a3b8; }
html[data-tema="oscuro"] .citas-lista-vacia {
    color: #94a3b8;
    border-color: #334155;
}

/* MODO OSCURO - stat/kpi/chart */
html[data-tema="oscuro"] .kpi-card,
[data-tema="oscuro"] .kpi-card,
html[data-tema="oscuro"] .chart-card,
[data-tema="oscuro"] .chart-card,
html[data-tema="oscuro"] .stat-card {
    background: #1e293b;
    border: 1px solid #334155;
}
html[data-tema="oscuro"] .stat-numero { color: #e2e8f0; }
html[data-tema="oscuro"] .stat-etiqueta { color: #94a3b8; }

/* MODO OSCURO - Inputs generales */
html[data-tema="oscuro"] .campo input,
html[data-tema="oscuro"] .campo select,
html[data-tema="oscuro"] .campo textarea,
html[data-tema="oscuro"] .campo-form input,
html[data-tema="oscuro"] .campo-form select,
html[data-tema="oscuro"] .campo-form textarea,
[data-tema="oscuro"] .campo input,
[data-tema="oscuro"] .campo select,
[data-tema="oscuro"] .campo textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html[data-tema="oscuro"] .campo input::placeholder,
html[data-tema="oscuro"] .campo textarea::placeholder,
[data-tema="oscuro"] .campo input::placeholder {
    color: #64748b;
}
html[data-tema="oscuro"] .campo input:focus,
html[data-tema="oscuro"] .campo select:focus,
html[data-tema="oscuro"] .campo textarea:focus,
html[data-tema="oscuro"] .campo-form input:focus,
html[data-tema="oscuro"] .campo-form select:focus,
html[data-tema="oscuro"] .campo-form textarea:focus {
    border-color: var(--verde-500) !important;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.18) !important;
}
html[data-tema="oscuro"] .campo input[readonly],
html[data-tema="oscuro"] .campo-form input[readonly] {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
html[data-tema="oscuro"] .campo label,
html[data-tema="oscuro"] .campo-form label {
    color: #cbd5e1;
}

/* MODO OSCURO - buscadores y filtros */
html[data-tema="oscuro"] .search-card,
[data-tema="oscuro"] .search-card {
    background: #1e293b;
    border-color: #334155;
}
html[data-tema="oscuro"] .historial-filtros {
    background: #1e293b;
    border-color: #334155;
}
html[data-tema="oscuro"] .filtro-btn {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
html[data-tema="oscuro"] .filtro-btn.activo {
    background: var(--verde-800);
    border-color: var(--verde-800);
    color: #ffffff;
}
html[data-tema="oscuro"] .historial-item,
[data-tema="oscuro"] .historial-item {
    background: #1e293b;
    border-color: #334155;
    border-left-color: var(--verde-600);
}
html[data-tema="oscuro"] .historial-paciente { color: #e2e8f0; }
html[data-tema="oscuro"] .historial-motivo { color: #94a3b8; }
html[data-tema="oscuro"] .historial-fecha { color: #64748b; }
html[data-tema="oscuro"] .historial-vacio,
html[data-tema="oscuro"] .historial-cargando {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
html[data-tema="oscuro"] .historial-obs {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155;
}
html[data-tema="oscuro"] .historial-meta { color: #64748b !important; }
html[data-tema="oscuro"] .historial-filtros { background: #1e293b; border-color: #334155; }
html[data-tema="oscuro"] .filtro-btn { background: #0f172a; color: #94a3b8; border-color: #334155; }
html[data-tema="oscuro"] .filtro-btn.activo { background: #1b5e20; color: #ffffff; }
html[data-tema="oscuro"] .btn-reagendar { background: #0f172a; color: #81c784; border-color: #334155; }
html[data-tema="oscuro"] .historial-reagendada-label,
html[data-tema="oscuro"] .historial-atendida-label { background: #0f172a; color: #81c784; border: 1px solid #334155; }
html[data-tema="oscuro"] .reagendar-info {
    background: rgba(76,175,80,0.12);
    border-color: #334155;
    color: #81c784;
}

/* MODO OSCURO - Tablas thead th verde oscuro */
html[data-tema="oscuro"] thead th,
[data-tema="oscuro"] thead th,
html[data-tema="oscuro"] .tabla-wrap thead th,
html[data-tema="oscuro"] .tabla-facturas thead th {
    background: #0f3d12 !important;
    background-color: #0f3d12 !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}
html[data-tema="oscuro"] thead th { background: var(--verde-900) !important; filter: brightness(0.85); }
html[data-tema="oscuro"] tbody td,
[data-tema="oscuro"] tbody td {
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
html[data-tema="oscuro"] tbody tr {
    background: #1e293b;
}
html[data-tema="oscuro"] tbody tr:nth-child(even) {
    background: #162032;
}
html[data-tema="oscuro"] tbody tr:hover {
    background: #334155 !important;
}
html[data-tema="oscuro"] .tabla-wrap,
[data-tema="oscuro"] .tabla-wrap {
    background: #1e293b;
    border-color: #334155;
}

/* MODO OSCURO - Sidebar ligeramente oscurecida */
html[data-tema="oscuro"] .sidebar,
[data-tema="oscuro"] .sidebar {
    background: linear-gradient(180deg, #0f3d12 0%, #1b5e20 40%, #2e7d32 100%) !important;
    filter: brightness(0.92);
}

/* MODO OSCURO - Modals overlay */
html[data-tema="oscuro"] .modal-overlay,
[data-tema="oscuro"] .modal-overlay,
html[data-tema="oscuro"] .modal-cita-fondo,
[data-tema="oscuro"] .modal-cita-fondo,
html[data-tema="oscuro"] .overlay-sidebar {
    background: rgba(0,0,0,0.6) !important;
}
html[data-tema="oscuro"] .modal-cita-panel,
html[data-tema="oscuro"] .modal-pacientes-panel,
html[data-tema="oscuro"] .modal-confirmar-panel,
html[data-tema="oscuro"] .modal-foto-contenedor {
    background: #1e293b !important;
    color: #e2e8f0;
    border-color: #334155;
}
html[data-tema="oscuro"] .modal-login {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0;
}
html[data-tema="oscuro"] .modal-titulo,
html[data-tema="oscuro"] .modal-foto-titulo h3 { color: #e2e8f0; }
html[data-tema="oscuro"] .modal-rol,
html[data-tema="oscuro"] .modal-foto-titulo p { color: #94a3b8; }
html[data-tema="oscuro"] .modal-cerrar {
    background: #0f172a;
    color: #94a3b8;
}
html[data-tema="oscuro"] .modal-cerrar:hover { background: #334155; color: #e2e8f0; }
html[data-tema="oscuro"] .modal-cita-cuerpo,
html[data-tema="oscuro"] .modal-cita-pie {
    background: #1e293b;
    border-color: #334155;
}
html[data-tema="oscuro"] .modal-cita-pie { background: #0f172a; }

/* MODO OSCURO - Factura papel (mantener legible pero oscuro si se desea) */
html[data-tema="oscuro"] .factura-papel {
    background: #1e293b !important;
    color: #e2e8f0;
    border-color: #334155;
}
html[data-tema="oscuro"] .factura-papel h2,
html[data-tema="oscuro"] .factura-papel h3 { color: #e2e8f0; }
html[data-tema="oscuro"] .factura-papel p,
html[data-tema="oscuro"] .factura-papel span { color: #cbd5e1; }

/* MODO OSCURO - Relojes */
html[data-tema="oscuro"] .reloj-centro,
html[data-tema="oscuro"] .reloj-moderno {
    background: linear-gradient(135deg, #0f3d12, #1b5e20) !important;
    border-color: rgba(255,255,255,0.08);
}
html[data-tema="oscuro"] .reloj-centro .hora-grande,
html[data-tema="oscuro"] .reloj-moderno .hora { color: #e2e8f0; }
html[data-tema="oscuro"] .reloj-centro .fecha-grande,
html[data-tema="oscuro"] .reloj-moderno .fecha { color: #cbd5e1; }

/* MODO OSCURO - Banners pendientes */
html[data-tema="oscuro"] .banner-pendientes,
[data-tema="oscuro"] .banner-pendientes {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    border-color: #475569 !important;
}
html[data-tema="oscuro"] .banner-pendientes-info strong { color: #fbbf24; }
html[data-tema="oscuro"] .banner-pendientes-info span { color: #cbd5e1; }
html[data-tema="oscuro"] .banner-global-pendientes {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    border-color: #475569 !important;
}
html[data-tema="oscuro"] .banner-global-texto { color: #cbd5e1; }
html[data-tema="oscuro"] .banner-global-texto strong { color: #fbbf24; }

/* MODO OSCURO - Paneles y tablas comp */
html[data-tema="oscuro"] .panel-pacientes,
html[data-tema="oscuro"] .panel-chat,
html[data-tema="oscuro"] .tabla-pend,
html[data-tema="oscuro"] .tabla-comp {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* MODO OSCURO - Alertas */
html[data-tema="oscuro"] .alerta {
    background: rgba(30,41,59,0.95);
    border-color: #334155;
    color: #cbd5e1;
}
html[data-tema="oscuro"] .alerta.exito-alerta {
    background: rgba(27,94,32,0.25);
    border-color: var(--verde-700);
    color: #81c784;
}

/* MODO OSCURO - Perfil badges y listas */
html[data-tema="oscuro"] .perfil-nombre { color: #e2e8f0; }
html[data-tema="oscuro"] .perfil-email { color: #94a3b8; }
html[data-tema="oscuro"] .perfil-fila { border-color: #334155; }
html[data-tema="oscuro"] .perfil-fila-label { color: #94a3b8; }
html[data-tema="oscuro"] .perfil-fila-valor { color: #e2e8f0; }
html[data-tema="oscuro"] .perfil-actividad-cuerpo strong { color: #e2e8f0; }
html[data-tema="oscuro"] .perfil-actividad-cuerpo p { color: #94a3b8; }
html[data-tema="oscuro"] .perfil-actividad-item::before { background: #334155; }
html[data-tema="oscuro"] .perfil-sin-actividad { color: #64748b; }
html[data-tema="oscuro"] .badge { filter: brightness(0.9); }

/* MODO OSCURO - Botones secundarios y paginacion */
html[data-tema="oscuro"] .btn-secundario {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
html[data-tema="oscuro"] .btn-secundario:hover {
    border-color: var(--verde-500);
    color: var(--verde-400);
}
html[data-tema="oscuro"] .btn-menu {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
}
html[data-tema="oscuro"] .paginacion .btn-pag {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

/* MODO OSCURO - Scrollbar */
html[data-tema="oscuro"] ::-webkit-scrollbar-track { background: #0f172a; }
html[data-tema="oscuro"] ::-webkit-scrollbar-thumb { background: #334155; }

/* MODO OSCURO - Switch tema (asegura visibilidad) */
html[data-tema="oscuro"] .switch-tema .slider { background: #334155; }
html[data-tema="oscuro"] #labelTema { color: #cbd5e1; }