/* APEV · paginas de la aplicacion (cuentas, credencial, administracion). Usa las variables de estilos.css */
.app__main { padding: 40px 0 72px; min-height: 60vh; }
.app__angosto { max-width: 520px; }
.app__medio { max-width: 820px; }
.app__ancho { max-width: 1240px; }
.app h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.entrada { font-size: 1.1rem; color: var(--gris); }
.subtitulo-chico { font-family: var(--serif); color: var(--azul); font-size: 1.3rem; margin: 8px 0 12px; }

.formulario--ancho { margin-bottom: 28px; }
.formulario small, .campo small { color: var(--gris); font-size: .82rem; }
.campo select, .campo textarea, .acciones textarea, .buscador input { font: inherit; padding: 12px 14px; border: 1px solid #cfd6de; border-radius: 10px; background: #fff; width: 100%; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.casilla input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.boton--borde { background: transparent; box-shadow: inset 0 0 0 2px var(--azul); color: var(--azul) !important; }
.boton--rojo { background: var(--rojo); color: #fff !important; }
.boton:disabled { opacity: .6; cursor: wait; }

.mensaje { padding: 14px 18px; border-radius: 10px; background: var(--tono); margin: 16px 0; }
.mensaje--bien { background: #e8f6ee; color: #145a32; }
.mensaje--mal { background: #fdecea; color: #8e2318; }

.pasos-jornada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.paso-j { background: var(--tono); border-radius: var(--radio); padding: 22px; position: relative; }
.paso-j__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ambar); color: var(--azul); font-weight: 800; margin-bottom: 10px; }
.paso-j h3 { color: var(--azul); }
.paso-j p { color: var(--gris); margin: 0; font-size: .95rem; }
.datos-pago { white-space: pre-line; background: var(--tono); border-radius: 10px; padding: 12px 14px; }
.tarjeta--pago { background: #fff; }

.estado { border-radius: var(--radio); padding: 18px 22px; margin: 18px 0 28px; border-left: 6px solid var(--turquesa); background: #eef5fb; }
.estado--aprobada { border-color: #1e8449; background: #e8f6ee; }
.estado--rechazada { border-color: var(--rojo); background: #fdecea; }
.estado__titulo { font-size: 1.1rem; }
.estado__motivo { background: #fff; padding: 10px 14px; border-radius: 8px; }
.estado p:last-child { margin-bottom: 0; }

.archivos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.archivo { background: #fff; border: 1px dashed #b8c4d0; border-radius: 12px; padding: 14px; }
.archivo label { font-weight: 700; color: var(--azul); }
.archivo p { margin: 2px 0 8px; }
.archivo input[type=file] { width: 100%; font-size: .9rem; }
.archivo__actual img, .archivo__previa { max-width: 100%; max-height: 160px; border-radius: 8px; display: block; margin: 6px 0; }

/* Administracion */
.admin-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--linea); padding-bottom: 12px; }
.admin-menu a { text-decoration: none; font-weight: 600; color: var(--azul); padding: 6px 12px; border-radius: 999px; background: var(--tono); }
.contadores { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.contador { text-decoration: none; color: var(--tinta); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font-size: .92rem; }
.contador strong { margin-left: 4px; }
.contador.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.buscador { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.buscador input { flex: 1 1 280px; width: auto; }
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.tabla th { background: var(--tono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.tabla tr.inactiva td { opacity: .5; }
.miniatura { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; background: var(--tono); }
.etiqueta { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #eef5fb; color: var(--turquesa); }
.etiqueta--aprobada { background: #e8f6ee; color: #1e8449; }
.etiqueta--rechazada { background: #fdecea; color: var(--rojo); }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; }
.acciones-fila form { margin: 0; }

.ficha { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0; }
.datos dt { color: var(--gris); font-size: .88rem; }
.datos dd { margin: 0; font-weight: 500; word-break: break-word; }
.acciones { display: grid; gap: 8px; margin-top: 16px; }
.ficha__archivos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ficha__archivo { margin: 0; background: var(--tono); border-radius: 12px; padding: 12px; }
.ficha__archivo figcaption { font-weight: 700; color: var(--azul); margin-bottom: 8px; }
.ficha__archivo img { width: 100%; max-height: 320px; object-fit: contain; background: #fff; border-radius: 8px; }
.liga { display: grid; gap: 10px; }
.liga p { margin: 0; }
.liga__texto { font: inherit; font-size: .88rem; padding: 10px 12px; border: 1px solid #b7dcc4; border-radius: 8px; width: 100%; background: #fff; }
.liga .boton { justify-self: start; }
.invitar { margin-bottom: 24px; }
.pie a { color: rgba(255,255,255,.85); }
.pie__version { opacity: .6; }

@media (max-width: 860px) {
  .pasos-jornada, .archivos, .ficha, .ficha__archivos { grid-template-columns: 1fr; }
}