@import './association/association.css';
@import './administrator/administrator.css';
@import './map/map.css';
@import './device/device.css';
@import './fault/fault.css';
@import './report/report.css';
@import './common/common.css';
@import './user/user.css';
@import './help/help.css';
@import './scanner/scanner.css';
@import './todo/todo.css';
@import './notifications/notifications.css';
@import './variables.css';

.kml-loader {
	width: 270px;
	height: 60px;
	padding-top: 10px;
}
.loader-text {
	padding-left: 15px;
}
#ocultar {
	display: none;
}
#chk:checked + #ocultar {
    border: 1px solid #6b829d;
    background-color: #e8eaef;
    padding: 5px;
    display: block;
    position: absolute;
    z-index: 2000 !important;
    margin: 0 0 0 0;
}
.viewer {
	height: 45px;
	z-index: 2010 !important;
	position: absolute;
	margin: 0 0 0 -40px;
	border-radius: 10px;
}
.btn-viewer {
	color: #fff;
	background-color: #393b4a;
	border-color: #f2f4f9;
}
.btn-viewer:hover {
	color: cyan;
	background-color: #393b4a;
	border-color: #f2f4f9;
}

.login {
	padding-top: 50px;
	margin: 0 auto;
}

html,
body,
div[ng-view] {
	height: 100%;
	font-size: var(--base-font-size);
}

.section-icon {
	font-size: 20px;
	padding: 10px;
}

.avatar-min {
	width: 50px;
}
.avatar-mid {
	width: 100px;
}
.avatar-big {
	width: 150px;
}

.text-purple {
	color: #8822ee;
}

.text-whatsapp {
	color: #19d740;
}

.text-no-habitable {
	color: rgba(255, 0, 0, 0.4);
}

.text-premises {
	color: rgb(191, 213, 253);
}

.relative {
	position: relative;
}

.loader {
	color: #e2321c;
	font-size: 90px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	margin: 72px auto;
	position: relative;
	top: calc(50% - 2.5em);
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation:
		load6 1.7s infinite ease,
		round 1.7s infinite ease;
	animation:
		load6 1.7s infinite ease,
		round 1.7s infinite ease;
}

.y-scroll {
	overflow-y: auto;
}

label {
	width: 100%;
}

label .text {
	text-transform: uppercase;
	text-decoration: underline;
	font-weight: 600;
	color: #434344;
	padding-left: 1rem;
	letter-spacing: 0.2rem;
	font-size: 0.9rem;
}

label input.important {
	color: black;
	font-size: 1.2rem;
	font-weight: bold;
}

textarea {
	resize: none;
}

input,
select,
textarea {
	margin: 0 auto;
	display: block;
	height: 2.5rem;
	padding: 0 1rem;
	color: #5a5a5a;
	letter-spacing: 0.05rem;
	width: 100%;
	border: none;
	background: rgb(150 150 150 / 10%);
	border-bottom: 1px solid var(--main-color);
	border-top-right-radius: 0.3rem;
	border-top-left-radius: 0.3rem;
}

input[readonly],
select[disabled],
textarea[disabled] {
	border-color: transparent;
	background: none;
	outline: none;
	appearance: none;
}

input.reversed,
select.reversed,
textarea.reversed {
	color: white;
	background: rgb(150 150 150 / 40%);
}

select.reversed option {
	background-color: rgb(107 116 124);
}

input[type='checkbox'] {
	width: 1.2rem;
	display: initial;
	height: 1.2rem;
}

.input-group {
	display: flex;
}

.input-group input,
.input-group select {
	width: calc(100% - 30px);
}

.input-button {
	font-size: 0;
}

.input-button > * {
	display: inline-block;
	width: calc(100% - 2.5rem);
}

.inline-block {
	display: inline-block;
}

.input-button button {
	margin-bottom: calc(0.5rem + 2px);
	height: 2.5rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	width: 2.5rem;
}

.input-button input {
	border-top-right-radius: 0;
}

.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
}

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

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.flex-justify-end {
	display: flex;
	justify-content: flex-end;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.gap-1 {
	gap: 1rem;
}

.mb-05 {
	margin-bottom: 0.5rem;
}

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

button {
	padding: 0.5rem 1rem;
	border: 1px solid var(--main-color);
	border-radius: 0.3rem;
	box-shadow: 5px 5px 10px 0 rgb(150 150 150 / 30%);
	background: none;
}

button.icon-button {
	font-size: 1.5rem;
}

button.secondary {
	background-color: rgb(var(--main-color-values) / 60%);
}

.button-group {
	font-size: 0;
	border: 1px solid var(--main-color);
	border-radius: 0.3rem;
	box-shadow: 5px 5px 10px 0 rgb(150 150 150 / 30%);
	display: inline-block;
}

button.danger {
	border-color: var(--danger);
	background-color: rgb(var(--danger-values) / 0.3);
	position: relative;
}

.button-bar .button-group button,
.button-group button {
	margin: 0;
	border-radius: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: 0;
	box-shadow: none;
}

.button-group button:first-child {
	border-left: 0;
	border-top-left-radius: 0.3rem;
	border-bottom-left-radius: 0.3rem;
}

.button-group button:last-child {
	border-top-right-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}

.table .table-row {
	display: grid;
	gap: 0px 0px;
	grid-auto-flow: row;
	padding: 0 0 5px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-left: 5px;
}

.table .table-row.selected {
	background-color: #eff5dd;
	color: #000000;
	/*padding-left: 5px;*/
}

.table-row.selected:before,
.table-row.selected:after {
	content: '';
	position: absolute;
	height: calc(100% + 1px);
	width: 10px;
	background: white;
}

.table-row.selected:before {
	right: calc(100% - 1px);
}

.table-row.selected:after {
	left: calc(100% - 1px);
}

.table .table-row:last-child {
	border-bottom: none;
}

.table .table-row.table-subheader {
	background-color: var(--grey);
	padding-top: 5px;
}

.table .table-row.table-subheader + .table-row:not(.table-subheader) {
	padding-top: 5px;
}

.table .table-column {
	padding: 0 1rem;
	/* ghadda
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;*/
}
.table-column-first {
	margin-left: -12px;
}
.state0 {
	text-align: center;
	border-radius: 4px;
	padding: 2px 10px 4px 8px;
	width: 39px;
	background-color: #dc2b2b;
	color: white;
}
.state1 {
	text-align: center;
	border-radius: 4px;
	padding: 2px 10px 4px 8px;
	width: 50px;
	background-color: #3ca80f;
	color: white;
}
.stateLine0 {
	background-color: #d2b3b3;
}
.stateLine1 {
	background-color: #d1dacd;
}
.table .table-column.icon-column {
	align-items: center;
}

.table .table-column.left {
	align-items: flex-start;
}

.button-bar button {
	margin-left: 1rem;
}

.small-detail-header {
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 1rem;
}

.small-detail-header .info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.small-detail-header .info .address {
	font-size: 1.2rem;
}

.small-detail-header .actions {
	display: flex;
	align-items: center;
}

.block-title {
	height: 40px;
	background: #393b4a;
	color: white;
	padding: 5px;
	display: flex;
	align-items: center;
}

.block-body {
	padding: 1rem 0;
}

.headers {
	height: 25px;
	background: #393b4a;
	color: white;
	padding-left: 5px;
}
.table .headers .table-row {
	padding: 0;
}

.detail-header {
	padding: 1rem;
	padding-left: 5rem;
	position: relative;
}

.full-screen-detail {
	background-color: var(--pale-grey);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.full-screen-detail .header {
	margin-top: 15px;
	background: white;
	border-bottom: 1px solid var(--light-grey);
	box-shadow: var(--box-shadow);
	position: fixed;
	top: var(--menu-size);
	display: flex;
	flex-wrap: wrap;
	z-index: 10;
}
.section-name {
	font-size: 1.7rem;
	margin-right: 0.4rem;
	color: black;
}
.header .action {
	position: absolute;
	left: 0px;
	height: 100%;
	top: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	width: 6rem;
}

.full-screen-detail .header .action i {
	width: var(--menu-size);
	height: var(--menu-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.full-screen-detail .header .button-bar {
	/* flex-basis: 100%; */
	display: flex;
	align-items: center;
}

.full-screen-detail .header .button-bar i {
	display: flex;
	align-items: center;
	justify-content: center;
}

.full-screen-detail .body {
	display: flex;
	flex-wrap: wrap;
	padding-left: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
}

.full-screen-detail .body .space-saver {
	width: 100%;
}

.block {
	border: 1px solid var(--light-grey);
	border-radius: 0.5rem;
	box-shadow: 0 2px 10px 0 var(--light-grey);
	background: #254b910f;
	overflow: hidden;
	/*margin-right: 20px;
  margin-top: 20px;*/
}

.block.dark-shadow {
	box-shadow: 0 2px 10px 0 black;
}

.block.double {
	flex-grow: 2;
}

.block.full {
	flex-basis: 100%;
}

.block.fill {
	flex-grow: 1;
}

.block .block-header {
	box-shadow: var(--light-box-shadow);
	padding: 0.5rem 1.5rem;
	color: black;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	background: #23428a26;
}

.block .block-body {
	padding: 1.5rem;
}

/* Slider checkbox */
.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	margin-bottom: 0;

	--switch-left-color: #ccc;
	--switch-right-color: #ff0000;
}

.switch input {
	opacity: 0;
}
.switch-pos {
	padding-bottom: 25px;
}

.switch .slider {
	height: 24px;
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--switch-left-color);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 34px;
}

.switch .slider:before {
	text-align: center;
	position: absolute;
	content: '';
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50%;
}

.switch input:checked + .slider {
	background-color: var(--switch-right-color);
}

.switch input:focus + .slider {
	box-shadow: 0 0 1px #28a745;
}

.switch.reversed input:checked + .slider {
	background-color: #dc3545;
}

.switch.reversed input:focus + .slider {
	box-shadow: 0 0 1px #dc3545;
}

.switch input:checked + .slider:before {
	content: '';
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
}

/* End Slider checkbox*/

@-webkit-keyframes load6 {
	0% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em,
			0 -0.83em 0 -0.477em;
	}

	5%,
	95% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em,
			0 -0.83em 0 -0.477em;
	}

	10%,
	59% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			-0.087em -0.825em 0 -0.42em,
			-0.173em -0.812em 0 -0.44em,
			-0.256em -0.789em 0 -0.46em,
			-0.297em -0.775em 0 -0.477em;
	}

	20% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			-0.338em -0.758em 0 -0.42em,
			-0.555em -0.617em 0 -0.44em,
			-0.671em -0.488em 0 -0.46em,
			-0.749em -0.34em 0 -0.477em;
	}

	38% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			-0.377em -0.74em 0 -0.42em,
			-0.645em -0.522em 0 -0.44em,
			-0.775em -0.297em 0 -0.46em,
			-0.82em -0.09em 0 -0.477em;
	}

	100% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em,
			0 -0.83em 0 -0.477em;
	}
}

@keyframes load6 {
	0% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em,
			0 -0.83em 0 -0.477em;
	}

	5%,
	95% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em,
			0 -0.83em 0 -0.477em;
	}

	10%,
	59% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			-0.087em -0.825em 0 -0.42em,
			-0.173em -0.812em 0 -0.44em,
			-0.256em -0.789em 0 -0.46em,
			-0.297em -0.775em 0 -0.477em;
	}

	20% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			-0.338em -0.758em 0 -0.42em,
			-0.555em -0.617em 0 -0.44em,
			-0.671em -0.488em 0 -0.46em,
			-0.749em -0.34em 0 -0.477em;
	}

	38% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			-0.377em -0.74em 0 -0.42em,
			-0.645em -0.522em 0 -0.44em,
			-0.775em -0.297em 0 -0.46em,
			-0.82em -0.09em 0 -0.477em;
	}

	100% {
		box-shadow:
			0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em,
			0 -0.83em 0 -0.477em;
	}
}

/* ===== REGLA FINAL PARA CONTROLES NATIVOS DE FIELDWORK - HORIZONTAL ===== */
/* Esta regla debe tener la máxima prioridad y estar al final para anular cualquier otra */

/* Ocultar esquina superior izquierda completamente */
html body div.map-container div#map .leaflet-top.leaflet-left {
  display: none !important;
  visibility: hidden !important;
}

/* Posicionamiento específico para superior derecha - FLEXBOX DEFINITIVO */
html body div.map-container div#map .leaflet-top.leaflet-right {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  visibility: visible !important;
  width: auto !important;
  height: 40px !important;
  pointer-events: none !important;
  z-index: 5000 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* CONTROLES NATIVOS DESACTIVADOS - Solo usamos controles personalizados */
/*
html body div.map-container div#map .leaflet-control,
html body div.map-container div#map .leaflet-control-zoom,
html body div.map-container div#map .leaflet-control-layers,
html body div.map-container div#map .leaflet-draw,
html body div.map-container div#map .leaflet-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 500 !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: white !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  width: 80px !important;
  height: 40px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
*/

/* BOTONES DE CONTROLES NATIVOS DESACTIVADOS - Solo usamos controles personalizados */
/*
html body div.map-container div#map .leaflet-control a,
html body div.map-container div#map .leaflet-control-zoom a,
html body div.map-container div#map .leaflet-control-layers a,
html body div.map-container div#map .leaflet-draw a,
html body div.map-container div#map .leaflet-bar a {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 502 !important;
  cursor: pointer !important;
  background: white !important;
  color: #333 !important;
  text-decoration: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 38px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
*/

/* ===== JERARQUÍA Z-INDEX PARA MAPAS Y MODALES ===== */

/* Todos los elementos del mapa deben estar por debajo de los modales */
.leaflet-container,
.leaflet-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane,
.leaflet-map-pane,
.leaflet-objects-pane,
.leaflet-control-container,
.leaflet-control,
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-draw,
.leaflet-bar,
.leaflet-draw-toolbar,
.leaflet-draw-actions,
.leaflet-marker-icon,
.leaflet-div-icon {
  z-index: 800 !important; /* Por debajo de modales (9000) */
}

/* NOTA: Los mapas maximizados tienen reglas específicas en fieldwork.css que anulan estos valores */

/* Líneas y polígonos del mapa - específicamente por debajo de modales */
.leaflet-overlay-pane svg,
.leaflet-overlay-pane canvas,
.leaflet-overlay-pane path,
.leaflet-interactive {
  z-index: 700 !important; /* Líneas por debajo de todo */
}

/* Popups y tooltips - visibles pero por debajo de modales */
.leaflet-popup,
.leaflet-tooltip {
  z-index: 850 !important; /* Por encima de controles pero por debajo de modales */
}

/* ===== MARCADORES DE TAREAS SIEMPRE POR ENCIMA ===== */

/* Marcadores de tareas TODO - deben estar por encima de todos los demás elementos del mapa */
.leaflet-marker-icon.custom-todo-marker,
.leaflet-div-icon.custom-todo-marker {
  z-index: 900 !important; /* Por encima de todos los elementos del mapa pero por debajo de modales */
}

/* ===== TOAST SIEMPRE POR ENCIMA DE TODO ===== */

/* Los toast deben estar por encima de absolutamente todo */
#toast-container,
.toast-container,
.toast {
  z-index: 999999 !important; /* Por encima de TODO absolutamente */
}