@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

ul {
    padding:0;
    margin-left:-10px;
    margin:0;
}

li {
    margin-left:10px;
}

#seccionBarra {
float: none;
content: '';
position: relative;
}

#idelementmensaje {
z-index: 100;
}


.round{
	border-radius: 10px;
	border: 1px solid #0a4661;
	overflow: hidden;
	padding-bottom: 15px;
}
.round p{
	padding: 0 15px;
}


.contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}
 
.texto-encima{
    position: absolute;
    top: 10px;
    left: 10px;
     text-align: center;
}
.centrado{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.textright{
	text-align: right;
}
.textleft{
	text-align: left;
}
.textcenter{
	text-align: center;
}
.ajaxgif{
	position:absolute; bottom:12px; right:-20px;}
.hide{
	display:none;}
	
.ajaxgif{
	position:absolute; bottom:12px; right:-20px;}
.hides{
	display:none;}

/* ============================================================
   TEMA MODERNO - Citadino
   Capa de estilos que se monta encima de SB Admin 2 / Bootstrap 4.
   No cambia estructura HTML, solo colores, tipografia, sombras,
   bordes y espaciados para dar un look mas actual.
   ============================================================ */

:root{
  --color-primario:        #4F46E5;
  --color-primario-oscuro: #4338CA;
  --color-primario-claro:  #EEF2FF;
  --color-acento:          #14B8A6;
  --color-acento-claro:    #CCFBF1;
  --color-sidebar:         #1E1B4B;
  --color-sidebar-fin:     #312C7B;
  --color-fondo:           #F8FAFC;
  --color-texto:           #1E293B;
  --color-texto-suave:     #64748B;
  --color-borde:           #E2E8F0;
  --radio-base:            10px;
  --radio-grande:          14px;
  --sombra-suave:          0 1px 2px rgba(30, 27, 75, 0.06), 0 1px 3px rgba(30, 27, 75, 0.08);
  --sombra-media:          0 4px 6px rgba(30, 27, 75, 0.05), 0 10px 15px rgba(30, 27, 75, 0.08);
}

body{
  font-family: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Inter', 'Nunito', sans-serif;
  font-weight: 700;
  color: var(--color-texto);
}

a{
  color: var(--color-primario);
}
a:hover{
  color: var(--color-primario-oscuro);
}

::selection{
  background: var(--color-acento-claro);
  color: var(--color-texto);
}

/* Barra de scroll (navegadores basados en WebKit) */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  background: var(--color-fondo);
}
::-webkit-scrollbar-thumb{
  background: #CBD5E1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--color-texto-suave);
}

/* -------------------- Sidebar -------------------- */
.sidebar.bg-gradient-primary{
  background: linear-gradient(180deg, var(--color-sidebar) 0%, var(--color-sidebar-fin) 100%) !important;
}
.sidebar .sidebar-brand{
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.sidebar .sidebar-brand-icon i{
  color: var(--color-acento);
}
.sidebar hr.sidebar-divider{
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar .sidebar-heading{
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sidebar .nav-item .nav-link{
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 2px 10px;
  transition: background-color .15s ease, color .15s ease;
}
.sidebar .nav-item .nav-link i{
  color: rgba(255, 255, 255, 0.55);
}
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:focus{
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.sidebar .nav-item .nav-link:hover i{
  color: var(--color-acento);
}
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link[aria-expanded="true"]{
  background-color: rgba(20, 184, 166, 0.16);
  color: #fff;
}
.sidebar .nav-item .nav-link[aria-expanded="true"] i{
  color: var(--color-acento);
}
.sidebar .collapse-inner,
.sidebar .collapsing .collapse-inner{
  border-radius: var(--radio-base);
  box-shadow: var(--sombra-media);
}
.sidebar .collapse-item{
  border-radius: 6px;
  margin: 0 8px;
  width: auto;
  transition: background-color .15s ease;
}
.sidebar .collapse-item:hover,
.sidebar .collapse-item.active{
  background-color: var(--color-primario-claro);
  color: var(--color-primario);
}
#sidebarToggle{
  background-color: rgba(255, 255, 255, 0.1);
}
#sidebarToggle::after{
  color: #fff;
}

/* -------------------- Topbar -------------------- */
.topbar{
  background-color: #fff !important;
  border-bottom: 1px solid var(--color-borde);
  box-shadow: none !important;
}
.topbar .nav-link{
  color: var(--color-texto-suave);
}
.topbar .badge-counter{
  background-color: var(--color-acento);
}
.img-profile{
  border: 2px solid var(--color-primario-claro);
}

/* -------------------- Botones -------------------- */
.btn{
  border-radius: var(--radio-base);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
}
.btn-primary{
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--color-primario-oscuro);
  border-color: var(--color-primario-oscuro);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}
.btn-outline-primary{
  color: var(--color-primario);
  border-color: var(--color-primario);
}
.btn-outline-primary:hover{
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}
.btn-user{
  border-radius: 999px;
}

/* -------------------- Tarjetas -------------------- */
.card{
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
}
.card-header{
  background-color: #fff;
  border-bottom: 1px solid var(--color-borde);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0 !important;
  font-weight: 700;
}
.o-hidden{
  border-radius: var(--radio-grande);
}

/* Tarjetas de estadisticas (dashboard) */
.border-left-primary{ border-left: .25rem solid var(--color-primario) !important; }
.border-left-success{ border-left: .25rem solid var(--color-acento) !important; }

/* -------------------- Formularios -------------------- */
.form-control{
  border-radius: 8px;
  border-color: var(--color-borde);
}
.form-control:focus{
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.form-control-user{
  border-radius: 999px;
}
.custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}

/* -------------------- Tablas -------------------- */
.table thead th{
  background-color: #F1F5F9;
  color: var(--color-texto-suave);
  border-bottom: 1px solid var(--color-borde);
  font-size: 0.8rem;
  font-weight: 700;
}
.table-hover tbody tr:hover{
  background-color: var(--color-primario-claro);
}
.table td, .table th{
  border-color: var(--color-borde);
  vertical-align: middle;
}
div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input{
  border-radius: 8px;
  border: 1px solid var(--color-borde);
}
.dataTables_wrapper .pagination .page-item.active .page-link{
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}
.dataTables_wrapper .pagination .page-link{
  color: var(--color-primario);
  border-radius: 6px;
  margin: 0 2px;
}

/* -------------------- Badges y alertas -------------------- */
.badge{
  border-radius: 999px;
  font-weight: 600;
}
.badge-primary{
  background-color: var(--color-primario);
}
.alert{
  border-radius: var(--radio-base);
  border: none;
}

/* -------------------- Modales -------------------- */
.modal-content{
  border-radius: var(--radio-grande);
  border: none;
  box-shadow: var(--sombra-media);
}
.modal-header{
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}
/* .modal-detail se usa en las ventanas de "detalle de venta/compra" (caja, cotizacion,
   cuentas por cobrar/pagar, guia, solicitudes, registro de compras, venta.rest, ventas).
   Nunca tuvo un ancho propio: usaba el default de Bootstrap (500px), muy angosto para
   una tabla de detalle con varias columnas, por eso el contenido se salia del dialogo. */
.modal-detail{
  max-width: 90%;
  width: 800px;
}
@media (max-width: 850px){
  .modal-detail{
    width: 95%;
  }
}

/* -------------------- Pagina de login (identidad Citadino Cafe) -------------------- */
:root{
  --cafe-fondo-oscuro:  #1B120C;
  --cafe-fondo-medio:   #2E1D12;
  --cafe-dorado:        #C9A24B;
  --cafe-dorado-suave:  #E8D9B5;
  --cafe-crema:         #FAF6EF;
  --cafe-texto:         #2B2116;
}

body.bg-gradient-secondary{
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 162, 75, 0.18) 0%, rgba(201, 162, 75, 0) 55%),
    linear-gradient(160deg, var(--cafe-fondo-oscuro) 0%, var(--cafe-fondo-medio) 100%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

body.bg-gradient-secondary .card{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.25);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

/* Panel izquierdo: logo protagonista sobre fondo crema calido */
.bg-login-image{
  background-color: var(--cafe-crema);
  background-image:
    radial-gradient(circle at 50% 45%, rgba(201, 162, 75, 0.16) 0%, rgba(201, 162, 75, 0) 60%),
    url('../img/logo-citadino.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  /* La 1ra capa (degradado) cubre todo el panel; la 2da (el logo) se ajusta
     completa dentro del cuadro, sin recortarse, manteniendo su proporción. */
  background-size: cover, 70%;
  position: relative;
}
.bg-login-image::after{
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  pointer-events: none;
}

.login-heading{
  margin-bottom: 1.75rem;
}
.login-heading-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cafe-dorado) 0%, #A9793E 100%);
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 8px 18px rgba(201, 162, 75, 0.35);
}
.login-heading h1{
  font-family: 'Playfair Display', 'Inter', serif;
  font-weight: 700;
  color: var(--cafe-texto);
}
.login-subtitle{
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  margin-bottom: 0;
}

body.bg-gradient-secondary .form-control-user{
  background-color: #FBF9F5;
  border: 1px solid #E7DCC6;
}
body.bg-gradient-secondary .form-control-user:focus{
  border-color: var(--cafe-dorado);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.25);
}
body.bg-gradient-secondary .custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--cafe-dorado);
  border-color: var(--cafe-dorado);
}
body.bg-gradient-secondary .btn-primary{
  background: linear-gradient(135deg, var(--cafe-dorado) 0%, #A9793E 100%);
  border: none;
  letter-spacing: 0.03em;
}
body.bg-gradient-secondary .btn-primary:hover,
body.bg-gradient-secondary .btn-primary:focus{
  background: linear-gradient(135deg, #D8B562 0%, #A9793E 100%);
  box-shadow: 0 10px 20px rgba(169, 121, 62, 0.35);
}

@media (max-width: 991.98px){
  .bg-login-image{
    background-size: 55%, cover;
  }
}