.mapa-clan-header {
	max-width: 900px;
	margin: 24px auto 8px;
	text-align: center;
}

.mapa-clan-wrapper {
	padding-bottom: 40px;
}

.mapa-clan-header h2 {
	margin-bottom: 4px;
}

.mapa-clan-meta {
	color: #666;
	font-size: 14px;
}

.mapa-clan-leyenda {
	max-width: 900px;
	margin: 12px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	font-size: 13px;
}

.mapa-clan-leyenda-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mapa-clan-leyenda-item i,
.mapa-clan-chip {
	display: inline-block;
	border-radius: 4px;
}

.mapa-clan-leyenda-item i {
	width: 10px;
	height: 10px;
}

/* Colores por tipo de evento */
.mapa-clan-tipo-nacimiento i,
.mapa-clan-chip.mapa-clan-tipo-nacimiento { background: #2c7a4b; }

.mapa-clan-tipo-concepcion i,
.mapa-clan-chip.mapa-clan-tipo-concepcion { background: #3a7bd5; }

.mapa-clan-tipo-fecha_importante i,
.mapa-clan-chip.mapa-clan-tipo-fecha_importante { background: #803ad5; }

.mapa-clan-tipo-fallecimiento i,
.mapa-clan-chip.mapa-clan-tipo-fallecimiento { background: #555555; }

.mapa-clan-tipo-no_nacido i,
.mapa-clan-chip.mapa-clan-tipo-no_nacido { background: #8b7ba3; }

.mapa-clan-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 5px;
    padding: 8px;
}

.mapa-clan-chip-linea1 {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mapa-clan-chip-nombre{
    color:#fff;
    flex: 1;
    font-size:12px;
    font-weight: 600;
    min-width: 0;
}

.mapa-clan-chip-fecha{
    color:#fff;
    flex-shrink: 0;
    font-size:12px;
    white-space: nowrap;
    opacity: .85;
}

.mapa-clan-chip-parentesco {
	color: #fff;
	font-size: 11px;
	opacity: .75;
}

.mapa-clan-grid {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.mapa-clan-celda {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 12px;
	min-height: 110px;
}

/* Colores tenues por columna (1: ene/abr/jul/oct, 2: feb/may/ago/nov, 3: mar/jun/sep/dic) */
.mapa-clan-celda:nth-child(3n+1) { background: #cbedc4; border-color: #84b178; }
.mapa-clan-celda:nth-child(3n+2) { background: #a1d3ff; border-color: #478abf; }
.mapa-clan-celda:nth-child(3n)   { background: #d7bcf7; border-color: #643893; }

/*
|--------------------------------------------------------------------------
| MODAL FLOTANTE (agregar familiar / agregar fecha importante)
|--------------------------------------------------------------------------
*/

.mapa-clan-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 999;
}

.mapa-clan-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	width: 90%;
	max-width: 440px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.mapa-clan-modal-cerrar {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #888;
	cursor: pointer;
}

.mapa-clan-modal-cerrar:hover {
	color: #333;
}

.mapa-clan-btn-whatsapp {
	background: #25D366;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.mapa-clan-btn-whatsapp:hover {
	background: #1ebc59;
}

.mapa-clan-celda h4 {
	margin: 0 0 8px;
	font-size: 14px;
	color: #333;
}

.mapa-clan-insight {
	max-width: 900px;
	margin: 16px auto 0;
	background: #fdf6e8;
	border: 1px solid #eddca0;
	border-radius: 8px;
	padding: 16px 20px;
	font-size: 14px;
	color: #5a4a1f;
}

.mapa-clan-insight p {
	margin: 0 0 10px;
}

.mapa-clan-insight p:last-child {
	margin-bottom: 0;
	font-style: italic;
}

.mapa-clan-insight-lista {
	margin: 0 0 10px;
	padding-left: 18px;
}

.mapa-clan-insight-lista li {
	margin-bottom: 6px;
}

.mapa-clan-acciones {
	max-width: 900px;
	margin: 16px auto 32px;
	display: flex;
	gap: 12px;
	justify-content: center;
}

.mapa-clan-fecha-fila {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.mapa-clan-fecha-fila input {
	flex: 1;
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid #ccc;
}

.mapa-clan-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400 !important;
}

/* Checkbox "Solo recuerdo el mes": clase propia (no reutiliza
   .mapa-clan-checkbox) para poder alinearlo y darle su propio
   tamaño sin heredar reglas de otros checkboxes del formulario. */
.clan-form label.mapa-clan-solo-mes-check {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 2px 0 10px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	color: #555 !important;
	cursor: pointer;
}

.mapa-clan-solo-mes-check input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	margin: 0 !important;
	accent-color: #000;
	cursor: pointer;
	flex-shrink: 0;
}

.mapa-clan-solo-mes-check span {
	line-height: 1.2;
}

.mapa-clan-lista-familiares {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	max-height: 200px;
	overflow-y: auto;
}

.mapa-clan-lista-familiares li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

.mapa-clan-lista-familiares li:last-child {
	border-bottom: none;
}


.mapa-clan-eliminar-familiar {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	padding: 4px 8px;
	color: #a33;
	border-radius: 4px;
}

.mapa-clan-eliminar-familiar:hover {
	background: #fdecea;
}

.mapa-clan-sin-familiares {
	color: #777;
	font-size: 14px;
}

.mapa-clan-separador {
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 16px 0;
}

.mapa-clan-modal-familiar h3 {
	margin-bottom: 12px;
	font-size: 15px;
}

/* Barra móvil */

.mapa-clan-mobile-actions{

    display:none;

}

@media(max-width:768px){

    /* ocultar botonera grande */

    .mapa-clan-acciones{

        display:none;

    }

    .mapa-clan-mobile-actions{

        position:fixed;

        left:12px;

        right:12px;

        bottom:12px;

        height:72px;

        background:rgba(18,18,18,.92);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        border-radius:22px;

        display:flex;

        justify-content:space-around;

        align-items:center;

        z-index:99999;

        box-shadow:0 10px 35px rgba(0,0,0,.35);

        border:1px solid rgba(255,255,255,.08);

        padding:6px;

    }

    .mapa-clan-mobile-actions button{

        flex:1;

        border:none;

        background:none;

        color:#91b51f;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:4px;

    }

    .mapa-clan-mobile-actions button:active{

        transform:scale(.94);

    }
    
     .mapa-clan-mobile-actions button:hover{

        background-color:#8fb81d;

    }

    .mapa-clan-mobile-actions .dashicons{

        width:24px;

        height:24px;

        font-size:24px;

    }

    .mapa-clan-mobile-actions small{

        color:#fff;

        font-size:11px;

        font-weight:600;

    }

    body{

        padding-bottom:95px;

    }

}

@media (max-width: 640px) {
	.mapa-clan-grid {
		grid-template-columns: 1fr;
	}
	
	
}