.app-sidebar__user-avatar {
    width: 48px;
    background: gray;
    padding: 6px;
}
.app-sidebar__toggle{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15pt;
}
.app-sidebar__toggle::before{
	display: none;
}
.headerRegister, .header-primary{
	background: #009688;
	color: #FFF;
}
.headerUpdate{
	background: #007bff;
	color: #FFF;
}
.nombre_usuario{
	width: 175px;
	white-space: pre-line;
	font-size: 12px;
}
.textcenter{
	text-align: center;
}
.textright{
	text-align: right;
}
.textleft{
	text-align: left;
}
.bootstrap-select > .dropdown-toggle{
	border: 1px solid #CCC;
}
/*Estilos login*/

/* El fondo era rgb(249,249,249) opaco al 80% siempre, sin importar el tema
   -- en oscuro se veia como un velo blanco feo tapando lo que estuviera
   cargando ("opaca la pantalla en blanco"). En el login puntualmente esto
   se notaba mas: .login-box tiene backdrop-filter, que crea un containing
   block nuevo para sus descendientes position:fixed -- este .loader vive
   DENTRO de .login-box en el HTML, asi que en vez de cubrir toda la
   pantalla quedaba atrapado al tamano de la tarjeta, con ese velo blanco
   justo encima del formulario ("la parte del form se ofusca en blanco").
   No hace falta sacarlo de ahi (cubrir solo la tarjeta durante el submit
   del login es razonable) -- el problema real era el color fijo, no el
   alcance. Ahora es translucido y theme-aware, con blur real. */
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background: url('../images/loader2.gif') 50% 50% / 240px no-repeat;
  background-color: rgba(255, 255, 255, .75);
  display: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .loader {
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .loader { background-color: rgba(7, 11, 8, .75); }
}
:root[data-theme="dark"] .loader { background-color: rgba(7, 11, 8, .75); }
.required{
	color: red;
	font-size: 13pt;
	font-weight: bold;
}
/* style portada categoría */
.prevPhoto {
    display: flex;
    justify-content: space-between;
    width: 150px;
    height: 200px;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;
    background: url(../images/photo.png);
    background-repeat: no-repeat;
    
    background-position: center center;
    margin: auto;
}
.prevPhoto label{
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.prevPhoto img{
	width: 100%;
	height: 100%;
}
.prevPhotoF {
    display: flex;
    justify-content: space-between;
    width: 150px;
    height: 200px;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;

    background-repeat: no-repeat;
    
    background-position: center center;
    margin: auto;
}
.prevPhotoF label{
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.prevPhotoF img{
	width: 100%;
	height: 100%;
}

.upimg, .notblock{
	display: none !important;
}
.notBlock{
	display: none !important;
}
.errorArchivo{
	font-size: 16px;
	font-family: arial;
	color: #cc0000;
	text-align: center;
	font-weight: bold; 
	margin-top: 10px;
}
.delPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 10;
}
.delPhotoP{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 10;
}
#tbl_list_productos img{
	width: 50px;
}
.imgProductoDelete{
	width: 175px;
}

#imgCategoria{
	text-align: center;
}
#imgCategoria img{
	width: 200px;
	margin: auto;
}

/* Upload fotos*/
#containerImages{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
#containerImages > div{
	margin-right: 10px;
	margin-bottom: 8px;
}
.prevImage{
	border: 1px solid #CCC;
	width: 120px;
	height: 148px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.prevImage img{
	width: 100%;
}
.inputUploadfile{
	display: none;
}
.btnUploadfile, .btnDeleteImage{
	border: 0;
	background-color: #009688;
	text-align: center;
	padding: 2px 3px;
	color: #FFF;
	font-size: 9pt;
	cursor: pointer;
	width: 100%;
}
.btnDeleteImage{
	background-color: #dc3545;
}
.prevImage .loading{
	width: 30px;
	height: 30px;
}
#celFotos img{
	width: 150px;
	margin: 10px;
}

/* TIENDA VIRTUAL */
.divmetodpago label, #divCondiciones{
	width: 100%;
	display: flex;
}
.divmetodpago label input, #divCondiciones input{
	margin-right: 15px;
}
#divCondiciones a{
	margin-left: 5px;
}
#divCondiciones  label{
	margin-bottom: 0;
}
.modal{
	z-index: 9999;
}
.linkw:hover{
	text-decoration: none;
}
.container-title{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.container-title input{
	border: 1px solid #CCC;
	padding: 4px;
	border-radius: 5px;
	margin-right: 5px;
}
.dflex{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.ui-datepicker-calendar {
    display: none;
}

.app-header__logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

.lgo_principal{
  display: block;
  height: 38px;
  width: auto;
  max-width: 160px;
  margin: 0 auto;
  padding: 0;
  object-fit: contain;
}



@media (max-device-width: 320px) {
  .titulo_subpantalla {
  	font-size: 3vw;
  }
  .bnt-nuevo {
  	size: 20em;
  }
    
 
}

@media (max-device-width: 480px) {
   .titulo_subpantalla {
  	font-size: 3vw;
  }
   
}

@media (max-device-width: 768px) {
 .titulo_subpantalla {
  	font-size: 4vw;
  }
}

@media (max-device-width: 1024px) {
  .titulo_subpantalla {
  	font-size: 2vw;
  }
}

@media (max-width: 767px) {
  .app-header__logo{
    width: auto !important;
    flex: 1 1 auto;
    padding: 0 8px;
  }

  .lgo_principal{
    height: 30px;
    max-width: 120px;
  }
}
@media (max-device-width: 1200px) {
  .titulo_subpantalla {
  	font-size: 2vw;
  }
   
  
}
@media (min-device-width: 1201px) {
  .titulo_subpantalla {
  	font-size: 1.5vw;
  }
   
}

.ficha {
 	width: 40%;
 	height: 7%;
 	font-size: 90%;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px;
	position: absolute;
  top: 0.25rem;
  right: 20%;
  padding: 0.75rem 1.25rem;
  color: inherit;

}
.boton-buscar{
	margin:0;
	padding: 0;

}
.label-boton{
	 display: inline-block !important;
}
.texto-ficha{
	width: 60%;
}

/* Ensure that the demo table scrolls */

    div.ColVis {
        float: left;
    }

video{
	width: 100% !important;
}



@media (max-device-width: 320px) {
    .logo_reg{
  	width: 15% ;
  }
 
}

@media (max-device-width: 480px) {

   .logo_reg{
  	width: 30% ;
  }
}

@media (max-device-width: 768px) {

  .logo_reg{
  	width: 30% ;
  }
  
  
}

@media (max-device-width: 1024px) {

  .logo_reg{
  	width: 32%;
  }
 
}
@media (max-device-width: 1200px) {

   .logo_reg{
  	width: 50% ;
  }
  
}
@media (min-device-width: 1201px) {

    .logo_reg{
  	width: 20% ;
  }
}

.opc_grey {
	border: 1px solid #a7a7a7;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	background-color: #e9ecef;
  }

  .autocompletar {
	position: relative;
	
  }

 .lista-autocompletar-items {
	color: #5c5b5b;
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom:  none;
	z-index: 99;

	top: 100%;
	width: 100%;
 }

 .lista-autocompletar-items div {
	padding: 10px;
	cursor:  pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
 }

 .lista-autocompletar-items div:hover{
	background-color: #d3cece;

 }

 .autocompletar-active{
	background-color: #d3cece !important;
	color: #263e5e;
 }

 
 .autocompletar-active strong{
	color: #fff;
 }

 strong{
	color: black;
 }

 /* Estilos para la cola de recogida en las salas */
.pickup-queue-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kid-card {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 1;
    transform: scale(1);
}

.kid-card.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.kid-card-photo {
    flex-shrink: 0;
    margin-right: 20px;
}

.kid-card-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.kid-card-info {
    flex-grow: 1;
}

.kid-card-info .kid-name {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

.kid-card-info .parent-name {
    font-size: 1.2rem;
    color: #6c757d;
    margin: 0;
}

.kid-card-actions .btn-recogido {
    padding: 10px 20px;
    font-size: 1rem;
}

#initial-message h3 {
    color: #aaa;
    padding: 50px 0;
}

/* Estilos para la pantalla de la sala */
.sala-header {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 20px;
}

.sala-logo {
    max-height: 80px;
    margin-bottom: 10px;
}
.sala-header h1 {
    font-size: 2.5rem;
    color: #343a40;
}


/* --- CSS Actualizado para Contadores Responsivos --- */

/* Contenedor principal de las tarjetas */
.stats-container {
  display: flex; /* Activa Flexbox */
  flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no caben */
  gap: 10px; /* Espacio entre las tarjetas */
  margin-bottom: 20px;
}

/* Estilo de cada tarjeta individual */
.stat-badge {
  display: flex;
  flex-grow: 1; /* ¡La clave! Hace que cada tarjeta crezca para ocupar el espacio disponible */
  
  border-radius: 5px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.stat-badge:hover {
    transform: translateY(-2px);
}

.badge-label, .badge-value {
  padding: 4px 10px;
  color: white;
  text-align: center;
}


.badge-label {
  background-color: grey;
  padding: 4px 10px;
  color: white;
  text-align: center; /* Centra el texto de la etiqueta */
  flex-grow: 1; /* ¡LA CLAVE! Hace que esta parte se estire para ocupar el espacio. */
}
.badge-value {
  /* Se elimina 'flex-grow: 1' de aquí */
  min-width: 40px; /* Aumentamos un poco el ancho mínimo para mejor estética */
  padding: 4px 10px;
  color: white;
  text-align: center; /* Centramos el número para que se vea mejor */
}

/* Paleta de colores (sin cambios) */
.bg-purple { background-color: #6f42c1; }
.bg-blue   { background-color: #007bff; }
.bg-green  { background-color: #28a745; }
.bg-orange { background-color: #fd7e14; }
.bg-red    { background-color: #fe5969; }
.bg-teal   { background-color: #20c997; }
.bg-cyan   { background-color: #17a2b8; }
.bg-yellow   { background-color: #ffc107; }



/* --- Media Query para Dispositivos Móviles --- */
/* Se aplica cuando el ancho de la pantalla es 768px o menos */
@media (max-width: 768px) {
  .stats-container {
    flex-direction: column; /* ¡La clave! Apila los elementos verticalmente */
  }

}

#wsStatus {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 0 15px;
}
#wsStatus.disconnected { 
    background: #ffcccc; 
    color: #990000; 
}
#wsStatus.connected { 
    background: #ccffcc; 
    color: #006600; 
}
#wsStatus.error { 
    background: #ffcc99; 
    color: #994400; 
}

.kid-card.new {
    animation: pulse 1.5s infinite;
    border: 2px solid #ff9800 !important;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

.phone-bubble-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
  min-height: 38px;
  width: 100%;
}

.phone-bubbles-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phone-bubble {
  display: flex;
  align-items: center;
  background-color: #e9ecef; /* Color más neutro que coincide con tu interfaz */
  border: 1px solid #ced4da;
  border-radius: 20px;
  padding: 3px 10px;
  margin: 2px;
  font-size: 14px;
}

.phone-bubble-remove {
  margin-left: 6px;
  cursor: pointer;
  color: #6c757d; /* Color más neutro */
  font-weight: normal;
}

.phone-bubble-remove:hover {
  color: #dc3545;
}

.phone-input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 5px;
  min-width: 100px;
  font-size: 14px;
  color: #495057; /* Coincide con el color de texto general */
}

.phone-input::placeholder {
  color: #adb5bd;
  font-style: italic;
}

/* Este estilo alinea el contenedor del teléfono con otros elementos de la tabla */
.form-row {
  display: flex;
  margin-bottom: 1rem;
}

.form-row label {
  font-weight: normal;
  padding-top: 8px;
}

#formularioIngreso .label-header {
  background-color: #6c757d;
}

/* Agregar a tu archivo CSS */
.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}

.table-sm td, .table-sm th {
  padding: 0.5rem;
  vertical-align: middle;
}

#telefonosContainer .badge {
  font-size: 85%;
}

#telefonosContainer .badge-primary {
  background-color: #007bff;
}

#telefonosContainer .badge-info {
  background-color: #17a2b8;
}

  .contactos-lista {
    max-height: 500px;
    overflow-y: auto;
  }
  
  .contacto-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .contacto-item:hover {
    background-color: #f8f9fa;
  }
  
  .contacto-item.active {
    background-color: #e9f5ff;
  }
  
  .contacto-avatar {
    font-size: 2.5rem;
    color: #aaa;
    margin-right: 15px;
  }
  
  .contacto-info {
    flex: 1;
  }
  
  .contacto-header {
    display: flex;
    justify-content: space-between;
  }
  
  .contacto-nombre {
    font-weight: bold;
  }
  
  .contacto-hora {
    font-size: 0.75rem;
    color: #888;
  }
  
  .contacto-vista-previa {
    color: #666;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .badge-mensajes {
    margin-left: 5px;
  }
  
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  
  .mensajes-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f5f5f5;
  }
  
  .mensaje {
    margin-bottom: 15px;
    max-width: 80%;
  }
  
  .mensaje-entrante {
    align-self: flex-start;
  }
  
  .mensaje-saliente {
    align-self: flex-end;
    margin-left: auto;
  }
  
  .mensaje-contenido {
    padding: 10px 15px;
    border-radius: 10px;
  }
  
  .mensaje-entrante .mensaje-contenido {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-top-left-radius: 0;
  }
  
  .mensaje-saliente .mensaje-contenido {
    background-color: #dcf8c6;
    border: 1px solid #c5e1a5;
    border-top-right-radius: 0;
  }
  
  .mensaje-servidor {
    font-size: 0.72rem;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 2px;
  }

  .mensaje-texto {
    word-break: break-word;
  }
  
  .mensaje-info {
    display: flex;
    justify-content: flex-end;
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
  }
  
  .mensaje-info i {
    margin-left: 5px;
  }
  
  #txtMensaje {
    resize: none;
    overflow-y: auto;
    height: 40px;
    max-height: 100px;
  }

  /* Añadir a tu archivo de estilos CSS */
.contacto-desconocido {
    border-left: 3px solid #ffc107;
}

.contacto-desconocido .contacto-nombre {
    font-style: italic;
}

.contacto-desconocido .contacto-avatar i {
    color: #ffc107;
}

/* Badge de notificaciones en el menú */
.badge-notif {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 10px;
    animation: pulse-badge 2s infinite;
}

/* Badge de notificaciones en el header */
.badge-notif-header {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 10px;
    animation: pulse-badge 2s infinite;
}

  /* Banner sutil de tienda (modulos moviles) */
  .store-top-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 10px;
    right: 10px;
    z-index: 1200;
    background: rgba(18, 136, 66, 0.92);
    color: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }

  .store-top-banner__text {
    font-size: 12px;
    line-height: 1.2;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .store-top-banner__btn {
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #0A692E;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    cursor: pointer;
  }

  .store-top-banner__close {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
  }

  @media (min-width: 768px) {
    .store-top-banner {
      display: none;
    }
  }

.app-nav__item {
    position: relative;
}

@keyframes pulse-badge {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.app-menu__item {
    position: relative;
}

/* Estilos para el dropdown de notificaciones */
.app-notification {
    min-width: 300px;
    max-width: 350px;
}

.app-notification__title {
    padding: 10px 15px;
    background: #f8f9fa;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    font-size: 13px;
}

.app-notification__content {
    max-height: 280px;
    overflow-y: auto;
}

.app-notification__item {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s;
}

.app-notification__item:hover {
    background: #f8f9fa;
    text-decoration: none;
}

.app-notification__icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 18px;
}

.app-notification__message {
    margin: 0;
    font-size: 13px;
    color: #333;
    line-height: 1.3;
}

.app-notification__meta {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #999;
}

.app-notification__footer {
    padding: 10px 15px;
    text-align: center;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}

.app-notification__footer a {
    color: #0A692E;
    font-weight: 500;
    font-size: 13px;
}

/* Cards de documentos (preview PDF) — modal de detalle de servidor */
.doc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    padding: 14px 4px;
}

.doc-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.doc-card:hover,
.doc-card:focus-visible {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.doc-card__thumb {
    position: relative;
    height: 150px;
    background: #f4f4f4;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-card__thumb canvas {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.doc-card__thumb::after {
    content: "\f00e"; /* fa-search-plus */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    opacity: 0;
    transition: opacity 150ms ease-out, background 150ms ease-out;
}

.doc-card:hover .doc-card__thumb::after {
    opacity: 1;
    background: rgba(0,0,0,0.35);
}

.doc-card__nombre {
    padding: 8px 10px;
    font-size: 12.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-card-empty {
    text-align: center;
    color: #999;
    padding: 30px 10px;
}

.doc-card-empty i {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
}

/* Preview de documento (modal grande) */
#previewDocumentoToolbar {
    flex: 0 0 40px;
    height: 40px;
    background: #3a3d40;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

#previewDocumentoToolbar button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 6px;
    width: 30px;
    height: 26px;
    cursor: pointer;
}

#previewDocumentoToolbar button:hover {
    background: rgba(255,255,255,0.15);
}

#previewDocumentoZoomLabel {
    font-size: 13px;
    min-width: 40px;
    text-align: center;
}

#previewDocumentoPaginas {
    flex: 1 1 auto;
    overflow: auto;
    background: #525659;
    text-align: center;
    padding: 16px 0;
}

.preview-doc-page {
    display: block;
    margin: 0 auto 16px auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}