/* =========================================================
   MODULO NOTAS
   Diseñado para celular: una columna, poco adorno.
   ========================================================= */

/* =========================================================
   LAYOUT: menú lateral + contenido (mismo patrón que Parcelas)
   ========================================================= */

.grid-notas{
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 900px);
	gap: 16px;
	align-items: start;
	margin-top: 20px;
}

/* El margen superior lo pone la rejilla, no cada tarjeta */
.grid-notas .card{ margin-top: 0; }

.notas-main{
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* =========================================================
   CATEGORÍAS
   Se reutiliza la lista lateral de Parcelas (.radio-basic);
   lo único propio es que la bolita lleva el color de cada una.
   ========================================================= */

/* El select solo entra en celular, igual que en Parcelas */
#notasCatsSelect{ display: none; }

.notas-side h3{ margin-bottom: 10px; }

.notas-side .radio-basic .ball{
	border-color: var(--c, rgba(255,255,255,0.30));
	opacity: .5;
	transition: opacity .18s ease, border-color .18s ease;
}

.notas-side .radio-basic:hover .ball{ opacity: .85; }

.notas-side .radio-basic.active .ball{
	border-color: var(--c, rgba(255,255,255,0.85));
	opacity: 1;
}

.notas-side .radio-basic.active .ball::after{
	background: var(--c, rgba(255,255,255,0.95));
}

/* Se usa poco: que casi no se note */
.notas-mas-cat{
	display: block;
	margin: 8px 0 0 auto;
	padding: 2px 4px;
	border: 0;
	background: transparent;
	color: var(--muted2);
	font-size: 11px;
	cursor: pointer;
	opacity: .6;
	transition: opacity .16s ease;
}

.notas-mas-cat:hover{ opacity: 1; color: var(--text); }

/* =========================================================
   INDICADOR EN EL MENÚ PRINCIPAL
   ========================================================= */

/* Discreto: solo aparece si hay recordatorios vencidos o de hoy.
   Va aparte porque display:inline-grid pisaría el [hidden] del navegador. */
.hbtn-aviso[hidden]{ display: none; }

.hbtn-aviso{
	min-width: 18px;
	height: 18px;
	padding: 0 5px;

	display: inline-grid;
	place-items: center;

	border-radius: 999px;
	background: var(--bad);
	color: #fff;

	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* =========================================================
   FILTROS
   ========================================================= */

.notas-chips{
	display: flex;
	gap: 4px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(0,0,0,.25);
	border: 1px solid var(--border);
}

.chip{
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	padding: 8px 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;

	color: var(--muted);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;

	transition: .16s ease;
}

.chip:hover{ color: var(--text); background: rgba(255,255,255,.05); }

.chip.on{
	background: rgba(255,255,255,.11);
	color: var(--text);
}

.chip-num{
	font-size: 11px;
	font-weight: 700;
	color: var(--muted2);
}

.chip.on .chip-num{ color: var(--text); }

/* =========================================================
   BUSCAR + NUEVA
   ========================================================= */

.notas-herramientas{
	display: flex;
	gap: 8px;
	align-items: center;
}

.notas-busca{
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.notas-busca i{
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted2);
	font-size: 13px;
	pointer-events: none;
}

.notas-busca input{ padding-left: 33px; }

.notas-herramientas .btn{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

/* =========================================================
   LISTA
   ========================================================= */

.notas-lista{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	transition: opacity .18s ease;
}

.notas-lista.cargando{ opacity: .45; }

.nota{
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.09);
	background: rgba(255,255,255,0.045);
	overflow: hidden;
	transition: border-color .16s ease, background .16s ease;

	/* Franja con el color de la categoría: da jerarquía de un vistazo */
	border-left: 3px solid var(--c, rgba(255,255,255,0.18));
}

.nota.abierta{
	background: rgba(255,255,255,0.07);
	border-color: rgba(91,124,250,.32);

	/* El borde de "abierta" no debe tapar la franja de la categoría */
	border-left-color: var(--c, rgba(255,255,255,0.18));
}

.nota.e-terminado .nota-titulo{ color: var(--muted); }

/* ---- Cabecera ---- */

.nota-head{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	user-select: none;
}

.nota-head .pct{
	--size: 38px;
	--grosor: 3px;
	flex: 0 0 auto;

	/* El color lo pone la categoría (--fg, en línea); el tramo que falta
	   queda en gris muy tenue. */
	background: conic-gradient(var(--fg, rgba(255,255,255,.55)) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);

	/* Anillo de verdad: el centro se recorta, no se pinta encima.
	   Así se ve el fondo de la tarjeta y no un círculo negro. */
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor)));
	        mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor)));
}

/* El relleno central del componente compartido aquí estorba */
.nota-head .pct::before{ display: none; }

.nota-info{
	flex: 1 1 auto;
	min-width: 0;
}

.nota-meta{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
}

.nota-cat{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--muted2);
	white-space: nowrap;
}

.nota-cat::before{
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--c, rgba(255,255,255,.35));
}

.nota-estatus{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ok);
}

/* Fecha de cierre en la mini card: de un vistazo se ve qué urge */
.nota-cierre{
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,.25);

	font-size: 10.5px;
	font-weight: 700;
	color: var(--muted2);
	white-space: nowrap;
}

.nota-cierre.pronto{ color: var(--warn); }

.nota-cierre.hoy{
	color: var(--warn);
	border-color: rgba(255,193,7,.40);
	background: rgba(255,193,7,.12);
}

.nota-cierre.vencida{
	color: #ff9db0;
	border-color: rgba(255,77,109,.45);
	background: rgba(255,77,109,.14);
}

.nota-titulo{
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
}

.nota-resumen{
	margin: 3px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--muted2);

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nota-caret{
	flex: 0 0 auto;
	color: var(--muted2);
	font-size: 12px;
	opacity: .55;
	transition: transform .2s ease;
	display: inline-block;
}

.nota.abierta .nota-caret{ transform: rotate(180deg); }

/* ---- Panel desplegable ---- */

/* Abierta: el título y el resumen se ven ya editables en el cuerpo */
.nota.abierta .nota-titulo,
.nota.abierta .nota-resumen{ display: none; }

.nota-detalle{ display: none; }
.nota.abierta .nota-detalle{ display: block; }

.nota-cargando{
	padding: 16px;
	text-align: center;
	color: var(--muted2);
	font-size: 12.5px;
}

/* Dos columnas: a la izquierda las fechas, a la derecha el contenido.
   Así la fecha no se come un renglón entero. */
.nota-cuerpo{
	padding: 12px 14px 14px;
	border-top: 1px solid var(--border);

	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 11px;
	align-items: start;
}

/* Posición explícita: el acomodo automático metería la fecha de creación
   junto al slider en vez de junto al contenido. */
.nota-cuerpo > .cierre          { grid-column: 1; grid-row: 1; }
.nota-cuerpo > .nota-titulo-edit{ grid-column: 2; grid-row: 1; }
.nota-cuerpo > .rango-fila      { grid-column: 2; grid-row: 2; }
.nota-cuerpo > .nota-fecha-reg  { grid-column: 1; grid-row: 3; }
.nota-cuerpo > .nota-texto      { grid-column: 2; grid-row: 3; }
.nota-cuerpo > .subnotas        { grid-column: 1 / -1; grid-row: 4; }

.nota-cuerpo > .nota-borrar{
	grid-column: 2;
	grid-row: 5;
	justify-self: end;
}

/* En el gutter, "Recordar" se queda en su propio renglón y el campo de
   fecha se encoge para compartir el suyo con la ✕ (Safari lo dibuja más
   ancho que Chrome: así nunca se parte en tres renglones). */
.nota-cuerpo > .cierre .cierre-lbl{ width: 100%; margin-right: 0; }
.nota-cuerpo > .cierre input.cierre-fecha{ flex: 1 1 auto; min-width: 0; }

/* Fecha de creación: va a la altura del contenido, no del título */
.nota-fecha-reg{
	padding-top: 6px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cielo);
	opacity: .75;
}

/* Título y contenido: se leen y se editan en el mismo lugar, sin botones */
.nota-cuerpo textarea{
	resize: none;
	overflow: hidden;
}

textarea.nota-titulo-edit.basic{
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	padding: 6px 8px;
	margin: -6px -8px;
	border-radius: 10px;
	transition: background .16s ease;
}

textarea.nota-titulo-edit.basic{ line-height: 1.35; }
textarea.nota-titulo-edit.basic:hover{ background: rgba(255,255,255,.04); }
textarea.nota-titulo-edit.basic:focus{ background: rgba(255,255,255,.07); }

/* Mientras se guarda */
.js-campo.guardando{ opacity: .6; }


textarea.nota-texto.basic{
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(234,240,255,.82);
	padding: 6px 8px;
	margin: -6px -8px;
	border-radius: 10px;
	transition: background .16s ease;
}

textarea.nota-texto.basic:hover{ background: rgba(255,255,255,.04); }
textarea.nota-texto.basic:focus{ background: rgba(255,255,255,.07); }

/* ---- Avance ---- */

.rango-fila{
	display: flex;
	align-items: center;
	gap: 10px;
}

.rango-num{
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--muted);
	min-width: 38px;
	text-align: right;
}

/* El número toma el color de la categoría, igual que el anillo */
.rango-num b{ color: var(--c, var(--text)); font-weight: 800; }

input[type="range"].rango{
	width: 100%;
	padding: 0;
	height: 5px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

input[type="range"].rango:focus{ box-shadow: none; }

input[type="range"].rango::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--primary);
	border: 2px solid rgba(255,255,255,.85);
	cursor: pointer;
}

input[type="range"].rango::-moz-range-thumb{
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--primary);
	border: 2px solid rgba(255,255,255,.85);
	cursor: pointer;
}

.avance-x{
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted2);
	font-size: 12px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: .16s ease;
}

.avance-x:hover{ background: rgba(255,77,109,.18); color: #ff9db0; }

/* ---- Fecha de cierre: atajos + calendario ---- */

.cierre{
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.cierre-lbl{
	font-size: 11px;
	font-weight: 700;
	color: var(--muted2);
	margin-right: 2px;
}

/* En el modal ya hay una etiqueta arriba: sobra repetirla */
.modal-body .cierre-lbl{ display: none; }

input.cierre-fecha{
	width: auto;
	min-width: 0;
	flex: 0 1 auto;
	padding: 5px 8px;
	border-radius: 10px;
	font-size: 11.5px;
	color: var(--muted);
}

input.cierre-fecha::-webkit-calendar-picker-indicator{
	filter: invert(1);
	opacity: .45;
	cursor: pointer;
}

.cierre-x{
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted2);
	font-size: 11px;
	cursor: pointer;
	flex: 0 0 auto;
}

.cierre-x:hover{ background: rgba(255,77,109,.18); color: #ff9db0; }

/* =========================================================
   SUBNOTAS
   Van dentro del mismo panel de la nota: sin tarjeta aparte,
   solo una línea que las separa del resto.
   ========================================================= */

.subnotas{
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
	padding-top: 6px;
}

/* Misma rejilla que el panel: la fecha cae en la columna izquierda */
.subnota{
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) auto;
	column-gap: 14px;
	align-items: start;

	padding: 9px 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.subnota-fecha{
	padding-top: 4px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cielo);
	opacity: .75;
}

.subnota-x{
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted2);
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	opacity: .45;
	transition: .16s ease;
}

.subnota-x:hover{
	opacity: 1;
	background: rgba(255,77,109,.18);
	color: #ff9db0;
}

textarea.js-subnota-editar.basic{
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(234,240,255,.88);
	padding: 4px 6px;
	margin: -4px -6px;
	border-radius: 8px;
	transition: background .16s ease;
}

textarea.js-subnota-editar.basic:hover{ background: rgba(255,255,255,.04); }
textarea.js-subnota-editar.basic:focus{ background: rgba(255,255,255,.07); }

/* Campo para publicar una nueva */
.subnota-nueva{
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-top: 10px;
	padding-left: 174px; /* 160 de la columna de fechas + 14 de separación */
}

.subnota-nueva textarea{
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.subnota-nueva .btn{
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Se usa muy poco: discreto, y lejos del selector de categoria */
.nota-borrar{
	align-self: flex-end;
	margin-top: -6px;
	padding: 2px 4px;
	border: 0;
	background: transparent;
	color: var(--muted2);
	font-size: 11px;
	cursor: pointer;
	opacity: .55;
	transition: opacity .16s ease, color .16s ease;
}

.nota-borrar:hover{ opacity: 1; color: #ff9db0; }

/* ---- Sin resultados ---- */

.notas-vacio{
	padding: 18px 4px;
	text-align: center;
	font-size: 12.5px;
	color: var(--muted2);
}

/* =========================================================
   POPUP DE RECORDATORIOS
   ========================================================= */

.rec-lista{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rec-item{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;

	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,.22);

	color: var(--text);
	text-align: left;
	cursor: pointer;
	transition: .16s ease;
}

.rec-item:hover{
	background: rgba(255,255,255,.07);
	border-color: rgba(91,124,250,.35);
}

.rec-punto{
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex: 0 0 auto;
	background: var(--c, rgba(255,255,255,.35));
}

.rec-txt{
	flex: 1 1 auto;
	min-width: 0;
}

.rec-txt b{
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.rec-txt small{
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--muted2);
}

.rec-fecha{
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--muted2);
}

.rec-fecha.hoy{
	color: var(--warn);
	border-color: rgba(255,193,7,.40);
	background: rgba(255,193,7,.12);
}

.rec-fecha.vencida{
	color: #ff9db0;
	border-color: rgba(255,77,109,.45);
	background: rgba(255,77,109,.14);
}

.rec-vacio{
	font-size: 13px;
	color: var(--muted2);
	padding: 6px 0;
}

/* =========================================================
   RESULTADOS DE BÚSQUEDA
   ========================================================= */

/* display:flex pisa el [hidden] del navegador: hay que decirlo aparte */
.notas-resultados[hidden]{ display: none; }

.notas-resultados{
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 0 4px;
	font-size: 11.5px;
	color: var(--muted2);
}

.notas-resultados button{
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted2);
	font-size: 11.5px;
	text-decoration: underline;
	cursor: pointer;
}

.notas-resultados button:hover{ color: var(--text); }

/* =========================================================
   MODALES
   ========================================================= */

.modal-card.modal-chico{ width: min(460px, 100%); }

.modal-body .campo{ margin-bottom: 12px; }

.campo > label{
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted2);
	margin-bottom: 5px;
}

/* ===== Categorías como radios (elegir de un toque) ===== */

.cat-radios{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 5px;
}

.cat-radios .crad{
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 9px 11px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,.22);

	font-size: 12.5px;
	color: var(--muted);
	cursor: pointer;
	user-select: none;

	transition: .16s ease;
}

.cat-radios .crad input{ display: none; }

.cat-radios .crad:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.cat-radios .crad.on{
	background: rgba(91,124,250,.16);
	border-color: rgba(91,124,250,.50);
	color: var(--text);
	font-weight: 600;
}

.cat-radios .crad-punto{
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex: 0 0 auto;
	background: var(--c, rgba(255,255,255,.35));
}

.cat-radios .crad-txt{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.modal-msg{
	font-size: 12.5px;
	min-height: 16px;
	color: var(--ok);
}

.modal-msg.mal{ color: var(--bad); }

.notas-fila{
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.notas-fila .btn{ white-space: nowrap; }

.cat-lista{
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 250px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.cat-lista::-webkit-scrollbar{ width: 6px; }
.cat-lista::-webkit-scrollbar-track{ background: transparent; }
.cat-lista::-webkit-scrollbar-thumb{
	background-color: rgba(255,255,255,0.15);
	border-radius: 999px;
}

.cat-fila{
	display: flex;
	align-items: center;
	gap: 8px;
}

.cat-color{
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	padding: 2px;
	border-radius: 9px;
	cursor: pointer;
}

.cat-nombre{ flex: 1 1 auto; min-width: 0; font-size: 13px; }

.cat-num{
	flex: 0 0 auto;
	min-width: 22px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted2);
}

/* =========================================================
   AVISO FLOTANTE
   ========================================================= */

.notas-toast{
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 16px);

	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(16,31,56,.95);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow);

	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);

	opacity: 0;
	pointer-events: none;
	z-index: 200;
	transition: opacity .2s ease, transform .2s ease;
}

.notas-toast.ver{
	opacity: 1;
	transform: translate(-50%, 0);
}

.notas-toast.mal{ color: #ff9db0; border-color: rgba(255,77,109,.50); }

/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 1075px){
	.grid-notas{ grid-template-columns: 1fr; }

	/* Los nombres de categoría son largos: 3 columnas, no 4 */
	.notas-side .radio-group-vertical{ column-count: 3; }
}

@media (max-width: 780px){
	/* El theme oculta .radio-group-vertical aquí: entra el select */
	#notasCatsSelect{ display: block !important; width: 100%; }
}

@media (max-width: 560px){

	/* En pantalla angosta no cabe la columna de fechas: todo en una sola,
	   en el orden del HTML. Hay que soltar también las filas explícitas,
	   si no la fecha de creación y el contenido caerían encimados. */
	.nota-cuerpo{ grid-template-columns: minmax(0, 1fr); }

	.nota-cuerpo > .nota-fecha-reg,
	.nota-cuerpo > .nota-titulo-edit,
	.nota-cuerpo > .rango-fila,
	.nota-cuerpo > .cierre,
	.nota-cuerpo > .nota-texto,
	.nota-cuerpo > .subnotas,
	.nota-cuerpo > .nota-borrar{ grid-column: 1; grid-row: auto; }

	.nota-cuerpo > .cierre .cierre-lbl{ width: auto; margin-right: 2px; }

	.nota-fecha-reg{ padding-top: 0; }

	.subnota{ grid-template-columns: minmax(0, 1fr) auto; }
	.subnota-fecha{ grid-column: 1 / -1; padding-top: 0; margin-bottom: 3px; }

	.subnota-nueva{ padding-left: 0; }


	/* El boton nuevo se queda solo con el icono */
	.notas-herramientas .btn span{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.notas-herramientas .btn{
		width: 44px;
		height: 42px;
		padding: 0;
		justify-content: center;
	}

	.chip{ padding: 8px 6px; font-size: 12px; }

	.nota-head{ gap: 10px; padding: 11px 12px; }
	.nota-cuerpo{ padding: 12px; }

	.cat-radios{ grid-template-columns: 1fr 1fr; }
}