/* =========================================================================
   Panel del equipo editorial de PCDD-Global.
   Mismo lenguaje visual que el diario, pero autónomo: esta aplicación no
   comparte hoja de estilos con WordPress.
   ========================================================================= */

:root {
	--fondo:        #ffffff;
	--fondo-alt:    #f5f6f8;
	--fondo-hueco:  #e9ebef;
	--texto:        #15171c;
	--texto-suave:  #565c66;
	--texto-tenue:  #7c828c;
	--filete:       #dfe2e7;
	--filete-fuerte:#15171c;
	--acento:       #0a3ce0;
	--acento-fondo: #e8eeff;
	--sombra:       0 1px 2px rgba(21,23,28,.05), 0 8px 24px rgba(21,23,28,.06);
	--radio:        3px;
	--serif: Charter, Georgia, "Times New Roman", serif;
	--sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
code { font-family: Consolas, Monaco, monospace; font-size: .9em; background: var(--fondo-alt); padding: .1em .35em; border-radius: 3px; }

.marco { width: min(100% - 2rem, 1180px); margin-inline: auto; }

/* ------------------------------------------------------------- cabecera */

.cabecera {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	padding: 1.25rem 0;
	border-bottom: 2px solid var(--filete-fuerte);
}
.marca strong { display: block; font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em; }
.marca span { font-size: .75rem; color: var(--texto-tenue); }

.quien { display: flex; align-items: center; gap: .75rem; }
.quien img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fondo-hueco); }
.quien__nombre { font-weight: 600; font-size: .875rem; margin: 0; line-height: 1.2; }
.quien__rol { font-size: .75rem; color: var(--texto-tenue); margin: 0; }

.nav { border-bottom: 1px solid var(--filete); }
.nav ul { display: flex; gap: 1.5rem; list-style: none; overflow-x: auto; }
.nav a {
	display: block; padding: .8rem 0;
	font-size: .875rem; font-weight: 600; white-space: nowrap;
	color: var(--texto-suave);
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--texto); }
.nav a.es-activa { color: var(--acento); border-bottom-color: var(--acento); }

.contenido { padding: 1.75rem 0 4rem; }
.titulo-zona { margin-bottom: 1.75rem; }
.titulo-zona h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -.02em; }
.descripcion { font-family: var(--serif); color: var(--texto-suave); margin: .5rem 0 0; max-width: 62ch; }

.pie { border-top: 1px solid var(--filete); padding: 1.5rem 0; font-size: .75rem; color: var(--texto-tenue); }
.pie p { margin: 0; }

/* --------------------------------------------------------------- avisos */

.aviso {
	font-size: .9375rem; line-height: 1.5;
	padding: .9rem 1.1rem; border-radius: var(--radio);
	border-left: 3px solid; margin-bottom: 1.5rem;
}
.aviso a { color: inherit; font-weight: 600; text-decoration: underline; }
.aviso--exito      { background: #e9f6ec; border-color: #1c7c3c; color: #14532b; }
.aviso--error      { background: #fdecec; border-color: #b32d2e; color: #7d1d1e; }
.aviso--sugerencia { background: var(--acento-fondo); border-color: var(--acento); }

/* -------------------------------------------------------------- botones */

.boton {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--sans); font-size: .875rem; font-weight: 600;
	padding: .55rem 1rem;
	border: 1px solid var(--filete-fuerte); border-radius: var(--radio);
	background: transparent; color: var(--texto);
	cursor: pointer; text-align: center;
}
.boton:hover { background: var(--filete-fuerte); color: #fff; }
.boton--principal { background: var(--filete-fuerte); color: #fff; }
.boton--principal:hover { background: var(--acento); border-color: var(--acento); }
.boton--sutil { border-color: var(--filete); color: var(--texto-suave); font-weight: 500; }
.boton--sutil:hover { border-color: var(--acento); background: transparent; color: var(--acento); }
.ancho { width: 100%; justify-content: center; }
.enlace-sutil { font-size: .75rem; color: var(--texto-tenue); text-decoration: underline; text-align: center; }

/* --------------------------------------------------------------- campos */

.campo { margin-bottom: 1.1rem; }
.campo > label {
	display: block; font-size: .75rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--texto-suave); margin-bottom: .35rem;
}
.campo input, .campo select, .campo textarea, .equipo-barra input {
	width: 100%; font-family: var(--sans); font-size: .9375rem;
	padding: .6rem .7rem;
	border: 1px solid var(--filete); border-radius: var(--radio);
	background: var(--fondo); color: var(--texto);
}
.campo textarea { font-family: var(--serif); font-size: 1rem; line-height: 1.55; resize: vertical; }
.titular { font-family: var(--serif) !important; font-size: 1.375rem !important; font-weight: 700; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo input:disabled { background: var(--fondo-alt); color: var(--texto-tenue); }
.con-boton { display: flex; gap: .5rem; }
.con-boton input { flex: 1; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; margin-bottom: 1rem; }
.ayuda { font-size: .75rem; color: var(--texto-tenue); margin: .35rem 0 0; line-height: 1.5; }
.ayuda--destacada { background: var(--acento-fondo); color: var(--texto); padding: .7rem .85rem; border-radius: var(--radio); }
.obl { color: var(--acento); }
.antetitulo { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); margin: 0 0 .3rem; }

/* -------------------------------------------------------------- columnas */

.columnas { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) {
	.columnas { grid-template-columns: minmax(0, 1fr) 20rem; }
	.columnas__lateral { position: sticky; top: 1rem; }
}

.tarjeta { border: 1px solid var(--filete); border-radius: var(--radio); padding: 1.25rem; margin-bottom: 1.25rem; }
.tarjeta h2 {
	font-family: var(--sans); font-size: .75rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
	margin-bottom: .9rem;
}
.tarjeta--acciones { display: flex; flex-direction: column; gap: .6rem; }

.lista-opciones { display: flex; flex-direction: column; gap: .1rem; }
.lista-opciones--alta { max-height: 16rem; overflow-y: auto; border: 1px solid var(--filete); border-radius: var(--radio); padding: .35rem; margin: .5rem 0 1rem; }
.lista-opciones label {
	display: flex; align-items: center; gap: .5rem;
	font-size: .875rem; padding: .35rem .4rem; border-radius: var(--radio); cursor: pointer;
}
.lista-opciones label:hover { background: var(--fondo-alt); }
.lista-opciones label.oculta { display: none; }
.cuenta { margin-left: auto; font-size: .6875rem; color: var(--texto-tenue); }
.rol { align-items: flex-start !important; }
.rol strong { display: block; }
.rol em { display: block; font-style: normal; font-size: .75rem; color: var(--texto-tenue); }

.barra-formato { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.barra-formato button {
	font-size: .75rem; padding: .3rem .6rem; cursor: pointer;
	border: 1px solid var(--filete); border-radius: var(--radio);
	background: var(--fondo-alt); color: var(--texto-suave);
}
.barra-formato button:hover { border-color: var(--acento); color: var(--acento); }

.portada-actual { width: 100%; border-radius: var(--radio); margin-bottom: .75rem; }
.foto-perfil { width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: .75rem; }

/* -------------------------------------------------------------- cifras */

.cifras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 1.75rem; }
.cifra { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--filete); border-radius: var(--radio); }
.cifra:hover { border-color: var(--acento); }
.cifra__numero { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.cifra__texto { display: block; font-size: .8125rem; color: var(--texto-tenue); margin-top: .35rem; }
.cifra--atencion .cifra__numero { color: var(--acento); }

.atajos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 2.5rem; }
.atajo { display: block; padding: 1.25rem; border: 1px solid var(--filete); border-radius: var(--radio); }
.atajo:hover { border-color: var(--acento); box-shadow: var(--sombra); }
.atajo strong { display: block; font-family: var(--serif); font-size: 1.125rem; margin-bottom: .25rem; }
.atajo span { font-size: .8125rem; color: var(--texto-tenue); }
.atajo--principal { background: var(--acento-fondo); border-color: var(--acento); }

/* --------------------------------------------------------------- listas */

.bloque { margin-bottom: 2.5rem; }
.bloque__cabecera { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--filete-fuerte); padding-bottom: .5rem; margin-bottom: 1rem; }
.bloque__cabecera h2 { font-size: 1.25rem; }
.bloque__cabecera a { font-size: .8125rem; font-weight: 600; color: var(--acento); }

.lista { list-style: none; }
.fila { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--filete); }
.fila__portada { flex: none; width: 76px; height: 52px; border-radius: var(--radio); overflow: hidden; background: var(--fondo-hueco); }
.fila__portada img { width: 100%; height: 100%; object-fit: cover; }
.fila__sin-portada { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: .625rem; color: var(--texto-tenue); text-align: center; }
.fila__texto { flex: 1; min-width: 0; }
.fila__texto h3 { font-size: 1.0625rem; }
.fila__texto h3 a:hover { color: var(--acento); }
.fila__meta { font-size: .75rem; color: var(--texto-tenue); margin: .3rem 0 0; }
.fila__acciones { display: flex; gap: .4rem; flex: none; }

.pastilla { display: inline-block; font-size: .6875rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; margin-right: .35rem; }
.pastilla--ok     { background: #e9f6ec; color: #1c7c3c; }
.pastilla--espera { background: #fcf0cd; color: #8a6116; }
.pastilla--neutro { background: var(--fondo-hueco); color: var(--texto-suave); }

/* -------------------------------------------------------------- filtros */

.filtros { background: var(--fondo-alt); border: 1px solid var(--filete); border-radius: var(--radio); padding: 1.1rem; margin-bottom: 1.5rem; }
.filtros__rejilla { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.filtros__rejilla .campo { margin-bottom: 0; }
.filtros__acciones { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.filtros__cuenta { font-size: .8125rem; color: var(--texto-tenue); margin-left: auto; }

.paginacion { display: flex; gap: .3rem; justify-content: center; margin-top: 2rem; }
.paginacion a { min-width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; border: 1px solid var(--filete); border-radius: var(--radio); color: var(--texto-suave); }
.paginacion a.es-actual { background: var(--filete-fuerte); border-color: var(--filete-fuerte); color: #fff; font-weight: 600; }

.vacio { text-align: center; padding: 3rem 0; }
.vacio h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.vacio p { color: var(--texto-suave); }

/* --------------------------------------------------------------- equipo */

.equipo-barra { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.equipo-barra form { display: flex; gap: .5rem; }
.equipo-barra input { min-width: 16rem; }

.lista-equipo { list-style: none; margin-top: 1rem; }
.persona { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--filete); }
.persona__foto { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--fondo-hueco); display: flex; align-items: center; justify-content: center; }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona__foto span { font-size: .625rem; color: var(--texto-tenue); }
.persona__datos { flex: 1; min-width: 0; }
.persona__datos h3 { font-size: 1.0625rem; }
.persona__meta { font-size: .75rem; color: var(--texto-tenue); margin: .25rem 0 0; }
.persona__falta { font-size: .75rem; color: var(--acento); margin: .35rem 0 0; }
.persona__acciones { flex: none; }

/* --------------------------------------------------------------- acceso */

.acceso { display: flex; justify-content: center; padding: 3rem 0; }
.acceso__caja { width: 100%; max-width: 26rem; border: 1px solid var(--filete); border-radius: var(--radio); padding: 2rem; box-shadow: var(--sombra); }
.acceso__caja h2 { font-size: 1.75rem; margin-bottom: .4rem; }
.acceso__intro { font-family: var(--serif); color: var(--texto-suave); font-size: .9375rem; margin-bottom: 1.5rem; }
.acceso__pie, .acceso__nota { font-size: .75rem; text-align: center; color: var(--texto-tenue); margin: 1rem 0 0; }
.acceso__pie a { color: var(--acento); }
.estrecho { max-width: 30rem; }

/* --------------------------------------------------------- diagnóstico */

.diagnostico { max-width: 46rem; }
.diagnostico dl { background: var(--fondo-alt); border: 1px solid var(--filete); border-radius: var(--radio); padding: 1.25rem; margin: 1.5rem 0; }
.diagnostico dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.diagnostico dd { margin: .2rem 0 1rem; }
.diagnostico dd:last-child { margin-bottom: 0; }
.diagnostico h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
.diagnostico ol { padding-left: 1.4rem; }
.diagnostico li { margin-bottom: .6rem; }
.diagnostico pre { background: var(--fondo-alt); border: 1px solid var(--filete); border-radius: var(--radio); padding: .75rem; overflow-x: auto; font-size: .8125rem; }

/* ------------------------------------------------------- medidor fuerza */

.fuerza { margin-top: .5rem; }
.fuerza__barra { height: 4px; background: var(--fondo-hueco); border-radius: 999px; overflow: hidden; }
.fuerza__barra span { display: block; height: 100%; width: 0; transition: width .25s, background-color .25s; }
.fuerza__texto { font-size: .75rem; margin: .3rem 0 0; color: var(--texto-tenue); }

@media (prefers-color-scheme: dark) {
	:root {
		--fondo: #121317; --fondo-alt: #1a1c21; --fondo-hueco: #212429;
		--texto: #eceef1; --texto-suave: #a2a8b2; --texto-tenue: #7d838d;
		--filete: #2b2f36; --filete-fuerte: #eceef1;
		--acento: #7aa2ff; --acento-fondo: #16203a;
	}
	.boton--principal, .boton:hover { color: #121317; }
	.aviso--exito { background: #16301f; color: #b9e6c6; }
	.aviso--error { background: #331a1b; color: #f0b4b4; }
}