/* ===== Modal de aviso ( reemplaza a alert() ) ===== */
.appModalOverlay{
	display:none;
	position:fixed;
	inset:0;
	z-index:99999;
	background:rgba(20,30,45,.55);
	align-items:center;
	justify-content:center;
	padding:20px;
}

.appModalOverlay.open{ display:flex; }

.appModalBox{
	background:#fff;
	width:100%;
	max-width:420px;
	border-radius:10px;
	box-shadow:0 18px 50px rgba(0,0,0,.35);
	overflow:hidden;
	animation:appModalIn .16s ease-out;
}

@keyframes appModalIn{
	from{ transform:translateY(-12px); opacity:0; }
	to{ transform:none; opacity:1; }
}

.appModalHead{
	background:#2c5f6f;
	color:#fff;
	padding:12px 18px;
	font-size:15px;
	font-weight:bold;
}

.appModalBody{
	padding:20px 18px;
	color:#2b2b2b;
	font-size:14px;
	line-height:1.5;
	text-align:center;
	max-height:60vh;
	overflow:auto;
}

.appModalFoot{
	padding:12px 18px;
	text-align:center;
	border-top:1px solid #eef2f6;
	background:#f6f8fa;
}

.appModalBtn{
	appearance:none;
	border:0;
	background:#8ac832;
	color:#fff;
	font-weight:bold;
	font-size:13px;
	padding:8px 26px;
	border-radius:6px;
	cursor:pointer;
	transition:background .15s ease;
}

.appModalBtn:hover{ background:#79b528; }

/* Botones extra ( cancelar / secundario ) */
.appModalFoot .appModalBtn,
.appModalFoot .appModalBtnAlt{ margin:0 4px; }

.appModalBtnAlt{
	appearance:none;
	border:1px solid #cdd6df;
	background:#fff;
	color:#5c6773;
	font-weight:bold;
	font-size:13px;
	padding:8px 22px;
	border-radius:6px;
	cursor:pointer;
	transition:background .15s ease;
}
.appModalBtnAlt:hover{ background:#eef2f6; }

/* Nota/aclaracion dentro del modal */
.appModalHint{
	margin-top:4px;
	font-size:11px;
	color:#7b8794;
	font-style:italic;
}

/* Inputs dentro del modal ( look del app ) */
.appModalBody input[type="text"],
.appModalBody input[type="date"],
.appModalBody textarea{
	width:100%;
	box-sizing:border-box;
	border:1px solid #cdd6df;
	border-radius:6px;
	padding:8px 10px;
	font-size:13px;
	color:#33404f;
	font-family:inherit;
	background:#fff;
}
.appModalBody input[type="text"]:focus,
.appModalBody input[type="date"]:focus,
.appModalBody textarea:focus{
	outline:none;
	border-color:#2c5f6f;
	box-shadow:0 0 0 3px rgba(44,95,111,.12);
}