/* Censo Cámara — consulta pública.
   Estilo en la línea del Portal del Empleado: superficies blancas, bordes y textos
   en gama pizarra, esquinas redondeadas, sombras suaves y microinteracciones.
   Los colores y medidas configurables llegan como variables CSS en el atributo
   style de .cc-censo (CC_Render::variables_css). */

.cc-censo {
	--cc-suave: color-mix(in srgb, var(--cc-texto, #1e293b) 62%, #fff);
	--cc-pie-suave: color-mix(in srgb, var(--cc-pie-texto, #1e293b) 60%, #fff);
	--cc-radio-ctrl: min(var(--cc-radio, 16px), 10px);
	--cc-foco: color-mix(in srgb, var(--cc-primario, #c2002f) 18%, transparent);
	--cc-sombra-sm: 0 1px 2px rgba(15, 23, 42, .05);
	--cc-sombra: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
	--cc-sombra-lg: 0 12px 24px -6px rgba(15, 23, 42, .14), 0 4px 8px -4px rgba(15, 23, 42, .06);
	color: var(--cc-texto, #1e293b);
	font-size: var(--cc-tam-texto, 15px);
	line-height: 1.5;
	max-width: 100%;
	box-sizing: border-box;
}
.cc-censo *, .cc-censo *::before, .cc-censo *::after { box-sizing: inherit; }
.cc-censo .cc-icono { width: 1em; height: 1em; flex: none; }

/* ---------------------------------------------------------------- */
/* Buscador                                                         */
/* ---------------------------------------------------------------- */

.cc-censo .cc-form {
	margin: 0 0 28px;
	padding: 24px;
	background: var(--cc-fondo, #fff);
	border: 1px solid var(--cc-borde, #e2e8f0);
	border-radius: var(--cc-radio, 16px);
	box-shadow: var(--cc-sombra);
}
.cc-censo .cc-label {
	display: block;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
.cc-censo .cc-busqueda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cc-censo .cc-campo-texto { position: relative; flex: 1 1 280px; min-width: 0; }
.cc-censo .cc-campo-texto .cc-icono {
	position: absolute;
	top: 50%; left: 15px;
	width: 20px; height: 20px;
	color: var(--cc-suave);
	transform: translateY(-50%);
	pointer-events: none;
	transition: color .2s;
}
.cc-censo .cc-campo-texto:focus-within .cc-icono { color: var(--cc-primario); }
.cc-censo .cc-input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px 0 46px;
	font: inherit;
	font-size: 16px; /* 16px evita el zoom automático de iOS */
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cc-texto, #1e293b);
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: var(--cc-radio-ctrl);
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.cc-censo .cc-input::placeholder { color: #94a3b8; text-transform: none; letter-spacing: normal; font-weight: 400; }
.cc-censo .cc-input:hover { border-color: #94a3b8; }
.cc-censo .cc-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--cc-primario);
	box-shadow: 0 0 0 4px var(--cc-foco);
}

.cc-censo .cc-boton,
.cc-censo .cc-limpiar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	margin: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--cc-radio-ctrl);
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.cc-censo .cc-boton {
	position: relative;
	min-width: 120px;
	padding: 0 28px;
	color: #fff;
	background: var(--cc-primario);
	border: 0;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--cc-primario) 30%, transparent);
}
.cc-censo .cc-boton:hover {
	background: color-mix(in srgb, var(--cc-primario) 86%, #000);
	box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--cc-primario) 45%, transparent);
	transform: translateY(-1px);
}
.cc-censo .cc-boton:active { transform: none; }
.cc-censo .cc-boton:focus-visible,
.cc-censo .cc-limpiar:focus-visible,
.cc-censo .cc-pagina:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--cc-foco); }
.cc-censo .cc-boton[disabled] { cursor: progress; transform: none; }
.cc-censo .cc-boton[disabled] span { visibility: hidden; }
.cc-censo .cc-boton[disabled]::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 20px; height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cc-girar .7s linear infinite;
}
.cc-censo .cc-limpiar {
	padding: 0 20px;
	color: var(--cc-suave);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--cc-borde, #e2e8f0);
}
.cc-censo .cc-limpiar:hover { color: var(--cc-texto); background: #f8fafc; border-color: #cbd5e1; }
.cc-censo .cc-limpiar[hidden] { display: none; }

/* ---------------------------------------------------------------- */
/* Resultados                                                       */
/* ---------------------------------------------------------------- */

.cc-censo .cc-resultados { transition: opacity .2s; }
.cc-censo .cc-resultados.cc-cargando { opacity: .5; }
.cc-censo .cc-mostrando { margin: 0 0 12px; font-size: 14px; color: var(--cc-suave); }

/* Tarjetas */
.cc-censo .cc-tarjetas { display: grid; gap: var(--cc-separacion, 16px); }
.cc-censo .cc-tarjeta {
	overflow: hidden;
	background: var(--cc-fondo, #fff);
	border: 1px solid var(--cc-borde, #e2e8f0);
	border-radius: var(--cc-radio, 16px);
	box-shadow: var(--cc-sombra-sm);
	transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
	animation: cc-entrar .35s ease both;
}
.cc-censo .cc-tarjeta:hover { box-shadow: var(--cc-sombra-lg); transform: translateY(-2px); }
.cc-censo .cc-tarjeta:nth-child(2) { animation-delay: .05s; }
.cc-censo .cc-tarjeta:nth-child(3) { animation-delay: .1s; }
.cc-censo .cc-tarjeta:nth-child(n+4) { animation-delay: .15s; }

.cc-censo .cc-cabecera { padding: 20px 24px 18px; }
.cc-censo .cc-cabecera > * { margin: 0; line-height: 1.35; }
.cc-censo .cc-cabecera .cc-titulo {
	margin-bottom: 6px;
	font-size: var(--cc-tam-titulo, 22px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--cc-titulo, #1e293b);
}
.cc-censo .cc-cabecera .cc-subtitulo {
	font-size: var(--cc-tam-subtitulo, 15px);
	font-weight: 500;
	color: var(--cc-suave);
}
.cc-censo .cc-cabecera .cc-subtitulo + .cc-subtitulo { margin-top: 2px; }
.cc-censo .cc-cabecera .cc-texto { margin-top: 8px; font-size: var(--cc-tam-texto, 15px); color: var(--cc-suave); }

.cc-censo .cc-pie {
	display: grid;
	grid-template-columns: repeat(var(--cc-pie-cols, 2), minmax(0, 1fr));
	gap: 14px 28px;
	padding: 16px 24px 18px;
	color: var(--cc-pie-texto, #1e293b);
	background: var(--cc-pie-fondo, #f8fafc);
	border-top: 1px solid var(--cc-borde, #e2e8f0);
}
/* Varias filas en una tarjeta (una por epígrafe): bloques separados por una línea. */
.cc-censo .cc-bloques.cc-varios .cc-pie + .cc-pie { border-top-style: dashed; }
@media (max-width: 900px) and (min-width: 641px) {
	.cc-censo .cc-pie { grid-template-columns: repeat(min(var(--cc-pie-cols, 2), 2), minmax(0, 1fr)); }
}
.cc-censo .cc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.cc-censo .cc-campo.cc-centro { text-align: center; }
.cc-censo .cc-campo.cc-der { text-align: right; }
.cc-censo .cc-etiqueta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cc-pie-suave);
}
.cc-censo .cc-valor { font-size: var(--cc-tam-texto, 15px); font-weight: 500; line-height: 1.45; }

/* Tabla */
.cc-censo .cc-tabla-wrap {
	overflow-x: auto;
	background: var(--cc-fondo, #fff);
	border: 1px solid var(--cc-borde, #e2e8f0);
	border-radius: var(--cc-radio, 16px);
	box-shadow: var(--cc-sombra-sm);
	animation: cc-entrar .35s ease both;
}
.cc-censo .cc-tabla { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: transparent; border: 0; }
.cc-censo .cc-tabla th,
.cc-censo .cc-tabla td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--cc-borde, #e2e8f0);
}
.cc-censo .cc-tabla th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cc-tabla-cab-txt, #64748b);
	background: var(--cc-tabla-cabecera, #f1f5f9);
}
.cc-censo .cc-tabla td { font-size: calc(var(--cc-tam-texto, 15px) - 1px); }
.cc-censo .cc-tabla td:first-child { font-weight: 600; }
.cc-censo .cc-tabla tbody tr:nth-child(even) { background: var(--cc-tabla-rayado, #f8fafc); }
.cc-censo .cc-tabla tbody tr { transition: background-color .15s; }
.cc-censo .cc-tabla tbody tr:hover { background: color-mix(in srgb, var(--cc-primario) 5%, var(--cc-fondo, #fff)); }
.cc-censo .cc-tabla tbody tr:last-child td { border-bottom: 0; }

/* Paginación */
.cc-censo .cc-paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 20px; }
.cc-censo .cc-pagina {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-weight: 600;
	color: var(--cc-texto);
	text-decoration: none;
	background: var(--cc-fondo, #fff);
	border: 1px solid var(--cc-borde, #e2e8f0);
	border-radius: var(--cc-radio-ctrl);
	transition: background-color .2s, border-color .2s, color .2s;
}
.cc-censo a.cc-pagina:hover { color: var(--cc-primario); border-color: var(--cc-primario); }
.cc-censo .cc-pagina.cc-actual { color: #fff; background: var(--cc-primario); border-color: var(--cc-primario); }

/* Sin resultados y errores */
.cc-censo .cc-vacio {
	padding: 48px 24px;
	text-align: center;
	color: var(--cc-suave);
	background: var(--cc-fondo, #fff);
	border: 2px dashed var(--cc-borde, #e2e8f0);
	border-radius: var(--cc-radio, 16px);
	animation: cc-entrar .35s ease both;
}
.cc-censo .cc-vacio .cc-icono { width: 48px; height: 48px; margin-bottom: 12px; opacity: .45; }
.cc-censo .cc-vacio p { max-width: 42ch; margin: 0 auto; font-weight: 500; }
.cc-censo .cc-aviso {
	margin: 0;
	padding: 14px 18px;
	font-weight: 500;
	color: color-mix(in srgb, var(--cc-primario) 80%, #000);
	background: color-mix(in srgb, var(--cc-primario) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--cc-primario) 25%, #fff);
	border-radius: var(--cc-radio-ctrl);
}

@keyframes cc-entrar { from { opacity: 0; transform: translateY(8px); } }
@keyframes cc-girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- */
/* Móvil                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.cc-censo .cc-form { padding: 18px; }
	.cc-censo .cc-campo-texto { flex-basis: 100%; }
	.cc-censo .cc-boton { flex: 1; }
	.cc-censo .cc-cabecera { padding: 16px 18px 14px; }
	.cc-censo .cc-cabecera .cc-titulo { font-size: calc(var(--cc-tam-titulo, 22px) * .85); }
	.cc-censo .cc-pie { grid-template-columns: 1fr; padding: 14px 18px 16px; }
	.cc-censo .cc-campo.cc-der, .cc-censo .cc-campo.cc-centro { text-align: left; }

	/* La tabla se apila: cada fila es una ficha «Título: valor». */
	.cc-censo .cc-tabla-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
	.cc-censo .cc-tabla thead { display: none; }
	.cc-censo .cc-tabla, .cc-censo .cc-tabla tbody, .cc-censo .cc-tabla tr, .cc-censo .cc-tabla td { display: block; width: 100%; }
	.cc-censo .cc-tabla tbody { display: grid; gap: 12px; }
	.cc-censo .cc-tabla tbody tr,
	.cc-censo .cc-tabla tbody tr:nth-child(even) {
		padding: 6px 0;
		background: var(--cc-fondo, #fff);
		border: 1px solid var(--cc-borde, #e2e8f0);
		border-radius: var(--cc-radio, 16px);
		box-shadow: var(--cc-sombra-sm);
	}
	.cc-censo .cc-tabla td { padding: 8px 16px; border: 0; }
	.cc-censo .cc-tabla td::before {
		content: attr(data-titulo);
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--cc-suave);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-censo *, .cc-censo *::before, .cc-censo *::after { animation: none !important; transition: none !important; }
}