::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: lightblue;
  opacity: 1; /* Firefox */
}

.badge {
  font-size: 100%;
  font-weight: 400;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: lightblue;
}

.pieza {
    width: 17px;
    height: 17px;
    margin: 2px;
    background-color: #f4f4f4;
    float: right;
}

.marco {
margin-top: 1px;
margin-left: 1px;
    padding: 1px;
}

.selected {
    background-color: #a2a29b;
    border: 2px dotted rgb(253, 195, 3);
    /*border: 2px solid rgb(243 236 15);*/
    /*height: 40px !important;*/
    /*width: 40px !important;*/
}
.pieza_completa.selected {
    border: 0px dotted rgb(253, 195, 3);
}

.modal-dialog {
    max-width: 1000px !important;
}

.face_line {
  stroke-width: 3px;
  fill: #d0d1d5;
  stroke: #999;

}

.color_selector {
    height: 25px;
    width: 40px;
    display: inline-flex;
    margin-top: 10px;

}

#colors_selector {
    margin: auto;
    flex-direction: row-reverse;
}

.color_red {
    background: #9f191f;

}

.color_brown {
    background: rgb(15, 110, 175);
    /*background: rgb(175, 15, 52);*/


}

.color_blue {
    background: #0A246A;
}

.color_clear {
    background: #d0d1d5;
}

.align-center {
    text-align: center;
}


  .odontograma {
    align-content: center;
    max-width: 850px;

}

.odonto_row {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    justify-content: center;
}

.odonto_row_menores {
    margin: 0px 15.5%;
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.blue {
    stroke: #0A246A;
}
.virgen {
    stroke: #d0d1d5;
    stroke-width: 7px;
    fill: #d0d1d5;
}

.requerida {
    stroke: #0A246A;
    stroke-width: 10px;
    fill:  #0A246A;
}

/* Ensure AdminLTE collapsed boxes start with hidden contents */
.collapsed-box .box-body,
.collapsed-box .box-footer {
    display: none;
}

.brown {
    stroke: rgb(15, 110, 175);
    /*stroke: rgb(175, 15, 52);*/
}

.red {
    stroke: #9f191f;
}

.existente {
    stroke: #9f191f;
    stroke-width: 7px;
    fill: #9f191f;
}

.tratada {
    stroke: rgb(15, 110, 175);
    fill: rgb(15, 110, 175);
    stroke-width: 7px;
}

#ok, #up, #down, #left, #right {
    stroke: rgb(111, 110, 110) !important;
    stroke-width: 3px !important;
}

.no_fill {
    fill: none !important;
}

#cargando {
    height: 266px;
    width: 100%;
    background: gray;
    opacity: 75%;
    position: relative;
}

  .visibility {
      visibility: visible;
      stroke: #0c0c0c;
}

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        /* change the margins as you want them to be. */
   }
}

dd {
    margin-right: 150px;
    width: auto;
    text-align: justify;
    text-justify: inter-word;
}

.texto_pieza_superior {
    text-align: center;
}

.texto_pieza_inferior {
    text-align: center;
}

/* Ensure default buttons remain readable by using a darker background */
.btn-default,
.btn-default:active,
.btn-default:focus,
.btn-default:hover {
    background-color: #4a5568;
    border-color: #2d3748;
    color: #ffffff;
}

.texto_pieza_superior_ot {
    text-align: center;
}

.texto_pieza_inferior_ot {
    text-align: center;
}


.division_mayores_menores {
    max-width: 665px;
    height: 2px;
    background-color: black;
    margin: 0 auto;
}

.division_distal {
    border-left: 2px solid black;
    margin: 0px 2px;
}

.pieza_completa {
    width: 100%;
    margin: 1px;
    padding: 0px 1px 3px 1px;
    max-width: 60px;
}

.stroke_black {
    stroke: black;
}

.svg_pieza {
    margin: 0px auto;
}
.svg_tool {
    height: 32px;
    width: 32px;
    margin: 0px 5px;
}


.tools {
  display: flex;
  margin: 10px;
  align-items: center;
  gap: 10px;
     flex-wrap: wrap;
}
.clean_tools {
      display: flex;
  margin: 10px;
  align-items: center;
  gap: 10px;
}

.color_tool {
    height: 32px;
    width: 32px;
    margin: 0px 5px;
}
.svg-container {
    width: 100%;
    height: 100%;
}

/*svg {*/
/*    background:#000000;*/
/*}*/
polygon:hover {opacity:0.75;}

#state-buttons img {
width: 45px;
padding: 5px;
border: 0;
box-shadow: none;
display: inline;
}

.panel-heading {
        padding-top: 2px;
    padding-bottom: 10px;
}

.table>thead>tr>th {
    padding-top: 0px;
    padding-bottom: 0px;
}

.select2-container {

width: 100% !important;
}
/*.no-label {*/
/*    margin-top: 28px !important;*/
/*}*/
.float-right {
        float: right;
}

.float-left {
        float: left;
}

.btn-toggle {
    background-color: #ECECED;
    color: rgb(0, 0, 0, 0.5) !important;
    margin: 5px !important;
}

.fa.fa-bars {
    color: rgb(0, 0, 0, 0.5);
    font-size: 20px;
}

.btn-cop1 {
  color: #ffffff;
  background-color: #8f5bde;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop1:focus,
.btn-cop1.focus {
  color: #ffffff;
  background-color: #5b3a8e;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop1:hover {
  color: #ffffff;
  background-color: #5b3a8e;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop1:active,
.btn-cop1.active,
.open > .dropdown-toggle.btn-cop1 {
  color: #ffffff;
  background-color: #5b3a8e;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop1:active,
.btn-cop1.active,
.open > .dropdown-toggle.btn-cop1 {
  background-image: none;
}
.btn-cop1 .badge {
  color: #8f5bde;
  background-color: #ffffff;
}


.btn-cop2 {
  color: #ffffff;
  background-color: #200f3b;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop2:focus,
.btn-cop2.focus {
  color: #ffffff;
  background-color: #3c1d6d;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop2:hover {
  color: #ffffff;
  background-color: #3c1d6d;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop2:active,
.btn-cop2.active,
.open > .dropdown-toggle.btn-cop1 {
  color: #ffffff;
  background-color: #3c1d6d;
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-cop2:active,
.btn-cop2.active,
.open > .dropdown-toggle.btn-cop1 {
  background-image: none;
}
.btn-cop2 .badge {
  color: #200f3b;
  background-color: #ffffff;
}

input#id_nrosocio {
    width: 60% !important;
}

.center {
        text-align: center;
}

  .main-sidebar {
    width: 230px;
    transition: width 0.3s ease;
    overflow-x: hidden;
    white-space: nowrap;
    background-color: #f8f9fa; /* opcional */
}

.main-sidebar.collapsed {
    width: 50px;
}

.main-sidebar .menu-label {
    display: inline-block;
    transition: opacity 0.3s ease, width 0.3s ease;
    margin-left: 10px;
    vertical-align: middle;
}

.main-sidebar.collapsed .menu-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-menu > li > a {
    display: flex;
    align-items: center;
    padding: 10px 10px;

}

.sidebar-menu i {
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}


.main-sidebar.collapsed ~ .content-wrapper {
    margin-left: 50px;
}
.main-sidebar.collapsed ~ .main-footer {
    margin-left: 50px;
}



  .filters {
    margin: 0;
    background: none;
    border: none;
    font-size: 18px;
    color: #6918B6;
    cursor: pointer;
}


.btn_remove_filter {
    margin: 0;
    background: none;
    border: none;
    font-size: 18px;
    color: #280945;
    cursor: pointer;
}

.filters:hover {
    color: #280945FF; /* Azul más oscuro al pasar el cursor */
}

/* Tooltip (ayuda contextual) */
.filters[title] {
    position: relative;
}

/* ===================================================================
   Responsive / mobile
   El sitio carga Bootstrap 4 (CDN) y crispy-forms usa el template pack
   "bootstrap4", pero los formularios de ordenes_trabajo/forms.py usan
   wrapper_class="col-4"/"col-6"/etc. SIN el prefijo de breakpoint
   (debería ser "col-12 col-md-4" para apilarse en mobile). En Bootstrap
   4 un .col-N sin prefijo aplica ese ancho fijo en TODAS las pantallas,
   por eso los campos quedan apretados en mobile. Se corrige acá en vez
   de tocar cada Layout() de forms.py (alcance mucho mayor y más riesgo).
   .modal-dialog ya es responsive por defecto en Bootstrap 4, no se toca.
   =================================================================== */
@media (max-width: 768px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Listados inline (prestaciones, historial de estados, etc.): el
       scroll horizontal de .table-responsive resultó poco confiable en
       mobile real (la tabla se compacta en vez de desbordar, por lo que
       nunca dispara el scroll). En vez de depender de eso, se convierte
       la tabla en tarjetas apiladas: cada fila pasa a ser un bloque y
       cada celda muestra su propio encabezado (vía data-label, agregado
       en ot_cruds/ajax_/list.html), sin perder ninguna columna ni
       necesitar scroll horizontal. */
    #datatable {
        border: 0;
    }

    #datatable thead {
        display: none;
    }

    #datatable tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    #datatable tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        text-align: right;
        border: none;
        border-bottom: 1px solid #eee;
    }

    /* La última celda de cada fila es siempre "Acciones": en vez de
       mostrar la etiqueta al lado de los botones (quedan apretados),
       se apila la etiqueta arriba y los botones abajo, a ancho completo. */
    #datatable tbody td:last-child {
        display: block;
        border-bottom: none;
        text-align: left;
    }

    #datatable tbody td:last-child::before {
        display: block;
        margin-bottom: 4px;
    }

    #datatable tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        flex: 0 0 auto;
    }

    /* Botones de acción del listado de prestaciones (Ver campos/Show/
       Edit/Delete): en una fila quedan apretados y se ven mal; se apilan
       en columna y ocupan el ancho de la celda. */
    .actions-cell {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }

    .actions-cell .btn {
        width: 100%;
        text-align: center;
        margin: 0;
        font-size: 12px;
        padding: 4px 6px;
    }

    /* El scroll horizontal resultó poco confiable en el dispositivo real
       probado (la fila de piezas quedaba cortada sin forma de llegar al
       resto). En vez de depender de él, se achica toda la grilla para
       que las 16 piezas de la fila más ancha entren sin scrollear; para
       interactuar con precisión, cada pieza se puede "zoomear" (ver
       más abajo: .pieza_completa.zoomed + #odontograma-zoom-backdrop).
       #odontograma_actual conserva overflow-x:auto solo como red de
       seguridad ante algún desborde mínimo por redondeo. */
    #odontograma_actual {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .odonto_row,
    .odonto_row_menores {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .odonto_row_menores {
        margin: 0 !important;
    }

    .pieza_completa {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 6.2%;
        max-width: 6.2%;
        margin: 0;
        overflow: hidden;
    }

    .texto_pieza_superior_ot,
    .texto_pieza_inferior_ot {
        font-size: 9px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* Fondo oscuro detrás de la pieza "zoomeada". */
    .odontograma-zoom-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 2000;
    }

    .odontograma-zoom-backdrop.active {
        display: block;
    }

    .odontograma-zoom-close {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 2002;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #fff;
        font-size: 22px;
        line-height: 1;
    }

    /* La pieza tocada se agranda y centra en pantalla (mismo elemento,
       mismos handlers de click ya atados a sus polígonos: solo cambia
       su tamaño/posición, no se duplica nada). */
    .pieza_completa.zoomed {
        position: fixed;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2001;
        width: 220px;
        max-width: 220px;
        margin: 0;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        padding: 16px 8px;
    }

    /* Barra de herramientas + colores: franja fija con scroll horizontal
       propio y objetivos táctiles más grandes (~44px). z-index por
       encima del backdrop/pieza zoomeada (2002) para poder elegir color
       mientras una pieza está agrandada. */
    .tools-container {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 2010;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
        margin: 0;
        padding: 4px 0;
    }

    /* Con una pieza agrandada, la barra sticky de abajo quedaba tapando
       la pieza. Mientras se está "zoomeando" se sube a una posición fija
       (no top:0, para quedar a tono con la altura donde está la pieza),
       y la pieza se corre más abajo para no quedar debajo de ella. */
    body.odontograma-zooming .tools-container {
        position: fixed;
        top: 200px;
        bottom: auto;
        left: 0;
        right: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    body.odontograma-zooming .pieza_completa.zoomed {
        top: 60%;
    }

    /* El scroll horizontal de estas barras resultó poco confiable en el
       dispositivo real probado (mismo problema que la grilla y las
       tablas); en vez de depender de él, se permite que pasen a una
       segunda fila si no entran todos los íconos en una sola. */
    .tools,
    .clean_tools,
    #colors_selector {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 4px 0;
    }

    .svg_tool,
    .color_tool,
    .color_selector {
        height: 40px;
        width: 40px;
        flex: 0 0 40px;
    }
}