:root{
  --piedra:#CAC7BC; --piedra-honda:#B8B5A9;
  --olivo:#767A60; --olivo-hondo:#63674F;
  --tinta:#1B1C18; --blanco:#fff; --alerta:#8C4A3F;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--piedra);color:var(--tinta);
  font-family:"Jost",system-ui,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--olivo);outline-offset:2px}

.cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:.9rem 1.6rem;
  background:var(--tinta);color:var(--piedra);
}
.marca{font-size:1rem;letter-spacing:.3em;text-decoration:none}
.marca span{letter-spacing:.1em;opacity:.55;font-size:.8rem;margin-left:.5rem}
.cabeza nav{display:flex;gap:1.3rem;font-size:.85rem;letter-spacing:.06em}
.cabeza nav a{text-decoration:none;opacity:.8}
.cabeza nav a:hover{opacity:1}

.envoltura{max-width:64rem;margin:0 auto;padding:2rem 1.6rem 5rem}
h1{font-weight:400;font-size:1.5rem;letter-spacing:.04em;margin:0 0 1.4rem}
h2.titulo-fotos{font-weight:400;font-size:1.15rem;letter-spacing:.05em;margin:2.8rem 0 1rem}
.cuenta{color:var(--olivo-hondo);font-size:.8rem;margin-left:.4rem}

.aviso{background:var(--olivo);color:#fff;padding:.8rem 1.1rem;margin:0 0 1.5rem}
.mal{background:var(--alerta);color:#fff;padding:.8rem 1.1rem;margin:0 0 1.5rem}
.nota-suave{color:var(--olivo-hondo);font-size:.92rem;max-width:62ch}

.boton{
  display:inline-block;background:var(--olivo);color:#fff;border:1px solid var(--olivo);
  padding:.55rem 1.3rem;text-decoration:none;font-size:.9rem;letter-spacing:.06em;
}
.boton:hover{background:var(--olivo-hondo)}
.boton.suave{background:transparent;color:var(--tinta);border-color:var(--piedra-honda);margin-left:.5rem}
.boton.suave:hover{border-color:var(--olivo);background:transparent}

.encabezado-lista{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.encabezado-lista h1{margin:0}

/* ---------- lista ---------- */
.tabla{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.92rem}
.tabla th{
  text-align:left;font-weight:400;font-size:.72rem;letter-spacing:.13em;
  color:var(--olivo-hondo);padding:.5rem .6rem;border-bottom:1px solid var(--piedra-honda);
}
.tabla td{padding:.55rem .6rem;border-bottom:1px solid var(--piedra-honda);vertical-align:middle}
.tabla tr.borrador{opacity:.5}
.tabla a{text-decoration:none;border-bottom:1px solid transparent}
.tabla a:hover{border-bottom-color:var(--tinta)}
.mini{width:74px}
.mini img{width:66px;height:50px;object-fit:cover;background:var(--piedra-honda)}
.sin-foto{font-size:.7rem;color:var(--olivo-hondo)}
.sitio{display:block;font-size:.76rem;color:var(--olivo-hondo)}
.en-linea{display:inline}
.icono{background:none;border:none;font-size:1.05rem;color:var(--piedra-honda);padding:.15rem .3rem}
.icono.activo{color:var(--olivo)}
.icono:hover{color:var(--tinta)}
.icono.peligro:hover{color:var(--alerta)}
.pildora{
  background:none;border:1px solid var(--piedra-honda);color:var(--olivo-hondo);
  padding:.2rem .7rem;font-size:.74rem;letter-spacing:.08em;
}
.pildora.si{background:var(--olivo);border-color:var(--olivo);color:#fff}

/* ---------- formularios ---------- */
.caja-entrar{max-width:21rem;margin:3rem auto}
.ficha-form{max-width:44rem}
.campo{margin-bottom:1.2rem}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:620px){.dos{grid-template-columns:1fr}}
label{display:block;font-size:.72rem;letter-spacing:.13em;color:var(--olivo-hondo);margin-bottom:.3rem}
input[type=text],input[type=password],input:not([type]),select,textarea{
  width:100%;padding:.5rem .6rem;border:1px solid var(--piedra-honda);
  background:#fff;font:inherit;font-size:.95rem;border-radius:0;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--olivo)}
.marcas{display:flex;gap:1.8rem;flex-wrap:wrap;margin:.5rem 0 1.6rem}
.marcas label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;letter-spacing:0;color:var(--tinta)}
.marcas input{width:auto}
.caja-entrar button{width:100%;background:var(--olivo);color:#fff;border:none;padding:.6rem;letter-spacing:.08em}
.nota{font-size:.85rem;color:var(--olivo-hondo);margin-top:1.2rem}

/* ---------- subida y fotos ---------- */
.subida{
  border:1px dashed var(--piedra-honda);padding:1.3rem;margin-bottom:1.8rem;
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;
}
.suelta{margin:0}
.suelta strong{display:block;font-size:1rem;letter-spacing:.03em;color:var(--tinta);margin-bottom:.2rem}
.suelta span{font-size:.85rem;color:var(--olivo-hondo);letter-spacing:0}
.subida input[type=file]{font-size:.88rem}

.cuadricula{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.tarjeta-foto{margin:0;background:var(--piedra-honda)}
.tarjeta-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tarjeta-foto figcaption{padding:.5rem .55rem .6rem;background:var(--piedra)}
.sellos{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.4rem;min-height:1.1rem}
.sello{background:var(--olivo);color:#fff;font-size:.65rem;letter-spacing:.1em;padding:.1rem .45rem}
.sello.tenue{background:none;color:var(--alerta);border:1px solid var(--alerta)}
.acciones{display:flex;gap:.25rem;flex-wrap:wrap}
.chico{
  background:none;border:1px solid var(--piedra-honda);color:var(--olivo-hondo);
  font-size:.7rem;letter-spacing:.06em;padding:.2rem .5rem;
}
.chico:hover{border-color:var(--olivo);color:var(--tinta)}
.chico.peligro:hover{border-color:var(--alerta);color:var(--alerta)}