/* here you can put your own css to customize and override the theme */
#bb_des{ width: 216px; float: right;}
#bb_des .bootstrap-select{ width: 55px; float: inline-start;}
.map_clientes{
    margin:0;
}
.map_clientes > i{
    font-size: 20px;
}
#header_data{
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #cccccc;
}

.archivos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    align-items: start;
}

.archivo-card {
    width: 100%;
    text-align: center;
}

.archivo-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archivo-thumb img,
.archivo-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Para iconos PDF, Word, Excel, etc. */
.archivo-thumb.archivo-icon img {
    width: 70%;
    height: auto;
    object-fit: contain;
}

/* Audio (nota de voz de WhatsApp, etc.): mantiene el mismo cuadrado 1/1 que las
   imagenes para que todas las tarjetas queden a la misma altura (simetria). El
   reproductor se acomoda dentro del cuadrado. */
.archivo-audio {
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #f4f4f4;
}
.archivo-audio > .fa {
    font-size: 26px;
    color: #666;
}
.archivo-audio audio {
    width: 100%;
}

/* Icono de archivos que no son imagen/audio/video (PDF, Word, STL...) */
.archivo-thumb.archivo-icon > .fa {
    font-size: 40px;
    color: #888;
}

/* Fecha, hora y estado en que se subio cada archivo adicional */
.archivo-meta {
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
}
.archivo-meta .archivo-fecha {
    font-size: 11px;
    color: #666;
}
.archivo-meta .archivo-estado {
    font-size: 11px;
    font-weight: 600;
    color: #337ab7;
}

.archivo-wrap {
    position: relative;
    display: block;
}

/* Encabezado de grupo por fecha en las fotos adicionales */
.archivos-grupo-fecha {
    font-weight: 600;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    margin: 14px 0 8px;
    padding-bottom: 4px;
}

/* Barra de acciones debajo de cada foto: editar imagen, editar nombre, eliminar.
   Iconos alineados en fila bajo la miniatura (no flotan sobre la imagen). */
.archivo-acciones {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 3px 0;
}
.archivo-btn {
    width: 26px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #555;
    background: #f0f0f0;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.archivo-btn:hover {
    background: #337ab7;
    color: #fff;
    text-decoration: none;
    border-color: #2e6da4;
}
.archivo-btn.archivo-btn-danger:hover {
    background: #d9534f;
    border-color: #d43f3a;
}

/* Campos editables de Gestion de Procesos: minutos, unidad y banderas. */
.proceso-editable, .proceso-unidad { cursor: pointer; border-bottom: 1px dashed #bbb; padding: 0 2px; }
.proceso-editable:hover, .proceso-unidad:hover { background: #fff8e1; border-bottom-color: #e0a800; }
.proceso-bandera {
    cursor: pointer; display: inline-block; min-width: 34px; padding: 1px 8px;
    border-radius: 999px; font-size: 0.78em; font-weight: 700;
}
.proceso-bandera.bandera-si { background: #e4ede6; color: #2f6b41; }
.proceso-bandera.bandera-no { background: #f0f0f0; color: #888; }
.proceso-bandera:hover { outline: 1px solid #e0a800; }

/* Precio editable en Gestion de Productos: se marca como pulsable para que
   se note que la celda se puede cambiar sin abrir el producto. */
.precio-editable { cursor: pointer; border-bottom: 1px dashed #bbb; padding: 0 2px; }
.precio-editable:hover { background: #fff8e1; border-bottom-color: #e0a800; }

/* Boton de "Diseño de sonrisa (IA)" de cada foto. Va en su propia fila,
   encima de la barra de editar/renombrar/eliminar, y en naranja para que se
   asocie con el boton grande de la cabecera y no se confunda con las
   acciones de mantenimiento del archivo. */
.archivo-acciones-ia {
    margin-bottom: 0;
}
.archivo-btn-ia {
    width: auto;
    padding: 0 10px;
    color: #fff;
    background: #E87E04;
    border-color: #d97403;
}
.archivo-btn-ia:hover {
    background: #cf7003;
    border-color: #b86203;
    color: #fff;
}

/* Nombre del archivo (editable con el lapiz) */
.archivo-nombre {
    font-size: 10px;
    color: #888;
    word-break: break-all;
    max-width: 160px;
    margin: 0 auto;
}
/***
Rounded Portlets
***/
#checkbox-list li{ list-style: none; }
#load_inventario li{ list-style: none; }
#listado_procesos_tracking li .menu_tracking li{ padding: 0px; margin-bottom: 0px;}
.btn_liquidacion{ margin-top: 11px;}
.caption{ color: #ffffff; }
.inicio .btn_tracking{ margin-left: auto; margin-right:auto; }
#listado_procesos_tracking li{ display: inline-grid; }
.disabled button{ background: #eeeeee}
.select-items{ width: 100%}
.nopadding{ padding: 0px;}
/* Chat interno (VoceChat), burbuja flotante propia -ver base.html y
   badent.js. Reemplaza a #cometchat__widget (CometChat, retirado el
   2026-08-24, ver CLAUDE.md). */
#chat-interno-bubble {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    font-family: inherit;
}
#chat-interno-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #e0a800;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    cursor: pointer;
}
#chat-interno-toggle:hover { background: #c99700; }
#chat-interno-panel {
    display: none;
    position: absolute;
    right: 0;
    bottom: 72px;
    width: 520px;
    height: 760px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 110px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
    overflow: hidden;
    flex-direction: column;
}
#chat-interno-bubble.abierto #chat-interno-panel { display: flex; }
#chat-interno-panel-header {
    flex: none;
    height: 40px;
    background: #e0a800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 13px;
}
#chat-interno-panel-header a { color: #fff; }
#chat-interno-iframe {
    flex: 1;
    width: 100%;
    border: none;
}
.list_group{
    list-style: none;
    margin: 0;
    padding: 0;
}
#id_old_password, #id_new_password1, #id_new_password2{
    font-size: 14px;
    font-weight: normal;
    color: #333;
    background-color: #fff;
    border: 1px solid #e5e5e5;

    display: block;
    width: 40%;
    height: 34px;
    padding: 6px 12px;
    line-height: 1.42857143;
    background-image: none;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.errorlist{
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
    border-width: 1px;

    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
ul.errorlist{ list-style: none;}
.tools a{
    float:left;
    margin:8px;
    text-decoration: none;
}
.tools a i{color:#ffffff;}
.tools a:hover i{ color:#cccccc;}
.tools a i{ display:inline; }
.list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.toolbar{
    text-align: end;
    padding:10px;
    display:block;
    margin-top: 9px;
    font-size:12px;
}
.vdientes{
    word-break: break-word;
}
.view_marca{ display: block; }
.lbl-barra{ display: block; color: #dca526; text-align: center; }
#totales_table{ margin-top: 20px;}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}
.formRow {
    /*position: relative;
    width: 100%;*/
}

.formRow--item {
    /*display: block;
    width: 100%;*/
}

.formRow--input {
    position: relative;
    padding: 15px 20px 11px;
    width: 100%;
    outline: none;
    border: solid 1px #95989a;
    border-radius: 4px;
    color: #2c3235;
    letter-spacing: .2px;
    font-weight: 400;
    font-size: 16px;
    resize: none;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.formRow--input-wrapper {
    position: relative;
    display: block;
    /*width: 100%;*/
}

.formRow--input-wrapper.active .placeholder {
    top: -5px;
    background-color: #ffffff;
    color: #dca526;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 11px;
    line-height: 14px;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.formRow--input-wrapper.active .formRow--input:not(:focus):not(:hover) ~ .placeholder { color: #f7d68b; }

.formRow--input-wrapper .formRow--input:focus, .formRow--input-wrapper .formRow--input:hover { border-color: #dca526; }

.formRow .placeholder {
    position: absolute;
    top: 50%;
    left: 33px;
    display: block;
    padding: 0 10px;
    color: #95989a;
    white-space: nowrap;
    letter-spacing: .2px;
    font-weight: normal;
    font-size: 13px;
    -webkit-transition: all, .2s;
    transition: all, .2s;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul.visto {
    border: solid 2px #6d6d6c;
    border-radius: 5px;
    padding: 0.5em 1em 0.5em 2.3em;
    position: relative;
}

ul.visto li {
    line-height: 1.5;
    padding: 0.5em 0;
    list-style-type: none!important;
}

ul.visto li:before {
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    left : 1em;
    color: #6d6d6c;
}
.iconFontSize{ font-size: 20px;}

.fa-whatsapp:before {
    content: "\f232";
}
.field_proceso{ margin-top:5px; margin-bottom: 5px;}
#listado_pedidos li{ border-bottom: 1px solid #ccc; padding-bottom: 10px; padding-top: 10px; }
.btn_flip{ position: absolute; right: -12px; top: 13px; width: 26px;height: 26px; padding: 5px; background: #6d6d6c; border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
    border: 0px solid #6d6d6c; color: #ffffff;z-index:200;}
.flip .back {
    background: #2184cd;
    color: #fff;
    text-align: center;
}
.front img { border:6px solid #6d6d6c;}
.numInv{ width: 29%;}
.textInv{ width: 62%;}
.opInv{ width: 16px;}
.checkInv opInv{ color:#c56b03; }
#result #foto_2{ display: block; margin-left: auto;margin-right:auto;}
.ListInv{float:left;}
.list-title{ margin-top: 45px; text-align: center; }
.circleTracking label{ display: block; text-align: center; color: #ffffff;}

.info_track{ display: block; text-align: center; font-size: 12px;}
#pago,#sucursales{ list-style: none;}
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
.hide-header{ display:none;}
}

.num_pedido_search{ font-size: 21px;}
.side-navi-data #content{ margin-left: 25px; margin-right: 25px;}
.side-navi-data #title_proceso{ margin:10px; }
#registro ul{ list-style: none; padding: 0; margin:0;}
#registro ul li ul{ padding-left: 10px; margin:5px;}
#listado_procesos_tracking,
#listado_procesos,#listado_pruebas,#listado_tecnicos{ list-style: none; padding: 0; margin: 0; }
#listado_procesos li,#listado_tecnicos li{ width: 100%; }
#listado_pruebas li{ width:100%; }
#listado_procesos_tracking li,
#listado_procesos li,
#listado_tecnicos li,
#listado_pruebas li{
padding: 5px;
margin-bottom: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;}

.number_t a { font-size: 30px; color: #dca526; }
#procesos_total{ cursor: pointer;}
#listado_procesos_tracking li a{color:#ffffff;}
.timeline {
 margin:0 0 30px;
 padding:0;
 position:relative
}
.timeline:before {
 content:'';
 position:absolute;
 display:block;
 width:4px;
 background:#f5f6fa;
 top:0;
 bottom:0;
 margin-left:38px
}
.timeline .timeline-item {
 margin:0;
 padding:0
}
.timeline .timeline-badge {
 float:left;
 position:relative;
 padding-right:30px;
 height:80px;
 /*! width:80px */
}
.timeline .timeline-badge-userpic {
 width:80px;
 height:80px;
 border:4px solid #f5f6fa;
 -webkit-border-radius:50%!important;
 -moz-border-radius:50%!important;
 border-radius:50%!important
}
.timeline .timeline-badge-userpic img {
 border-radius:50%!important;
 vertical-align:middle!important
}
.timeline .timeline-icon {
 width:80px;
 height:80px;
 background-color:#f5f6fa;
 -webkit-border-radius:50%!important;
 -moz-border-radius:50%!important;
 border-radius:50%!important;
 padding-top:30px;
 padding-left:22px
}
.timeline .timeline-icon i {
 font-size:34px
}
.timeline .timeline-body {
 position:relative;
 padding:7px;
 margin-top:10px;
 margin-left:110px;
 background-color:#f5f6fa;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 -ms-border-radius:4px;
 -o-border-radius:4px;
 border-radius:4px
}
.timeline .timeline-body:after,
.timeline .timeline-body:before {
 content:" ";
 display:table
}
.timeline .timeline-body:after {
 clear:both
}
.timeline .timeline-body-arrow {
 position:absolute;
 top:30px;
 left:-14px;
 width:0;
 height:0;
 border-style:solid;
 border-width:14px 14px 14px 0;
 border-color:transparent #f5f6fa transparent transparent
}
.timeline .timeline-body-head {
 margin-bottom:10px
}
.timeline .timeline-body-head-caption {
 /*float:left*/
}
.timeline .timeline-body-alerttitle,
.timeline .timeline-body-title {
 font-size:16px;
 font-weight:600
}
.timeline .timeline-body-time {
 font-size:14px;
 margin-left:10px
}
.timeline .timeline-body-head-actions {
 float:right
}
.timeline .timeline-body-head-actions .btn-group {
 margin-top:-2px
}
.timeline .timeline-body-content {
 font-size:14px;
}
.timeline .timeline-body-img {
 width:100px;
 height:100px;
 margin:5px 20px 0 0
}
.timeline.white-bg:before {
 background:#fff
}
.timeline.white-bg .timeline-badge-userpic {
 border-color:#fff
}
.timeline.white-bg .timeline-body,
.timeline.white-bg .timeline-icon {
 background-color:#fff
}
.timeline.white-bg .timeline-body-arrow {
 border-color:transparent #fff transparent transparent
}
@media (max-width:768px) {
 .timeline .timeline-body-head-caption {
  width:100%
 }
 .timeline .timeline-body-head-actions {
  float:left;
  width:100%;
  margin-top:20px;
  margin-bottom:20px
 }
 .table-responsive{min-height:.01%;overflow-x:auto; }
}
@media (max-width:480px) {
 .timeline:before {
  margin-left:28px
 }
 .timeline .timeline-badge {
  padding-right:40px;
  width:60px;
  height:60px
 }
 .timeline .timeline-badge-userpic {
  width:60px
 }
 .timeline .timeline-icon {
  width:60px;
  height:60px;
  padding-top:23px;
  padding-left:18px
 }
 .timeline .timeline-icon i {
  font-size:25px
 }
 .timeline .timeline-body {
  margin-left:80px
 }
 .timeline .timeline-body-arrow {
  top:17px
 }
 .table-responsive{min-height:.01%;overflow-x:auto; }
}
#sideNavi {
  position: fixed;
  right: 50px;
  top: 25%;
}

.side-navi-item {
  position: absolute;
  display: inline-block;
  width: 150px;
  height: 50px;
  transform: rotate(-90deg);
  transform-origin: left top 0;
  color: #fff;
  background-color: #384047;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
}

.side-navi-item.item1 {
  top: 180px;
  left: 0;
}

.side-navi-item.item2 {
  top: 355px;
  left: 0;
}

.side-navi-item.active {
  background-color: #e5e5e5;
  color: #000;
}

.side-navi-item > div {
  padding-top: 15px;
  text-align: center;
}

.side-navi-data {
  position: absolute;
  top: 0;
  left: 50px;
  width: 650px;
  height: 450px;
  background-color: #e5e5e5;
}

.side-navi-tab { display: none; }

.side-navi-tab.active {
  display: inline-block;
  color: #000;
}

.side-navi-tab > div { padding: 30px; }
.garantia td{ background: #6d6d6c; color:#ffffff;}
.garantia td a{ color:#ffffff;}
.garantia td a:hover{ color:#dca526;}
.garantia .dropdown-menu a{ color:#555;}
.garantia .dropdown-menu a:hover{ color:#555;}
.parameter-title{ text-align: center;margin: 0; padding: 0;}
.foto_parameter{ width: 150px; height: 113px; display: block; margin-right: auto; margin-left: auto;}
.foto_parameter_cc{ width: 150px; height: 113px; display: block; margin-right: auto; margin-left: auto;}

#parametros{ margin: 0; padding: 0;}
#parametros li{ width: 250px; float: left; list-style: none;}
#list_procesos_adicional li{ list-style: none; }
#list_procesos_adicional{ padding: 0; margin: 0;}
.annotated-list .search {
    border-radius: 25px;
    padding: 7px 14px;
    background-color: #ffffff;
    border: solid 1px rgba(0,0,0,0.2);
    width: 200px;
    box-sizing: border-box;
    color: #2e2e2e;
    margin-bottom: 5px;
}
.annotated-list .sort {
    font-size: 12px;
    font-size: 1.2rem;
    padding: 5px 15px;
    border-radius: 25px;
    border: none;
    display: inline-block;
    color: #2e2e2e;
    text-decoration: none;
    margin: 2px 0;
}
.annotated-list .sort.asc::after {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #2e2e2e;
    content: "";
    position: relative;
    top: 11px;
    right: -4px;
}
.annotated-list .sort.desc::after {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #2e2e2e;
    content: "";
    position: relative;
    top: -9px;
    right: -4px;
}
.intl-tel-input{ width: 100%; }
.mt-list-item{ cursor:grab;}
.toggle-password{ cursor:pointer;}
.map_canvas { width: 100%;height: 450px;margin: 10px 20px 10px 0; }
.fila_direccion,.fila_contacto{ cursor: pointer;}
.form-control2{ display: block;
width: 100%;
height: 34px;
padding: 6px 3px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.btn_edad {
    border-width: 0;
    padding: 7px 7px;
    font-size: 14px;
    outline: none !important;
    background-image: none !important;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}
#txt_edad{ text-align: center; }
.diente{ cursor: pointer;}
.inicio,.fin{ margin-bottom: 10px;}
.text_time{ width: 130px; float: left; border-radius: 3px;}
.time_txt { padding-left: 10px; padding-right:10px;}
.btnLibre{ width: 100%; }
.btnAction{ width: 100%;}
.tiempo{ font-size:26px; }
.number_stopwatch{ font-size:33px; }
.num_pedido{ font-size:20px;}
.filas_pedido_despacho { cursor: move; }
.box_tracking{ -webkit-box-shadow: 1px 1px 9px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 1px 1px 9px 0px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 9px 0px rgba(50, 50, 50, 0.75); padding:10px; height: 150px; margin-bottom:10px; }
.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
  border-top: 20px solid #cccccc;
  position: relative;
  bottom: 10px;
  left: 39%;
}
#laboratorio{ list-style:none; margin:0; padding:0;}
.lab_online .lab{ float:left; }
.lab_online #laboratorio{ display:flex; justify-content:center; align-items:center; margin-left:auto; margin-right:auto; }
.activeInv{ margin-right:10px; }
.btn_1{ width: 33px;display: block; float: left; }
.table_coordinar{ margin-top: 15px; }
#field_pedido{ margin-left:14px; padding: 0; list-style: number; }
#field_pedido li{ padding:5px; }
#input-txt{ float:left; width: 90%; }
#map_d{ float: left; margin-right: 5px; }
.name_collapsed{ cursor: pointer;}
#list_procesos_adicional_fin{ list-style: none; padding: 0; margin: 0;}
.btn_d{
	/*width: 30px;*/
	margin: 0;
	padding: 5px;
}
.gallery_historial{
	margin: 5px;
	list-style: none;
	padding: 0;
}
.gallery_historial li{
	margin: 5px;
	float: left;
	position:relative;
}
.gallery_historial li a{ display:block; }
.gallery_historial li img{ width:100px; }
#back_list{
	background: #dca526;
	color:#ffffff;
	border-style: outset;
	border-color: #dca500;
	height: 40px;
	width: 125px;
	text-shadow: none;
	border:0;
	margin-bottom: 5px;
}
#btn_top, #btn_bottom,#btn_diagonal,#btn_side,#btn_zoom_in,#btn_zoom_out{
	border: 1px double #dca526;
	border-radius: 5px;
	width: 61px;
	height: 61px;
	margin:5px;
}
#btn_top{
	background: url("../../global/img/ic_top.1e5cfb1b6f4d.png");
}
#btn_bottom{
	background: url("../../global/img/ic_bottom.f8e4d7936097.png");
}
#btn_diagonal{
	background: url("../../global/img/ic_diagonal.17c522b75431.png");
}
#btn_side{
	background: url("../../global/img/ic_side.6730fdaaec0c.png");
}
#btn_zoom_in{
	background: url("../../global/img/ic_zoom_in.98a043ac271c.png");
}
#btn_zoom_out{
	background: url("../../global/img/ic_zoom_out.6216fdaf4532.png");
}

body #cometchat {
	position: absolute;
  z-index:100;
}
.modal-header .close{
	position:absolute;
	right:6px;
	top:5px;
	z-index: 100;
}
.modal-number{
	text-align:right;
	display: block;
	margin: 0;
}
.number a{ font-size:30px; color:#dca526;}
.number2 a{ font-size:30px; color:#6d6d6c;}
.list-group-item{ margin:5px; float:left; width:20%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.btn_photo_delete{ margin-top: 5px;}
#load_photos{ margin:0; padding: 0;}
#dropzone{ background-image: url("../../img/dropfile.dc1196ffa7cc.png"); background-repeat: no-repeat; background-position: center; }
.tools{ margin-top: 11px;}
.flag-text{float: left;}
.btn_badge{position: relative;}
.bd_up{ position: absolute; top: -9px; left: 19px; font-size: 15px;}
.badge2 {
    font-weight: 300;
    text-align: center;
    height: 21px;
    padding: 3px 6px 3px 6px;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    text-align: center;
    vertical-align: middle;

    display: inline-block;
    min-width: 10px;
    line-height: 1;
    white-space: nowrap;
}
.hider-page {
    background: #ffffff url("../img/loading.c7136d0803ce.gif") 50% 50% no-repeat;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.fila_asignacion{ background: #f5d58d; }

.ajax-file-upload-statusbar{
    float: left;
}
.fc-view-container{ margin-top:10px; }
#suggesstion-box{
    position: absolute;
    z-index: 11;
    background: white;
    top: 33px;
    border: 1px solid gray;
    width: 90%;
}
#pedido-box{
    position: absolute;
    z-index: 11;
    background: white;
    top: 33px;
    /*border: 1px solid gray;*/
    width: 90%;
}
#top-menu-search{ float:right; }
#pedido_s{ background: #ffffff; height: 35px; width: 206px;}
#s2id_search_cliente{ width: 206px;}
#cliente_s .select2-container .select2-choice{ height: 35px; border-radius:0px;}
#cliente_s .select2-container .select2-choice > .select2-chosen{ margin-top: 5px;}
.search-form{ margin-right: 10px;}
.diseno_pop { padding: 0; margin:0; }
.diseno_pop .flag{ float:left; }
.diseno_tooltip{ margin-left: -36px; position: absolute; }
.comment_tooltip{ margin-left: -36px; position: absolute;  word-wrap: break-word;}
.marca_tooltip{ margin-left: -120px; position: absolute;  word-wrap: break-word; z-index:1;}
.munon_tooltip{ margin-left: -77px; }
.box_inv{text-align:center; width:30px; height:22px}
.minus{height: 22px; width:20px; border:none; cursor:pointer; text-align:center;}
.plus{ height: 22px; width:20px; border:none; cursor:pointer; text-align:center;}
.btn_diente_ad{ cursor: pointer; float:left; padding: 5px; margin:1px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border: 1px solid #000000; }
.select_adicional{ cursor: pointer; }
.unselect{ background: #ffffff; color: #000000; }
.select{ background: #000000; color:#ffffff; }

.tooltip.bottom .tooltip-arrow2 {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #a2a2a2;
}
.tooltip-arrow2 {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip-inner2 {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #a2a2a2;
    border-radius: 4px;
}

.dientes_tooltip.top {
    padding: 5px 0;
    margin-top: -61px;
}

.tooltip.top .tooltip-arrow3 {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}
.tooltip-arrow3 {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip-inner3 {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #a2a2a2;
    border-radius: 4px;
}

.view_adicional{ cursor: pointer; }
.adicional_tooltip{ margin-left: -80px; }
.pop_up_adicional_content{ margin: 0; padding: 0; list-style: none; }
.pop_up_adicional_content li{ padding: 3px; }

.tooltip.bottom .tooltip-arrow4 {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000;
}
.tooltip-arrow4 {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip-inner4 {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    border-radius: 4px;
}

.filtro1{ padding:15px; }

.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 320px;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
		-ms-transform: translate3d(0%, 0, 0);
			-o-transform: translate3d(0%, 0, 0);
		    	transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
	padding: 15px 15px 80px;
}

/*Right*/
.modal.right.fade .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
			-o-transition: opacity 0.3s linear, right 0.3s ease-out;
		    	transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
	right: 0;
}
.page-number{
    display: inline-block;
    float: right;
    padding: 5px 0;
}
.page-number h1{
    margin: 0;
    font-weight: 400;
    font-size: 22px;
    color: #f29222;
}
.page-number span{
    text-align: center;
    display: block;
    font-size: 20px;
}
#totales{ margin-top: 30px; }
#totales td{ padding:6px; }
.fecha_grande {
    font-family: 'Verdana,Arial,Helvetica,sans-serif';
    color: black;
    font-size: 15px;
    font-weight: bold;
}
.modal-stl {
    z-index: 999;
    outline: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1040;
    overflow: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal-stl .modal-dialog{ z-index: 10051;}
/* Large screens */
@media only screen and (min-width : 1824px) {
    #logo-2{ display:block; }
    #logo-2 img{ margin-left: 0px;}
    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 340px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 407px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip6 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 68px;
        cursor:pointer;
    }
    .iffyTip7 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 238px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
}

@media only screen and (min-width : 1700px) {
    #logo-2{ display:block; }
    .page-header-top{ display:none; }
    .page-header-menu .nav .dropdown-user a.dropdown-toggle{ color:#ffffff; }
    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 300px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 300px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 140px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 114px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 68px;
        cursor:pointer;
    }
    .iffyTip6 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 59px;
        cursor:pointer;
    }
    .iffyTip7 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 107px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
}

/* Desktops and laptops */
@media only screen and (max-width : 1400px) {
    #logo-2{ display:block; }
    .page-header-top{ display:none; }
    .page-header-menu .nav .dropdown-user a.dropdown-toggle{ color:#ffffff; }
    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 91px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 100px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 72px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 68px;
        cursor:pointer;
    }
    .iffyTip6 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 59px;
        cursor:pointer;
    }
    .iffyTip7 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 107px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
}

/* Desktops and laptops */
@media screen and (max-width: 1200px) {
    #logo-2{ display:block; }
    .page-header-top{ display:none; }
    .page-header-menu .nav .dropdown-user a.dropdown-toggle{ color:#ffffff; }
	.iffyTip {
    	overflow:hidden;
    	white-space:nowrap;
    	text-overflow:ellipsis;
    	width: 100px;
    	cursor:pointer;
	}
	.iffyTip2 {
    	overflow:hidden;
    	white-space:nowrap;
    	text-overflow:ellipsis;
    	width: 111px;
    	cursor:pointer;
	}
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 135px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 159px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 173px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
}

/* Tablets (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
   .page-header-top{ display:none; }

    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 100px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 200px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 250px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 300px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
    .table-responsive{min-height:.01%;overflow-x:auto; }
}

/* Tablets (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .page-header-top{ display:none; }
    #top-menu-search{ width: 739px; }
    #logo-2 img{ margin-left: 15px;}

    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 100px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 200px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 250px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 300px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
    .table-responsive{min-height:.01%;overflow-x:auto; }
}

/* Smartphones (landscape) */
@media only screen and (max-width : 321px) {

    .page-header-top{ display:none; }
    #s2id_search_cliente{ width: 100%; }

    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 100px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 200px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 250px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 300px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
}

/* Smartphones (portrait) */
@media only screen and (max-width : 400px) {
    #laboratorio li.lab{ width: 80px; float: left; }
    .item{ float:none; width: 100%; }
    .portlet.calendar .fc-button {
        color:#000000; top:0;
    }
    #calendar{ margin-top: 20px; }
    .page-h eader-top{ display: block; }
    #logo-2{ display:none; }
    .table-responsive{ display:block; }
    #top-menu-search{ width: 100%; }
    .top-menu{ float: none;}

    .iffyTip {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 100px;
        cursor:pointer;
    }
    .iffyTip2 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 150px;
        cursor:pointer;
    }
    .iffyTip3 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 200px;
        cursor:pointer;
    }
    .iffyTip4 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 250px;
        cursor:pointer;
    }
    .iffyTip5 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 300px;
        cursor:pointer;
    }
    .iffyTip8 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        width: 220px;
        cursor:pointer;
    }
    .table-responsive{min-height:.01%;overflow-x:auto; }
}
#producto_1 .item, #producto_2 .item {
    float: left;
    width: 298px;
}
#producto_3 .item{
    float: left; width: 300px; padding: 10px;
}
.page-header-top{ background: #6d6d6c; }
img.svg { fill: #b9c9d4; }
.svg path {
  fill: #ff0000;
}
.btn-is-disabled {
  pointer-events: none; /* Disables the button completely. Better than just cursor: default; */
  @include opacity(0.7);
}
#field_opcion5{ background: #cccccc; padding: 10px; }
#form_pedido_1.col-md-11{padding-right: 0; padding-left: 0;}
#priori.col-md-3{padding-right: 0; padding-left: 0;}
.title_opcion{     display: block;
    text-align: end;
    position: absolute;
    top: -9px;
    background: white;
    width: 85px;
    right: 30px;
    float: right; }
.opcion_6.box{
    border: 1px solid #cccccc;
    padding: 10px;
    position: relative;
}
.dataTables_filter{ height: 40px; }
#check_online{ float: right; }
#diseno{ left: 144px; }

/* Styles for verification */
#pswd_info ul{
    list-style:none;
    margin-left: 0px;
    padding-left: 0px;
}
#pswd_info {
    position:absolute;
    bottom:30px;
    /*bottom:-212px;*/
    /*right:55px;*/
    width:377px;
    padding:15px;
    background:#fefefe;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
    display:none;
    z-index:4;
}
#pswd_info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}
#pswd_info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
    font-size:14px;
  color: #000000;
}

.invalid {
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}
.valid_p {
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}
#msg {
    border-radius: 5px;
    display: block;
    font-size: 10px;
    text-align: center;
    position: absolute;
    background: #a94442;
    top: 68px;
    width: 160px;
    left:40%;
    padding: 7px 10px;
    color: #fff;
}
#msg:after {
    right: 50%;
    top: -8px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #a94442;
    border-width: 8px;
    margin-top: -8px;
}

.t1_tag{
    display: inline-block;
    padding: 10px;
    text-align: center;
    background: #969494;
    margin: 2px;
    border-radius: 3px;
    cursor: pointer;
    font-size:20px;
}

.t1_tag_selected{
    background: #E74C3C;
    color:#ffffff;
}

#tag_single_select{
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#month{ font-size: 40px; line-height: 30px; padding-top:70px; text-transform: uppercase;text-align: center; color:#ffffff;}
#dayOfWeek{ font-size: 27px; text-align: center;}
#day{ text-align: center; font-size: 62px; line-height: 31px; color: #787878;}
#year{ text-align: center; font-size: 19px;}
#date{
  background: url("../../img/calendar.f579de005aa4.png");
  width: 200px;
  height: 251px;
  margin-left: auto;
  margin-right: auto;
}
#clock{
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  margin-top:77px;
  margin-left: 32px;
}
#hours,#seconds{ background: url("../../img/box_hour.d92a3a6f6c22.png") no-repeat; }
#minutes,#ampm{ background: url("../../img/box_minute.03588c725e26.png") no-repeat; }
#cedula{ border:1px solid #5d5e5e;}
#field_contacto{ margin-top: 30px;}
.unit{
  color: #5d5e5e;
  font-family: "Open Sans", sans-serif;
  font-size: 4.2em;
  height: 120px;
  line-height: 130px;
  text-align: center;
  text-shadow: 0 2px 2px #666;
  width: 131px;
  float: left;
}
.button_clock{ border: 0; width: 120px; height: 120px; cursor: pointer;}
#btn_1{ background: url("../../img/btn_1.63751704496c.png") no-repeat; }
#btn_2{ background: url("../../img/btn_2.7533e248bfea.png") no-repeat; }
#btn_3{ background: url("../../img/btn_3.c191b9963e5c.png") no-repeat; }
#btn_4{ background: url("../../img/btn_4.0e8693f67606.png") no-repeat; }
.modal-xlg{
    width: 98%;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    .modal-xlg{
        width: 93%;
    }

    .circleTracking {
        border-radius: 50%;
        display: inline-block;
        margin-right: 0px;
        width: 32%;
        height: 80px;
    }
    .circleTracking label:first-child {
        font-size: 39px;
        height: 29px;
        margin-top: 15px;
    }
    .circleTracking label:last-child {
        font-weight: bold;
        padding-top: 0px;
        font-size: 12px;
    }
    .num_tracking{
        width: 100%;
    }
    #listado_procesos_tracking li {
        display: block;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    .modal-xlg{
        width: 98%;
    }

    .circleTracking {
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
        width: 150px;
        height: 150px;
    }
    .circleTracking label:first-child{ font-size: 60px; height: 33px; margin-top: 43px;}
    .circleTracking label:last-child{ font-weight: bold; padding-top: 10px; font-size: 20px; }
    .num_tracking{
        width: 50%;
    }
    #listado_procesos_tracking li {
        display: inline-grid;
    }
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    .modal-xlg{
        width: 98%;
    }

    .circleTracking {
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
        width: 150px;
        height: 150px;
    }
    .circleTracking label:first-child{ font-size: 60px; height: 33px; margin-top: 43px;}
    .circleTracking label:last-child{ font-weight: bold; padding-top: 10px; font-size: 20px; }
    .num_tracking{
        width: 50%;
    }
    #listado_procesos_tracking li {
        display: inline-grid;
    }
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* ===== Gestion de accesos rediseñada (2026-08) ===== */
.accesos-wrap { --oro:#e0a800; --borde:#e5e5e5; --gris:#777; --verde:#4a8b5c; --azul:#3d7ab5; }
.accesos-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.accesos-titulo { margin:0 0 3px; font-size:20px; }
.accesos-sub { margin:0; color:var(--gris); font-size:13px; }
.accesos-layout { display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
@media (max-width:820px){ .accesos-layout{ grid-template-columns:1fr; } }
.accesos-card { background:#fff; border:1px solid var(--borde); border-radius:8px; }
.accesos-card-cab { padding:12px 15px; border-bottom:1px solid var(--borde); display:flex; justify-content:space-between; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--gris); font-weight:700; }
.accesos-cuenta-total { color:#aaa; }
.accesos-buscar { position:relative; margin:11px 13px; }
.accesos-buscar .fa { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#bbb; font-size:13px; }
.accesos-buscar input { width:100%; padding:8px 10px 8px 32px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
.accesos-roles { list-style:none; margin:0; padding:5px; max-height:520px; overflow:auto; }
.accesos-roles li { padding:9px 11px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:9px; font-size:14px; }
.accesos-roles li:hover { background:#f7f6f3; }
.accesos-roles li.activo { background:#fbf3dd; font-weight:600; }
/* Roles editables (los que NO son del sistema) en negrita, para distinguir de
   un vistazo cuales se pueden renombrar o eliminar. Los del sistema quedan en
   gris: hay codigo que los busca por nombre, asi que no se tocan. */
.accesos-roles li.rol-editable { font-weight:700; }
.accesos-roles li:not(.rol-editable) { color:var(--gris); }
.accesos-roles li.accesos-cargando { color:#aaa; cursor:default; justify-content:center; }
.accesos-roles li.accesos-cargando:hover { background:none; }
.pt { width:8px; height:8px; border-radius:50%; flex:none; }
.pt.ext { background:var(--azul); } .pt.int { background:var(--verde); }
.accesos-roles .cuenta { margin-left:auto; font-size:12px; color:#aaa; }
.accesos-leyenda { padding:10px 14px; border-top:1px solid var(--borde); font-size:11px; color:var(--gris); display:flex; flex-direction:column; gap:4px; }
.accesos-leyenda .pt { display:inline-block; margin-right:5px; vertical-align:middle; }
.accesos-vacio { padding:60px 20px; text-align:center; color:#bbb; }
.accesos-vacio .fa { font-size:30px; margin-bottom:10px; }
.accesos-detalle-cab { padding:16px 18px; border-bottom:1px solid var(--borde); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.accesos-detalle-cab h3 { margin:0 0 5px; font-size:18px; }
.accesos-badge { font-size:12px; font-weight:600; padding:3px 9px; border-radius:100px; }
.accesos-badge.ext { background:#eaf1f8; color:var(--azul); }
.accesos-badge.int { background:#eaf3ec; color:var(--verde); }
.accesos-seccion { padding:16px 18px; border-bottom:1px solid var(--borde); }
.accesos-seccion:last-child { border-bottom:none; }
.accesos-seccion h4 { font-size:14px; margin:0 0 3px; }
.accesos-seccion-sub { color:var(--gris); font-size:13px; margin:0 0 12px; }
.accesos-tipo-box { display:flex; align-items:center; gap:12px; background:#f7f6f3; border:1px solid var(--borde); border-radius:7px; padding:12px 14px; }
.accesos-tipo-box .ico { width:32px; height:32px; border-radius:7px; display:grid; place-items:center; flex:none; font-size:15px; }
.accesos-tipo-box.ext .ico { background:#eaf1f8; color:var(--azul); }
.accesos-tipo-box.int .ico { background:#eaf3ec; color:var(--verde); }
.accesos-tipo-box strong { display:block; font-size:14px; }
.accesos-tipo-box span { color:var(--gris); font-size:12.5px; }
.accesos-tipo-box .candado { margin-left:auto; font-size:11px; color:#aaa; white-space:nowrap; }
.accesos-arbol { min-height:60px; }
.accesos-arbol .jstree-anchor { font-size:14px; }

/* Ajustes de integracion de la pantalla de accesos en el theme */
.accesos-wrap { padding:4px 2px; }
.accesos-wrap .btn.yellow-gold { background:#e0a800; border-color:#e0a800; color:#fff; }
.accesos-wrap .btn.yellow-gold:hover { background:#c99700; border-color:#c99700; }
.accesos-detalle-cab .btn-default[disabled] { opacity:.5; cursor:not-allowed; }
.accesos-arbol .jstree-default .jstree-clicked { background:#fbf3dd; box-shadow:none; border-radius:4px; }
.accesos-arbol .jstree-default .jstree-wholerow-clicked { background:#fbf3dd; }

/* Paginas como tarjetas con switch (reemplaza el arbol de carpetas) */
.accesos-paginas { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.pagina-card { border:1px solid #e5e5e5; border-radius:8px; background:#fff; }
.pagina-card.on { border-color:#e0a800; background:#fdf6e3; }
.pagina-fila { display:flex; align-items:center; gap:10px; padding:11px 13px; }
.pagina-txt { flex:1; min-width:0; }
.pagina-txt strong { display:block; font-size:13.5px; color:#333; }
.pagina-sub { font-size:11px; color:#999; }
.pagina-ver { font-size:12px; color:#3d7ab5; white-space:nowrap; text-decoration:none; }
.pagina-ver:hover { text-decoration:underline; }
.pagina-sw { width:38px; height:22px; border-radius:100px; background:#ccc; position:relative; flex:none; cursor:pointer; transition:background .15s; }
.pagina-sw::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.pagina-sw.on { background:#e0a800; } .pagina-sw.on::after { left:18px; }
.pagina-hijos { padding:0 13px 11px 26px; display:flex; flex-direction:column; gap:7px; }
.pagina-hijos .pagina-card { background:#faf9f6; }
.pagina-hijos .pagina-fila { padding:8px 11px; }
.accesos-cargando-tarjetas { color:#aaa; font-size:13px; padding:14px; }

/* Toggle de secciones colapsables (Acciones / Ventanas) y su tabla */
.accesos-toggle { color:#333; text-decoration:none; }
.accesos-toggle:hover { color:#e0a800; text-decoration:none; }
.accesos-toggle span { font-size:11px; color:#999; margin-left:4px; }
.accesos-tabla-html table { font-size:12.5px; }

/* Acordeon (Acciones / Ventanas): cabecera clicable evidente */
.accesos-acordeon { padding:0 !important; }
.acordeon-cab { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; transition:background .12s; }
.acordeon-cab:hover { background:#faf9f6; }
.acordeon-cab.abierto { background:#fdf6e3; border-bottom:1px solid #f0e4c0; }
.acordeon-txt { flex:1; min-width:0; }
.acordeon-txt strong { display:block; font-size:14px; color:#333; }
.acordeon-txt span { font-size:12.5px; color:#777; }
.acordeon-mas { width:26px; height:26px; border-radius:6px; border:1px solid #ddd; background:#fff; display:grid; place-items:center; color:#888; flex:none; }
.acordeon-cab:hover .acordeon-mas { border-color:#e0a800; color:#e0a800; }
.acordeon-cab.abierto .acordeon-mas { background:#e0a800; border-color:#e0a800; color:#fff; }
.accesos-acordeon .accesos-tabla-html { margin:14px 18px; }

/* Contadores "cuanto tiene marcado este rol" */
.cont-badge { display:inline-block; font-size:11px; font-weight:600; color:#e0a800; background:#fdf6e3; border:1px solid #f0e4c0; border-radius:100px; padding:1px 9px; margin-left:6px; vertical-align:middle; }
.cont-acordeon { font-size:12px; color:#e0a800; background:#fdf6e3; border-radius:100px; padding:2px 10px; white-space:nowrap; flex:none; }
.cont-acordeon.cont-cero { color:#aaa; background:#f2f2f2; }

/* Perfiles como chips de color en la tabla de usuarios */
.perfil-chip { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:100px; margin:1px 2px; white-space:nowrap; }
.perfil-chip.chip-int { background:#eaf3ec; color:#4a8b5c; }
.perfil-chip.chip-ext { background:#eaf1f8; color:#3d7ab5; }

/* Resumen de usuarios (cabecera de gestion-usuarios) */
.usuarios-resumen { display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.ur-card { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:12px 20px; min-width:120px; text-align:center; }
.ur-num { font-size:24px; font-weight:700; color:#333; line-height:1; }
.ur-lbl { font-size:12px; color:#888; margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.ur-activos .ur-num { color:#4a8b5c; }
.ur-inactivos .ur-num { color:#c0563f; }

/* Tabla de Acciones/Ventanas: encabezado y primera columna FIJOS al hacer scroll.
   Asi al desplazarse abajo/al lado siempre se ve que estado y que accion se marca. */
.accesos-tabla-html { max-height:60vh; overflow:auto; border:1px solid #e5e5e5; border-radius:6px; }
.accesos-tabla-html table.main-table,
.accesos-tabla-html table.main-table2 { margin:0; border-collapse:separate; border-spacing:0; }
/* encabezado fijo arriba */
.accesos-tabla-html table.main-table thead th,
.accesos-tabla-html table.main-table2 thead th {
    position:sticky; top:0; z-index:3;
    background:#f5f3ee; border-bottom:2px solid #ddd; font-size:11px; padding:8px 6px; text-align:center; vertical-align:bottom;
}
/* primera columna fija a la izquierda (nombres de acciones/campos) */
.accesos-tabla-html table.main-table .fixed-side,
.accesos-tabla-html table.main-table2 .fixed-side {
    position:sticky; left:0; z-index:2;
    background:#fff; border-right:2px solid #ddd; font-weight:600; font-size:12.5px; white-space:nowrap; padding:6px 12px; text-align:left;
}
/* la esquina (cruce encabezado + primera columna) por encima de todo */
.accesos-tabla-html table.main-table thead th.fixed-side,
.accesos-tabla-html table.main-table2 thead th.fixed-side { z-index:4; background:#f5f3ee; }
/* filas alternas y hover, respetando el fondo de la columna fija */
.accesos-tabla-html table.main-table tbody tr:nth-child(even) td,
.accesos-tabla-html table.main-table2 tbody tr:nth-child(even) td { background:#fafafa; }
.accesos-tabla-html table.main-table tbody tr:nth-child(even) .fixed-side,
.accesos-tabla-html table.main-table2 tbody tr:nth-child(even) .fixed-side { background:#fafafa; }
.accesos-tabla-html table.main-table tbody tr:hover td,
.accesos-tabla-html table.main-table2 tbody tr:hover td { background:#fdf6e3; }
.accesos-tabla-html table.main-table tbody tr:hover .fixed-side,
.accesos-tabla-html table.main-table2 tbody tr:hover .fixed-side { background:#fdf6e3; }
.accesos-tabla-html table.main-table td,
.accesos-tabla-html table.main-table2 td { padding:5px 6px; text-align:center; border-bottom:1px solid #f0f0f0; }
.accesos-tabla-html table.main-table input[type=checkbox],
.accesos-tabla-html table.main-table2 input[type=checkbox] { cursor:pointer; width:16px; height:16px; }

/* Estado de subpaginas en las tarjetas de "Paginas que puede abrir" */
.pagina-sub.sub-todas { color:#4a8b5c; font-weight:600; }
.pagina-sub.sub-algunas { color:#e0a800; font-weight:600; }
.pagina-ver { font-size:12px; color:#3d7ab5; white-space:nowrap; text-decoration:none; cursor:pointer; }
.pagina-ver:hover { text-decoration:underline; }

/* Descripcion de cada ventana en "Ventanas que ve" (a que pantalla corresponde) */
.ventana-desc { display:block; font-size:10.5px; color:#999; font-weight:400; margin-top:1px; white-space:normal; max-width:180px; }

/* Celda de campo sin efecto real en esa ventana (checkbox deshabilitado) */
.campo-sin-efecto { background:#f2f2f2; opacity:0.5; }
.campo-sin-efecto input[type="checkbox"] { cursor:not-allowed; }

/* Modal de vista previa de un perfil (resumen en texto) */
.vp-seccion { margin-bottom:14px; }
.vp-seccion:last-child { margin-bottom:0; }
.vp-seccion h5 { font-size:13px; font-weight:600; margin:0 0 6px; color:#555; }
.vp-lista { list-style:disc; margin:0; padding-left:20px; font-size:13px; color:var(--gris); }
.vp-lista li { margin-bottom:3px; }

/* Agrupacion por lenguaje de negocio dentro de Acciones/Ventanas */
.accesos-grupo-negocio { margin-bottom:18px; }
.accesos-grupo-negocio:last-child { margin-bottom:0; }
.accesos-grupo-cab { font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#8a7a4a; background:#fdf6e3; border-bottom:1px solid #f0e4c0; padding:8px 12px; }

/* Badges rojos en los botones del dashboard (Rutas coordinadas, Rutas en
   camino, Coordinacion...). Bootstrap 3 define `.btn .badge` -dos clases-,
   que por especificidad le gana a `.badge-danger` del tema y los dejaba
   grises. Se iguala la especificidad para que se vean rojos. */
.btn .badge.badge-danger,
.btn-home .badge.badge-danger { background-color:#F3565D; background-image:none; color:#fff; }

/* Logout: Django 5 exige POST en LogoutView, asi que el link se cambio
   por un form/button; se iguala al estilo de ".dropdown-menu li > a". */
.logout-form { margin:0; }
.logout-form button {
  padding:8px 14px; color:#555; text-decoration:none; display:block;
  clear:both; font-weight:300; line-height:18px; white-space:nowrap;
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
}
.logout-form button:hover {
  text-decoration:none; background-image:none; background-color:#f6f6f6; color:#555;
}
.logout-form button i.icon-logout { color:#666; }

/* Utilidades para retirar 'unsafe-inline' de style-src en la CSP (ver
   CLAUDE.md, pendiente "CSP: style-src sigue con unsafe-inline"). Cubren
   los patrones de `style="..."` mas repetidos en templates/ -no
   sustituyen bootstrap.min.css, que ya trae .hide/.text-center/
   .text-left/.text-right; estas son las que faltaban-. Migrar
   style="float:right;" -> class="u-float-right", etc.; combinar varias
   clases si el style= original tenia varias declaraciones. */
.u-float-right { float:right; }
.u-float-left { float:left; }
.u-display-block { display:block; }
.u-width-100 { width:100%; }

/* Segunda tanda (2026-08-21): los patrones de style= mas repetidos que
   quedaban -mismo criterio, valor exacto reusable, sin adivinar
   variantes que el propio proyecto no usa. */
.u-padding-10 { padding:10px; }
.u-padding-10-30 { padding:10px 30px; }
.u-padding-0 { padding:0; }
.u-width-70 { width:70px; }
.u-width-75 { width:75px; }
.u-width-50 { width:50px; }
.u-width-25 { width:25px; }
.u-width-40pc { width:40%; }
.u-width-80pc { width:80%; }
.u-width-90pc { width:90%; }
.u-width-94pc { width:94%; }
.u-margin-left-13 { margin-left:13px; }
.u-margin-left-10 { margin-left:10px; }
.u-margin-top-8 { margin-top:8px; }
.u-margin-top-neg7 { margin-top:-7px; }
.u-margin-bottom-10 { margin-bottom:10px; }
.u-margin-0 { margin:0; }
.u-opacity-2 { opacity:0.2; }
.u-font-10 { font-size:10px; }
.u-font-12 { font-size:12px; }
.u-font-13 { font-size:13px; }
.u-font-18 { font-size:18px; }
.u-font-bold-15 { font-weight:bold; font-size:15px; }
.u-inventario-box { text-align:center; width:30px; height:22px; }
.u-inventario-box-left { float:left; text-align:center; width:30px; height:22px; }
.u-header-flotante { float:right; margin-right:10px; font-size:22px; }
.u-boton-flotante { float:right; padding:8px; }
.u-field-error { border:1px solid red; background:#FFCECE; }
.u-p10-fs11 { padding:10px; font-size:11px; }
.u-shade-label { font-size:13pt; width:160px; font-weight:bold; }
.u-otro-label { font-size:12px; width:65%; }
.u-padding-right-0 { padding-right:0; }
.u-width-50pc-float-left { width:50%; float:left; }
.u-width-0pc { width:0%; }
.u-padding-5-h { padding:0px 5px 0px 5px; }
.u-fieldset-box { border:#999999 1px solid; padding:2px; text-align:center; }
.u-fieldset-box-95 { border:#999999 1px solid; padding:2px; text-align:center; width:95%; }
.u-padding-h-0 { padding-left:0px; padding-right:0px; }
.u-padding-0-margin-top-15 { padding:0; margin-top:15px; }
.u-padding-0-margin-left-neg15 { padding:0; margin-left:-15px; }
.u-clear-link { float:left; display:block; margin-left:5px; margin-top:10px; }
.u-dientes-span { display:block; width:140px; word-wrap:break-word; }

/* --- Fotos del paciente: mantener el tamano de la tarjeta -----------------
   El placeholder (la silueta/diagrama) deja la tarjeta en ~246px de alto,
   pero al subir una foto el plugin anade su propio marco con el nombre y el
   peso del archivo y la tarjeta crecia a ~317px: la foto se "salia del
   cuadro" y descuadraba la fila entera, porque las vecinas seguian a 246.

   La altura se fija en el CONTENEDOR de la vista previa (no en la imagen:
   dandole altura a la <img> el marco la sumaba a su propio alto y la
   tarjeta crecia todavia mas, probado). La imagen se ajusta dentro con
   object-fit:contain, asi que no se recorta ni se deforma.

   Acotado a #fotos_paciente para no tocar los otros fileinput del proyecto
   (STL, HTML, adjuntos), que si quieren mostrar nombre y peso. */
#fotos_paciente .file-preview {
    padding: 0; margin-bottom: 0; border: none; background: transparent; box-shadow: none;
}
#fotos_paciente .file-preview-frame {
    margin: 0; padding: 0; border: none; box-shadow: none; float: none; width: 100%;
}
#fotos_paciente .file-preview-frame:hover { box-shadow: none; }
#fotos_paciente .file-drop-zone { margin: 0; border: none; min-height: 0; padding: 0; }
#fotos_paciente .file-drop-zone .file-preview-thumbnails { margin: 0; }

/* La altura util: la misma que ocupa el placeholder */
#fotos_paciente .file-preview-thumbnails { height: 212px; overflow: hidden; }
#fotos_paciente .file-preview-frame,
#fotos_paciente .file-default-preview { height: 212px; }
#fotos_paciente .file-preview-frame .kv-file-content { height: 212px; padding: 0; }
#fotos_paciente .file-preview-image,
#fotos_paciente img.kv-preview-data,
#fotos_paciente .file-default-preview img {
    width: 100%; height: 100%; object-fit: contain; background: #fff;
}

/* Nombre y peso del archivo: es lo que hacia crecer la tarjeta. */
#fotos_paciente .file-footer-caption,
#fotos_paciente .file-upload-indicator,
#fotos_paciente .file-actions,
#fotos_paciente .kv-file-size,
#fotos_paciente .file-caption-name { display: none !important; }

/* Foto del paciente ya guardada (Editar pedido). Antes era una tarjeta con
   efecto de giro; ahora la foto y sus botones van a la vista, con la misma
   disposicion que una tarjeta vacia. */
.foto-guardada a.fancybox.img { display: block; }
.foto-guardada a.fancybox.img img {
    width: 100%; height: 212px; object-fit: contain; background: #fff;
    border: 1px solid #ddd;
}
/* El fileinput va debajo de la foto y solo aporta sus botones: su vista
   previa sobra, porque la foto ya se ve arriba. */
.foto-guardada .fileinput .file-preview { display: none; }
/* El boton Editar ahora va junto a la varita de IA, dentro de
   .archivo-acciones (ver fotos_paciente_lista.html): mismo tamano que
   .archivo-btn, solo el lapiz, sin texto, para que ambos quepan en una
   sola linea sin desbordar la tarjeta. */
.btn-editar-foto {
    color: #fff; background: #6d6d6c; border-color: #5c5c5b;
}
.btn-editar-foto:hover, .btn-editar-foto:focus {
    background: #E87E04; border-color: #d97403; color: #fff;
}
/* Borrar/subir (bootstrap-fileinput) y editar/IA (propios) en una sola
   fila. El contenedor del plugin (#regPactN .fileinput, .file-input) se
   "aplana" con display:contents para que sus botones entren en el mismo
   flex del padre, en vez de quedar en su propia linea con su tamano
   normal de Bootstrap.
   OJO: .btn-file NO lleva display:contents. Ese div es el que el plugin
   usa como contenedor de posicionamiento del <input type=file> real,
   invisible y superpuesto encima (min-width/min-height:100% en
   fileinput.css) para capturar el click de "elegir archivo" en
   cualquier navegador. Aplanarlo tambien rompia ese 100% -el input
   crecia al tamano del ancestro grande en vez de los 26x24 del boton- y
   quedaba flotando sobre los demas botones de la fila, interceptando
   sus clics sin que se viera nada raro (pasó real: la papelera de
   "Rostro Sonrisa natural" dejo de reaccionar). .btn-file debe seguir
   siendo su propia caja, con overflow:hidden y tamano fijo, para que el
   input quede recortado exactamente a esos 26x24. */
.foto-guardada-acciones {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 3px 0;
}
.foto-guardada-acciones .fileinput,
.foto-guardada-acciones .file-input,
.foto-guardada-acciones .archivo-acciones {
    display: contents;
}
.foto-guardada-acciones .fileinput-remove-button {
    width: 26px; height: 24px; min-width: 26px; padding: 0;
    line-height: 22px; text-align: center; font-size: 12px;
    border-radius: 3px; margin: 0;
}
.foto-guardada-acciones .btn-file {
    display: inline-block; position: relative; overflow: hidden;
    width: 26px; height: 24px; min-width: 26px; padding: 0;
    line-height: 22px; text-align: center; font-size: 12px;
    border-radius: 3px; margin: 0;
}
.foto-guardada-acciones .btn-file input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    min-width: 0; min-height: 0; font-size: 26px;
}

/* Boton "Descargar" de las fotos y archivos del paciente (modal del clip en
   Tracking y demas listados). Discreto, debajo de cada miniatura. */
.btn-descargar-archivo {
    display: inline-block; margin-top: 6px;
    background: #6d6d6c; color: #fff; border: none; border-radius: 3px;
    font-size: 11px; line-height: 1; padding: 6px 9px; text-decoration: none;
}
.btn-descargar-archivo:hover, .btn-descargar-archivo:focus {
    background: #E87E04; color: #fff; text-decoration: none;
}

/* Vista previa del avatar en Perfil. Redonda y del tamano real en que se
   vera en la barra superior, para que se entienda como va a quedar. */
#avatar_preview_wrap { margin-top: 10px; }
#avatar_preview {
    width: 110px; height: 110px; object-fit: cover;
    border-radius: 50%; border: 3px solid #ddd; background: #fff;
    display: block; margin-bottom: 6px;
}
#avatar_reeditar {
    background: #6d6d6c; color: #fff; border: none; border-radius: 3px;
    font-size: 11px; line-height: 1; padding: 6px 9px;
}
#avatar_reeditar:hover, #avatar_reeditar:focus { background: #E87E04; color: #fff; }

/* --- Mi produccion: grafica del dashboard del tecnico -------------------
   Barras en HTML/CSS puro (sin libreria de graficas: el proyecto no trae
   ninguna y la CSP no deja cargarla de un CDN). El alto de cada barra lo
   pone el JS desde data-alto, porque un style="" inline no pasa la CSP. */
.mi-produccion {
    margin-top: 16px; background: #fff; border: 1px solid #e5e5e5;
    border-radius: 4px; padding: 12px 14px 10px;
}
.mi-produccion-filtro { margin-bottom: 8px; }
.mi-produccion-select-proceso {
    width: 100%; font-size: 12px; padding: 5px 8px; color: #4a4a4a;
    background: #faf7f2; border: 1px solid #f0e6d6; border-radius: 4px;
}
.mi-produccion-select-proceso:focus { outline: none; border-color: #E87E04; }
.mi-produccion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mi-produccion-titulo { font-weight: 700; font-size: 13px; color: #4a4a4a; }
.mi-produccion-tendencia { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; }
.mi-produccion-tendencia.sube { color: #1a7f37; background: #e6f4ea; }
.mi-produccion-tendencia.baja { color: #b3261e; background: #fce8e6; }
.mi-produccion-tendencia.igual { color: #7a7a7a; background: #f0f0f0; }

.mi-produccion-kpis { display: flex; gap: 6px; margin-bottom: 12px; }
.mi-produccion-kpis .kpi {
    flex: 1; text-align: center; background: #faf7f2;
    border: 1px solid #f0e6d6; border-radius: 4px; padding: 6px 2px;
}
.mi-produccion-kpis .kpi-num { font-size: 17px; font-weight: 700; color: #E87E04; line-height: 1.1; }
.mi-produccion-kpis .kpi-lbl { font-size: 9px; text-transform: uppercase; color: #999; letter-spacing: .3px; }

.mi-produccion-grafica { display: flex; align-items: flex-end; gap: 3px; height: 132px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.barra-valor { font-size: 9px; color: #888; height: 12px; line-height: 12px; }
.barra-caja { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.barra {
    width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, #E87E04, #f5a94b);
    transition: height .5s ease;
}
.barra-mes { font-size: 9px; color: #999; text-transform: uppercase; padding-top: 4px; }

/* Mes en curso: destacado, para que se vea "donde voy" */
.barra-col.actual .barra { background: linear-gradient(to top, #1f8a70, #35b898); }
.barra-col.actual .barra-mes { color: #1f8a70; font-weight: 700; }
.barra-col.actual .barra-valor { color: #1f8a70; font-weight: 700; }
/* Mejor mes del ano */
.barra-col.record .barra-valor::after { content: " \2605"; color: #E87E04; }

.mi-produccion-pie {
    margin-top: 10px; padding-top: 8px; border-top: 1px solid #f0f0f0;
    font-size: 11px; color: #777; text-align: center;
}
.mi-produccion-pie strong { color: #E87E04; }

/* --- Logo de la barra superior -----------------------------------------
   Dos cosas que corregir aqui:

   1) El enlace del logo heredaba el padding de los enlaces del menu (16px
      arriba / 15px abajo), pensado para texto. Con la imagen de 51px eso
      daba 82px de alto dentro de una barra de 51: desbordaba 31px y la
      barra parecia saltar al pasar el raton.

   2) El logo nuevo (assets/img/logo-badent.png) es gris oscuro sobre
      transparente, y la barra del menu es gris oscuro tambien
      -rgb(109,109,108)-: quedaria practicamente ilegible. Se le pone una
      pastilla blanca detras, que ademas es como se veia el logo anterior
      (un JPG con su propio fondo blanco). */
#logo-2 > a {
    padding: 0 14px 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    height: 51px;
    background: transparent !important;
}
#logo-2 > a:hover, #logo-2 > a:focus { background: transparent !important; }
#logo-2 img {
    height: auto !important;
    max-height: 40px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 4px;
    padding: 3px 8px;
}

/* --- Ojo de mostrar/ocultar contrasena (login) --------------------------
   .field-icon (assets/admin/css/default.css) se posiciona con
   float:right + margin negativo, calculado a ojo para un ancho de icono
   fijo. Es fragil: cualquier variacion de fuente de iconos, autofill de
   iOS/Chrome (que reestiliza el input) o zoom de accesibilidad puede
   desplazarlo fuera del campo o taparlo. Reportado como "no se ve el ojo
   en el celular" sin poder reproducirlo en las pruebas (Chrome/Android,
   320 a 390px) -probable Safari/iOS u otra combinacion no probada-.

   Se ancla con position:absolute al contenedor .input-icon, que ya declara
   position:relative (components.css), en vez de flotar y restar margen.
   Tambien se agranda el area de toque (min 44px, la recomendada para
   movil) sin agrandar el icono visualmente. */
.login .input-icon { position: relative; }
.login .toggle-password.field-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    float: none;
    margin: 0;
    width: 44px;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
}
.login .toggle-password.field-icon:active { color: #E87E04; }

/* Separar "Pedidos Asignados" / "Pedidos no asignados" del resto de
   botones del dashboard (accounts_ventana slugs "asignados"/"no-asignados",
   ver templates/dashboard.html): antes quedaban pegados justo debajo del
   grupo de arriba, sin ningun aire que los distinguiera. */
.btn-home-asignacion { margin-top: 14px; }
.btn-home-asignacion:first-of-type { margin-top: 22px; }

/* "Estado del Servidor" (menu del avatar > Estado del Servidor,
   templates/perfil/estado-servidor.html). Mismos colores del tema que el
   resto de la app: portlet box yellow-gold (igual que el calendario del
   dashboard) y la misma paleta clara/naranja que ya usa "Mi produccion"
   (.mi-produccion-kpis), no un estilo oscuro aparte. */
.estado-servidor .portlet-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.estado-servidor-header-datos span { margin-left: 20px; color: rgba(255,255,255,.85); font-size: 12px; }
.estado-servidor-header-datos strong { color: #fff; }
.estado-servidor-card {
    background: #faf7f2;
    border: 1px solid #f0e6d6;
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.estado-servidor-card-title {
    color: #555;
    font-weight: 600;
    margin-bottom: 14px;
}
.estado-servidor-card-title i { margin-right: 6px; color: #E87E04; }
.estado-servidor-dato {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #e8ddc8;
}
.estado-servidor-dato:last-child { border-bottom: none; }
.estado-servidor-dato span { color: #999; }
.estado-servidor-dato strong { color: #555; font-weight: 600; }
.estado-servidor-barra {
    margin-top: 10px;
    height: 6px;
    background: #f0e6d6;
    border-radius: 3px;
    overflow: hidden;
}
.estado-servidor-barra-fill {
    height: 100%;
    background: #E87E04;
    border-radius: 3px;
    width: 0;
}

/* Icono de timbrada (#timer, base.html) segun el estado del dia.
   Es el punto de entrada al fichaje -el empleado lo usa 4 veces al dia-,
   asi que se le da mas cuerpo que al resto de iconos del header: pastilla
   circular con fondo propio, en vez de un icono de linea suelto que se
   perdia contra el fondo oscuro.

   Especificidad alta a proposito: el tema (yellow-orange.css) no da color
   propio a los iconos del top-menu, heredan el gris por defecto.

   Los colores siguen la paleta de la marca -naranja #E87E04, el mismo de
   los botones yellow-gold y los acentos del proyecto- para el estado
   "listo para marcar", que es el que debe llamar la atencion. Verde y rojo
   se reservan para los dos estados en curso, donde el color ya significa
   algo (en jornada / en almuerzo) y no conviene inventarle otro. */
#timer {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 6px 4px 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

#timer i {
    font-size: 19px;
    line-height: 1;
}

#timer:hover {
    transform: scale(1.06);
}

/* SIN_MARCAR: naranja de marca, relleno. Es una llamada a la accion -el
   empleado todavia no ficho- y debe verse a primera vista. */
#timer.timer-naranja {
    background-color: #E87E04;
    border-color: #E87E04;
}
#timer.timer-naranja i { color: #ffffff; }
#timer.timer-naranja:hover { background-color: #cf7003; border-color: #cf7003; }

/* EN_JORNADA: verde. Estado normal de trabajo. */
#timer.timer-verde {
    background-color: #1bbc9b;
    border-color: #1bbc9b;
}
#timer.timer-verde i { color: #ffffff; }
#timer.timer-verde:hover { background-color: #17a689; border-color: #17a689; }

/* EN_ALMUERZO: rojo. Pausa en curso, hay que volver a marcar. */
#timer.timer-rojo {
    background-color: #F3565D;
    border-color: #F3565D;
}
#timer.timer-rojo i { color: #ffffff; }
#timer.timer-rojo:hover { background-color: #e13d45; border-color: #e13d45; }

/* JORNADA_CERRADA: apagado, solo contorno. Ya no hay nada que hacer hoy,
   asi que no compite por atencion con el resto del header -pero sigue
   siendo legible, a diferencia del gris sobre oscuro de antes-. */
#timer.timer-gris {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .35);
}
#timer.timer-gris i { color: rgba(255, 255, 255, .75); }
#timer.timer-gris:hover { border-color: rgba(255, 255, 255, .6); }

/* En pantallas chicas el header se comprime: se achica la pastilla para
   que no empuje al avatar y el nombre fuera de la barra. */
@media (max-width: 767px) {
    #timer {
        width: 32px;
        height: 32px;
        margin-top: 4px;
    }
    #timer i { font-size: 16px; }
}

/* Pestanas "Hoy" y "Timesheets" de Gestion de Nomina (templates/nomina/gestion-nomina.html) */
.nomina-hoy-toolbar {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.nomina-hoy-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nomina-hoy-dia-label {
    min-width: 140px;
    text-align: center;
    font-weight: 600;
}
.nomina-hoy-totales {
    display: flex;
    gap: 24px;
    margin-bottom: 15px;
}
.nomina-hoy-total {
    display: flex;
    flex-direction: column;
}
.nomina-hoy-total span {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
.nomina-hoy-total small {
    color: #999;
}
.nomina-avatar {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: cover;
}
.nomina-avatar-letras {
    background: #E87E04;
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-size: 11px;
    font-weight: 600;
}
.nomina-hoy-nombre {
    vertical-align: middle !important;
}
.nomina-bloque-almuerzo {
    color: #d63384;
}
.nomina-ts-tabla th.nomina-ts-dia,
.nomina-ts-tabla td.nomina-ts-dia {
    text-align: center;
    min-width: 70px;
}
.nomina-ts-tabla th.nomina-ts-hoy {
    background: #fff3cd;
}
.nomina-ts-tabla th.nomina-ts-total,
.nomina-ts-tabla td.nomina-ts-total {
    text-align: center;
    font-weight: 600;
    min-width: 70px;
}

/* ---- Nomina: aprobaciones, vacaciones y portal del empleado ---- */
/* Sin style= inline a proposito: la CSP con nonce ya no admite estilos
   sueltos, y el proyecto viene migrando style= a clases (ver CLAUDE.md). */

.nomina-badge-hide {
    display: none;
}

.nomina-nota {
    color: #7b7b7b;
    font-size: 12px;
    margin-bottom: 12px;
}

.nomina-apr-tabla td,
.nomina-vac-tabla td,
.nomina-mi-tabla td {
    vertical-align: middle;
}

.nomina-vac-tabla td,
.nomina-vac-tabla th {
    text-align: center;
}

.nomina-vac-tabla td.nomina-hoy-nombre,
.nomina-vac-tabla th:first-child {
    text-align: left;
}

.nomina-vac-disponible {
    font-weight: 700;
    color: #1bbc9b;
}

.nomina-vac-sindatos td {
    color: #a2a2a2;
    background-color: #fbfbfb;
}

.nomina-revision-detalle {
    padding: 8px 10px;
    background-color: #f5f5f5;
    border-left: 3px solid #e5b71e;
    font-weight: 600;
}

.nomina-sol-calculo:empty {
    display: none;
}

/* Tarjetas de resumen del portal del empleado */
.nomina-mi-resumen {
    margin-bottom: 15px;
}

.nomina-tarjeta {
    padding: 15px;
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
}

.nomina-tarjeta-valor {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1;
}

.nomina-tarjeta-label {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 4px;
}

.nomina-tarjeta-azul   { background-color: #3598dc; }
.nomina-tarjeta-verde  { background-color: #1bbc9b; }
.nomina-tarjeta-morado { background-color: #8e44ad; }
.nomina-tarjeta-naranja{ background-color: #e87e04; }

.nomina-vac-detalle th {
    width: 40%;
    font-weight: 600;
}

.nomina-mi-tabla tfoot tr.nomina-mi-total th {
    border-top: 2px solid #ddd;
    font-weight: 700;
}

/* Columnas del almuerzo en "Mis horas" (templates/nomina/mi-nomina.html):
   se atenuan para que la lectura rapida de la fila siga siendo
   entrada -> salida -> total, y el almuerzo quede como el detalle que
   explica por que el total descuenta esa pausa. */
.nomina-mi-tabla td.nomina-mi-almuerzo {
    color: #8a8a8a;
    font-size: 12px;
}

/* Aviso de horario imposible en la tabla de Horarios (pestana Horario de
   Gestion de Nomina). Marca las filas cuya jornada termina antes de
   empezar o cuyo almuerzo cae fuera de ella -sintoma de la hora guardada
   en formato 12h sin convertir-, para que se vean en la misma pantalla
   donde se corrigen. Ver la nota de horarios heredados en CLAUDE.md. */
.horario-invalido {
    color: #c0392b;
    font-weight: 600;
}
.horario-invalido i {
    margin-right: 4px;
}
.horario-vacio {
    color: #b8b8b8;
}

/* Aviso dentro de los modales de horario (agregar/editar). Vacio no ocupa
   espacio: solo aparece cuando las horas cargadas no son coherentes. */
.horario-aviso-modal {
    display: none;
}
.horario-aviso-modal.activo {
    display: block;
    padding: 8px 10px;
    background-color: #fcf3f2;
    border-left: 3px solid #c0392b;
    color: #a5342a;
    font-size: 12px;
    line-height: 1.5;
}
.horario-aviso-modal i {
    margin-right: 4px;
}

/* El "grey-steel" del tema (components-rounded.css) usa texto #80898e
   sobre fondo #e9edef: contraste ~2:1, casi ilegible ("Grupos Registradas",
   "Departamentos Registrados", etc. en Productos, Inventarios, Departamentos,
   Equipos...). Se sobreescribe aca en vez de tocar el CSS del tema, que se
   perderia en cualquier actualizacion de Metronic. */
.portlet.solid.grey-steel > .portlet-title {
    background-color: #56606a;
    color: #ffffff;
}
.portlet.solid.grey-steel > .portlet-title > .caption {
    color: #ffffff;
}
/* Bootstrap 3 pone `border-top` en cada fila, no `border-bottom`: la
   ultima fila de la tabla queda pegada al borde del portlet, sin ninguna
   linea que la separe (se ve "flotando", ej. "Logistica" en Departamentos
   Registrados). Afecta a cualquier tabla dentro de este portlet, no solo
   la de un catalogo en particular. */
.portlet.solid.grey-steel .table > tbody > tr:last-child > td {
    border-bottom: 1px solid #d8dde0;
}

/* Modal de la nota de voz del portal del doctor (Control de ingresos). */
.dr-audio-modal { width: 100%; max-width: 460px; display: block; }
.dr-audio-dato { color: #6D6D6C; font-size: 13px; margin-bottom: 12px; }
.dr-audio-texto {
    margin: 0;
    padding: 12px 14px;
    background: #FBF3DD;
    border-left: 3px solid #E6BB20;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Nota de voz junto al comentario del caso (historial del pedido). */
.dr-audio-comentario {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E5E5E5;
}
.dr-audio-comentario .dr-audio-dato { display: block; margin-bottom: 8px; }

/* Punto de color del equipo en la tabla de Gestion de Equipos: identifica
   la maquina de un vistazo, sin abrir su ficha. */
.maquina-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* Campos del formato de orden digital que llena el doctor (historial). */
.dr-formato {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #E5E5E5;
    font-size: 14px;
}
.dr-formato dt { color: #6D6D6C; font-size: 12.5px; }
.dr-formato dd { margin: 0; }

/* Tipo de foto que indico el doctor (portal), cuando su recuadro no se
   pinta arriba porque el caso aun no tiene indicacion. */
.archivo-ranura {
    font-size: 11px;
    font-weight: 600;
    color: #8A6508;
    background: #FBF3DD;
    border-radius: 3px;
    padding: 2px 6px;
    margin-top: 4px;
    display: inline-block;
}

/* ---------- Gestion de Equipos: fila con foto ----------
   La foto ocupa el alto de unas tres lineas; con ese espacio la fila
   respira y los datos de las demas columnas quedan alineados a su lado. */
.maquina-celda { display: flex; align-items: center; gap: 12px; }
.maquina-foto {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #E5E5E5;
    flex-shrink: 0;
    background: #F5F6FA;
}
.maquina-datos { min-width: 0; }
.maquina-nombre { display: block; font-weight: 600; }

/* Las celdas de las otras columnas se centran contra la foto, si no
   quedan pegadas arriba cuando la fila crece. */
#table_maquinas > tbody > tr > td { vertical-align: middle; }

/* Vista previa de la foto del equipo, en el modal de maquinaria. */
.maquina-foto-previa { margin-bottom: 10px; }
.maquina-foto-previa img {
    max-width: 180px;
    max-height: 140px;
    border-radius: 5px;
    border: 1px solid #E5E5E5;
    display: block;
}

/* Funciones y ultimo mantenimiento bajo el nombre del equipo: usan el
   alto que ya ocupa la foto, en vez de dejarlo en blanco. */
.maquina-extra {
    display: block;
    font-size: 11.5px;
    color: #6D6D6C;
    line-height: 1.4;
    margin-top: 2px;
}
.maquina-extra b { color: #4A4A49; font-weight: 600; }
.maquina-tenue { color: #A2A2A2; }

/* Licencias: lo vencido y lo que vence pronto se ve sin leer la fecha. */
.lic-vencida { color: #A63A2E; font-weight: 600; }
.lic-pronto  { color: #8A6508; font-weight: 600; }
.lic-sin     { color: #A2A2A2; font-style: italic; }

/* Estado de conservacion del equipo, en la celda del nombre. */
.maquina-estado-ex { color: #2F6B4F; font-weight: 600; }
.maquina-estado-bu { color: #4A8B5C; font-weight: 600; }
.maquina-estado-re { color: #8A6508; font-weight: 600; }
.maquina-estado-ma { color: #A63A2E; font-weight: 600; }

/* El logo del header es un boton (vuelve al Dashboard), pero no se veia
   como tal -por eso convivia con un icono de casita aparte-. Con el
   icono retirado, el propio logo necesita la señal visual de boton:
   fondo sutil y cursor al pasar el mouse, con una transicion suave. */
.logo-boton a {
    display: block;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}
.logo-boton a:hover,
.logo-boton a:focus {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Reportes tecnicos (fotos/documentos) de un mantenimiento, agrupados
   bajo su propia fila en la tabla de Gestion Tecnica de Maquinaria. */
.lista_archivos_mantenimiento {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.archivo_mantenimiento {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F3F3F2;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
}
.archivo_mantenimiento .delete_archivo_mantenimiento {
    color: #A63A2E;
    cursor: pointer;
}

/* Precio especial negociado del cliente (configuracion/precios.py).
   Va como ::after y no en el texto: el JS del pedido toma el nombre del
   producto con .text()/.html() y la marca terminaria dentro del nombre. */
.items-prod li.precio-especial > a::after,
a.precio-especial::after {
    content: " \2605\00a0PE";
    color: #E87E04;
    font-size: 11px;
    font-weight: 600;
}

/* ---- Visor 3D (assets/global/scripts/visor-3d.js) ----
   Capa propia encima de todo, no un modal de Bootstrap: el z-index supera
   al de los modales (1050) y al backdrop. */
.visor3d { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10060; background: #fff; flex-direction: column; outline: none; }
.visor3d.visor3d-abierto { display: flex; }
body.visor3d-body { overflow: hidden; }
/* La burbuja del chat (z-index 99999) tapaba el panel del visor. */
body.visor3d-body #chat-interno-bubble { display: none; }
/* Colores corporativos de la app (2026-09-29, pedido de Guillermo):
   dorado #dca526 de las cabeceras y modales, gris #6d6d6c de la barra y los
   botones, naranja #E87E04 para lo activo y las medidas. */
.visor3d { font-family: "Open Sans", sans-serif; }
.visor3d-barra { background: #dca526; color: #fff; padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,.15); position: relative; z-index: 1; }
.visor3d-titulo { font-size: 16px; font-weight: 700; margin-right: 12px; letter-spacing: .2px; }
.visor3d-titulo .fa { margin-right: 4px; }
.visor3d-grupo { display: inline-flex; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.visor3d-btn { background: #6d6d6c; color: #fff; border: 0; padding: 5px 11px; font-size: 12px; line-height: 1.5; border-radius: 4px; cursor: pointer; transition: background-color .15s; }
.visor3d-grupo .visor3d-btn { border-radius: 0; }
.visor3d-grupo .visor3d-btn + .visor3d-btn { border-left: 1px solid rgba(255,255,255,.25); }
.visor3d-btn:hover, .visor3d-btn:focus { background: #575756; color: #fff; outline: none; }
.visor3d-btn.visor3d-activo { background: #E87E04; }
.visor3d-btn.visor3d-activo:hover { background: #c96b00; }
.visor3d-btn .fa { margin-right: 3px; }
.visor3d-btn[data-v3d="pantalla"] .fa { margin-right: 0; }
.visor3d-cerrar { margin-left: auto; background: #fff; color: #6d6d6c; font-weight: 600; }
.visor3d-cerrar:hover, .visor3d-cerrar:focus { background: #f3f3f3; color: #333; }
.visor3d-cuerpo { flex: 1; display: flex; min-height: 0; }
.visor3d-lienzo { flex: 1; position: relative; min-width: 0; overflow: hidden; background: #e3e3e1; }
.visor3d-lienzo canvas { display: block; }
.visor3d-lienzo.visor3d-midiendo canvas { cursor: crosshair; }
.visor3d-ayuda { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: #fff; background: rgba(109,109,108,.85); padding: 3px 9px; border-radius: 10px; pointer-events: none; }
.visor3d-etiquetas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.visor3d-etiqueta { position: absolute; transform: translate(-50%, -130%); background: #E87E04; color: #fff; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.visor3d-panel { width: 300px; border-left: 1px solid #e1e1e1; padding: 0 0 10px; overflow-y: auto; background: #fff; }
.visor3d-seccion { background: #6d6d6c; color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 8px; padding: 8px 12px; }
.visor3d-seccion small { color: #eee; font-weight: normal; }
.visor3d-seccion .fa { margin-right: 4px; }
.visor3d-archivos, .visor3d-medidas { padding: 0 10px; }
.visor3d-archivos { margin-bottom: 6px; }
.visor3d-archivo { background: #fff; border: 1px solid #e6e6e6; border-left: 4px solid #dca526; border-radius: 4px; padding: 7px 9px; margin-bottom: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.visor3d-archivo-cab { display: flex; align-items: center; gap: 7px; }
.visor3d-archivo-cab input[type=checkbox], .visor3d-original input[type=checkbox] { margin: 0; accent-color: #E87E04; }
.visor3d-archivo-cab input[type=color] { width: 26px; height: 20px; padding: 0; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; }
.visor3d-nombre { font-weight: 600; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor3d-info { font-size: 11px; color: #777; margin: 4px 0; }
.visor3d-opacidad { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #777; }
.visor3d-opacidad input { flex: 1; accent-color: #E87E04; }
.visor3d-original { font-size: 11px; font-weight: normal; margin: 4px 0 0; }
.visor3d-medida { font-size: 12px; padding: 5px 8px; margin-bottom: 4px; display: flex; justify-content: space-between; background: #fff8ec; border-left: 3px solid #E87E04; border-radius: 3px; }
@media (max-width: 767px) {
    .visor3d-cuerpo { flex-direction: column; }
    .visor3d-panel { width: auto; max-height: 40%; border-left: 0; border-top: 1px solid #ddd; }
}

/* Fila de captura de precios especiales (ficha del cliente). */
.tabla-precios-especiales { table-layout: fixed; }
.tabla-precios-especiales th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla-precios-especiales th.col-producto { width: 26%; }
.tabla-precios-especiales th:nth-child(2) { width: 8%; }
.tabla-precios-especiales th:nth-child(3) { width: 10%; }
.tabla-precios-especiales th:nth-child(4) { width: 11%; }
.tabla-precios-especiales th:nth-child(5) { width: 14%; }
.tabla-precios-especiales th:nth-child(6) { width: 11%; }
.tabla-precios-especiales th:nth-child(7) { width: 14%; }
.tabla-precios-especiales th:nth-child(8) { width: 88px; }
.tabla-precios-especiales td { vertical-align: middle !important; word-wrap: break-word; }
.tabla-precios-especiales td.text-right, .tabla-precios-especiales .u-nowrap { white-space: nowrap; }
/* Fila de alta: arriba del listado, bajo el mismo encabezado. */
.tabla-precios-especiales tr.fila-alta-precio-especial > td { background: #fff8ec; }
.tabla-precios-especiales tr.fila-alta-precio-especial .form-control { padding-left: 6px; padding-right: 6px; }
/* Botones "Ver todos en 3D" en la cabecera dorada de los portlets. */
.btn.btn-visor3d { background: #fff; color: #333; border: 1px solid #fff; }
.btn.btn-visor3d:hover, .btn.btn-visor3d:focus { background: #f3f3f3; color: #000; }
.portlet > .portlet-title > .actions .btn.btn-visor3d { padding: 4px 10px; }
/* Botones de las miniaturas de archivos 3D (Nuevo pedido y carga de STL):
   el tema los deja grises y casi no se distinguen de la lupa. */
.file-preview-frame .kv-file-ver3d, .file-preview-frame .kv-file-quitar3d { font-size: 14px; padding: 3px 8px; }
.file-preview-frame .kv-file-ver3d, .file-preview-frame .kv-file-ver3d i { color: #fff !important; }
.file-preview-frame .kv-file-ver3d { background: #E87E04; border-color: #E87E04; }
.file-preview-frame .kv-file-ver3d:hover { background: #c96b00; color: #fff; }
.file-preview-frame .kv-file-quitar3d, .file-preview-frame .kv-file-quitar3d i { color: #d9534f !important; }
/* Nuevo pedido: las miniaturas de los archivos 3D van como filas compactas.
   El plugin fija 213px por miniatura y en la columna estrecha de "Proyecto
   3D" (288px en un portatil de 1280) se salian del panel y cortaban la
   papelera. */
#sec_proyectos .file-drop-zone, #sec_archivos_stl .file-drop-zone { margin: 6px; padding: 4px; }
#sec_proyectos .file-preview-frame, #sec_archivos_stl .file-preview-frame {
    float: none; display: flex; align-items: center; gap: 8px;
    width: auto; margin: 6px 0; padding: 6px 8px; box-sizing: border-box; text-align: left;
}
#sec_proyectos .file-preview-frame .kv-file-content, #sec_archivos_stl .file-preview-frame .kv-file-content,
#sec_proyectos .file-preview-frame .kv-preview-data, #sec_archivos_stl .file-preview-frame .kv-preview-data,
#sec_proyectos .file-preview-other-frame, #sec_archivos_stl .file-preview-other-frame {
    flex: 0 0 40px; width: 40px !important; height: 40px !important; object-fit: cover;
}
#sec_proyectos .file-other-icon, #sec_archivos_stl .file-other-icon { font-size: 30px; line-height: 40px; }
#sec_proyectos .file-thumbnail-footer, #sec_archivos_stl .file-thumbnail-footer { flex: 1 1 auto; min-width: 0; height: auto !important; }
#sec_proyectos .file-footer-caption, #sec_archivos_stl .file-footer-caption {
    text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
}
#sec_proyectos .file-actions, #sec_archivos_stl .file-actions { margin-top: 0; }

/* Fotos del paciente en Nuevo pedido (fotos-nuevo-pedido.js). */
/* Input de archivo fuera de pantalla y no con display:none: Safari no abre
   el selector con .click() sobre un input oculto con display:none. */
.u-file-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn-dsd-nuevo { margin-top: 6px; background: #E87E04; color: #fff; border: 0; }
.btn-dsd-nuevo:hover, .btn-dsd-nuevo:focus { background: #c96b00; color: #fff; }
#fotos_extra_nuevo_lista { margin-top: 10px; }
.foto-extra-nuevo { float: left; width: 150px; margin: 0 10px 10px 0; border: 1px solid #ddd; background: #fff; }
.foto-extra-nuevo img { display: block; width: 100%; height: 110px; object-fit: cover; }
.foto-extra-nuevo-pie { display: flex; align-items: center; gap: 4px; padding: 4px; }
.foto-extra-nuevo-titulo { flex: 1; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Catalogo de productos (personal interno): arbol de filtros con scroll y
   precio especial resaltado. Ver templates/configuracion/catalogo-productos.html */
.catalogo-arbol .arbol-categorias { max-height: 520px; overflow: auto; }
#table_lista_precio_badent td.precio-especial { color: #1e7e34; font-weight: bold; }
/* El tema de jsTree del proyecto no trae su sprite (32px.png): casillas y
   flechas salian invisibles. Se dibujan con CSS: vacia, marcada (dorado de
   marca) y parcial (jstree-undetermined, algun hijo marcado). */
.arbol-categorias .jstree-ocl { background: none; text-align: center; cursor: pointer; color: #888; }
.arbol-categorias .jstree-closed > .jstree-ocl::before { content: "\25B8"; font-size: 15px; line-height: 24px; }
.arbol-categorias .jstree-open > .jstree-ocl::before { content: "\25BE"; font-size: 15px; line-height: 24px; }
.arbol-categorias .jstree-checkbox { position: relative; background: none; }
.arbol-categorias .jstree-checkbox::before { content: ""; position: absolute; left: 5px; top: 5px; width: 14px; height: 14px;
    border: 1.5px solid #999; border-radius: 3px; background: #fff; box-sizing: border-box; }
.arbol-categorias .jstree-clicked > .jstree-checkbox::before { background: #DCA526; border-color: #DCA526; }
.arbol-categorias .jstree-clicked > .jstree-checkbox::after { content: ""; position: absolute; left: 10px; top: 7px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.arbol-categorias .jstree-undetermined::before { border-color: #DCA526; }
.arbol-categorias .jstree-undetermined::after { content: ""; position: absolute; left: 8px; top: 11px; width: 8px; height: 2px; background: #DCA526; }
.arbol-categorias .jstree-anchor { white-space: normal; height: auto; min-height: 24px; }
/* Listas 2-5 de Gestion de Productos: calculadas desde la lista 1, no editables */
.precio-calculado { color: #666; padding: 0 2px; cursor: default; }
/* Catalogo de productos, vista de cliente: imagen + descripcion del producto */
.catalogo-cliente-producto { display: flex; gap: 12px; align-items: flex-start; }
.catalogo-cliente-producto img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e5e5; flex: none; }
.catalogo-cliente-desc { margin-top: 4px; color: #555; font-size: 12.5px; white-space: normal; }
.precio-especial-cliente { color: #1e7e34; }

/* Gestion de Procesos > procesos por producto: editor del pago por nivel.
   default.css da 300px a todo input de .todo (el editor del nombre). */
.todo .pago-nivel-editor { margin-top: 6px; cursor: default; }
.todo .pago-nivel-editor .pago-nivel { width: 100%; font-size: 12px; padding: 3px 4px; }
.todo .pago-nivel-tabla { margin-bottom: 0; background: #fff; }
.todo .pago-nivel-tabla th { font-size: 11px; font-weight: 600; }
.todo .proceso-producto-unidad { height: 26px; padding: 2px 4px; font-size: 12px; }
.todo .proceso-producto-pago { cursor: pointer; }
.main .proceso-producto-cabecera { margin: 0 6px; padding: 0 9px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; }
.main .proceso-producto-cabecera > div { padding-left: 0; padding-right: 0; }
.todo .proceso-producto-pago { border-bottom: 1px dashed #DCA526; }