/* =============================================================================
   PREVENIR PARPADEO DEL CONTENIDO AL CARGAR
   ============================================================================= */
html.content-loading .content-area {
    visibility: hidden;
}

html.content-loading .modern-navbar {
    visibility: hidden;
}

/* =============================================================================
   IMPORTACIÓN DE TIPOGRAFÍA SATOSHI
   ============================================================================= */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
         url('../fonts/Satoshi-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
         url('../fonts/Satoshi-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
         url('../fonts/Satoshi-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
         url('../fonts/Satoshi-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
         url('../fonts/Satoshi-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'SatoshiVariable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff');
  font-weight: 100 900; /* rango completo */
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   VARIABLES DE COLORES - Utilizadas en múltiples vistas
   ============================================================================= */
:root {
  --azul-claro:   #00B6E5;
  --azul-fondo:   #EAFEFF;
  --azul-oscuro:   #0090C0;
  --azul-oscuroText:   #03729B;
  --azul-intenso: #00D0FF;
  --gris-suave:   #697586;
  --blanco-suave:   #F2F4F7;
  --gris-placeHolder:   #98A2B3;
  --gris-intenso: #4B5565;
  --blanco-palido: #FCFCFD;
  --negro-palido: #344054;
  --titulo-principal:   #000000;
  --titulo-secundario:  #121926;
  --titulo-secundario2:  #121926;
  --texto-campo:        #667085;

  /* Variable para la tipografía */
  --font-family-primary: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Clases de color de texto utilizadas */
.text-azul-claro       { color: var(--azul-claro) !important; }
.text-azul-intenso     { color: var(--azul-intenso) !important; }
.text-azul-oscuro     { color: var(--azul-oscuro) !important; }
.text-azul-oscuroText     { color: var(--azul-oscuroText) !important; }
.text-gris-suave       { color: var(--gris-suave) !important; }
.text-blanco-suave     { color: var(--blanco-suave) !important; }
.text-gris-intenso     { color: var(--gris-intenso) !important; }
.text-titulo-principal { color: var(--titulo-principal) !important; font-size: 22px;}
/* .text-titulo-secundario { color: var(--titulo-secundario) !important; font-weight: 500;} */
.text-titulo-secundario {font-family: 'SatoshiVariable', sans-serif;color: var(--titulo-secundario) !important;font-weight: 590; font-size: 16px;}

.text-titulo-secundario2 { color: var(--titulo-secundario2) !important; font-size: 12px; }
.text-texto-campo      { color: var(--texto-campo) !important;font-size: 14px; }

/* Clases de fondo utilizadas */
.bg-azul-claro       { background-color: var(--azul-claro) !important; }
.bg-azul-fondo       { background-color: var(--azul-fondo) !important; }
.bg-blanco-palido    { background-color: var(--blanco-palido) !important; }

.fs-18 {
  font-size: 18px;
}



/* =============================================================================
   ESTILOS GLOBALES BASE
   ============================================================================= */
body {
    font-family: var(--font-family-primary);
    background-color: #f8f9fa;
    overflow-x: hidden;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Aplicar Satoshi a todos los elementos de texto */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button,
input, textarea, select,
.form-control, .btn,
.nav-link, .dropdown-item {
    font-family: var(--font-family-primary);
}

/* =============================================================================
   JERARQUÍA TIPOGRÁFICA CON SATOSHI
   ============================================================================= */

/* Títulos principales */
h1, .h1 {
    font-family: var(--font-family-primary);
    font-weight: 900; /* Black */
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-family: var(--font-family-primary);
    font-weight: 700; /* Bold */
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h3, .h3 {
    font-family: var(--font-family-primary);
    font-weight: 700; /* Bold */
    font-size: 1.5rem;
    line-height: 1.3;
}

h4, .h4 {
    font-family: var(--font-family-primary);
    font-weight: 500; /* Medium */
    font-size: 1.25rem;
    line-height: 1.4;
}

h5, .h5 {
    font-family: var(--font-family-primary);
    font-weight: 500; /* Medium */
    font-size: 1.125rem;
    line-height: 1.4;
}

h6, .h6 {
    font-family: var(--font-family-primary);
    font-weight: 500; /* Medium */
    font-size: 1rem;
    line-height: 1.5;
}

/* Texto del cuerpo */
p, .body-text {
    font-family: var(--font-family-primary);
    font-weight: 400; /* Regular */
    font-size: 1rem;
    line-height: 1.6;
}

/* Texto pequeño */
small, .small-text {
    font-family: var(--font-family-primary);
    font-weight: 400; /* Regular */
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Texto de caption */
.caption {
    font-family: var(--font-family-primary);
    font-weight: 400; /* Regular */
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gris-suave);
}

/* =============================================================================
   CLASES UTILITARIAS DE PESO TIPOGRÁFICO
   ============================================================================= */
.font-light   { font-weight: 300 !important; }
.font-regular { font-weight: 400 !important; }
.font-medium  { font-weight: 500 !important; }
.font-bold    { font-weight: 700 !important; }
.font-black   { font-weight: 900 !important; }



.icon-rotate-90{ transform: rotate(90deg); transform-origin: 50% 50%; }

.user-profile .profile-item{ background:#e9eef5 !important; }
.user-profile .avatar{ background:#0f172a !important; }





.user-profile {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.user-profile .profile-item {
    font-family: var(--font-family-primary);
    display: flex;
    align-items: center;
    padding: 10px;
    background: #dbeafe !important;
    border-radius: 8px;
    margin-bottom: 10px;
}

.user-profile .avatar {
    font-family: var(--font-family-primary);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #2563eb !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 10px;
}


/* =============================================================================
   LAYOUT PRINCIPAL - Utilizado en layouts/app.blade.php
   ============================================================================= */
.main-content {
    margin-left: 280px;
    transition: all 0.3s ease;
    min-height: 100vh;
}

.main-content.expanded {
    margin-left: 80px;
}

.top-navbar {
    font-family: var(--font-family-primary);
    background: white;
    padding: 15px 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-area {
    background: white;
    padding: 10px;
}

/* =============================================================================
   CARDS DEL DASHBOARD - cliente/dashboard.blade.php
   ============================================================================= */
.stats-card {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
}

.card-title {
    font-family: var(--font-family-primary);
    font-size: 22px;
    font-weight: 700; /* Bold */
    color: #1e293b;
}

.card-count {
    font-family: var(--font-family-primary);
    background: #E5F8FF;
    color: #00D0FF;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
}

.card-rounded-shadow {
  background: #fff;
  border: 1px solid #EEF2F6;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}


.btn-create {
    font-family: var(--font-family-primary);
    background: #00D0FF !important;
    color: white !important;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600; /* Semi-bold para botones de acción */
    font-size: 14px;
    transition: background 0.2s;
}

.btn-create:hover {
    background: #00c0e6 !important;
}

.btn-config {
    font-family: var(--font-family-primary);
    border: 1px solid #00D0FF!important;
    color: #00D0FF!important;
    background: transparent!important;
    border-radius: 20px;
    padding: 8px 16px;
    transition: background 0.2s;
}

.btn-config:hover {
    background: rgba(0,208,255,0.1)!important;
}

/* Items del dashboard */
.progress-item {
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.progress-item h6 {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.progress {
    height: 6px;
    background: #e5e7eb;
    border-radius: 4px;
    margin-bottom: 12px;
}

.progress-bar {
    background: #00D0FF !important;
    border-radius: 4px;
}

.progress-info .progress-badge {
    font-family: var(--font-family-primary);
    background: rgba(0,208,255,0.1);
    color: #00D0FF;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.progress-info .note {
    font-family: var(--font-family-primary);
    color: #64748b;
    font-size: 14px;
}

.solicitud-item, .alert-item {
    background: #F8FAFC;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.solicitud-item:last-child, .alert-item:last-child {
    margin-bottom: 0;
}

.solicitud-item h6, .alert-item h6 {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.see-all {
    font-family: var(--font-family-primary);
    color: #00D0FF;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.see-all:hover {
    color: #00c0e6;
}

/* Status badges */
.status-badge {
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
}

.status-badge.bg-warning {
    background: #FEF3C7!important;
    color: #92400E!important;
}

.status-badge.bg-success {
    background: #DCFCE7!important;
    color: #166534!important;
}

.status-badge.bg-danger {
    background: #FEE2E2!important;
    color: #991B1B!important;
}

.status-badge.bg-info {
    background: #DBF4FF!important;
    color: #0369A1!important;
}

.status-badge.bg-secondary {
    background: #E5E7EB!important;
    color: #374151!important;
}

.status-badge.expired {
    background:#FEF3F2;
    color:#F04438
}

.status-badge.pending {
    background-color: #FFF9E5;
    color: #FEC84B;
}

.status-badge.neutral {
    background-color: #f3f4f6;
    color: #6b7280;
}


/* =============================================================================
   CONTROLES DE BÚSQUEDA Y FILTROS - index de sociedades/personas
   ============================================================================= */
.search-group {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-group .input-group-text {
    border: none;
    background-color: #fff;
}

.search-group .form-control {
    font-family: var(--font-family-primary);
    border: none !important;
    background-color: transparent;
    box-shadow: none !important;
    outline: none !important;
}

.search-group:focus-within {
    border-color: #697586;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.control-group {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

.control-group .input-group-text,
.control-group .btn {
    border: none !important;
    background: transparent !important;
}

.control-group .btn {
    font-family: var(--font-family-primary);
    padding: 8px 16px;
    border-radius: 0;
}

/* =============================================================================
   BOTONES CON HOVER Y EFECTOS - Usado en múltiples vistas
   ============================================================================= */
.bg-azul-claro:hover,
.btn-create.bg-azul-claro:hover {
    background-color: var(--azul-intenso) !important;
    box-shadow: 0 2px 6px rgba(0, 182, 229, 0.3) !important;
}

.icon-hover:hover,
.icon-hover:focus {
    color: var(--azul-intenso) !important;
}

.icon-hover:hover i,
.icon-hover:focus i {
    stroke: currentColor !important;
}

/* =============================================================================
   MODALES - Crear Sociedad/Persona y Edición
   ============================================================================= */
#crearSociedadModal .modal-dialog,
#crearPersonaModal .modal-dialog {
    max-width: 600px;
}

#crearSociedadModal .modal-header,
#crearPersonaModal .modal-header {
    background-color: #03729B;
    color: #fff;
    border-bottom: none;
}

#crearSociedadModal .modal-header .btn-close,
#crearPersonaModal .modal-header .btn-close {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}

#crearSociedadModal .modal-footer,
#crearPersonaModal .modal-footer {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    justify-content: flex-end;
    padding: 1rem;
}

.btn-continuar {
    font-family: var(--font-family-primary);
    background-color: #00D0FF;
    color: #fff;
    border: none;
    font-weight: 500;
}

.btn-continuar:hover {
    background-color: #00C0E6;
}

/* Modales de edición */
.modal-editar .modal-header {
    background-color: #03729B;
    border-bottom: none;
}

.modal-editar .modal-header .modal-title {
    font-family: var(--font-family-primary);
    color: #fff !important;
}

.modal-editar .modal-header .btn-close {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}

.modal-editar input::placeholder,
.modal-editar textarea::placeholder {
    color: var(--gris-placeHolder) !important;
    opacity: 1;
}

.modal-editar .form-select option[disabled] {
    color: var(--gris-placeHolder);
}

.modal-editar .form-label {
    font-family: var(--font-family-primary);
    color: var(--negro-palido) !important;
    font-weight: 400;
}

/* =============================================================================
   boton editar de Personas relacionadas
   ============================================================================= */
.rl-btn-edit{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid #00B6E5;color:#00B6E5;background:#FFFFFF;
    padding:6px 12px;border-radius:8px;font-weight:700;text-decoration:none
}
.rl-btn-edit .lucide{width:18px;height:18px;stroke:#00B6E5;color:#00B6E5}


/* =============================================================================
   CARDS DE INFORMACIÓN - inversionesGlobales views
   ============================================================================= */
.card-gen-info {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

.card-gen-info .card-header {
    background-color: #03729B;
    color: #fff;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    padding: 1rem 1.5rem;
    border-bottom: none;
}

.card-gen-info .card-body {
    padding: 2rem 1.5rem;
    background-color: #fff;
}

.card-gen-info .btn-outline-light {
    font-family: var(--font-family-primary);
    border-color: rgba(255,255,255,0.7);
    color: #fff;
    transition: background-color .2s;
}

.card-gen-info .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Espaciado para los campos de información */
.card-gen-info .row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.card-gen-info .col-md-3,
.card-gen-info .col-md-6,
.card-gen-info .col-12 {
    padding-bottom: 1rem;
}

.card-gen-info .col-md-3 p,
.card-gen-info .col-md-6 p,
.card-gen-info .col-12 p {
    margin-bottom: 0.5rem;
}

.card-gen-info .col-md-3 p:last-child,
.card-gen-info .col-md-6 p:last-child,
.card-gen-info .col-12 p:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   NAVEGACIÓN CON PESTAÑAS - inversionesGlobales
   ============================================================================= */
.nav-pills {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
}

.nav-item {
    margin: 0 !important;
}

.nav-pills .nav-link.custom-pill {
    font-family: var(--font-family-primary);
    border: 1px solid transparent;
    font-weight: 500;
    border-radius: 0.5rem;
    color: var(--gris-suave) !important;
    background-color: transparent !important;
    transition: background-color 0.2s, color 0.2s;
    padding: 8px 12px;
}

.nav-pills .nav-link.custom-pill:hover {
    background-color: rgba(105, 117, 134, 0.1);
}

.nav-pills .nav-link.custom-pill.active {
    color: var(--azul-oscuro) !important;
    background-color: var(--azul-fondo) !important;
    border-color: transparent;
}

/* =============================================================================
   BOTONES DE ACCIÓN - Notas, Chat, etc.
   ============================================================================= */
.btn-action {
    font-family: var(--font-family-primary);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 8px;
    padding: .25rem .75rem;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    transition: background-color .2s ease;
    text-decoration: none;
}

.btn-action i {
    margin-right: .5rem;
}

.btn-action:hover {
    background-color: #f1f5f9;
    color: #64748b;
}

/* =============================================================================
   TOOLTIPS PERSONALIZADOS
   ============================================================================= */
.tooltip-inner {
    font-family: var(--font-family-primary);
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc;
    font-size: 0.875rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    border-left-color: #ffffff !important;
    border-right-color: #ffffff !important;
}

/* =============================================================================
   ESTILOS DE LOGIN - auth/login.blade.php
   ============================================================================= */
.login-body {
    background: #f8f9fa;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.login-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 2.5vw;
}

.login-container {
    width: 95vw;
    max-height: 95vh;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    overflow: hidden;
}




/* Ajustes responsivos para la columna izquierda */
.login-left,
.auth-left-light {
    padding: 3vh 4vw;
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.login-right {
    padding: 40px 60px;
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

/* Ajustes para ilustración en pantallas grandes */
.auth-illustration {
    max-height: 40vh;
    width: 100%;
    max-width: 500px;
    object-fit: contain;
    margin: 3vh auto;
    flex-shrink: 1;
}

/* Ajustar tamaño de textos para pantallas grandes */
@media (min-width: 1401px) {
    .login-container {
        width: 92vw;
    }

    .login-left,
    .auth-left-light {
        padding: 4vh 4.5vw;
    }

    .login-right {
        padding: 4vh 5.5vw;
    }

    .login-right h2 {
        font-size: 2.25rem;
    }

    .login-right p.text-muted {
        font-size: 1.1rem;
    }

    .form-label {
        font-size: 1rem;
    }

    .form-control {
        padding: 0.85rem 1rem;
        font-size: 1.05rem;
    }

    .btn-login {
        padding: 0.95rem;
        font-size: 1.1rem;
    }

    .brand-logo {
        font-size: 2.5rem;
    }

    .auth-quote-text {
        font-size: 1.05rem;
    }

    .auth-illustration {
        max-height: 50vh;
        max-width: 550px;
    }
}

/* Ajuste específico para pantallas medianas como 1366x768 */
@media (min-width: 1200px) and (max-width: 1400px) {
    .login-container {
        width: 94vw;
        max-height: 92vh;
    }

    .login-left,
    .auth-left-light {
        padding: 3vh 3vw;
    }

    .login-right {
        padding: 3vh 4vw;
    }

    .brand-logo {
        font-size: 1.8rem;
        margin-bottom: 1.5vh;
    }

    .auth-illustration {
        max-height: 32vh;
        max-width: 420px;
    }

    .auth-quote-card {
        padding: 16px 20px;
        margin-bottom: 1.5vh;
    }

    .auth-quote-text {
        font-size: 0.88rem;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .auth-author-name {
        font-size: 0.85rem;
    }

    .auth-author-role {
        font-size: 0.75rem;
    }

    .auth-dots {
        padding: 1vh 0;
    }

    .auth-dots .dot {
        width: 7px;
        height: 7px;
    }

    .auth-dots .dot.active {
        width: 20px;
    }

    .login-right h2 {
        font-size: 1.9rem;
        margin-bottom: 0.5rem;
    }

    .login-right p.text-muted {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .form-control {
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
    }

    .btn-login {
        padding: 0.8rem;
        font-size: 1rem;
    }

    .login-form {
        max-width: 480px;
    }
}

@media (min-width: 1600px) {
    .login-container {
        width: 90vw;
    }

    .login-left,
    .auth-left-light {
        padding: 4vh 5vw;
    }

    .login-right {
        padding: 4vh 6vw;
    }

    .brand-logo {
        font-size: 2.5rem;
        margin-bottom: 3vh;
    }

    .login-right h2 {
        font-size: 2.5rem;
    }

    .login-right p.text-muted {
        font-size: 1.15rem;
    }

    .form-control {
        padding: 0.95rem 1.1rem;
        font-size: 1.08rem;
    }

    .btn-login {
        padding: 1rem;
        font-size: 1.12rem;
    }

    .auth-illustration {
        max-height: 50vh;
        max-width: 580px;
        margin: 5vh auto 3vh auto;
    }

    .auth-quote-text {
        font-size: 1.05rem;
    }
}

/* =============================================================================
   PANTALLAS 1920px - PANTALLA COMPLETA CON PROPORCIONES EXACTAS
   ============================================================================= */
@media (min-width: 1920px) {
    /* Resetear body y html */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Wrapper sin padding */
    .login-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    /* Container a pantalla completa */
    .login-container {
        width: 98vw !important;
        max-width: 100vw !important;
        height: 98vh !important;
        max-height: 100vh !important;
        border-radius: 20px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Row sin gaps */
    .login-container .row {
        margin: 0 !important;
        height: 100vh !important;
    }

    /* Proporciones exactas: 45.25% y 54.75% */
    .auth-left-column {
        flex: 0 0 45.25% !important;
        max-width: 45.25% !important;
        width: 45.25% !important;
        padding: 0 !important;
        margin: 0 !important;

    }

    .auth-right-column {
        flex: 0 0 54.75% !important;
        max-width: 54.75% !important;
        width: 54.75% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Contenido interno */
    .login-left,
    .auth-left-light {
        padding: 70px 100px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
    }

    .login-right {
        padding: 70px 120px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
    }

    .login-right h2 {
        font-size: 2.75rem;
    }

    .login-right p.text-muted {
        font-size: 1.2rem;
    }

    .form-control {
        padding: 1rem 1.2rem;
        font-size: 1.1rem;
    }

    .btn-login {
        padding: 1.1rem;
        font-size: 1.15rem;
    }

    .auth-illustration {
        max-height: 60vh;
        max-width: 650px;
    }
}

.brand-logo {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2vh;
    flex-shrink: 0;
}

/* Ajustar formulario derecho */
.login-form {
    width: 100%;
    /* max-width: 550px; */
    margin: 0 auto;
}

.login-right h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.login-right p.text-muted {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.form-control {
    padding: 0.65rem 0.75rem;
    font-size: 0.95rem;
}

.btn-login {
    padding: 0.75rem;
    font-size: 1rem;
}

/* Media queries para tablets */
@media (max-width: 991px) {
    .login-container {
        max-width: 90%;
        max-height: 90vh;
    }

    .login-left,
    .auth-left-light {
        padding: 20px;
        height: 90vh;
    }

    .login-right {
        padding: 20px;
        height: 90vh;
    }

    .auth-illustration {
        max-height: 30vh;
    }
}

/* Media queries para móviles */
@media (max-width: 767px) {
    .login-wrapper {
        padding: 1vh 2vw;
        height: 100vh;
    }

    .login-container {
        width: 96vw;
        max-height: 98vh;
        border-radius: 10px;
    }

    .login-left,
    .auth-left-light {
        display: none;
    }

    .login-right {
        padding: 3vh 4vw;
        height: 98vh;
    }

    .login-right h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .login-right p.text-muted {
        font-size: 0.85rem;
        margin-bottom: 2vh;
    }

    .form-label {
        font-size: 0.85rem;
    }

    .form-control {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }

    .btn-login {
        padding: 0.7rem;
        font-size: 0.95rem;
    }

    .col-md-6 {
        width: 100%;
    }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    .login-wrapper {
        padding: 5px;
    }

    .login-right {
        padding: 20px 15px;
    }

    .login-container {
        border-radius: 5px;
    }
}

@media (max-height: 700px) {
    .auth-illustration {
        max-height: 25vh;
    }

    .brand-logo {
        font-size: 1.5rem;
        margin-bottom: 0.5vh;
    }

    .auth-quote-card {
        padding: 10px;
        margin-bottom: 0.5vh;
    }

    .auth-quote-text {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .auth-dots {
        padding: 0.5vh 0;
    }

    .auth-dots .dot {
        width: 6px;
        height: 6px;
    }

    .auth-dots .dot.active {
        width: 18px;
    }
}

@media (max-height: 600px) {
    .auth-illustration {
        max-height: 45vh;
    }

    .auth-quote-text {
        font-size: 0.75rem;
    }
}

.login-left {
    background: linear-gradient(135deg, #00D0FF 0%, #667eea 100%);
    color: white;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.login-right {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.shape:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.shape:nth-child(2) {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.shape:nth-child(3) {
    width: 40px;
    height: 40px;
    bottom: 20%;
    left: 30%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.login-form .form-control {
    font-family: var(--font-family-primary);
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.login-form .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.login-form .input-group .input-group-text,
.login-form .input-group .form-control {
    border: none;
}

.login-form .input-group {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.login-form .input-group:focus-within {
    border-color: #00D0FF;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.login-form .input-group .input-group-text,
.login-form .input-group .form-control {
    border: none !important;
    box-shadow: none !important;
}

.btn-login {
    font-family: var(--font-family-primary);
    background: linear-gradient(135deg, #00D0FF 0%, #00D0FF 100%);
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* =============================================================================
   FORMULARIOS
   ============================================================================= */
.form-control,
.form-select {
    font-family: var(--font-family-primary);
    font-weight: 400; /* Regular */
}

.form-label {
    font-family: var(--font-family-primary);
    font-weight: 500; /* Medium para labels */
}

/* Tablas */
.table {
    font-family: var(--font-family-primary);
}

.table th {
    font-weight: 600; /* Semi-bold para headers de tabla */
}

.table td {
    font-weight: 400; /* Regular para contenido de tabla */
}

/* Botones */
.btn {
    font-family: var(--font-family-primary);
    font-weight: 500; /* Medium para botones */
}



/* =================== BASE / TARJETAS GENERALES =================== */
/* =============================================================================
   BASE
   ============================================================================= */
body{font-family: var(--font-family-primary);background:#f8f9fa;overflow-x:clip;overflow-y:auto}
/* =============================================================================
   LAYOUT (resumen relevante)
   ============================================================================= */
.content-card {
    margin: 0 ; /* Eliminar márgenes del contenedor */
    padding: 0 ; /* Eliminar padding si lo hay */
    box-shadow: 0 1px 3px rgba(16,24,40,.04); /* Mantén la sombra si la quieres */
}
.content-header{padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.count-badge{font-family: var(--font-family-primary);background:#f1f5f9;color:#64748b;padding:4px 10px;border-radius:12px;font-size:13px;font-weight:600;margin-left:8px}
.content-title{
    font-family: var(--font-family-primary);
    font-size:22px;
    font-weight:600;
    color:#121926;
    margin:0;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

.content-title .lucide,
.content-title svg {
    margin-top: auto;
    margin-bottom: 3px;
}

/* Botón pill */
.btn-pill-primary{font-family: var(--font-family-primary);background:#60a5fa;color:#fff;border:0;border-radius:24px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.btn-pill-primary:hover{filter:brightness(.97)}

/* =============================================================================
   HERO
   ============================================================================= */
.hero-banner{
  display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:18px;padding:28px;border-radius:20px;
  background: linear-gradient(135deg, #F4FFFC 0%, #EDF5FF 55%, #F7F9EE 100%);
  border: 1px solid #eef2f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.02);
}
.hero-intro .hero-date{font-family: var(--font-family-primary);color:#6b7280;font-size:14px;margin:0 0 8px}
.hero-title{font-family: var(--font-family-primary);margin:0 0 10px;font-size:30px;font-weight:600;letter-spacing:-.02em;color:#0f172a}
.hero-subtitle{font-family: var(--font-family-primary);margin:0;max-width:520px;color:#6b7280;line-height:1.55;font-size:15px;font-weight:400}

/* Cards del hero */
.hero-card{display:block;background:#fff;border:1px solid #f1f5f9;border-radius:14px;padding:18px 18px 20px;color:inherit;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.hero-card:hover{transform:translateY(-2px);border-color:#e6edf5;box-shadow:0 6px 18px rgba(16,24,40,.08)}
.hero-card-icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;background:transparent;border:none;padding:0}
.hero-card-icon svg,.hero-card-icon .lucide{width:24px;height:24px;color:var(--ico);stroke:var(--ico);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-card-title{font-family: var(--font-family-primary);margin:0 0 8px;font-size:16px;font-weight:700;color:#111827;line-height:1.25}
.hero-card-desc{font-family: var(--font-family-primary);margin:0;font-size:14px;color:#6b7280;line-height:1.5}

/* =============================================================================
   ESTADÍSTICAS (tira)
   ============================================================================= */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hero-stat-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.hero-stat-card:hover{transform:translateY(-2px);border-color:#e6edf5;box-shadow:0 6px 18px rgba(16,24,40,.08)}
.hero-stat-left{display:flex;flex-direction:column}
.hero-stat-label{font-family: var(--font-family-primary);margin:0 0 14px;color:#6b7280;font-size:15px;font-weight:600}
.hero-stat-number{font-family: var(--font-family-primary);margin:0;color:#0f172a;font-weight:900;line-height:1;font-size:32px}
.hero-stat-icon{display:inline-flex;align-items:center;justify-content:center;background:var(--ico-bg);border-radius:12px;width:56px;height:56px}
.hero-stat-icon svg,.hero-stat-icon .lucide{width:32px;height:32px;color:var(--ico);stroke:var(--ico);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =============================================================================
   TABLA (cronología)
   ============================================================================= */

.timeline-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #EEF2F6;
  border-radius: 8px;
  overflow: hidden; /* importante para el borde redondeado */
  font-family: var(--font-family-primary); /* Satoshi */
}

/* Encabezados de la tabla */
.timeline-table thead th {
  background: #F8FAFC;
  color: #697586;
  font-weight: 500;
  font-size: 14px;
  padding: 16px;
  border-bottom: 1px solid #EEF2F6;
  text-align: left;
  white-space: nowrap;
}

/* Celdas del cuerpo */
.timeline-table tbody td {
  font-size: 14px;
  color: #4B5565;
  font-weight: 400;
  padding: 16px;
  border-bottom: 1px solid #EEF2F6;
  vertical-align: middle;
}

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

/* Columna “Acción” centrada */
.timeline-table td:last-child,
.timeline-table th:last-child {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}

.status-badge{font-family: var(--font-family-primary);padding:6px 12px;border-radius:16px;font-size:12px;font-weight:700;text-transform:none;letter-spacing:.2px}
.status-badge.expiring-soon{background:#FFF4E5;color:#F79009}
.status-badge.valid{background:#e7f8ee;color:#18794e}
.btn-action-table {background: none;border: none;border-radius: 0;color: #9AA4B2;padding: 0;line-height: 1;cursor: pointer;
}

.btn-action-table:hover {color: #374151;}



/* =============================================================================
   ESTADO DE ACCESO A ARCHIVOS (gráfico y leyenda)
   ============================================================================= */

.file-status-content {
  display: flex;  /* Usamos Flexbox para alinear los elementos */
  justify-content: space-between;  /* Alineamos leyenda y gráfico a los lados */
  align-items: center;  /* Alineamos verticalmente */
  padding: 16px;
}

.file-status-legend {
  width: 48%;  /* La leyenda ocupa el 48% del contenedor */
  padding-right: 10px;  /* Espacio entre la leyenda y el gráfico */
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;  /* Para los círculos de color */
  margin-right: 10px;
}

.shared {
  background-color: #2EC8C8;
}

.pending {
  background-color: #F2C94C;
}

.incomplete {
  background-color: #EB5757;
}

.legend-text {
  font-size: 16px;
  color: #697586;
  font-weight: 500;
  text-align: left;
  flex-grow: 1;
}
.legend-textsub {
  font-size: 14px;
  color: #667085;
  font-weight: 500;
}

.legend-number {
  font-size: 14px;
  font-weight: bold;
  color: #0F172A;
  margin-left: 10px;
  text-align: right;
}

.total-files {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 20px;
}

.total-files span {
  font-size: 14px;
  color: #6B7280;
}

.chart-container {
  width: 50%;  /* El gráfico ocupa el 50% del contenedor */
  position: relative;
}

.chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* Centra el número dentro del gráfico */
  text-align: center;
  display: flex;
  flex-direction: column;  /* Alinea los elementos en columna */
  justify-content: center;
  align-items: center;
}

.chart-number {
  font-size: 32px;
  font-weight: 900;
  color: #0F172A;
}

.chart-label {
  font-size: 14px;
  color: #6B7280;
}

/* =============================================================================
   mantener tabla de cronologia y acceso archivos iguales
   ============================================================================= */
   /* Estilo mejorado para la tabla de Cronología */
.equal-height-cards {
  display: flex;
  flex-wrap: wrap;
}

.equal-height-cards > .col-lg-7,
.equal-height-cards > .col-lg-5,
.equal-height-cards > .col-lg-6,
.equal-height-cards > .col-lg-4 {
  display: flex;
  flex-direction: column;
}

.equal-height-cards > .col-lg-7 .content-card,
.equal-height-cards > .col-lg-5 .content-card,
.equal-height-cards > .col-lg-6 .content-card,
.equal-height-cards > .col-lg-4 .content-card {
  flex: 1 1 auto;
  height: 100%;
}


/* =============================================================================
   LISTAS (Sociedades/Personas)
   ============================================================================= */
.cards-list{padding:0 20px 0px}
.entity-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#FCFCFD;border:1px solid #F2F4F7;border-radius:14px;padding:12px 16px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.entity-card-left{flex:1}
.entity-name-new{font-family: var(--font-family-primary);font-size:20px;font-weight:500;color:#0f172a;margin:0 0 6px}
.entity-details-new{margin-bottom:6px;line-height:1.4}
.entity-detail-item{font-family: var(--font-family-primary);color:#121926;font-size:14px;font-weight:500;}
.entity-separator{margin:0 8px;color:#d1d5db}
.entity-note-new{font-family: var(--font-family-primary);color:#667085;font-size:12px;margin:0;font-style:italic;font-weight: 500;}

/* Progreso circular (solo arcos rotan) */
.progress-circle-new{width:60px;height:60px;position:relative}
.progress-ring{width:100%;height:100%}
.progress-arc{transform:rotate(-90deg);transform-origin:30px 30px}
.progress-ring-circle{stroke-dasharray:163.36;stroke-dashoffset:0;transition:stroke-dashoffset .35s;stroke-linecap:round}
.progress-ring-circle-bg{opacity:.9}
.progress-ring-text{font-family: var(--font-family-primary);font-size:12px;font-weight:700;fill:#0f172a}

/* Ver todo */
.view-all-plate{padding:0px 16px 10px }
.view-all-link{font-size:14px;display:block;text-align:center;background:#F8FAFC;border-radius:12px;padding:12px 16px;color:#4B5565;font-weight:500;text-decoration:none}
.view-all-link:hover{color:#0f172a}

/* Soft cards (Solicitudes/Alertas) */
.soft-cards{padding:0 20px 20px}
.request-soft,.alert-soft{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#FCFCFD;border:1px solid #F2F4F7;border-radius:14px;padding:12px 16px;margin-bottom:12px;
}
.request-name,.alert-name{font-family: var(--font-family-primary);font-size:16px;font-weight:700;color:#0f172a;margin:0 0 6px}
.request-details,.alert-details{font-family: var(--font-family-primary);color:#64748b;font-size:13px;margin:0;line-height:1.4}
.alert-date{font-family: var(--font-family-primary);color:#9ca3af;font-size:12px;margin:4px 0 0}


/* Chips */
.chip{font-family: var(--font-family-primary);display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700}
.chip-success{background:#e8f7ee;color:#18794e}
.chip-warning{background:#fff2e2;color:#b45309}
.chip-danger{background:#fee2e2;color:#b42318}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:1200px){.hero-banner{grid-template-columns:1fr 1fr}}
@media (max-width:992px){.hero-stats{grid-template-columns:1fr 1fr}}
@media (max-width:768px){
  .hero-banner{grid-template-columns:1fr;gap:14px;padding:20px}
  .hero-title{font-size:28px}
}
@media (max-width:576px){
  .hero-stats{grid-template-columns:1fr}
  .hero-stat-number{font-size:28px}
}

/* =============================================================================
   Utilidades globales (consistencia de estilo)
   ============================================================================= */

.btn-soft-edit{
  font-family: var(--font-family-primary);
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #00B6E5;color:#00B6E5;background:#EEF4FF;
  padding:6px 12px;border-radius:10px;font-weight:700;
}
.btn-soft-edit .lucide{width:18px;height:18px;stroke:#03729B;color:#03729B}

.btn-icon-danger{
  font-family: var(--font-family-primary);
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:none;color:#DC2626;font-weight:700;
}
.btn-icon-danger .lucide{width:18px;height:18px;stroke:#DC2626;color:#DC2626}

/* Barra de sección (encabezado) */
.section-bar{
  background:#03729B;color:#fff;padding:20px 18px;
  display:flex;align-items:center;justify-content:space-between;
  border-radius:14px 14px 0 0;
}

/* Chips de rol */
.chip-role{font-family: var(--font-family-primary);background:#E9E8FF;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem}
.chip-role--primary{color:#175CD3}
.chip-role--secondary{color:#5925DC}

/* Botón neutro (para Firmar) */
.btn-soft-neutral{
  font-family: var(--font-family-primary);
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #CBD5E1;          /* gris suave */
  color:#334155;                      /* gris oscuro */
  background:#FFFFFF;
  padding:6px 12px;border-radius:10px;font-weight:700;
}
.btn-soft-neutral .lucide{
  width:18px;height:18px;
  stroke:#334155; color:#334155;
}
.btn-soft-neutral:hover{
  background:#F8FAFC;
  border-color:#94A3B8;
  color:#0F172A;
}

.chev-anim{ transition: transform .2s ease; }
.chev-anim.rot{ transform: rotate(180deg); }

/* =============================================================================
   boton editar info
   ============================================================================= */
.btn-soft-edit-info {
  font-family: var(--font-family-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;  /* Borde blanco */
  color: #fff;  /* Texto en blanco */
  background-color: transparent;  /* Fondo transparente */
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-soft-edit-info .lucide {
  width: 18px;
  height: 18px;
  stroke: #fff;  /* Ícono en blanco */
  color: #fff;  /* Ícono en blanco */
}

.btn-soft-edit-info:hover {
  background-color: rgba(255, 255, 255, 0.1);  /* Fondo blanco translúcido al hacer hover */
  color: #00B6E5;  /* Texto en azul claro al hacer hover */
}

.btn-soft-edit-info:hover .lucide {
  stroke: #00B6E5;  /* Ícono en azul claro al hacer hover */
  color: #00B6E5;  /* Ícono en azul claro al hacer hover */
}




/* =============================================================================
   Iconos como lucide
   ============================================================================= */
.menu-item{
  font-family: var(--font-family-primary);
  display:flex; align-items:center; gap:10px;
  color:#8A97A6;                 /* color base para texto + icono */
  text-decoration:none; padding:10px 14px; border-radius:12px;
}

.menu-item .icon { display:block; flex:0 0 auto; } /* el <svg> tiene class="icon ..." */

.menu-item:hover{
  background:#E6F5FF;
  color:#0D1B2A;                 /* cambia texto + icono (currentColor) */
}

.menu-item.is-active{
  background:#7ED0FF;
  color:#0D1B2A;
}


/* =============================================================================
   BOTÓN NEO (componente reutilizable)
   ============================================================================= */
:root{
  --btn-primary: #00D0FF;           /* #00D0FF - Color del fondo */
  --btn-primary-ink: #121926;       /* #121926 - Color del texto (gris oscuro) */
  --btn-primary-hover: #00c7f2;     /* hover sutil */
  --btn-primary-active: #00b6e5;    /* active */
  --btn-ring: rgba(0, 208, 255, .35); /* focus ring */
  --btn-radius: 8px;
  --btn-font-size: 14px;             /* 14px - tamaño de la fuente */
  --btn-line-height: 20px;           /* 20px - altura de la línea */
  --btn-font-weight: 600;            /* SemiBold - Peso de la fuente */
  --btn-font-family: 'Manrope', sans-serif; /* Manrope - Fuente */
}

.btn-neo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);  /* 14px */
  line-height: var(--btn-line-height);  /* 20px */
  color: var(--btn-primary-ink);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .02s ease-in;
}

.btn-neo--sm {
  height: 36px;
  padding: 8px 14px;
}

.btn-neo--md {
  height: 40px;
  padding: 10px 16px;
}

.btn-neo--lg {
  height: 44px;
  padding: 12px 20px;
}

.btn-neo.--block {
  display: block;
  width: 100%;
}

.btn-neo--primary {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--btn-primary-ink);
}

.btn-neo--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

.btn-neo--primary:active {
  background: var(--btn-primary-active);
  border-color: var(--btn-primary-active);
  transform: translateY(0.5px);
}

.btn-neo--outline {
  background: #fff;
  border-color: var(--btn-primary);
  color: var(--btn-primary);
}

.btn-neo--outline:hover {
  background: rgba(0,208,255,0.06);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-hover);
}

.btn-neo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring);
}

.btn-neo[disabled], .btn-neo.disabled {
  opacity: .6;
  pointer-events: none;
}

.btn-neo .icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
}

.btn-neo.-icon-left .icon {
  margin-right: 8px;
}

.btn-neo.-icon-right .icon {
  margin-left: 8px;
}


/* =============================================================================
   Botón Cancelar con un diseño moderno y accesible
   ============================================================================= */
/* Botón Cancelar con diseño limpio y moderno */
.btn-cancel {
  width: 75px; /* Ancho ajustado */
  height: 36px; /* Altura ajustada */
  border-radius: 8px; /* Bordes redondeados */
  padding: 8px 16px; /* Espaciado interno */
  font-family: 'Manrope', sans-serif; /* Fuente legible */
  font-size: 14px; /* Tamaño de fuente ajustado */
  font-weight: 600; /* Peso de la fuente */
  color: #34495E; /* Color de texto gris oscuro */
  background-color: #FFFFFF; /* Fondo blanco */
  border: 1px solid #BDC3C7; /* Borde gris claro */
  transition: all 0.3s ease; /* Transición suave */
}

/* Hover effect para el botón Cancelar */
.btn-cancel:hover {
  background-color: #ECF0F1; /* Fondo gris claro */
  border-color: #95A5A6; /* Borde gris más oscuro */
  color: #2C3E50; /* Texto gris más oscuro */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Foco en el botón Cancelar */
.btn-cancel:focus {
  outline: none; /* Eliminar el borde por defecto */
  box-shadow: 0 0 0 2px rgba(189, 195, 199, 0.5); /* Resaltar el botón con un borde gris claro */
}

/* Deshabilitado */
.btn-cancel:disabled {
  background-color: #F2F3F4; /* Fondo gris más claro */
  border-color: #BDC3C7; /* Borde gris claro */
  color: #BDC3C7; /* Texto gris más claro */
  cursor: not-allowed; /* Indicar que no se puede hacer clic */
}

/* =============================================================================
   Botón de check del componente
   ============================================================================= */


/* Estilo personalizado para los radio buttons seleccionados */
.form-check-input:checked {
    background-color: #0090C0 !important; /* Cambia este valor a tu color deseado */
    border-color: #0090C0 !important; /* Cambia el color del borde si lo deseas */
}

/* =============================================================================
   icono de ayuda (alineado en línea)
   ============================================================================= */

.rl-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.rl-label .gi-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  color: #94a3b8;
}

/* Checkbox circular con punto (radio-like) */
.form-check-dot .form-check-input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 1.05rem; height: 1.05rem;
  border: 2px solid var(--azul-oscuro);     /* #0090C0 */
  border-radius: 50%;                        /* círculo */
  background: #fff;                          /* fondo blanco */
  position: relative;
  margin-top: .15rem;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* Evitar que tu regla global pinte el fondo azul en este caso */
.form-check-dot .form-check-input[type="checkbox"]:checked{
  background: #fff !important;
  border-color: var(--azul-oscuro) !important;
}

/* El punto interno */
.form-check-dot .form-check-input[type="checkbox"]::after{
  content: "";
  position: absolute;
  inset: 3px;                                /* tamaño del punto */
  border-radius: 50%;
  background: var(--azul-oscuro);
  transform: scale(0);
  transition: transform .12s ease-in;
}
.form-check-dot .form-check-input[type="checkbox"]:checked::after{
  transform: scale(1);
}

/* Focus ring accesible */
.form-check-dot .form-check-input[type="checkbox"]:focus{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(0,144,192,.25);
}

/* Label con tus tonos */
.form-check-dot .form-check-label{
  color: var(--gris-suave);
  font-weight: 600;
}

/* Icono de ayuda en estado de error (campo vacío) */
.gi-help.text-danger {
  color: #DC2626 !important; /* rojo tailwind (puedes cambiarlo si quieres otro tono) */
}

.gi-help.text-danger i {
  color: #DC2626 !important;
  stroke: #DC2626 !important;
}

/* Evitar que el chip se parta en varias líneas */
.status-badge{
  display: inline-flex;      /* mejor comportamiento en línea */
  align-items: center;
  white-space: nowrap;       /* ← no hacer saltos */
  line-height: 1;            /* altura ajustada */
  border-radius: 9999px;     /* pill consistente */
}

/* (Opcional) evita salto en la columna “Estado” de la tabla */
.timeline-table th:nth-child(4),
.timeline-table td:nth-child(4){
  white-space: nowrap;
  width: 1%;                 /* que ocupe solo lo necesario */
}


.legend-line {
  display: inline-block;
  width: 4px;
  height: 30px;
  border-radius: 2px;
}

.legend-line.shared {
  background-color: #2EC8C8;
}

/* Colores para cada estado */
.legend-line.pending {
  background-color: #F2C94C; /* Amarillo */
}

.legend-line.incomplete {
  background-color: #EB5757; /* Rojo */
}

.legend-line.azul {
  background-color: #00B6E5; /* Azul */
}

.legend-line.verde {
  background-color: #16B364; /* verde */
}

.legend-line.rojo {
  background-color: #EC4F47; /* Rojo */
}

.legend-line.naranja {
  background-color: #EF6820; /* Naranja */
}

.legend-line.gris {
  background-color: #E3E8EF; /* gris */
}
input.is-na {
    background-color: #f9f9f9;
    color: #6c757d;
    font-style: italic;
}

select.is-na {
    background-color: #f9f9f9;
    color: #6c757d;
    font-style: italic;
}



/* diseño para el logo y el texto dentro de:inf genera, actividadProfesional, ...etc */
.gi-label{margin-bottom:.25rem;font-weight:500;color:#121926;font-size: 16px; display: inline-flex; gap: 6px;align-items: center;}
.gi-value{margin:0;color:#667085}

.gi-help{width: 16px;height: 16px;color: #94a3b8;display: inline-flex;align-items: center;justify-content: center; }
.gi-help:hover{color:#64748b}

.rl-item-name{margin:0;font-weight:700;color:#121926;font-size: 20px;}

/* =============================================================================
   estilos para los modales de versiones de documentos
   ============================================================================= */

.version-actual {
    background-color: #e8f5e8;
    border-left: 4px solid #28a745;
}

.version-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.btn-download-version {
    color: #0d6efd;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-download-version:hover {
    color: #0a58ca;
    text-decoration: underline;
}


/* =============================================================================
   bordes cajetas sociedades personas index
   ============================================================================= */

.row-figma{
  background: #FCFCFD;            /* Fondo */
  border: 1px solid #F2F4F7;       /* Borde 1px */
  border-radius: 12px;             /* Radio 12px */
  padding: 12px 16px;              /* Arriba/abajo 12px, Izq/Der 16px */
  box-shadow: none !important;     /* Sin sombra */
}



/* =============================================================================
   SIDEBAR - Utilizado en layouts/sidebar.blade.php
   ============================================================================= */

/* Fondo exacto del sidebar y divisoria suave */
.sidebar {
    font-family: var(--font-family-primary);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    background: #F9FAFB !important;
    color: var(--gris-suave) !important;
    border-right: 1px solid #F2F4F7;
    z-index: 1000;
}

.sidebar.collapsed {
    width: 80px;
}

/* Header del sidebar */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 24px 8px;
    border-bottom: 0;
}

.sidebar-header h3 {
    font-family: var(--font-family-primary);
    margin: 0;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -1px;
    color: #1e40af !important;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 16px 8px 8px !important;
}

/* Logo */
.sidebar-logo {
    width: 139px;
    height: 55px;
    background-image: url('/images/logo-reggi.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    display: block;
    margin: 0;
}

.sidebar.collapsed .sidebar-logo {
    display: none !important;
}

/* Divisor */
.sidebar-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 24px;
    border-radius: 1px;
}

.sidebar.collapsed .sidebar-divider {
    display: none !important;
}

/* Sección label */
.sidebar-section-label {
    font-family: var(--font-family-primary);
    margin: 12px 14px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #9aa3af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Menú */
.sidebar-menu {
    padding: 20px 0;
}

.sidebar.collapsed .sidebar-menu {
    padding-top: 80px;
}

.sidebar-menu .menu-item {
    font-family: var(--font-family-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--gris-suave) !important;
    text-decoration: none;
    border-radius: 14px;
    margin: 6px 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-menu .menu-item.is-active {
    background: var(--azul-intenso) !important;
    color: #0f172a !important;
}

.sidebar-menu .menu-item:hover {
    background: rgba(0, 208, 255, 0.14);
    color: #0f172a !important;
}

.sidebar-menu .menu-item .menu-icon.lucide,
.sidebar-menu .menu-item .menu-icon {
    width: 20px;
    height: 20px;
    stroke: var(--gris-suave);
    color: var(--gris-suave);
}

.sidebar-menu .menu-item.is-active .menu-icon {
    stroke: #0f172a;
    color: #0f172a;
}

.sidebar-menu .menu-item:hover .menu-icon {
    stroke: #0f172a;
    color: #0f172a;
}

.sidebar-menu .menu-badge {
    font-family: var(--font-family-primary);
    float: right;
    background: #00D0FF !important;
    color: white !important;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.sidebar.collapsed .menu-item {
    justify-content: center !important;
    padding: 12px 8px !important;
    margin: 6px 8px !important;
}

.sidebar.collapsed .menu-text,
.sidebar.collapsed .submenu,
.sidebar.collapsed .chevron {
    display: none !important;
}

/* Botón toggle */
.toggle-sidebar {
    position: absolute;
    top: 35px;
    right: 25px;
    background: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 1002;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-sidebar i {
    transition: transform 0.3s ease;
    font-size: 14px;
    color: #697586;
}

.toggle-sidebar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.sidebar.collapsed .toggle-sidebar i {
    transform: rotate(180deg);
}

/* User profile */
.user-profile {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.user-profile .profile-item {
    font-family: var(--font-family-primary);
    display: flex;
    align-items: center;
    padding: 10px;
    background: #dbeafe !important;
    border-radius: 8px;
    margin-bottom: 10px;
}

.user-profile .avatar {
    font-family: var(--font-family-primary);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #2563eb !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 10px;
}

.sidebar.collapsed .user-profile {
    display: none !important;
}

/* =============================================================================
   PREVENIR PARPADEO DEL SIDEBAR AL CARGAR
   ============================================================================= */

.sidebar-preload-collapsed .sidebar {
    width: 80px !important;
    transition: none !important;
}

.sidebar-preload-collapsed .main-content {
    margin-left: 80px !important;
    transition: none !important;
}

.sidebar-preload-collapsed .sidebar .menu-text,
.sidebar-preload-collapsed .sidebar .sidebar-logo,
.sidebar-preload-collapsed .sidebar .sidebar-divider,
.sidebar-preload-collapsed .sidebar .user-profile,
.sidebar-preload-collapsed .sidebar .submenu,
.sidebar-preload-collapsed .sidebar .chevron {
    display: none !important;
    opacity: 0 !important;
}

.sidebar-preload-collapsed .sidebar .menu-item {
    justify-content: center !important;
    padding: 12px 8px !important;
    margin: 6px 8px !important;
}

.sidebar-preload-collapsed .sidebar-menu {
    padding-top: 80px !important; /* ← Mismo valor que el collapsed normal */
}

.sidebar-preload-collapsed .toggle-sidebar i {
    transform: rotate(180deg) !important; /* ← Flecha rotada desde el inicio */
}

/* Restaurar transiciones después de quitar preload */
body:not(.sidebar-preload-collapsed) .sidebar {
    transition: width 0.3s ease !important;
}

body:not(.sidebar-preload-collapsed) .main-content {
    transition: margin-left 0.3s ease !important;
}

/* =============================================================================
   RESPONSIVE - Para dispositivos móviles
   ============================================================================= */

@media (max-width: 768px) {
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }
}

.gi-header{
    background:#03729B; /* cercano al mock; puedes usar #03729B si prefieres */
    color:#fff;padding:18px 18px;display:flex;align-items:center;justify-content:space-between
  }
.gi-title{margin:0;font-weight:400;letter-spacing:.2px;font-size:20px}

/* panel de refencias, quitar borde */
.ref-panel {
  border: 0 !important;      /* o border: none */
  box-shadow: none !important;
}


/* titulos de modal editar */

.title-edit {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}



/* ============================
   AUTH – Mock Reset Password
   ============================ */
.auth-left-light{
  background:#E6F1FB !important;
  color:#0F172A;
  position:relative;
  padding: 24px 18px;
}

.auth-illustration{
  display:block;
  width:85%;
  max-width:520px;
  margin: 32px auto 12px;
}

.auth-quote-card {
    margin-top: auto;
    margin-bottom: 2vh;
    padding: 20px 24px;
    background-color: rgba(255, 255, 255, 0.30);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.auth-quote-text {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 18px;
    color: #121212;
    font-weight: 500;
    text-align: left;
}

.auth-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-author-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    margin-bottom: 2px;
    text-align: left;
}

.auth-author-role {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.3;
}

.auth-author img{
  width:36px;
  height:36px;
  border-radius:50%;
}

.auth-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 1vh 0;
    flex-shrink: 0;
}

.auth-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: all 0.3s ease;
}

.auth-dots .dot.active {
    background-color: #3b82f6;
    width: 24px;
    border-radius: 4px;
}