/* Document
  ========================================================================== */

@charset "utf-8";

/* Icono eliminar en tabla de costos y gestor de tipos: gris por defecto, rojo en hover */
.ui.dropdown .menu .item.cost-item-delete,
.ui.dropdown .menu .item.cost-item-delete i.icon { color: #bbb !important; }
.ui.dropdown .menu .item.cost-item-delete:hover,
.ui.dropdown .menu .item.cost-item-delete:hover i.icon { color: #e53935 !important; }

.ui.button.cost-item-delete,
.ui.button.cost-item-delete i.icon { color: #bbb !important; border-color: #ddd !important; }
.ui.button.cost-item-delete:hover,
.ui.button.cost-item-delete:hover i.icon { color: #e53935 !important; border-color: #e53935 !important; }

/* Hover sutil en filas del modal de Tipos y Categorías */
#types_list .ui.list .item,
#categories_list .ui.list .item {
    transition: background-color 0.15s ease;
    border-radius: 6px;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
#types_list .ui.list .item:hover,
#categories_list .ui.list .item:hover { background-color: #f5f6f7 !important; }

.ui.form, .ui.form .field .dropdown, .ui.form .field .dropdown .menu>.item {
  font-size: 1.15rem !important;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

.report_style{
  background: #eff0f0 !important;
}

#message_resume, #message_resume_update, .msg_resume{
  padding: 10px 25px;
}

#message-pass, #message-pass-update{
  font-size: 12px;
}

.message{
  color: red;
  font-size: 12px;
}
.msg_valid{
  color: green;
  font-size: 12px;
}

.hidden{
  display: none !important;
}

.left{
    text-align:left;
}

.right{
  text-align:right;
}

.center{
    text-align:center;
}

.sin_ref{
  background-color: #ffd53c !important;
}

.modules{
  height: 100%;
  padding: 78px 0px 58px 0px;
}

.info_img{
  overflow: auto;
}

.info_content{
 font-size: 20px;
}

/*Usado para color del boton examinar para seleccionar archivo*/
.btn-primary {
  color: #fff;
  background-color: #767676 !important;
  border-color: #767676 !important;
}

.back_button{
  z-index: inherit;
}

.data_border{
  padding: 0px !important;
 }

.dataTables_info{
  text-wrap: balance !important;
 }

.limit_text{
  max-width: 100px !important; 
  overflow-wrap: break-word;
  margin: auto;
}

.accordion_rule{
  box-shadow: 0px 1px 1px 0px rgb(222 222 223) !important; 
}

.back_button > .button{
  background:#d1d1d1;
}

#menu_bottom{
  position: fixed !important;
  bottom: 0 !important;
  font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
  font-weight: bolder;
  margin-bottom: 0px;
  z-index: 5;
  font-size: 14px;
  height: 80px;
  max-width: 950px;
 }

 #menu_bottom i{
  font-size: 20px;
  height: 15px;
 }

.search_button{
  float: right;
  margin: 23px 0px 0px 0px !important;
}

#msg_reports{
  margin: auto;
  color: #3260b6;
}

#port_data_info_cont{
  min-width: 10em !important;
}

/*Seccion para cargar imagen*/
.file-drop-zone-title {
  padding: 23px !important;
}

.file-drop-zone-title {
  color: #aaa;
  font-size: 16px !important; 
  padding: 1px 1px;
}

.file-drop-zone {
  border: 0px dashed #aaa !important;
  min-height: 80px !important;
}

.file-highlighted{
  border: 0px dashed #ffffff !important;
  background-color: #ffffff !important;
}

.status{
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  color: #fff;
}

.status_title{
  min-width: 142px !important;
}

.note{
  min-width: 132px !important;
}

#tbody_cont_info_file_content tr td{
  vertical-align: middle;
}

.datatable{
  width: 100%;
}

#show_data_cargo{
  margin: 20px 0px;
}

.estilo_texto_cantidad{
  font-size:10px; 
  color: red;
}

#main-footer img {
max-height: 60px;
}

#menu-toggle{
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  margin: 10px 10px 0px 0px;
  color: #fff;
}

#menu-toggle:focus, #menu-toggle:hover,#menu-toggle:active{
  outline: none;
  outline-offset: 0px; 
  text-decoration: none;
}

/*formularios*/
#section_title {
  font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
  height: 50px;
  padding: 13px 0px 0px 28px;
  font-weight: bolder;
  border-radius: 1px;
  background: #e0e1e2;
  font-size: 18px;
  color: #333;
}

#section_title2{
  padding: 23px 0px 0px 0px;
}

.formulario .content .grid{
    margin: 0px 12px;
}

  
  /*//////////////Sidebar////////////////*/
#sidebar-wrapper{
    text-align: left;
    font-size: 15px !important;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif !important;
  }
  
/*Colores*/
.bg-blue,
.bg-blue:hover,
.bg-blue:active,
.bg-blue:focus,
.active>.color-blue {
  background: #4f7ed7 !important;
  color: #fff !important;
}

.bg-gray,
.bg-gray:hover,
.bg-gray:active,
.bg-gray:focus,
.active>.color-gray {
  background: #ddd;
  color: #4295cf;
}

/*Leasing*/
.bg-leasing,
.bg-leasing:hover,
.bg-leasing:active,
.bg-leasing:focus,
.active>.color-leasing {
  background: #083ac3 !important;
  color: #fff !important;
}

/*inspection*/
.bg-inspection,
.bg-inspection:hover,
.bg-inspection:active,
.bg-inspection:focus,
.active>.color-inspection {
  background: #083ac3 !important;
  color: #fff !important;
}

/*Water Footprint*/
.bg-waterf,
.bg-waterf:hover,
.bg-waterf:active,
.bg-waterf:focus,
.active>.color-waterf {
  background: #083ac3 !important;
  color: #fff !important;
}

/* Electrical Generator*/
.bg-generator,
.bg-generator:hover,
.bg-generator:active,
.bg-generator:focus,
.active>.color-generator {
  background: #06299a !important;
  color: #fff !important;
}

/*Energy S+ystem*/
.bg-energy,
.bg-energy:hover,
.bg-energy:active,
.bg-energy:focus,
.active>.color-energy {
  background: #06299a !important;
  color: #fff !important;
}

/*Defaulter*/
.bg-defaulter,
.bg-defaulter:hover,
.bg-defaulter:active,
.bg-defaulter:focus,
.active>.color-defaulter {
  background: #083ac3 !important;
  color: #fff !important;
}


.botones_crear_admin{
  position: fixed;
  width: 100%;
  top: 66px;
  text-align: center;
  background: #e0e1e2;
  z-index: 2;
  margin-top: -11px !important;
  margin-left: 0px !important;
  max-width: 950px;
}

.crear_btn, .admin_btn, .form_btn, .file_btn {
  margin: auto;
  width: 150px;
}

#botones_public .fourteen, #botones_public_update .fourteen{
  margin-left: -20px;
}

.nav-up {
  top: -45px !important;
}

/*mov. nave update_service*/
.services{
  padding: 30px 48px 0px 48px !important;
}


 .right_button{
  float: right;
  margin: 15px 27px 60px 5px !important;
}

.admin_section{
  margin: 30px 0px !important;
}

.productivity{
  padding: 0px 20px;
}

/* Hace que la tabla se pueda desplazar horizontalmente si es necesario.
   !important vence al style="overflow:hidden" inline de los contenedores,
   que en móvil recortaba las tablas anchas en vez de permitir scroll. */
.overflow_table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.overflow_table table {  
    text-align: center !important;
}

.overflow_table table th,
.overflow_table table td {
    vertical-align: middle !important;
    text-align: center !important;
}

.row.dt-table, .ui.stackable.grid .row{
  margin: auto;
}

.alter_title{
  position: absolute !important;
  margin: 10px 0px 0px 0px;
}

.alter_title_options{
  position: absolute !important;
}


.btn_create_port{
  margin: 30px 0px !important;
}

/********************************************************
Reportes
*********************************************************/
#show_report_event{
  border-top: 1px solid #DDD ;
}

#show_report_event .description span{
  display: block;
}

.size_img{
  width: 80px;
  margin-top: -120px;
  padding: 5px;
  margin-left: 20px;
}

.items_event{
  border-radius: .28571429rem;
  border: 1px solid rgba(34,36,38,.15);
  margin: 1em 0;
}

#cont_movi, #cont_estancia{
    font-weight: 600;
    font-size: 18px;
    position: absolute;
    right: 0;
    margin: -15px 15px 0px 0px;
    padding: 2px 9px;
    border-radius: .28571429rem;
}

.legend_estancia, .legend_movi{
  border-radius: .28571429rem;
  padding: 0px 13px;
}

.legend_estancia{
  background: #98080821;
  border: 1px solid #e4a6a6;
}
.legend_movi{
  background: #21ba452b;
  border: 1px solid  #a2cbac;
}

#cont_estancia{
  background: #e4a6a6;
}
#cont_movi{
  background: #a2cbac;
}

.image_container{
  display: inline-block !important;
  width: 21%;
}

.img_box{
  display: table-cell;
  vertical-align: middle;
}
.cont_description{
  display: inline-block !important;
  width: 78%;
  padding: 10px;
}

.btn_right{
  float: right;
}

.btn_space{
  margin-bottom: 15px;
}

.bg-lighred,
.bg-lighred:hover,
.bg-lighred:active,
.bg-lighred:focus,
.active>.color-lighred {
  background: #98080821;
  color: #313131;
}

.bg-lighgreen,
.bg-lighgreen:hover,
.bg-lighgreen:active,
.bg-lighgreen:focus,
.active>.color-lighgreen {
  background: #21ba452b;
  color: #313131;
}

/* Soporte responsive*/

@media (max-width: 767px) {
  /* Forzar que el buscador quede alineado a la izquierda */
  .dataTables_filter {
    text-align: left !important;
  }
}

@media screen and (max-device-width : 500px){   
  /*seccion de solicitudes*/
  .crear_btn, .admin_btn, .form_btn, .file_btn {
    margin: auto;
    width: 120px;
  }
} 

@media screen and (max-device-width : 355px){   
  .size_img{
    margin-top: 0px;
  }
} 

@media screen and (max-device-width : 400px){   
  .size_img{
    margin-left: 3px;
  }
  
} 

/* ---- Informe Diario: acordeón de actividades por categoría ---- */
#contenedor_actividades_informe_diario .act-accordion-id.ui.accordion {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
#contenedor_actividades_informe_diario .act-accordion-id .title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #f4f6f8 !important;
    border-bottom: 1px solid #e8eaed !important;
    font-weight: 700 !important;
    color: #444 !important;
    padding: 12px 14px !important;
}
#contenedor_actividades_informe_diario .act-accordion-id .title.active {
    background: #eaf3fb !important;
    color: #083ac3 !important;
}
.act-grupo-icon { color: #083ac3 !important; margin-right: 2px !important; }
.act-grupo-nombre { flex: 1; }
.act-grupo-badge {
    background: #e9ecef;
    color: #888;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.76em;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.act-grupo-badge.act-grupo-badge-done {
    background: #21ba45;
    color: #fff;
}

/* Item de actividad dentro del acordeón */
.act-lista-grupo { padding: 0 6px; }
.actividad-item {
    border-bottom: 1px solid #f0f2f4;
    padding: 8px 4px;
    transition: background 0.15s;
}
.actividad-item:last-child { border-bottom: none; }
.actividad-item:hover { background: #f9fafc; }
.actividad-item.act-warning { background: #fff6f0 !important; border-left: 3px solid #e0623a; }
.act-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.act-item-num {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
    color: #aaa;
    font-size: 0.85em;
    flex-shrink: 0;
}
.act-item-nombre {
    flex: 1;
    font-size: 0.92em;
    min-width: 0;
}
.act-item-obs {
    padding: 5px 0 2px 34px;
}
.act-item-obs .obs-field-id {
    width: 100%;
    border: 1.5px solid #e0e3e8 !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    outline: none !important;
    background: #fafbfc !important;
    resize: vertical !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
    font-size: 0.88em;
}
.act-item-obs .obs-field-id:focus {
    border-color: #b0b8c8 !important;
    background: #fff !important;
}

/* ---- Informe Diario: tabla de actividades estilo card (legacy, se mantiene por compatibilidad) ---- */
.card-table-wrapper {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 0;
    overflow: hidden;
}
.table-actividades-id thead tr th {
    background: #f4f6f8 !important;
    color: #555 !important;
    font-weight: 700;
    border-bottom: 2px solid #e8eaed !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 10px !important;
}
.table-actividades-id tbody tr td {
    border-top: 1px solid #f0f2f4 !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    padding: 10px 10px !important;
}
.table-actividades-id tbody tr:first-child td {
    border-top: none !important;
}
.table-actividades-id tbody tr:hover td {
    background: #f9fafc !important;
}
/* Botones pill Sí/No */
.act-btn-group {
    display: inline-flex;
    gap: 0;
    align-items: center;
    border-radius: 50px;
    overflow: hidden;
}

.act-btn-group .btn-act-id {
    border-radius: 0px !important;
    padding: 0 !important;
    font-size: 0.8 rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    width: 55px !important;
    height: 36px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.act-btn-group .btn-act-id:first-child {
    border-radius: 50px 0 0 50px !important;
}
.act-btn-group .btn-act-id:last-child {
    border-radius: 0 50px 50px 0 !important;
}

.act-btn-group .btn-act-id.basic {
    background: #e9ecef !important;
    color: #aaa !important;
}
/* Alinear texto de actividad a la izquierda */
.table-actividades-id tbody tr td:nth-child(2) {
    text-align: left !important;
}
/* Campo observación multilinea */
.table-actividades-id .obs-field-id {
    border: 1.5px solid #e0e3e8 !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    outline: none !important;
    background: #fafbfc !important;
    resize: vertical !important;
    min-height: 38px !important;
    line-height: 1.4 !important;
}
.table-actividades-id .obs-field-id:focus {
    border-color: #b0b8c8 !important;
    background: #fff !important;
}

#fotos_titulos_list_id .item{
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#fotos_titulos_list_id .foto-titulo-input-id{
  flex: 1;
  border: 1.5px solid #e0e3e8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.95rem;
}

/* Fix: zoom modal de bootstrap-fileinput queda detrás de Semantic UI */
.kv-zoom-dialog {
    z-index: 10001 !important;
}
.modal-backdrop {
    z-index: 10000 !important;
}
/* ---- fin Informe Diario ---- */

/* ---- Dropzone personalizado: Evidencia Fotográfica Informe Diario ---- */
.id-dropzone-container {
    background: #f2f4f6;
    border-radius: 8px;
    padding: 20px 12px 12px;
    min-height: 120px;
    width: 100%;        /* ← ocupa el ancho del contenedor padre */
    max-width: 900px;     /* ← opcional: limita el ancho máximo para pantallas grandes */
    margin: 0 auto; /* ← centra horizontalmente y agrega margen inferior */
    border: 2px dashed #dde1e6;
    transition: border-color 0.2s, background 0.2s;
}
.id-dropzone-container.id-dropzone-drag {
    border-color: #1e50d6;
    background: #eaf3fb;
}
.id-dropzone-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.id-dropzone-btn {
    background: #1e50d6;
    color: #fff;
    border: none;
    border-radius: 8px;          /* menos redondeado, más formal */
    padding: 10px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(74,144,217,0.30);
    letter-spacing: 0.01em;
}
.id-dropzone-btn:hover {
    background: #357abf;
    box-shadow: 0 4px 14px rgba(74,144,217,0.40);
}

.id-fotos-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: center;
}
.id-foto-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    padding: 10px;
    width: 148px;
    text-align: center;
    flex-shrink: 0;
}
.id-foto-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e0e2e5;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}
.id-foto-card-remove:hover { background: #e53935; color: #fff; }
.id-foto-card-img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: zoom-in;
    background: #f5f6f7;
}
.id-foto-card-name {
    font-size: 0.78rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 128px;
    margin: 0 auto;
}
.id-foto-card-size {
    font-size: 0.72rem;
    color: #888;
    margin-top: 2px;
}

/* Recién reemplazo */
.id-foto-card-titulo-wrap {
    display: flex;
    align-items: center;
    margin-top: 6px;
    border-bottom: 1.5px transparent solid;
    gap: 4px;
    transition: border-color 0.15s;
}
.id-foto-card-titulo-wrap:focus-within {
    border-bottom-color: #1e50d6;
}
.id-foto-card-titulo-wrap.has-value {
    border-bottom-color: #27ae60;
}
.id-foto-card-titulo-wrap.has-value:focus-within {
    border-bottom-color: #1e8449;
}
.id-foto-card-titulo {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 4px 2px;
    font-size: 14px;
    color: #333;
    outline: none;
    background: transparent;
    box-sizing: border-box;
}
.id-foto-card-titulo-edit {
    background: none;
    border: none;
    cursor: pointer;
    color: #bbb;
    font-size: 0.85 rem;
    padding: 0 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 0.15s;
}
.id-foto-card-titulo-edit:hover { color: #1e50d6; }
/* Lightbox propio (sin depender de Bootstrap/Semantic modal) */
#id-foto-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.id-ver-mas-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}
.id-ver-mas-btn {
    background: #fff;
    border: 1.5px solid #c8ccd2;
    border-radius: 20px;
    padding: 7px 22px;
    font-size: 0.82rem;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s;
} 
.id-ver-mas-btn:hover {
    border-color: #1e50d6;
    color: #1e50d6;
}
.id-ver-menos-btn {
    background: #fff;
    border: 1.5px solid #c8ccd2;
    border-radius: 20px;
    padding: 7px 22px;
    font-size: 0.82rem;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s;
    margin-left: 10px;
}
.id-ver-menos-btn:hover {
    border-color: #e53935;
    color: #e53935;
}

#id-foto-lightbox.visible { display: flex; }
#id-foto-lightbox-img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}
#id-foto-lightbox-close {
    position: absolute;
    top: 18px;
    right: 26px;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}
#id-foto-lightbox-close:hover { opacity: 1; }

/* Boton principal Guardar - Informe Diario */
.btn-guardar-id {
  min-width: 190px;
  height: 44px;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(133, 161, 46, 0.28);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-guardar-id:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(133, 161, 46, 0.36);
  filter: brightness(1.03);
}

.btn-guardar-id:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(133, 161, 46, 0.3);
}

.btn-guardar-id:focus {
  outline: 3px solid rgba(133, 161, 46, 0.25);
  outline-offset: 2px;
}

.btn-guardar-id i.icon {
  margin-right: 6px !important;
}

/* Cursor negro para firma digital */
.signature-cursor-black {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><line x1='12' y1='2' x2='12' y2='22' stroke='black' stroke-width='2'/><line x1='2' y1='12' x2='22' y2='12' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='1.5' fill='black'/></svg>") 12 12, crosshair !important;
}

/* =============================================
   Toast de notificación (showSuccessToast)
   ============================================= */
.toast-custom {
    background-color: #f0fdf4 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.20) !important;
    border-left: 6px solid #16a34a !important;
    min-width: 260px !important;
    max-width: 340px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Título del toast en negrita */
.toast-custom .header {
    font-weight: 700 !important;
    font-size: 1.2em !important;
    letter-spacing: 0.01em;
    color: #14532d !important;
}

/* Mensaje del toast */
.toast-custom .message {
    font-size: 1em !important;
    margin-top: 2px !important;
    color: rgba(20, 83, 45, 0.80) !important;
}

/* Ícono — círculo de fondo verde con check blanco */
.toast-custom > i.icon {
    order: 0 !important;
    flex-shrink: 0 !important;
    background-color: #16a34a !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 1em !important;
    width: 2.4em !important;
    height: 2.4em !important;
    line-height: 2.4em !important;
    text-align: center !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
    align-self: center !important;
    padding: 0 !important;
}

/* Contenido (título + mensaje) — después del ícono */
.toast-custom > .content {
    order: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Barra de progreso — ocupa toda la línea inferior */
.toast-custom .toast-progress {
    order: 2 !important;
    flex-basis: 100% !important;
    border-radius: 0 0 10px 10px !important;
    height: 3px !important;
    background-color: #16a34a !important;
    margin: 8px -14px -12px -14px !important;
}

/* =============================================
   Contador de fotos (Evidencia Fotográfica)
   ============================================= */
.fotos-counter {
    font-size: 0.78em;
    font-weight: 500;
    color: #8a94a6;
    background: #f1f3f6;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.01em;
    transition: background 0.25s, color 0.25s;
}
.fotos-counter-warn {
    color: #b45309;
    background: #fef3c7;
}
.fotos-counter-full {
    color: #b91c1c;
    background: #fee2e2;
}

/* Tabs filtro CCTV - indicador azul */
#cctv_filter_btns.ui.pointing.secondary.menu .active.item {
    border-color: #1a6bbf !important;
    color: #1a6bbf !important;
}
/* Badges CCTV: grises en pestañas inactivas, color natural en la activa */
#cctv_filter_btns .item:not(.active) .label {
    background-color: #c8c8c8 !important;
    color: #fff !important;
}

/* Modal CCTV - centrado vertical */
#modal_detalle_cctv.ui.modal,
#modal_detalle_reporte.ui.modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Tarjetas CCTV - hover interactivo */
#lista_solicitudes_cctv_container .ui.segment {
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
    cursor: pointer;
}
#lista_solicitudes_cctv_container .ui.segment:hover {
    background-color: #f7f9fc !important;
    box-shadow: 0 4px 16px rgba(26, 107, 191, 0.13) !important;
}

/* ── Semantic UI Calendar – Diseño moderno ────────────────────── */
.ui.calendar .ui.popup {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 280px !important;
}

/* Cabecera con mes/año y flechas */
.ui.calendar .ui.popup table thead tr:first-child th {
    background: #1a6bbf !important;
    color: #fff !important;
    font-size: 0.97em !important;
    font-weight: 600 !important;
    padding: 12px 6px !important;
    border: none !important;
    letter-spacing: 0.01em;
}
.ui.calendar .ui.popup table thead tr:first-child th:hover {
    background: #155a9f !important;
    cursor: pointer;
}

/* Fila de nombres de días */
.ui.calendar .ui.popup table thead tr:last-child th {
    background: #f0f5ff !important;
    color: #1a6bbf !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 7px 4px !important;
    border: none !important;
}

/* Celdas de días */
.ui.calendar .ui.popup table tbody td {
    border-radius: 8px !important;
    border: none !important;
    font-size: 0.88em !important;
    padding: 7px 5px !important;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.ui.calendar .ui.popup table tbody td:hover {
    background: #ddeeff !important;
    color: #1a6bbf !important;
}

/* Día seleccionado */
.ui.calendar .ui.popup table tbody td.active,
.ui.calendar .ui.popup table tbody td.active:hover {
    background: #1a6bbf !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

/* Hoy */
.ui.calendar .ui.popup table tbody td.today {
    font-weight: 700 !important;
    color: #1a6bbf !important;
    border: 2px solid #1a6bbf !important;
    border-radius: 8px !important;
}
.ui.calendar .ui.popup table tbody td.today.active {
    color: #fff !important;
    border-color: transparent !important;
}

/* Días fuera del mes actual */
.ui.calendar .ui.popup table tbody td.disabled,
.ui.calendar .ui.popup table tbody td.adjacent {
    color: #bbb !important;
}

/* Tabla del picker de hora – grid moderno */
.ui.calendar .ui.popup table.time tbody td {
    border-radius: 6px !important;
    font-size: 0.82em !important;
    padding: 7px 4px !important;
}
.ui.calendar .ui.popup table.time tbody td.active,
.ui.calendar .ui.popup table.time tbody td.active:hover {
    background: #1a6bbf !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}
.ui.calendar .ui.popup table.time tbody td:hover {
    background: #ddeeff !important;
    color: #1a6bbf !important;
}

/* Input con icono – borde y foco modernos */
.ui.calendar .ui.fluid.input input {
    border-radius: 8px !important;
    border: 1.5px solid #d0d8e8 !important;
    font-size: 0.95em !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ui.calendar .ui.fluid.input input:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    outline: none !important;
}

/* ── Informe Diario – Diseño mejorado v2 ─────────────────────────── */

/* Contenedor general */
#informe_diario_module .formulario .ui.styled.fluid {
    border-radius: 16px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
    border: 1px solid #dde6f0 !important;
    overflow: hidden;
    background: #f4f7fb !important;
}

/* ── Header del formulario ── */
#informe_diario_module #section_title {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    padding: 16px 22px !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#informe_diario_module #section_title span:first-child {
    color: #fff !important;
}
#informe_diario_module #section_title #id-draft-status {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.82em !important;
    font-weight: 400 !important;
}

/* ── Banner de borrador ── */
#informe_diario_module .ui.info.message {
    background: #eff6ff !important;
    border: none !important;
    border-bottom: 1px solid #cce0f8 !important;
    border-radius: 0 !important;
    color: #1a6bbf !important;
    font-size: 0.88em !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
}
#informe_diario_module .ui.info.message strong {
    color: #0f4d9e !important;
}
#informe_diario_module .ui.info.message .ui.blue.button {
    background: #1a6bbf !important;
    border-radius: 7px !important;
    font-size: 0.82em !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
}
#informe_diario_module .ui.info.message .ui.button:not(.blue) {
    background: transparent !important;
    border: 1px solid #c8d5e5 !important;
    color: #5a6a7e !important;
    border-radius: 7px !important;
    font-size: 0.82em !important;
    padding: 6px 14px !important;
}

/* ── Separadores de sección ── */
#informe_diario_module h4.ui.dividing.header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-bottom: 1px solid #dde8f5 !important;
    padding-bottom: 10px !important;
    margin: 22px 0 14px !important;
    color: #1a6bbf !important;
    font-size: 0.78em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}
/* Botón y contador dentro del encabezado se empujan al extremo derecho */
#informe_diario_module h4.ui.dividing.header > button,
#informe_diario_module h4.ui.dividing.header > span {
    margin-left: auto !important;
}
/* Línea vertical de acento antes del título de sección */
#informe_diario_module h4.ui.dividing.header::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 18px !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #1a6bbf, #2fa8e8) !important;
    flex-shrink: 0 !important;
}

/* ── Labels de campo ── */
#informe_diario_module .ui.form .field label.inline,
#informe_diario_module .ui.form .field label {
    color: #5a6a7e !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ── Inputs de texto ── */
#informe_diario_module .ui.form input[type="text"],
#informe_diario_module .ui.form input[type="number"],
#informe_diario_module .ui.form input[type="time"] {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 0 13px !important;
    height: 42px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
#informe_diario_module .ui.form input[type="text"]:focus,
#informe_diario_module .ui.form input[type="number"]:focus,
#informe_diario_module .ui.form input[type="time"]:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Inputs readonly – diferenciados visualmente */
#informe_diario_module .ui.form input[readonly] {
    background: #eef3fa !important;
    color: #5a6a7e !important;
    border-color: #d8e2ef !important;
    cursor: default !important;
}

/* Íconos dentro de inputs */
#informe_diario_module .ui.fluid.input.left.icon input,
#reporte_incidencia_module .ui.fluid.input.left.icon input {
    padding-left: 2.8em !important;
}
#informe_diario_module .ui.fluid.input.left.icon > i.icon,
#reporte_incidencia_module .ui.fluid.input.left.icon > i.icon {
    color: #1a6bbf !important;
    opacity: 0.75 !important;
}

/* ── Dropdowns ── */
#informe_diario_module .ui.form .ui.dropdown,
#informe_diario_module .ui.form .ui.selection.dropdown {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fafcff !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
    padding: 0 13px !important;
}
#informe_diario_module .ui.form .ui.dropdown:hover,
#informe_diario_module .ui.form .ui.dropdown.active,
#informe_diario_module .ui.form .ui.dropdown.visible {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
}
#informe_diario_module .ui.form .ui.dropdown > i.dropdown.icon {
    color: #1a6bbf !important;
    opacity: 0.8 !important;
}
#informe_diario_module .ui.form .ui.selection.dropdown .menu {
    border-radius: 10px !important;
    border: 1.5px solid #cce0f8 !important;
    box-shadow: 0 4px 16px rgba(26,107,191,0.1) !important;
    margin-top: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 18rem !important;
}
#informe_diario_module .ui.form .ui.selection.dropdown .menu .item:hover {
    background: #eff6ff !important;
    color: #1a6bbf !important;
}

/* ── Texto de ayuda automático (debajo de fecha/hora) ── */
#informe_diario_module small.ui.grey.text,
#informe_diario_module .ui.form .field small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 5px !important;
    font-weight: 400 !important;
}
#informe_diario_module small.ui.grey.text i.icon {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-size: 0.9em !important;
}

/* ── Sección Turno – tarjeta destacada ── */
#informe_diario_module .turno-section .ui.grid,
#informe_diario_module [data-section="turno"] .ui.grid {
    background: linear-gradient(135deg, #f0f7ff 0%, #fafcff 100%) !important;
    border: 1.5px solid #cce0f8 !important;
    border-radius: 12px !important;
    padding: 14px !important;
}

/* ── Espaciado entre columnas ── */
#informe_diario_module .ui.grid > .column {
    padding-bottom: 12px !important;
}

/* ── Separador interno entre grupos de campos ── */
#informe_diario_module .ui.form .ui.divider {
    border-color: #e4ecf6 !important;
    margin: 14px 0 !important;
}

/* ── Botones de acción del formulario ── */
#informe_diario_module .ui.form .ui.primary.button,
#informe_diario_module .ui.form .ui.blue.button {
    background: linear-gradient(90deg, #1a6bbf, #2176c7) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 11px 22px !important;
    transition: opacity 0.18s, box-shadow 0.18s !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.25) !important;
}
#informe_diario_module .ui.form .ui.primary.button:hover,
#informe_diario_module .ui.form .ui.blue.button:hover {
    opacity: 0.92 !important;
    box-shadow: 0 4px 14px rgba(26,107,191,0.32) !important;
}
#informe_diario_module .ui.form .ui.button:not(.primary):not(.blue):not(.icon) {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fff !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
    padding: 11px 20px !important;
    transition: border-color 0.18s, background 0.18s !important;
}
#informe_diario_module .ui.form .ui.button:not(.primary):not(.blue):not(.icon):hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}

/* ════════════════════════════════════════════════════════════
   Reporte de Incidencias — misma temática que el Informe Diario
════════════════════════════════════════════════════════════ */
#reporte_incidencia_module .ui.form .field label.inline,
#reporte_incidencia_module .ui.form .field label {
    color: #5a6a7e !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
    display: block !important;
}
#reporte_incidencia_module .ui.form input[type="text"],
#reporte_incidencia_module .ui.form input[type="number"],
#reporte_incidencia_module .ui.form input[type="time"],
#reporte_incidencia_module .ui.form input[type="date"] {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 0 13px !important;
    height: 42px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    width: 100% !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
#reporte_incidencia_module .ui.form textarea {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 10px 13px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    width: 100% !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
#reporte_incidencia_module .ui.form input[type="text"]:focus,
#reporte_incidencia_module .ui.form input[type="number"]:focus,
#reporte_incidencia_module .ui.form input[type="time"]:focus,
#reporte_incidencia_module .ui.form input[type="date"]:focus,
#reporte_incidencia_module .ui.form textarea:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}
#reporte_incidencia_module .ui.form input[readonly] {
    background: #eef3fa !important;
    color: #5a6a7e !important;
    border-color: #d8e2ef !important;
    cursor: default !important;
}
#reporte_incidencia_module .ui.form .ui.dropdown,
#reporte_incidencia_module .ui.form .ui.selection.dropdown {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fafcff !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
    padding: 0 13px !important;
}
#reporte_incidencia_module .ui.form .ui.dropdown:hover,
#reporte_incidencia_module .ui.form .ui.dropdown.active,
#reporte_incidencia_module .ui.form .ui.dropdown.visible {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
}
#reporte_incidencia_module .ui.form .ui.dropdown > i.dropdown.icon {
    color: #1a6bbf !important;
    opacity: 0.8 !important;
}
#reporte_incidencia_module .ui.form .ui.selection.dropdown .menu {
    border-radius: 10px !important;
    border: 1.5px solid #cce0f8 !important;
    box-shadow: 0 4px 16px rgba(26,107,191,0.1) !important;
    margin-top: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 18rem !important;
}
#reporte_incidencia_module .ui.form .ui.selection.dropdown .menu .item:hover {
    background: #eff6ff !important;
    color: #1a6bbf !important;
}
#reporte_incidencia_module .ui.grid > .column { padding-bottom: 12px !important; }

/* ── Informe Diario – Unificación completa del tema azul ──────────── */

/* Fondo blanco en cada bloque .content del formulario */
#informe_diario_module .formulario .ui.styled.fluid > .content {
    background: #fff !important;
    padding: 14px 20px !important;
}
/* Contenedor del mensaje de error: sin espacio cuando el mensaje está oculto */
#informe_diario_module .formulario .ui.styled.fluid > .content:has(> .ui.grid > #message_resume_form_diario.hidden) {
    padding: 0 !important;
    min-height: 0 !important;
}
/* Banner borrador: sin espacio cuando está oculto */
#informe_diario_module #id-draft-banner.hidden {
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
/* Banner borrador: padding ajustado cuando está visible */
#informe_diario_module #id-draft-banner:not(.hidden) {
    padding: 4px 20px 4px !important;
}
/* Reducir padding inferior del bloque del texto obligatorio */
#informe_diario_module .formulario .ui.styled.fluid > .content:has(> .ui.grid > p) {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}
/* Reducir padding superior del bloque del formulario principal para acercarlo al texto */
#informe_diario_module .formulario .ui.styled.fluid > .content:has(> form#form_informe_diario) {
    padding-top: 6px !important;
}

/* Acordeón de actividades – colores alineados al tema #1a6bbf */
#contenedor_actividades_informe_diario .act-accordion-id.ui.accordion {
    border: 1.5px solid #d8e8f6 !important;
    box-shadow: 0 1px 8px rgba(26,107,191,0.08) !important;
}
#contenedor_actividades_informe_diario .act-accordion-id .title {
    background: #f5f8fd !important;
    color: #2d3a4a !important;
    border-bottom: 1px solid #dde8f5 !important;
}
#contenedor_actividades_informe_diario .act-accordion-id .title.active {
    background: #e8f1fb !important;
    color: #1a6bbf !important;
}
.act-grupo-icon { color: #1a6bbf !important; }

/* Actividad item hover */
.actividad-item:hover { background: #f5f8fd !important; }
.act-item-num { color: #9aafc8 !important; }

/* Sí/No inactivos */
.act-btn-group .btn-act-id.basic {
    background: #e8edf4 !important;
    color: #8a9ab5 !important;
}

/* Observación – foco con azul del tema */
.act-item-obs .obs-field-id:focus,
.table-actividades-id .obs-field-id:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.10) !important;
    background: #fff !important;
}

/* Textarea de Observaciones adicionales */
#obs_adicionales_informe_diario {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 10px 13px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    resize: vertical;
    width: 100%;
}
#obs_adicionales_informe_diario:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Barra de progreso – alineada al tema */
#id-actividades-progress-text {
    color: #1a6bbf !important;
    font-size: 0.82em !important;
    font-weight: 700 !important;
}
#id-actividades-progress-bar {
    background: linear-gradient(90deg, #1a6bbf, #2fa8e8) !important;
    border-radius: 6px !important;
}

/* Botón "Marcar todo Sí" */
#informe_diario_module .ui.mini.green.basic.button {
    border: 1.5px solid #1a6bbf !important;
    color: #1a6bbf !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    background: transparent !important;
    transition: background 0.18s !important;
}
#informe_diario_module .ui.mini.green.basic.button:hover {
    background: #eff6ff !important;
    color: #1a6bbf !important;
}

/* Botón Guardar Informe */
#informe_diario_module .btn-guardar-id {
    background: linear-gradient(135deg, #4f7ed7 0%, #5a8ce0 50%, #3d6abf 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 36px !important;
    font-size: 0.95em !important;
    box-shadow: 0 4px 18px rgba(63,106,191,0.35), 0 1px 4px rgba(0,0,0,0.10) !important;
    margin-top: 10px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
#informe_diario_module .btn-guardar-id::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: -75% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.55s ease !important;
    pointer-events: none !important;
}
#informe_diario_module .btn-guardar-id:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(63,106,191,0.42), 0 2px 8px rgba(0,0,0,0.12) !important;
    filter: brightness(1.06) !important;
}
#informe_diario_module .btn-guardar-id:hover::after {
    left: 130% !important;
}
#informe_diario_module .btn-guardar-id:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(63,106,191,0.30) !important;
    filter: brightness(0.96) !important;
}
#informe_diario_module .btn-guardar-id i.icon {
    font-size: 1.1em !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

/* Dropzone de fotos */
#informe_diario_module .id-dropzone-container {
    border: 2px dashed #b8d0ef !important;
    border-radius: 12px !important;
    background: #f5f8fd !important;
    transition: border-color 0.2s, background 0.2s !important;
}
#informe_diario_module .id-dropzone-container:hover {
    border-color: #1a6bbf !important;
    background: #eef6ff !important;
}
#informe_diario_module .id-dropzone-btn {
    background: #1a6bbf !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.18s, box-shadow 0.18s !important;
}
#informe_diario_module .id-dropzone-btn:hover {
    background: #155a9f !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.28) !important;
}

/* Contador de fotos */
#id-fotos-counter {
    font-size: 0.78em !important;
    font-weight: 700 !important;
    color: #1a6bbf !important;
    background: #e4effc !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
}

/* Tarjeta de firma digital */
#signature_card_id {
    border-radius: 12px !important;
    border: 1.5px solid #d8e8f6 !important;
    box-shadow: 0 2px 12px rgba(26,107,191,0.09) !important;
}
#signature_pad_id_wrapper {
    border: 1.5px solid #c8d9ef !important;
    border-radius: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   Registro de Infracciones – Tema unificado (igual que Informe Diario)
   ══════════════════════════════════════════════════════════════════ */

/* Contenedor general */
#registro_infracciones_module .formulario .ui.styled.fluid {
    border-radius: 16px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
    border: 1px solid #dde6f0 !important;
    overflow: visible !important;
    background: #f4f7fb !important;
}

/* Header gradiente */
#registro_infracciones_module #section_title {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    padding: 16px 22px !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 15px 15px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#registro_infracciones_module #section_title span:first-child {
    color: #fff !important;
}
#registro_infracciones_module #section_title #infr-draft-status {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.82em !important;
    font-weight: 400 !important;
}

/* Banner de borrador – info message */
#registro_infracciones_module .ui.info.message {
    background: #eff6ff !important;
    border: none !important;
    border-bottom: 1px solid #cce0f8 !important;
    border-radius: 0 !important;
    color: #1a6bbf !important;
    font-size: 0.88em !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
}
#registro_infracciones_module .ui.info.message strong {
    color: #0f4d9e !important;
}
#registro_infracciones_module .ui.info.message .ui.primary.button {
    background: #1a6bbf !important;
    border-radius: 7px !important;
    font-size: 0.82em !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
}
#registro_infracciones_module .ui.info.message .ui.button:not(.primary) {
    background: transparent !important;
    border: 1px solid #c8d5e5 !important;
    color: #5a6a7e !important;
    border-radius: 7px !important;
    font-size: 0.82em !important;
    padding: 6px 14px !important;
}

/* Bloques .content – fondo blanco */
#registro_infracciones_module .formulario .ui.styled.fluid > .content {
    background: #fff !important;
    padding: 14px 20px !important;
}
/* Mensaje de error oculto: sin espacio */
#registro_infracciones_module .formulario .ui.styled.fluid > .content:has(> .ui.grid > #message_resume_form_infracciones.hidden) {
    padding: 0 !important;
    min-height: 0 !important;
}
/* Banner borrador oculto: sin espacio */
#registro_infracciones_module #infr-draft-banner.hidden {
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
/* Banner borrador visible: padding ajustado */
#registro_infracciones_module #infr-draft-banner:not(.hidden) {
    padding: 4px 20px 4px !important;
}
/* Bloque del texto obligatorio */
#registro_infracciones_module .formulario .ui.styled.fluid > .content:has(> .ui.grid > p) {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}
/* Bloque del formulario principal */
#registro_infracciones_module .formulario .ui.styled.fluid > .content:has(> form#form_registro_infracciones) {
    padding-top: 6px !important;
}
/* Forzar scroll con rueda del mouse dentro del menú desplegable */
#registro_infracciones_module .ui.dropdown .menu,
#registro_infracciones_module .ui.selection.dropdown .menu {
    max-height: 220px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Separadores de sección (h4) */
#registro_infracciones_module h4.ui.dividing.header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-bottom: 1px solid #dde8f5 !important;
    padding-bottom: 10px !important;
    margin: 22px 0 14px !important;
    color: #1a6bbf !important;
    font-size: 0.78em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}
#registro_infracciones_module h4.ui.dividing.header > button,
#registro_infracciones_module h4.ui.dividing.header > span {
    margin-left: auto !important;
}
#registro_infracciones_module h4.ui.dividing.header::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 18px !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #1a6bbf, #2fa8e8) !important;
    flex-shrink: 0 !important;
}

/* Labels */
#registro_infracciones_module .ui.form .field label.inline,
#registro_infracciones_module .ui.form .field label {
    color: #5a6a7e !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Inputs de texto */
#registro_infracciones_module .ui.form input[type="text"],
#registro_infracciones_module .ui.form input[type="number"] {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 0 13px !important;
    height: 42px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
#registro_infracciones_module .ui.form input[type="text"]:focus,
#registro_infracciones_module .ui.form input[type="number"]:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}
/* Inputs readonly */
#registro_infracciones_module .ui.form input[readonly] {
    background: #eef3fa !important;
    color: #5a6a7e !important;
    border-color: #d8e2ef !important;
    cursor: default !important;
}
/* Íconos dentro de inputs */
#registro_infracciones_module .ui.fluid.input.left.icon input {
    padding-left: 2.8em !important;
}
#registro_infracciones_module .ui.fluid.input.left.icon > i.icon {
    color: #1a6bbf !important;
    opacity: 0.75 !important;
}

/* Dropdowns */
#registro_infracciones_module .ui.form .ui.dropdown,
#registro_infracciones_module .ui.form .ui.selection.dropdown {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fafcff !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    padding: 0 13px !important;
}
#registro_infracciones_module .ui.form .ui.dropdown:hover,
#registro_infracciones_module .ui.form .ui.dropdown.active,
#registro_infracciones_module .ui.form .ui.dropdown.visible {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
}
#registro_infracciones_module .ui.form .ui.dropdown > i.dropdown.icon {
    color: #1a6bbf !important;
    opacity: 0.8 !important;
}
#registro_infracciones_module .ui.form .ui.selection.dropdown .menu {
    border-radius: 10px !important;
    border: 1.5px solid #cce0f8 !important;
    box-shadow: 0 4px 16px rgba(26,107,191,0.1) !important;
    margin-top: 4px !important;
    overflow: hidden;
}
#registro_infracciones_module .ui.form .ui.selection.dropdown .menu .item:hover {
    background: #eff6ff !important;
    color: #1a6bbf !important;
}

/* Texto de ayuda (small) — igual que informe diario: gris simple */
#registro_infracciones_module .ui.form .field small {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 4px !important;
    font-weight: normal !important;
}

/* Radio checkboxes – llamado de atención */
#registro_infracciones_module .ui.radio.checkbox input:checked ~ label::before {
    border-color: #1a6bbf !important;
}
#registro_infracciones_module .ui.radio.checkbox input:checked ~ label::after {
    background-color: #1a6bbf !important;
}
#registro_infracciones_module .ui.radio.checkbox label {
    font-size: 0.88em !important;
    color: #2d3748 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Textarea descripción */
#descripcion_falta_infracciones {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 10px 13px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    resize: vertical;
    width: 100%;
}
#descripcion_falta_infracciones:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Espaciado entre columnas */
#registro_infracciones_module .ui.grid > .column {
    padding-bottom: 12px !important;
}

/* Dropzone de fotos */
#registro_infracciones_module .id-dropzone-container {
    border: 2px dashed #b8d0ef !important;
    border-radius: 12px !important;
    background: #f5f8fd !important;
    transition: border-color 0.2s, background 0.2s !important;
}
#registro_infracciones_module .id-dropzone-container:hover {
    border-color: #1a6bbf !important;
    background: #eef6ff !important;
}
#registro_infracciones_module .id-dropzone-btn {
    background: #1a6bbf !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-size: 0.73em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.18s, box-shadow 0.18s !important;
}
#registro_infracciones_module .id-dropzone-btn:hover {
    background: #155a9f !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.28) !important;
}

/* Contador de fotos */
#infr-fotos-counter {
    font-size: 0.78em !important;
    font-weight: 700 !important;
    color: #1a6bbf !important;
    background: #e4effc !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
}

/* Tarjeta de video en evidencia */
.id-video-card video.id-foto-card-img {
    width: 100% !important;
    max-height: 130px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    background: #000 !important;
    display: block !important;
}
/* Separador entre fotos y videos */
.infr-video-sep {
    width: 100%;
    font-size: 0.78em;
    font-weight: 700;
    color: #1a6bbf;
    background: #f0f0fa;
    border-radius: 6px;
    padding: 4px 10px;
    margin: 8px 0 4px 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Botón Agregar Imagen – gris al desactivarse */
#btn_agregar_imagen_infr:disabled {
    background: #9e9fba !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}
/* Botón Agregar Video – color violeta al desactivarse */
#btn_agregar_video_infr:disabled {
    background: #9e9fba !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Tarjetas de firma digital */
#signature_card_infr_inspector,
#signature_card_infr_ocupante {
    border-radius: 12px !important;
    border: 1.5px solid #d8e8f6 !important;
    box-shadow: 0 2px 12px rgba(26,107,191,0.09) !important;
}
#signature_pad_infr_inspector_wrapper,
#signature_pad_infr_ocupante_wrapper {
    border: 1.5px solid #c8d9ef !important;
    border-radius: 10px !important;
}

/* Botones secundarios dentro del formulario (limpiar, subir firma) */
#registro_infracciones_module .ui.basic.button {
    border: 1.5px solid #d0dcea !important;
    border-radius: 8px !important;
    color: #4a5568 !important;
    transition: border-color 0.18s, background 0.18s !important;
}
#registro_infracciones_module .ui.basic.button:hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}

/* Botón "Nuevo ocupante" */
#btn_nuevo_ocupante_infr,
#btn_nueva_area_informe {
    background: linear-gradient(90deg, #1a6bbf, #2176c7) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 6px rgba(26,107,191,0.22) !important;
    /* Tamaño absoluto para que ambos botones se vean idénticos
       sin importar la fuente base del formulario que los contiene */
    font-size: 11px !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
}
#btn_nuevo_ocupante_infr i.icon,
#btn_nueva_area_informe i.icon {
    font-size: 1em !important;
}
/* Mayor especificidad (2 ids) para ganarle a la regla
   #informe_diario_module .ui.form .ui.primary.button (padding 11px 22px) */
#informe_diario_module #btn_nueva_area_informe {
    background: linear-gradient(90deg, #1a6bbf, #2176c7) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 6px rgba(26,107,191,0.22) !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
}

/* Botón Guardar */
#btn_save_infracciones {
    background: linear-gradient(135deg, #1665b5 0%, #1a6bbf 50%, #2176c7 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 36px !important;
    font-size: 0.95em !important;
    box-shadow: 0 4px 18px rgba(26,107,191,0.35), 0 1px 4px rgba(0,0,0,0.10) !important;
    margin-top: 10px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
#btn_save_infracciones::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: -75% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.55s ease !important;
    pointer-events: none !important;
}
#btn_save_infracciones:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(26,107,191,0.42), 0 2px 8px rgba(0,0,0,0.12) !important;
    filter: brightness(1.06) !important;
}
#btn_save_infracciones:hover::after {
    left: 130% !important;
}
#btn_save_infracciones:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.30) !important;
    filter: brightness(0.96) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Solicitud CCTV – Tema unificado (igual que Informe Diario)
   ══════════════════════════════════════════════════════════════════ */

/* Contenedor general */
#solicitud_cctv_form_module .formulario .ui.styled.fluid {
    border-radius: 16px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
    border: 1px solid #dde6f0 !important;
    overflow: hidden;
    background: #f4f7fb !important;
}

/* Header gradiente */
#solicitud_cctv_form_module #section_title {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    padding: 16px 22px !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
#solicitud_cctv_form_module #section_title span {
    color: #fff !important;
}

/* Bloques .content – fondo blanco */
#solicitud_cctv_form_module .formulario .ui.styled.fluid > .content {
    background: #fff !important;
    padding: 14px 20px !important;
}
/* Mensaje de error oculto: sin espacio */
#solicitud_cctv_form_module .formulario .ui.styled.fluid > .content:has(> .ui.grid > #message_resume_form_cctv.hidden) {
    padding: 0 !important;
    min-height: 0 !important;
}
/* Bloque del texto obligatorio */
#solicitud_cctv_form_module .formulario .ui.styled.fluid > .content:has(> .ui.grid > p) {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}
/* Labels */
#solicitud_cctv_form_module .ui.form .field label.inline,
#solicitud_cctv_form_module .ui.form .field label {
    color: #5a6a7e !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
    display: block !important;
}
/* Labels de "Desde" / "Hasta" dentro del rango de hora */
#solicitud_cctv_form_module .ui.form .field label[style] {
    font-size: 0.76em !important;
    text-transform: uppercase !important;
}

/* Inputs de texto */
#solicitud_cctv_form_module .ui.form input[type="text"],
#solicitud_cctv_form_module .ui.form input[type="number"] {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 0 13px !important;
    height: 42px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
#solicitud_cctv_form_module .ui.form input[type="text"]:focus,
#solicitud_cctv_form_module .ui.form input[type="number"]:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Íconos dentro de inputs */
#solicitud_cctv_form_module .ui.fluid.input.left.icon input {
    padding-left: 2.8em !important;
}
#solicitud_cctv_form_module .ui.fluid.input.left.icon > i.icon {
    color: #1a6bbf !important;
    opacity: 0.75 !important;
}

/* Textareas */
#descripcion_hechos_cctv,
#descripcion_sujetos_cctv {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    padding: 10px 13px !important;
    font-size: 0.95em !important;
    color: #2d3748 !important;
    background: #fafcff !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    resize: vertical;
    width: 100%;
}
#descripcion_hechos_cctv:focus,
#descripcion_sujetos_cctv:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Contadores de caracteres */
#cctv-hechos-counter,
#cctv-sujetos-counter {
    font-size: 0.75em !important;
    font-weight: 600 !important;
    color: #1a6bbf !important;
    background: #e4effc !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
}

/* Botones de Tipo de Usuario */
#tipo_usuario_cctv_group .tipo-usuario-btn {
    border-radius: 8px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fafcff !important;
    color: #4a5568 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s, color 0.18s !important;
    padding: 10px 14px !important;
}
#tipo_usuario_cctv_group .tipo-usuario-btn:hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}
#tipo_usuario_cctv_group .tipo-usuario-btn.active,
#tipo_usuario_cctv_group .tipo-usuario-btn.selected {
    background: #1a6bbf !important;
    border-color: #1a6bbf !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.25) !important;
}

/* Botones de Motivo */
#solicitud_cctv_form_module .motivo-btn {
    border-radius: 8px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fafcff !important;
    color: #4a5568 !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s, color 0.18s !important;
    padding: 9px 10px !important;
    text-align: center !important;
}
#solicitud_cctv_form_module .motivo-btn:hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}
#solicitud_cctv_form_module .motivo-btn.active,
#solicitud_cctv_form_module .motivo-btn.selected {
    background: #1a6bbf !important;
    border-color: #1a6bbf !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.25) !important;
}

/* Espaciado entre columnas */
#solicitud_cctv_form_module .ui.grid > .column {
    padding-bottom: 12px !important;
}

/* Botón Enviar */
#solicitud_cctv_form_module .ui.button.bg-inspection.right_button {
    background: linear-gradient(135deg, #1e50d6 0%, #083ac3 50%, #06299a 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 36px !important;
    font-size: 0.95em !important;
    box-shadow: 0 4px 18px rgba(109,139,34,0.35), 0 1px 4px rgba(0,0,0,0.10) !important;
    margin-top: 10px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
#solicitud_cctv_form_module .ui.button.bg-inspection.right_button::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: -75% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.55s ease !important;
    pointer-events: none !important;
}
#solicitud_cctv_form_module .ui.button.bg-inspection.right_button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(109,139,34,0.42), 0 2px 8px rgba(0,0,0,0.12) !important;
    filter: brightness(1.06) !important;
}
#solicitud_cctv_form_module .ui.button.bg-inspection.right_button:hover::after {
    left: 130% !important;
}
#solicitud_cctv_form_module .ui.button.bg-inspection.right_button:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(109,139,34,0.30) !important;
    filter: brightness(0.96) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Investigaciones CCTV – Lista + Modal – Tema unificado
   ══════════════════════════════════════════════════════════════════ */

/* ── Lista de Solicitudes ─────────────────────────────────────────── */

/* Contenedor general */
#investigaciones_cctv_module .formulario .ui.styled.fluid {
    border-radius: 16px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
    border: 1px solid #dde6f0 !important;
    overflow: hidden;
    background: #f4f7fb !important;
}

/* Header gradiente */
#investigaciones_cctv_module #section_title {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    padding: 16px 22px !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 0 !important;
}
#investigaciones_cctv_module #section_title span {
    color: #fff !important;
}

/* Bloque .content – fondo blanco */
#investigaciones_cctv_module .formulario .ui.styled.fluid > .content {
    background: #fff !important;
    padding: 14px 20px !important;
}

/* Menú de filtros – tema azul */
#cctv_filter_btns.ui.pointing.secondary.menu {
    border-bottom: 2px solid #dde8f5 !important;
    margin-bottom: 14px !important;
}
#cctv_filter_btns.ui.pointing.secondary.menu .item {
    color: #5a6a7e !important;
    font-size: 0.83em !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.18s, border-color 0.18s !important;
}
#cctv_filter_btns.ui.pointing.secondary.menu .item:hover {
    color: #1a6bbf !important;
    border-bottom-color: #b8d0ef !important;
}
#cctv_filter_btns.ui.pointing.secondary.menu .item.active {
    color: #1a6bbf !important;
    border-bottom: 2px solid #1a6bbf !important;
    background: transparent !important;
}
/* Badges de conteo en el menú */
#cctv_filter_btns .ui.mini.circular.label {
    font-size: 0.72em !important;
    padding: 3px 6px !important;
}
#cctv_filter_btns .ui.mini.circular.blue.label {
    background: #1a6bbf !important;
    color: #fff !important;
}

/* ── Modal: Detalle de Solicitud CCTV ────────────────────────────── */

/* Header del modal */
#modal_detalle_cctv.ui.modal > .header {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
}
#modal_detalle_cctv.ui.modal > .header span:first-child {
    color: #fff !important;
}

/* Badge de estado */
#modal_badge_sc {
    border-radius: 50px !important;
    font-size: 0.72em !important;
    padding: 5px 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

/* Scrolling content – fondo neutro */
#modal_detalle_cctv .scrolling.content {
    background: #f4f7fb !important;
    padding: 16px 18px !important;
}

/* Input de cámara */
#modal_cctv_camara {
    border: 1.5px solid #d0dcea !important;
    border-radius: 10px !important;
    padding: 9px 13px !important;
    font-size: 0.95em !important;
    background: #fafcff !important;
    color: #2d3748 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-sizing: border-box !important;
}
#modal_cctv_camara:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Textarea de descripción observada */
#modal_cctv_descripcion_obs {
    border: 1.5px solid #d0dcea !important;
    border-radius: 10px !important;
    padding: 9px 13px !important;
    font-size: 0.92em !important;
    background: #fafcff !important;
    color: #2d3748 !important;
    line-height: 1.5 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}
#modal_cctv_descripcion_obs:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* Dropzone de fotos en el modal */
#modal-cctv-dropzone {
    border: 2px dashed #b8d0ef !important;
    border-radius: 12px !important;
    background: #f5f8fd !important;
    transition: border-color 0.2s, background 0.2s !important;
}
#modal-cctv-dropzone:hover {
    border-color: #1a6bbf !important;
    background: #eef6ff !important;
}
#modal-cctv-dropzone .id-dropzone-btn {
    background: #1a6bbf !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.18s, box-shadow 0.18s !important;
}
#modal-cctv-dropzone .id-dropzone-btn:hover {
    background: #155a9f !important;
    box-shadow: 0 2px 8px rgba(26,107,191,0.28) !important;
}

/* Botón Guardar Investigación */
#modal_cctv_inv_section .ui.button.bg-inspection {
    background: linear-gradient(135deg, #1e50d6 0%, #083ac3 50%, #06299a 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 13px 24px !important;
    font-size: 0.92em !important;
    box-shadow: 0 4px 18px rgba(109,139,34,0.30) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
#modal_cctv_inv_section .ui.button.bg-inspection:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(109,139,34,0.38) !important;
    filter: brightness(1.06) !important;
}
#modal_cctv_inv_section .ui.button.bg-inspection:active {
    transform: translateY(1px) !important;
    filter: brightness(0.96) !important;
}

/* Botón Cerrar del modal */
#modal_detalle_cctv .actions {
    background: #f4f7fb !important;
    border-top: 1px solid #dde8f5 !important;
    padding: 10px 18px !important;
}
#modal_detalle_cctv .actions .ui.button {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fff !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s !important;
}
#modal_detalle_cctv .actions .ui.button:hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}

/* ── Modal: Crear Nuevo Ocupante – Temática CCTV ─────────────────── */
#modal_nuevo_ocupante_infr.ui.modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 620px !important;
    max-width: 96vw !important;
    height: auto !important;
    min-height: 0 !important;
}
#modal_nuevo_ocupante_infr.ui.modal > .header {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
}
#modal_nuevo_ocupante_infr.ui.modal > .header i.icon {
    color: #fff !important;
}
#modal_nuevo_ocupante_infr .content {
    background: #f4f7fb !important;
    padding: 16px 18px !important;
}
/* Inputs del formulario */
#form_modal_nuevo_ocupante_infr input[type="text"],
#form_modal_nuevo_ocupante_infr input[type="email"] {
    border: 1.5px solid #d0dcea !important;
    border-radius: 10px !important;
    padding: 9px 13px !important;
    font-size: 0.95em !important;
    background: #fafcff !important;
    color: #2d3748 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-sizing: border-box !important;
}
#form_modal_nuevo_ocupante_infr input[type="text"]:focus,
#form_modal_nuevo_ocupante_infr input[type="email"]:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}
#form_modal_nuevo_ocupante_infr input[readonly] {
    background: #eef2f8 !important;
    color: #6b7a8d !important;
    cursor: default !important;
}
#form_modal_nuevo_ocupante_infr label {
    color: #3d5068 !important;
    font-weight: 600 !important;
    font-size: 0.88em !important;
    letter-spacing: 0.03em !important;
}
/* Barra de acciones */
#modal_nuevo_ocupante_infr .actions {
    background: #f4f7fb !important;
    border-top: 1px solid #dde8f5 !important;
    padding: 10px 18px !important;
}
#modal_nuevo_ocupante_infr .actions .ui.button:not(.primary) {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fff !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s !important;
}
#modal_nuevo_ocupante_infr .actions .ui.button:not(.primary):hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}
#modal_nuevo_ocupante_infr .actions .ui.primary.button {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: filter 0.18s, box-shadow 0.18s !important;
}
#modal_nuevo_ocupante_infr .actions .ui.primary.button:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 14px rgba(26,107,191,0.30) !important;
}

/* ===== Modal Crear Nueva Área (mismo diseño que Nuevo Ocupante) ===== */
#modal_nueva_area_informe.ui.modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 620px !important;
    max-width: 96vw !important;
    height: auto !important;
    min-height: 0 !important;
}
#modal_nueva_area_informe.ui.modal > .header {
    background: linear-gradient(100deg, #0f4d9e 0%, #1a6bbf 60%, #2176c7 100%) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
}
#modal_nueva_area_informe.ui.modal > .header i.icon {
    color: #fff !important;
}
#modal_nueva_area_informe .content {
    background: #f4f7fb !important;
    padding: 16px 18px !important;
}
/* Inputs y selects del formulario */
#form_modal_nueva_area_informe input[type="text"],
#form_modal_nueva_area_informe input[type="number"],
#form_modal_nueva_area_informe select {
    border: 1.5px solid #d0dcea !important;
    border-radius: 10px !important;
    padding: 9px 13px !important;
    font-size: 0.95em !important;
    background: #fafcff !important;
    color: #2d3748 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
#form_modal_nueva_area_informe input[type="text"]:focus,
#form_modal_nueva_area_informe input[type="number"]:focus,
#form_modal_nueva_area_informe select:focus {
    border-color: #1a6bbf !important;
    box-shadow: 0 0 0 3px rgba(26,107,191,0.12) !important;
    background: #fff !important;
    outline: none !important;
}
#form_modal_nueva_area_informe input[readonly] {
    background: #eef2f8 !important;
    color: #6b7a8d !important;
    cursor: default !important;
}
#form_modal_nueva_area_informe label {
    color: #3d5068 !important;
    font-weight: 600 !important;
    font-size: 0.88em !important;
    letter-spacing: 0.03em !important;
}
/* Barra de acciones */
#modal_nueva_area_informe .actions {
    background: #f4f7fb !important;
    border-top: 1px solid #dde8f5 !important;
    padding: 10px 18px !important;
}
#modal_nueva_area_informe .actions .ui.button:not(.primary) {
    border-radius: 10px !important;
    border: 1.5px solid #d0dcea !important;
    background: #fff !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s !important;
}
#modal_nueva_area_informe .actions .ui.button:not(.primary):hover {
    border-color: #1a6bbf !important;
    background: #eff6ff !important;
    color: #1a6bbf !important;
}
#modal_nueva_area_informe .actions .ui.primary.button {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: filter 0.18s, box-shadow 0.18s !important;
}
#modal_nueva_area_informe .actions .ui.primary.button:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 14px rgba(26,107,191,0.30) !important;
}