:root{
  --pasto:#1B4332; --pasto-brillante:#3F9367; --tiza:#F2F4EE;
  --tiza-suave:#E7EBE2; --tinta:#12211A; --tinta-suave:#4B5A52; --oro:#D9A441;
  --oro-oscuro:#A9781F; --roja:#B4322C; --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--tiza); color:var(--tinta); font-family:'Inter',sans-serif; line-height:1.6;
}
h1,h2,h3{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; color:var(--pasto); line-height:1.05;
}
a{color:var(--pasto);}
:focus-visible{outline:3px solid var(--oro); outline-offset:2px;}

nav.barra{
  background:var(--pasto); color:#fff; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
nav.barra .marca{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.3rem;}
nav.barra a.enlace{color:rgba(255,255,255,0.82); font-size:13px; text-decoration:none; margin-left:16px;}
nav.barra a.enlace:hover{color:#fff;}

.contenedor{max-width:560px; margin:0 auto; padding:40px 20px 60px;}
.contenedor.ancho{max-width:640px;}

.caja{
  background:#fff; border:1.5px solid var(--tiza-suave); border-radius:14px; padding:32px 30px;
}

.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.campo label{font-size:13px; font-weight:600; color:var(--tinta);}
.campo input, .campo select, .campo textarea{
  padding:13px 15px; border-radius:8px; border:1.5px solid var(--tiza-suave);
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--tinta); background:var(--tiza);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{border-color:var(--pasto-brillante); background:#fff;}
.campo textarea{resize:vertical; min-height:90px;}

.boton{
  width:100%; padding:13px; border-radius:8px; border:none; background:var(--pasto);
  color:#fff; font-weight:600; font-size:15px; cursor:pointer; font-family:'Inter',sans-serif;
}
.boton:hover{background:#153a2a;}
.boton:disabled{opacity:0.6; cursor:default;}

.error{
  background:#FBEAE8; border:1px solid var(--roja); color:var(--roja);
  padding:10px 14px; border-radius:8px; font-size:13.5px; margin-bottom:16px;
}
.exito-mensaje{
  background:#E9F2EC; border:1px solid var(--pasto-brillante); color:var(--pasto);
  padding:10px 14px; border-radius:8px; font-size:13.5px; margin-bottom:16px;
}

.nota{font-size:13px; color:var(--tinta-suave); text-align:center; margin-top:18px;}
.nota a{font-weight:600;}

.tarjeta-post{
  background:#fff; border:1.5px solid var(--tiza-suave); border-radius:12px;
  padding:18px 20px; margin-bottom:14px;
}
.tarjeta-post .encabezado{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.tarjeta-post .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--tiza-suave);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  color:var(--pasto); flex-shrink:0;
}
.tarjeta-post .autor{font-size:14px; font-weight:600;}
.tarjeta-post .fecha{font-size:12px; color:var(--tinta-suave);}
.tarjeta-post .cuerpo{font-size:14.5px; color:var(--tinta); white-space:pre-wrap;}

.menu-opciones-contenedor{position:relative; margin-left:auto;}
.boton-puntitos{
  background:none; border:none; cursor:pointer; font-size:18px; line-height:1; color:var(--tinta-suave);
  padding:4px 9px; border-radius:6px; -webkit-appearance:none; appearance:none;
}
.boton-puntitos:hover{background:var(--tiza-suave); color:var(--tinta);}
.boton-puntitos-chico{font-size:15px; padding:2px 7px;}
.menu-desplegable{
  display:none; position:absolute; right:0; top:100%; margin-top:4px;
  background:#fff; border:1px solid var(--tiza-suave); border-radius:10px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.10); min-width:130px; z-index:20;
}
.menu-desplegable.abierto{display:block;}
.menu-desplegable form{margin:0;}
.opcion-menu{
  display:block; width:100%; text-align:left; padding:10px 14px; font-size:13px;
  background:none; border:none; cursor:pointer; color:var(--tinta); font-family:'Inter',sans-serif;
  -webkit-appearance:none; appearance:none;
}
.opcion-menu:hover{background:var(--tiza);}
.opcion-peligro{color:var(--roja);}
.opcion-peligro:hover{background:#FBEAE8;}

.forma-editar-publicacion{margin-top:2px;}
.forma-editar-publicacion textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1.5px solid var(--tiza-suave);
  font-family:'Inter',sans-serif; font-size:14px; margin-bottom:8px; min-height:70px; resize:vertical;
}
.acciones-editar{display:flex; gap:8px;}
.boton-mini{
  padding:7px 14px; border-radius:8px; border:none; background:var(--pasto); color:#fff;
  font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;
}
.boton-mini-secundario{background:var(--tiza-suave); color:var(--tinta-suave);}

.contador-caracteres{font-size:12px; color:var(--tinta-suave); text-align:right; margin-top:-10px; margin-bottom:16px;}

.vacio{padding:26px; text-align:center; color:var(--tinta-suave); font-size:14px; background:#fff; border-radius:12px; border:1.5px dashed var(--tiza-suave);}

.enlace-volver{font-size:13px; color:var(--tinta-suave); text-decoration:none; display:inline-block; margin-bottom:16px;}
.enlace-volver:hover{color:var(--pasto);}

.tarjeta-simple{background:#fff; border:1.5px solid var(--tiza-suave); border-radius:12px; padding:16px 20px; margin-bottom:12px;}
.tarjeta-simple a.titulo{text-decoration:none; color:var(--pasto); font-weight:700; font-size:1.05rem;}
.tarjeta-simple .meta{font-size:12.5px; color:var(--tinta-suave); margin-top:2px;}

.insignia-nivel{
  display:inline-block; padding:3px 9px; border-radius:6px; font-size:11.5px; font-weight:600;
  background:var(--tiza-suave); color:var(--tinta-suave); margin-right:6px; margin-top:6px;
}
.insignia-protegida{background:#E9F2EC; color:var(--pasto);}
.insignia-abierta{background:#FCEFD8; color:var(--oro-oscuro);}

.encabezado-pagina{margin-bottom:20px;}
.encabezado-pagina h1{font-size:1.9rem; margin-bottom:4px;}
.encabezado-pagina .meta{font-size:13.5px; color:var(--tinta-suave);}
.encabezado-pagina p.descripcion{margin-top:10px; font-size:14.5px; color:var(--tinta);}

.boton-agregar-foto{
  display:inline-flex; align-items:center; font-size:13px; color:var(--pasto); cursor:pointer;
  padding:8px 12px; border-radius:8px; border:1.5px solid var(--tiza-suave); margin-bottom:12px;
  background:#fff;
}
.boton-agregar-foto:hover{background:var(--tiza);}

.marco-imagen{
  width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--tiza-suave);
  margin:10px 0; cursor:zoom-in; position:relative;
}
.marco-imagen img{width:100%; height:100%; object-fit:cover; display:block;}
.marco-imagen.vista-previa{cursor:default; max-width:260px; margin-bottom:14px;}
.boton-quitar-imagen{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(18,33,26,0.7); color:#fff; border:none; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none;
}
.boton-quitar-imagen:hover{background:rgba(18,33,26,0.9);}

.lightbox-fondo{
  position:fixed; inset:0; background:rgba(18,33,26,0.92); display:none; align-items:center;
  justify-content:center; z-index:100; padding:24px;
}
.lightbox-fondo.abierto{display:flex;}
.lightbox-fondo img{max-width:100%; max-height:88vh; border-radius:8px; box-shadow:0 20px 50px rgba(0,0,0,0.4);}
.lightbox-cerrar{
  position:absolute; top:20px; right:24px; background:rgba(255,255,255,0.12); border:none;
  color:#fff; font-size:20px; cursor:pointer; padding:8px 13px; line-height:1; border-radius:8px;
  -webkit-appearance:none; appearance:none;
}
.lightbox-cerrar:hover{background:rgba(255,255,255,0.22);}

.pie-post{display:flex; align-items:center; gap:4px; padding-top:12px; margin-top:12px; border-top:1px solid var(--tiza-suave); flex-wrap:wrap;}
.reaccion-boton{
  display:flex; align-items:center; gap:5px; font-size:12.5px; padding:6px 9px;
  border-radius:8px; border:none; background:none; cursor:pointer;
  color:var(--tinta-suave); font-family:'Inter',sans-serif; transition:background 0.12s ease, color 0.12s ease;
  -webkit-appearance:none; appearance:none;
}
.reaccion-boton svg, .reaccion-boton img{width:15px; height:15px; object-fit:contain;}
.reaccion-boton:hover{background:var(--tiza-suave);}
.reaccion-boton.activa{background:var(--tiza); color:var(--pasto); font-weight:600;}
.boton-comentarios{
  margin-left:auto; font-size:12.5px; color:var(--tinta-suave); background:none; border:none;
  cursor:pointer; font-family:'Inter',sans-serif; padding:6px 9px; border-radius:8px;
  -webkit-appearance:none; appearance:none;
}
.boton-comentarios:hover{background:var(--tiza-suave); color:var(--pasto);}

.seccion-comentarios{display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--tiza-suave);}
.seccion-comentarios.abierta{display:block;}
.comentario-item{display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:13px; margin-bottom:6px;}
.comentario-item .autor-comentario{font-weight:600;}
.comentario-item .fecha-comentario{color:var(--tinta-suave); font-size:11px;}
.menu-comentario{margin-left:auto;}
.forma-comentario{display:flex; gap:8px; margin-top:8px;}
.forma-comentario input[type="text"]{
  flex:1; padding:9px 12px; border-radius:8px; border:1.5px solid var(--tiza-suave);
  font-size:13px; font-family:'Inter',sans-serif; background:var(--tiza);
}
.forma-comentario input[type="text"]:focus{border-color:var(--pasto-brillante); background:#fff;}
.forma-comentario button{
  padding:9px 14px; border-radius:8px; border:none; background:var(--pasto);
  color:#fff; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}

.forma-editar-comentario{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 12px;}
.forma-editar-comentario input[type="text"]{
  flex:1; min-width:160px; padding:8px 12px; border-radius:8px; border:1.5px solid var(--tiza-suave);
  font-size:13px; font-family:'Inter',sans-serif;
}