/*
 * v20 · Plan de mantenimiento y cronograma.
 */

/* --- Semáforos: el estado se lee de un vistazo, sin leer la fecha --- */
.semaforo{
	display:inline-flex;align-items:center;gap:6px;
	padding:3px 11px;border-radius:20px;
	font-size:11px;font-weight:800;white-space:nowrap;
}
.semaforo::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.semaforo.aldia{background:#e9f6ee;color:#18684a}
.semaforo.proximo{background:#fff5df;color:#946318}
.semaforo.vencido{background:#fdf1f0;color:#b3261e}
.semaforo.curso{background:#eef6fc;color:#0a5f9e}
.semaforo.suspendido{background:rgba(109,129,139,.14);color:var(--muted,#6d818b)}

/* --- Resumen de cumplimiento --- */
.plan-resumen{margin-bottom:18px}
.plan-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:6px}
.plan-kpis>div{
	padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);
}
.plan-kpis small{display:block;color:var(--muted,#6d818b);font-size:11px;font-weight:700}
.plan-kpis strong{display:block;margin-top:3px;font-size:23px;color:var(--ink)}
.plan-kpis .verde strong{color:#18684a}
.plan-kpis .azul strong{color:#0a5f9e}
.plan-kpis .ambar strong{color:#946318}
.plan-kpis .rojo strong{color:#b3261e}
.plan-kpis .cumplimiento{background:var(--navy,#06265c);border-color:var(--navy,#06265c)}
.plan-kpis .cumplimiento small{color:#9dc9e0}
.plan-kpis .cumplimiento strong{color:#fff}
.plan-nota{margin:10px 0 0;color:var(--muted,#6d818b);font-size:12px}
.plan-generar button{white-space:nowrap}

/* --- Plan: formulario y lista --- */
.plan-layout{display:grid;grid-template-columns:minmax(380px,1fr) minmax(360px,1fr);gap:16px;align-items:start}
.plan-frecuencia,.plan-exigencias,.chequeo,.anomalia{
	margin:14px 0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f4f8f9);
}
.plan-frecuencia legend,.plan-exigencias legend,.chequeo legend,.anomalia legend{
	padding:0 7px;color:var(--ink);font-size:12px;font-weight:850;
}
.plan-cada{display:flex;align-items:center;gap:8px}
.plan-cada input{width:92px}
.plan-sufijo{color:var(--muted,#6d818b);font-size:12px;font-weight:700;white-space:nowrap}

.plan-items{display:grid;gap:11px}
.plan-item{
	padding:13px 15px;border:1px solid var(--line);border-left:4px solid var(--line);
	border-radius:12px;background:var(--surface,#fff);
}
.plan-item.vencido{border-left-color:#b3261e}
.plan-item.proximo{border-left-color:#e0a83a}
.plan-item.aldia{border-left-color:#5eb589}
.plan-item.suspendido{border-left-color:var(--muted,#6d818b);opacity:.72}
.plan-item header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.plan-item header b{display:block;font-size:14px;color:var(--ink)}
.plan-item header small{display:block;margin-top:2px;color:var(--muted,#6d818b);font-size:11.5px}
.plan-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;color:var(--muted,#6d818b);font-size:11.5px}
.plan-meta b{color:var(--ink)}
.plan-insumos{margin:8px 0 0;color:var(--muted,#6d818b);font-size:11.5px}
.plan-acciones{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.plan-acciones a,.plan-acciones button{
	padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:transparent;
	color:var(--muted,#6d818b);font-size:11px;font-weight:750;text-decoration:none;cursor:pointer;
}
.plan-acciones a:hover,.plan-acciones button:hover{border-color:var(--blue,#087db8);color:var(--blue,#087db8)}
.plan-acciones .quitar:hover{border-color:#b3261e;color:#b3261e}
.plan-acciones form{display:inline}

/* --- Cronograma: calendario del mes --- */
.cronograma-tabs{margin-bottom:14px}
.cronograma .panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.cronograma-nav{display:flex;gap:8px}
.cronograma-nav a{
	padding:6px 12px;border:1px solid var(--line);border-radius:8px;
	color:var(--ink);font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap;
}
.cronograma-nav a:hover{border-color:var(--blue,#087db8);color:var(--blue,#087db8)}
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px}
.cal-cabecera{padding:5px 0;color:var(--muted,#6d818b);font-size:11px;font-weight:850;text-align:center}
.cal-dia{
	min-height:84px;padding:7px;border:1px solid var(--line);border-radius:9px;
	background:var(--surface,#fff);font-size:11px;
}
.cal-dia.vacio{border:0;background:transparent}
.cal-dia>b{display:block;margin-bottom:5px;color:var(--muted,#6d818b);font-size:12px}
.cal-dia.hoy{border-color:var(--blue,#087db8);box-shadow:0 0 0 2px rgba(8,125,184,.16)}
.cal-dia.hoy>b{color:var(--blue,#087db8)}
.cal-dia.con-trabajo{background:var(--soft,#f4f8f9)}
.cal-dia.pasado{opacity:.66}
.cal-act{
	display:block;margin-bottom:3px;padding:3px 6px;border-radius:6px;
	background:#eef6fc;color:#0a5f9e;font-size:10.5px;font-weight:750;line-height:1.3;
	overflow:hidden;text-overflow:ellipsis;
}
.cal-act.inspeccion{background:#fff5df;color:#946318}
.cal-act.correctivo{background:#fdf1f0;color:#b3261e}
.cronograma-pie{margin:12px 0 0;color:var(--muted,#6d818b);font-size:12px}

/* --- Cronograma: rejilla anual --- */
.rejilla-anual-scroll{overflow-x:auto;margin-top:14px}
.rejilla-anual{width:100%;min-width:620px;border-collapse:collapse;font-size:12px}
.rejilla-anual th,.rejilla-anual td{border:1px solid var(--line);padding:7px 9px;text-align:center}
.rejilla-anual thead th{background:var(--blue,#087db8);color:#fff;font-size:11px;font-weight:800}
.rejilla-anual thead th:first-child{text-align:left;min-width:210px}
.rejilla-anual thead th.mes-actual{background:var(--navy,#06265c)}
.rejilla-anual tbody th{text-align:left;font-weight:700;background:var(--soft,#f4f8f9);text-transform:none;letter-spacing:0}
.rejilla-anual tbody th span{display:block;color:var(--ink)}
.rejilla-anual tbody th small{display:block;margin-top:2px;color:var(--muted,#6d818b);font-size:10.5px;font-weight:600}
.rejilla-anual td.toca{background:#dff0e7;color:#18684a;font-weight:850}
.rejilla-anual td.toca.inspeccion{background:#fdf0d8;color:#946318}
.rejilla-anual td.toca.correctivo{background:#fbe0dd;color:#b3261e}

/* --- Cierre: chequeo y anomalía --- */
.chequeo .check,.anomalia .check{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;font-weight:600}
.anomalia-detalle{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

@media(max-width:1050px){
	.plan-layout{grid-template-columns:1fr}
	.plan-kpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
	.plan-kpis{grid-template-columns:repeat(2,1fr)}
	.calendario{gap:3px}
	.cal-dia{min-height:62px;padding:5px}
	.cal-act{font-size:9px;padding:2px 4px}
	.cronograma .panel-head{flex-direction:column}
}

/* --- Duplicar el plan de un año a otro --- */
.plan-columna{display:grid;gap:16px;align-items:start}
.plan-duplicar-cuerpo{padding:15px 17px}
.plan-duplicar-cuerpo>p{margin:0 0 12px;color:var(--muted,#6d818b);font-size:12.5px}
.plan-duplicar-cuerpo .settings-grid{margin-bottom:12px}
.plan-duplicar-cuerpo .plan-nota{margin-top:10px}

/* --- Generar el plan en bloque --- */
.plan-generador{margin-bottom:18px;padding:0;overflow:hidden}
.plan-generador>summary{
	padding:15px 18px;cursor:pointer;list-style:none;
	display:flex;flex-direction:column;gap:2px;
}
.plan-generador>summary::-webkit-details-marker{display:none}
.plan-generador>summary::after{
	content:"Abrir";position:absolute;right:18px;
	color:var(--blue,#087db8);font-size:11.5px;font-weight:800;
}
.plan-generador[open]>summary::after{content:"Cerrar"}
.plan-generador>summary{position:relative}
.plan-generador>summary b{font-size:15px;color:var(--ink)}
.plan-generador>summary small{color:var(--muted,#6d818b);font-size:12px}
.plan-generador-cuerpo{padding:0 18px 18px;border-top:1px solid var(--line)}
.plan-generador-cuerpo>p{margin:13px 0 14px;color:var(--muted,#6d818b);font-size:12.5px;max-width:76ch}
.plan-generador-ajustes{margin-bottom:16px}
.plantillas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.plantilla-grupo{padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f4f8f9)}
.plantilla-grupo h4{
	display:flex;justify-content:space-between;align-items:center;gap:8px;
	margin:0 0 9px;font-size:12px;font-weight:850;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;
}
.marcar-todo{
	padding:3px 9px;border:1px solid var(--line);border-radius:7px;background:transparent;
	color:var(--muted,#6d818b);font-size:10.5px;font-weight:750;letter-spacing:0;text-transform:none;cursor:pointer;
}
.marcar-todo:hover{border-color:var(--blue,#087db8);color:var(--blue,#087db8)}
.plantilla{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px;cursor:pointer}
.plantilla input{margin-top:3px;flex:0 0 auto}
.plantilla b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.35}
.plantilla small{display:block;margin-top:1px;color:var(--muted,#6d818b);font-size:10.5px}
@media(max-width:1050px){.plantillas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.plantillas{grid-template-columns:1fr}}

/* Los campos del generador y del duplicador van fuera de .form-panel:
   necesitan la misma disposición etiqueta-arriba, campo-abajo. */
.plan-generador-ajustes,.plan-duplicar-cuerpo .settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-generador-ajustes label,.plan-duplicar-cuerpo label{display:grid;gap:5px;align-content:start}
.plan-generador-ajustes input,.plan-generador-ajustes select,
.plan-duplicar-cuerpo input,.plan-duplicar-cuerpo select{
	width:100%;padding:10px;border:1px solid #cbd9df;border-radius:9px;background:var(--surface,#fff);
}
.plan-generador-ajustes .plan-cada{display:flex;gap:8px;align-items:center}
.plan-generador-ajustes .plan-cada input{width:90px}
.plan-generador-cuerpo>form>button,.plan-duplicar-cuerpo button[type="submit"]{
	border:0;border-radius:9px;padding:12px 20px;
	background:linear-gradient(135deg,var(--blue,#087db8),var(--cyan,#08a8bd));
	color:#fff;font-weight:800;cursor:pointer;
}
.plan-duplicar-cuerpo .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){
	.plan-generador-ajustes,.plan-duplicar-cuerpo .settings-grid{grid-template-columns:1fr}
}