:root{
  --cream:#EAEDED;
  --paper:#FFFFFF;
  --paper-2:#FFFFFF;
  --ink:#0F1111;
  --ink-soft:#565959;
  --line:#D5D9D9;
  --clay:#FF9900;
  --clay-dark:#C7511F;
  --clay-tint:#FFF4E0;
  --pine:#007185;
  --pine-dark:#005F6E;
  --pine-tint:#E3F3F5;
  --moss:#131921;
  --nav2:#232F3E;
  --amarillo:#FFD814;
  --amarillo-hover:#F7CA00;
  --naranja-busca:#FEBD69;
  --verde:#1E9E4A;
  --verde-hover:#177F3B;
  --precio:#B12704;
  --warn:#9A6B1E;
  --warn-tint:#FFF3CD;
  --danger:#B12704;
  --shadow: 0 6px 18px rgba(15,17,17,0.12);
  --radius: 10px;
}
/*
   El atributo hidden lo aplica el navegador con display:none, pero cualquier
   regla propia con display (por ejemplo .modal-body{display:flex}) le gana por
   especificidad y el elemento se sigue viendo. Esto lo hacía visible el
   formulario de contraseña encima del panel ya abierto.
*/
[hidden]{ display:none !important; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
}
h1,h2,h3{ font-family:'Inter', sans-serif; font-weight:800; letter-spacing:-0.3px; text-wrap:balance; margin:0; }
p{ margin:0; }
button, input, select, textarea{ font-family: inherit; font-size: 15px; color: inherit; }
button{ cursor:pointer; }
a{ color: var(--pine-dark); }

.shell{ max-width: 1240px; margin: 0 auto; padding: 0 22px; }

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

.topbar{
  background: var(--moss); color:#fff;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.topbar-inner{ max-width:1240px; margin:0 auto; padding: 10px 22px; display:flex; align-items:center; gap:18px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex-shrink:0; padding:4px 6px; border:1px solid transparent; border-radius:6px; }
.brand:hover{ border-color:#fff; }
.brand-mark{
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(145deg, #FFB84D, #FF9900);
  color:#131921; font-weight:800; font-size:15px; letter-spacing:0.5px;
  display:flex; align-items:center; justify-content:center;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand .mark{ font-weight:800; font-size:20px; color:#fff; letter-spacing:-0.3px; }
.brand .tag{ font-size:11.5px; color:#C8D1DA; margin-top:2px; }

/* El buscador manda: es lo que más se usa en una tienda grande. */
.buscador{
  flex:1; display:flex; height:44px; min-width:0; max-width:820px;
  background:#fff; border-radius:8px; overflow:hidden;
  transition: box-shadow .15s ease;
}
.buscador:focus-within{ box-shadow: 0 0 0 3px var(--clay); }
#search-cat{
  flex-shrink:0; max-width:150px; border:none; border-right:1px solid #CDCDCD;
  background:#E6E6E6; color:#0F1111; font-size:13px; padding:0 8px; cursor:pointer;
}
#search-cat:hover{ background:#DADADA; }
#search-input{ flex:1; min-width:0; border:none; padding:0 14px; font-size:15px; color:#0F1111; background:#fff; }
#search-input:focus{ outline:none; }
.buscador-btn{
  width:54px; flex-shrink:0; border:none; background: var(--naranja-busca); color:#131921;
  display:flex; align-items:center; justify-content:center;
}
.buscador-btn:hover{ background:#F3A847; }
.buscador-btn svg{ width:22px; height:22px; }

.catbar{ background: var(--nav2); position:relative; }
.catbar-inner{ max-width:1240px; margin:0 auto; padding: 0 22px; display:flex; align-items:center; gap:4px; height:40px; }
.catbar-todas{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  background:none; color:#fff; font-weight:700; font-size:14px;
  border:1px solid transparent; border-radius:4px; padding:6px 10px;
}
.catbar-todas svg{ width:18px; height:18px; }
.catbar-todas:hover, .catbar-todas[aria-expanded="true"]{ border-color:#fff; }
.catbar-links{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1; }
.catbar-links::-webkit-scrollbar{ display:none; }
.catbar-links button{
  flex-shrink:0; white-space:nowrap; background:none; color:#fff; font-size:13.5px;
  border:1px solid transparent; border-radius:4px; padding:6px 9px;
}
.catbar-links button:hover{ border-color:#fff; }
.catbar-links button[aria-current="true"]{ background: rgba(255,255,255,0.14); font-weight:700; }
.catbar-extra{ flex-shrink:0; color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; padding:6px 9px; border:1px solid transparent; border-radius:4px; }
.catbar-extra:hover{ border-color:#fff; }

/* Menú de todas las categorías, con cuántos artículos tiene cada una. */
.menu-categorias{
  position:absolute; left:0; right:0; top:100%; z-index:45;
  max-width:1240px; margin:0 auto; padding:0 22px;
}
.menu-categorias > *{ background:#fff; color: var(--ink); }
.menu-cat-t{
  font-weight:800; font-size:16px; padding:16px 20px 10px; border-radius:0 0 0 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.menu-cat-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:2px;
  padding: 4px 12px 16px; border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 30px rgba(0,0,0,0.25);
}
.menu-cat-item{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:none; border:none; border-radius:8px; padding:10px 10px; font-size:14.5px; color: var(--ink);
}
.menu-cat-item:hover{ background: var(--clay-tint); }
.menu-cat-item .ico{ font-size:22px; width:30px; text-align:center; }
.menu-cat-item .nom{ flex:1; font-weight:600; }
.menu-cat-item .num{ font-size:12px; color: var(--ink-soft); background:#F0F2F2; border-radius:20px; padding:2px 8px; }

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

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 8px; border: 1px solid transparent; padding: 10px 18px;
  font-weight:600; font-size:14.5px; white-space:nowrap; text-decoration:none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-lg{ padding:14px 26px; font-size:15.5px; border-radius:9px; }
/* Amarillo con letra oscura, como el botón de comprar de las tiendas grandes:
   con letra blanca el amarillo no se lee. */
.btn-clay{ background: var(--amarillo); border-color:#FCD200; color:#0F1111; box-shadow: 0 2px 5px rgba(213,217,217,0.5); }
.btn-clay:hover{ background: var(--amarillo-hover); border-color:#F2C200; }
.btn-ghost{ background:transparent; border-color: rgba(255,255,255,0.7); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,0.1); }
.btn-line{ background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-line:hover{ border-color: var(--clay); background:#F7FAFA; }
.btn-pine{ background: var(--verde); color:#fff; }
.btn-pine:hover{ background: var(--verde-hover); }
.btn-danger{ background: transparent; border-color: var(--line); color: var(--danger); }
.btn-danger:hover{ border-color: var(--danger); background: rgba(166,64,47,0.08); }
.btn-sm{ padding: 7px 12px; font-size: 13px; }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }

/* ---------------- portada ---------------- */

.hero{
  background:
    radial-gradient(700px 300px at 85% 10%, rgba(255,216,20,0.28), transparent 60%),
    linear-gradient(115deg, #0B4FA8 0%, #0A6FD1 45%, #00A3E0 100%);
  color:#fff; padding: 38px 0 40px;
}
.hero-inner{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap:34px; align-items:center; }
.hero-eyebrow{
  font-size:12.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color: var(--amarillo); margin-bottom:10px;
}
.hero h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.08; letter-spacing:-0.8px; font-weight:800; color:#fff; }
.hero-sub{ color: rgba(255,255,255,0.92); max-width: 600px; font-size:16.5px; line-height:1.6; margin-top:12px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.hero-trust{
  list-style:none; margin:0; padding:18px 20px; display:flex; flex-direction:column; gap:14px;
  background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); border-radius:14px;
  backdrop-filter: blur(6px);
}
.hero-trust li{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:#fff; font-weight:500; }
.hero-trust svg{ width:22px; height:22px; color: var(--amarillo); flex-shrink:0; }

/* Mosaico "Explora por categoría": cada una con su color de fondo, para que se
   distingan de un vistazo. */
.cat-tiles{ padding-top:24px; padding-bottom:6px; }
.cat-tiles h2{ font-size:21px; margin-bottom:14px; }
.tiles{ display:grid; grid-template-columns: repeat(auto-fill, minmax(128px,1fr)); gap:12px; }
.tile{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:#fff; border:1px solid #E3E6E6; border-radius:12px; padding:14px 8px 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--clay); }
.tile-activa{ border:2px solid var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }
.tile-ico{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; background:#FFE8CC; }
.tile:nth-child(7n+2) .tile-ico{ background:#DDF1FF; }
.tile:nth-child(7n+3) .tile-ico{ background:#E4F7E7; }
.tile:nth-child(7n+4) .tile-ico{ background:#FDE2F1; }
.tile:nth-child(7n+5) .tile-ico{ background:#ECE6FF; }
.tile:nth-child(7n+6) .tile-ico{ background:#FFF6BF; }
.tile:nth-child(7n+7) .tile-ico{ background:#DDF7F4; }
.tile-nom{ font-size:13px; font-weight:700; color: var(--ink); line-height:1.25; }
.tile-num{ font-size:11.5px; color: var(--ink-soft); }

/* ---------------- tienda: filtros y resultados ---------------- */

.tienda{ display:grid; grid-template-columns: 250px minmax(0,1fr); gap:20px; align-items:start; padding-top:20px; scroll-margin-top:110px; }
.filtros{
  background:#fff; border:1px solid #E3E6E6; border-radius:12px; padding:16px 16px 6px;
  position:sticky; top:112px; max-height: calc(100vh - 128px); overflow-y:auto;
}
.filtros-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:16px; }
.filtros-cerrar{ display:none; background:none; border:none; font-size:26px; line-height:1; color: var(--ink-soft); padding:2px 8px; }
.f-grupo{ border:none; margin:0 0 16px; padding:0 0 14px; border-bottom:1px solid #EEF0F0; }
.f-grupo:last-child{ border-bottom:none; }
.f-grupo legend{ font-weight:800; font-size:14px; margin-bottom:6px; padding:0; }
.f-opcion{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; cursor:pointer; }
.f-opcion input{ accent-color: var(--pine); width:16px; height:16px; margin:0; flex-shrink:0; }
.f-opcion span{ flex:1; }
.f-opcion:hover span{ color: var(--clay-dark); }
.f-opcion em{ font-style:normal; font-size:12px; color: var(--ink-soft); }
.f-vacia{ opacity:0.45; }
.f-precio{ display:flex; align-items:center; gap:6px; }
.f-precio input{ width:100%; min-width:0; border:1px solid #BBBFBF; border-radius:7px; padding:8px 9px; font-size:13.5px; }
.f-precio span{ color: var(--ink-soft); font-size:13px; }

.resultados{ min-width:0; }
.resultados-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.resultados-cab h2{ font-size:22px; }
.resultados-acciones{ display:flex; gap:8px; align-items:center; }
#btn-filtros{ display:none; }
select.field{ border:1px solid #BBBFBF; background:#F0F2F2; border-radius:8px; padding:9px 12px; color: var(--ink); font-size:13.5px; box-shadow: 0 2px 5px rgba(15,17,17,0.08); }
.results-count{ font-size:13px; color: var(--ink-soft); margin-top:3px; font-weight:500; }
.search-input{ flex:1 1 200px; min-width:160px; border:1px solid var(--line); background: var(--paper); border-radius:8px; padding:10px 13px; }

.chips-activos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chips-activos:empty{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #BBBFBF;
  border-radius:20px; padding:6px 12px; font-size:13px; font-weight:600; color: var(--ink);
}
.chip b{ color: var(--ink-soft); font-size:15px; line-height:1; }
.chip:hover{ border-color: var(--clay); background: var(--clay-tint); }
.chip-limpiar{ background:none; border:none; color: var(--pine); font-size:13px; font-weight:600; text-decoration:underline; padding:6px 4px; }

/* ---------------- tarjetas ---------------- */

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; padding: 14px 0 48px; }
.card{
  background:#fff; border:1px solid #E3E6E6; border-radius: 10px;
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(15,17,17,0.16);
  border-color: #C7CBCB;
}
.card-photo{ position:relative; aspect-ratio: 1/1; background:#F7F8F8; overflow:hidden; }
.card-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.card:hover .card-photo img{ transform: scale(1.05); }
.card-photo .noimg{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  height:100%; color: var(--ink-soft); font-size:12.5px;
  background: repeating-linear-gradient(45deg, var(--line) 0 10px, transparent 10px 20px);
}
.badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; }
.badge{
  font-size:10.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  padding:5px 9px; border-radius:6px; backdrop-filter: blur(4px);
}
.badge-type{ background: #232F3E; color:#fff; }
/* Estado del artículo: verde lo nuevo, azul lo casi nuevo, naranja lo que
   tiene uso. Lo recién publicado, en rojo de oferta. Que se lean de lejos. */
.badge-estado-nuevo{ background: #067D62; color:#fff; }
.badge-estado-comonuevo{ background: #0A6FD1; color:#fff; }
.badge-estado-usado{ background: #C7511F; color:#fff; }
.badge-nuevo{ background: #CC0C39; color:#fff; }

/* Cuántas fotos trae el anuncio: sin esto parecía que solo tenía las visibles. */
.card-media{
  position:absolute; right:10px; bottom:10px; display:flex; align-items:center; gap:6px;
  background: rgba(20,18,12,0.72); color:#fff; font-size:11.5px; font-weight:600;
  padding:5px 9px; border-radius:6px; backdrop-filter: blur(4px);
}
.card-media svg{ width:13px; height:13px; }

.card-body{ padding: 15px 16px 17px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card-title{ font-size:15px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta{ font-size:12.5px; font-weight:600; color: var(--ink); min-height:1.2em; }
.card-loc{ font-size:13px; color: var(--ink-soft); }
.card-price{ font-weight:800; font-size:22px; color: var(--precio); margin-top:4px; font-variant-numeric: tabular-nums; letter-spacing:-0.3px; }
.card-actions{ margin-top:auto; padding-top:13px; display:flex; gap:8px; }
.card-actions .btn{ flex:1; }

.empty-state{ text-align:center; padding: 70px 20px; color: var(--ink-soft); }
.empty-state h3{ margin-bottom:8px; color: var(--ink); font-size:19px; }

/* ---------------- cómo funciona ---------------- */

.pasos{ background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 58px 0 62px; }
.pasos h2{ font-size:28px; }
.pasos-sub{ color: var(--ink-soft); font-size:15.5px; margin-top:8px; max-width:560px; }
.pasos-lista{ list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:26px; }
.pasos-lista li{ position:relative; padding-top:6px; }
.paso-num{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; margin-bottom:14px;
  background: var(--pine-tint); color: var(--pine-dark);
  font-family:'Inter',sans-serif; font-weight:700; font-size:17px;
  border:1px solid var(--pine);
}
.pasos-lista h3{ font-size:18px; margin-bottom:6px; }
.pasos-lista p{ font-size:14.5px; color: var(--ink-soft); line-height:1.65; }
.pasos-cta{ margin-top:38px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pasos-cta span{ font-size:13.5px; color: var(--ink-soft); }

/* ---------------- aviso legal ---------------- */

.aviso-legal{ background: var(--cream); padding: 40px 0; }
.aviso-inner{ display:flex; gap:16px; align-items:flex-start; }
.aviso-inner > svg{ width:30px; height:30px; color: var(--clay-dark); flex-shrink:0; margin-top:2px; }
.aviso-inner h3{ font-size:17px; margin-bottom:6px; }
.aviso-inner p{ font-size:14px; color: var(--ink-soft); line-height:1.7; max-width:760px; }

/* ---------------- pie ---------------- */

footer{ background: var(--moss); color:#DDE3EA; padding: 40px 0 30px; }
footer .shell{ display:flex; flex-direction:column; gap:22px; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px; }
.foot-brand{ display:flex; gap:12px; align-items:center; }
.foot-brand span#site-name-2{ font-family:'Inter',sans-serif; font-weight:600; font-size:18px; color:#FFFFFF; }
.foot-brand p{ font-size:12.5px; color:#9AA8B6; margin-top:2px; }
.foot-links{ display:flex; align-items:center; gap:18px; }
.foot-links a{ color:#C8D1DA; font-size:13px; text-decoration:none; }
.foot-links a:hover{ color:#FFFFFF; }
.foot-legal{ font-size:12px; color:#8C9AA8; max-width:700px; line-height:1.65; border-top:1px solid rgba(255,255,255,0.10); padding-top:18px; }
.admin-link{ background:none; border:none; color:#9AA8B6; font-size:12.5px; text-decoration:underline; padding:4px; }
.admin-link:hover{ color:#D5DCE3; }

@media (max-width:900px){
  .hero-inner{ grid-template-columns: 1fr; gap:22px; }
  .tienda{ grid-template-columns: 1fr; }
  /* En el celular los filtros son un cajón que sale por la izquierda. */
  .filtros{
    position:fixed; top:0; bottom:0; left:0; z-index:120; width:min(86vw, 340px);
    max-height:none; border-radius:0; border:none; padding:18px 18px 30px;
    transform: translateX(-105%); transition: transform .22s ease;
  }
  .filtros.abierto{ transform:none; box-shadow: 0 0 0 100vmax rgba(15,17,17,0.5); }
  .filtros-cerrar{ display:block; }
  #btn-filtros{ display:inline-flex; }
  .catbar-extra{ display:none; }
}
body.sin-scroll{ overflow:hidden; }
@media (max-width:700px){
  .topbar-inner{ flex-wrap:wrap; gap:10px 12px; padding:8px 14px 10px; }
  .brand{ padding:2px; }
  .brand .tag{ display:none; }
  #btn-open-publish{ margin-left:auto; padding:8px 14px; }
  .buscador{ order:3; flex-basis:100%; max-width:none; height:42px; }
  #search-cat{ max-width:92px; font-size:12px; }
  .catbar-inner{ padding:0 10px; }
  .hero{ padding: 26px 0 28px; }
  .hero-sub{ font-size:15px; }
  .hero-trust{ padding:14px 16px; gap:10px; }
  .hero-trust li{ font-size:13.5px; }
  /* El mosaico pasa a una fila deslizable para no ocupar media pantalla. */
  .tiles{ grid-auto-flow:column; grid-auto-columns:112px; grid-template-columns:none; overflow-x:auto; scrollbar-width:none; margin:0 -22px; padding:2px 22px 6px; min-width:0; }
  .tiles::-webkit-scrollbar{ display:none; }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .card-body{ padding:10px 10px 12px; }
  .card-price{ font-size:18px; }
  .card-actions{ flex-direction:column; gap:6px; }
  .menu-categorias{ padding:0; }
  .menu-cat-grid{ grid-template-columns: 1fr; max-height:70vh; overflow-y:auto; }
  .foot-top{ flex-direction:column; }
}

.overlay{ position:fixed; inset:0; background: rgba(20,18,12,0.55); display:flex; align-items:flex-start; justify-content:center; padding: 24px 14px; overflow-y:auto; z-index:100; }
.overlay[hidden]{ display:none; }
.modal{ background: var(--paper-2); border-radius: 12px; width:100%; max-width:560px; margin:20px auto; box-shadow: 0 30px 70px rgba(0,0,0,0.35); border:1px solid var(--line); }
.modal.modal-wide{ max-width: 760px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 22px; border-bottom:1px solid var(--line); }
.modal-head h2{ font-size:20px; }
.modal-close{ background:none; border:none; font-size:22px; line-height:1; color: var(--ink-soft); padding:4px 8px; border-radius:6px; }
.modal-close:hover{ background: var(--cream); color: var(--ink); }
.modal-body{ padding: 20px 22px 22px; display:flex; flex-direction:column; gap:16px; max-height: 74vh; overflow-y:auto; }

.field-group{ display:flex; flex-direction:column; gap:5px; }
.field-group label{ font-size:13px; font-weight:600; color: var(--ink-soft); }
.field-group .hint{ font-size:12px; color: var(--ink-soft); font-weight:400; }
.field-group input[type="text"], .field-group input[type="number"], .field-group input[type="tel"],
.field-group input[type="password"],
.field-group select, .field-group textarea{ border:1px solid var(--line); background: var(--paper); border-radius:7px; padding:10px 12px; width:100%; }
.field-group textarea{ min-height:96px; resize:vertical; }
.field-row{ display:flex; gap:12px; flex-wrap:wrap; }
.field-row .field-group{ flex:1 1 160px; }
.checkline{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--ink-soft); }

.photo-input-wrap{ border:1.5px dashed var(--line); border-radius:9px; padding:14px; text-align:center; }
.photo-input-wrap p{ font-size:12.5px; color: var(--ink-soft); margin-top:6px; }
.thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.thumb{ position:relative; width:64px; height:64px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb button{ position:absolute; top:1px; right:1px; background:rgba(0,0,0,0.6); color:#fff; border:none; width:18px; height:18px; border-radius:50%; font-size:11px; line-height:1; }

.form-msg{ font-size:13.5px; padding:10px 12px; border-radius:7px; }
.form-msg.error{ background: rgba(166,64,47,0.1); color: var(--danger); border:1px solid rgba(166,64,47,0.25); }
.form-msg.ok{ background: var(--pine-tint); color: var(--pine-dark); border:1px solid var(--pine); }

.detail-photos{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.detail-photos img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:7px; display:block; }
.detail-desc{ font-size:14.5px; color: var(--ink); line-height:1.7; white-space:pre-wrap; }
.detail-meta{ display:flex; gap:8px; flex-wrap:wrap; }

.admin-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); padding: 0 22px; }
.admin-tab{ background:none; border:none; padding:10px 4px; margin-right:14px; font-weight:600; font-size:13.5px; color: var(--ink-soft); border-bottom:2px solid transparent; white-space:nowrap; flex-shrink:0; }
/* En el celular no caben todas las pestañas: se deslizan de lado en vez de
   partirse en tres renglones y empujar "Ajustes" fuera de la pantalla. */
.admin-tabs{ overflow-x:auto; scrollbar-width:none; }
.admin-tabs::-webkit-scrollbar{ display:none; }
.admin-tab[aria-selected="true"]{ color: var(--clay-dark); border-color: var(--clay); }
.admin-stats{ display:flex; gap:10px; flex-wrap:wrap; padding: 4px 0 4px; }
.stat-chip{ background: var(--cream); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:12.5px; color: var(--ink-soft); }
.stat-chip b{ color: var(--ink); font-family:'Inter', sans-serif; font-size:15px; display:block; font-variant-numeric: tabular-nums; }
/*
   Las acciones iban en una columna angosta al lado derecho. Con ocho botones
   apilados de 143px, todos iguales, el que se buscaba era imposible de
   encontrar. Ahora van en una fila horizontal debajo de los datos, separadas
   por una línea, donde cada botón conserva su ancho natural y se lee.
*/
.admin-row{ display:flex; flex-wrap:wrap; gap:12px; padding:12px; border:1px solid var(--line); border-radius:9px; align-items:flex-start; background: var(--paper); }
.admin-row + .admin-row{ margin-top:10px; }
.admin-thumb{ width:56px; height:56px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--line); }
.admin-row-info{ flex:1 1 260px; min-width:0; }
.admin-row-info .t{ font-weight:600; font-size:14.5px; }
.admin-row-info .s{ font-size:12.5px; color: var(--ink-soft); margin-top:2px; }
.admin-row-actions{
  display:flex; gap:7px; flex-flow:row wrap; align-items:center;
  flex:1 1 100%; margin-top:4px; padding-top:11px; border-top:1px solid var(--line);
}
.status-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 7px; border-radius:5px; display:inline-block; }
.status-pendiente{ background: var(--warn-tint); color: var(--warn); }
.status-activo{ background: var(--pine-tint); color: var(--pine-dark); }
.status-archivado{ background: var(--line); color: var(--ink-soft); }
.status-rechazado{ background: var(--line); color: var(--ink-soft); }

.login-wrap{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background: var(--moss); color:#FFFFFF; padding:12px 20px; border-radius:8px; font-size:14px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index:200; max-width:90vw; text-align:center; }
.toast[hidden]{ display:none; }

@media (max-width:600px){
  .hero h1{ font-size:25px; }
  .modal{ margin: 8px auto; }
  /* En columna, el 160px de flex-basis se vuelve ALTO mínimo y deja huecos
     grandes entre campos: se devuelve a automático. */
  .field-row{ flex-direction:column; }
  .field-row .field-group{ flex-basis:auto; }
}

/* ================================================================== */
/* carteles: tira pública en la portada                               */
/* ================================================================== */

.posters{ padding: 6px 0 30px; }
.posters-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.posters-head h2{ font-size:22px; }
.posters-head p{ font-size:13.5px; color:var(--ink-soft); }
.posters-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.poster-card{
  display:block; text-decoration:none; color:inherit; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .15s ease;
}
.poster-card:hover{ transform:translateY(-2px); }
.poster-card .pc-photo{ aspect-ratio:4/3; background:var(--line); }
.poster-card .pc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.poster-card .pc-body{ padding:12px 13px 14px; }
.poster-card .pc-t{ font-family:'Inter',sans-serif; font-weight:600; font-size:15.5px; line-height:1.25; }
.poster-card .pc-s{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.poster-card .pc-p{ font-family:'Inter',sans-serif; font-weight:700; font-size:16px; color:var(--clay-dark); margin-top:6px; font-variant-numeric:tabular-nums; }

/* ================================================================== */
/* carteles: lista dentro del panel de administración                 */
/* ================================================================== */

.posters-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:4px; }
.posters-toolbar select{ border:1px solid var(--line); background:var(--paper); border-radius:7px; padding:9px 12px; max-width:260px; }
.poster-row{ display:flex; gap:12px; padding:12px; border:1px solid var(--line); border-radius:9px; align-items:center; background:var(--paper); }
.poster-row + .poster-row{ margin-top:10px; }
.poster-row .pr-thumb{ width:74px; height:56px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--line); }
.poster-row .pr-info{ flex:1; min-width:0; }
.poster-row .pr-t{ font-weight:600; font-size:14.5px; }
.poster-row .pr-s{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.poster-row .pr-actions{ display:flex; gap:6px; flex-shrink:0; }
.status-publicado{ background:var(--pine-tint); color:var(--pine-dark); }
.status-borrador{ background:var(--warn-tint); color:var(--warn); }

/* ================================================================== */
/* editor de carteles                                                 */
/* ================================================================== */

.pe-overlay{ position:fixed; inset:0; z-index:300; background:var(--cream); display:flex; flex-direction:column; }
.pe-overlay[hidden]{ display:none; }

.pe-head{
  flex-shrink:0; background:var(--moss); color:#FFFFFF;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 18px; flex-wrap:wrap;
}
.pe-head-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.pe-back{ background:transparent; border:1px solid rgba(255,255,255,0.3); color:#FFFFFF; border-radius:7px; padding:7px 12px; font-size:13.5px; font-weight:600; }
.pe-back:hover{ background:rgba(255,255,255,0.12); }
.pe-title{ font-family:'Inter',sans-serif; font-weight:600; font-size:16.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
.pe-sub{ font-size:11.5px; color:#C8D1DA; margin-top:1px; }
.pe-head-right{ display:flex; gap:7px; flex-wrap:wrap; }
.pe-head-right .btn-line{ background:transparent; border-color:rgba(255,255,255,0.3); color:#FFFFFF; }
.pe-head-right .btn-line:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.5); }

.pe-main{ flex:1; display:flex; min-height:0; }

.pe-form{
  width:390px; flex-shrink:0; overflow-y:auto; background:var(--paper-2);
  border-right:1px solid var(--line); padding:16px 16px 70px;
}
.pe-group{ border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:16px; }
.pe-group:last-child{ border-bottom:none; }
.pe-group-t{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }

.pe-tpls{ display:flex; flex-direction:column; gap:8px; }
.pe-tpl{
  text-align:left; border:1.5px solid var(--line); background:var(--paper); border-radius:9px;
  padding:11px 13px; display:flex; flex-direction:column; gap:2px;
}
.pe-tpl:hover{ border-color:var(--clay); }
.pe-tpl[aria-pressed="true"]{ border-color:var(--clay); background:var(--clay-tint); }
.pe-tpl .n{ font-weight:700; font-size:14px; color:var(--ink); }
.pe-tpl .r{ font-size:11px; color:var(--clay-dark); font-weight:600; }
.pe-tpl .d{ font-size:12px; color:var(--ink-soft); line-height:1.45; }

.pe-palettes{ display:flex; gap:8px; flex-wrap:wrap; }
.pe-palette{
  border:1.5px solid var(--line); background:var(--paper); border-radius:8px; padding:7px 9px 6px;
  display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; color:var(--ink-soft); font-weight:600;
}
.pe-palette:hover{ border-color:var(--pine); }
.pe-palette[aria-pressed="true"]{ border-color:var(--pine); background:var(--pine-tint); color:var(--pine-dark); }
.pe-palette .sw{ display:flex; border-radius:4px; overflow:hidden; border:1px solid rgba(0,0,0,0.12); }
.pe-palette .sw i{ width:14px; height:18px; display:block; }

.pe-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.pe-field > label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.pe-hint{ font-size:11.5px; color:var(--ink-soft); line-height:1.45; }
.pe-input{
  border:1px solid var(--line); background:var(--paper); border-radius:7px;
  padding:9px 11px; width:100%; font-size:14px; color:var(--ink);
}
.pe-input:focus{ outline:2px solid var(--pine); outline-offset:-1px; border-color:transparent; }
textarea.pe-input{ resize:vertical; line-height:1.55; }

.pe-image{ border:1.5px dashed var(--line); border-radius:9px; padding:9px; display:flex; gap:10px; align-items:center; }
.pe-image.has{ border-style:solid; }
.pe-image img{ width:92px; height:66px; object-fit:cover; border-radius:6px; flex-shrink:0; display:block; }
.pe-image-empty{
  width:92px; height:66px; border-radius:6px; flex-shrink:0; background:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--ink-soft);
}
.pe-image-actions{ display:flex; flex-direction:column; gap:6px; }

.pe-mini{
  border:1px solid var(--line); background:var(--paper); border-radius:6px;
  padding:6px 10px; font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.pe-mini:hover{ border-color:var(--clay); }
.pe-mini.danger{ color:var(--danger); }
.pe-mini.danger:hover{ border-color:var(--danger); }
.pe-mini.add{ width:100%; border-style:dashed; color:var(--ink-soft); }

.pe-list{ display:flex; flex-direction:column; gap:7px; }
.pe-list-item{ display:flex; gap:6px; align-items:flex-start; }
.pe-list-inputs{ flex:1; display:flex; gap:6px; min-width:0; }
.pe-list-inputs .pe-input{ flex:1; min-width:0; padding:7px 9px; font-size:13px; }
.pe-list-inputs .pe-input.xs{ flex:0 0 46px; text-align:center; }
.pe-list-item > .pe-mini{ padding:7px 9px; line-height:1; }

.pe-stage{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pe-toolbar{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 16px; border-bottom:1px solid var(--line); background:var(--paper-2);
  font-size:12.5px; color:var(--ink-soft); font-weight:600;
}
.pe-zoom{ display:flex; gap:4px; }
.pe-zoom button{
  border:1px solid var(--line); background:var(--paper); border-radius:6px;
  padding:5px 10px; font-size:12px; font-weight:600; color:var(--ink-soft);
}
.pe-zoom button[aria-pressed="true"]{ background:var(--pine); border-color:var(--pine); color:#fff; }
.pe-scroll{ flex:1; overflow:auto; padding:20px; display:flex; justify-content:center; align-items:flex-start; }
.pe-canvas{ position:relative; flex-shrink:0; }
.pe-scaler{ position:absolute; top:0; left:0; width:900px; transform-origin:top left; box-shadow:0 18px 44px rgba(0,0,0,0.20); }

@media (max-width:900px){
  .pe-main{ flex-direction:column; }
  .pe-form{ width:100%; border-right:none; border-bottom:1px solid var(--line); max-height:46vh; padding-bottom:20px; }
  .pe-stage{ min-height:44vh; }
  .pe-title{ max-width:60vw; }
  .pe-head-right{ width:100%; }
  .pe-head-right .btn{ flex:1; }
}

/* ================================================================== */
/* visor de fotos a pantalla completa                                 */
/* ================================================================== */

.lb-overlay{
  position:fixed; inset:0; z-index:400; background:rgba(12,11,8,0.94);
  display:flex; align-items:center; justify-content:center; gap:6px; padding:16px;
}
.lb-overlay[hidden]{ display:none; }
.lb-escenario{ flex:1; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lb-img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  cursor:zoom-in; transition:transform .18s ease; touch-action:none; user-select:none;
}
.lb-img.acercado{ cursor:grab; transition:none; }
.lb-img.acercado:active{ cursor:grabbing; }
.lb-cerrar{
  position:absolute; top:14px; right:16px; z-index:2;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); color:#fff;
  width:40px; height:40px; border-radius:50%; font-size:24px; line-height:1;
}
.lb-cerrar:hover{ background:rgba(255,255,255,0.24); }
.lb-nav{
  flex-shrink:0; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); color:#fff;
  width:46px; height:64px; border-radius:8px; font-size:30px; line-height:1;
}
.lb-nav:hover{ background:rgba(255,255,255,0.24); }
.lb-nav[hidden]{ display:none; }
.lb-pie{
  position:absolute; bottom:14px; left:0; right:0; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:rgba(255,255,255,0.75); font-size:13px; pointer-events:none;
}
.lb-ayuda{ font-size:11.5px; color:rgba(255,255,255,0.45); }

@media (max-width:600px){
  .lb-overlay{ padding:8px; }
  .lb-nav{ width:36px; height:52px; font-size:24px; }
}

/* ================================================================== */
/* página pública de un anuncio                                       */
/* ================================================================== */

.an-cargando{ padding:60px 0; color:var(--ink-soft); }
.an-cabeza{ padding:28px 0 18px; }
.an-cabeza h1{ font-size:29px; margin-top:10px; max-width:760px; }
.an-loc{ font-size:15px; color:var(--ink-soft); margin-top:8px; }

.an-galeria{ display:grid; grid-template-columns:1fr 190px; gap:10px; margin-bottom:26px; }
.an-foto-pri{
  position:relative; padding:0; border:none; background:var(--line);
  border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; cursor:zoom-in;
}
.an-foto-pri img{ width:100%; height:100%; object-fit:cover; display:block; }
.an-lupa{
  position:absolute; bottom:12px; right:12px; background:rgba(20,18,12,0.72); color:#fff;
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:6px; letter-spacing:0.3px;
}
/*
   Las miniaturas se reparten exactamente el alto de la foto principal.
   Con flex-basis 0 y min-height 0 no aportan alto propio, así que la fila la
   define la foto grande y no queda hueco debajo de ella.
*/
.an-tiras{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.an-foto-min{
  padding:0; border:none; background:var(--line); border-radius:8px; overflow:hidden;
  cursor:zoom-in; flex:1 1 0; min-height:0;
}
.an-foto-min img{ width:100%; height:100%; object-fit:cover; display:block; }
.an-foto-min:hover, .an-foto-pri:hover{ outline:2px solid var(--clay); outline-offset:2px; }

.an-cuerpo{ display:grid; grid-template-columns:1fr 300px; gap:32px; padding-bottom:50px; align-items:start; }
.an-principal h2{ font-size:20px; margin-bottom:10px; }
.an-ficha{ margin-top:24px; border-top:1px solid var(--line); }
.an-ficha > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.an-ficha dt{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.an-ficha dd{ font-size:14.5px; margin:0; text-align:right; }

.an-lateral{ position:sticky; top:20px; }
.an-precio-card{ border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); }
.an-precio-card .plabel{ font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.an-precio-card .pval{ font-family:'Inter',sans-serif; font-size:29px; font-weight:700; color:var(--clay-dark); margin-top:5px; font-variant-numeric:tabular-nums; }

@media (max-width:820px){
  .an-galeria{ grid-template-columns:1fr; }
  .an-tiras{ flex-direction:row; }
  .an-foto-min{ aspect-ratio:1/1; }
  .an-cuerpo{ grid-template-columns:1fr; gap:24px; }
  .an-lateral{ position:static; }
  .an-cabeza h1{ font-size:24px; }
}

/* ================================================================== */
/* datos privados: solo los ve el administrador                       */
/* ================================================================== */

.privado{
  border:1.5px solid var(--warn); background:var(--warn-tint);
  border-radius:9px; padding:14px 16px 16px; margin:4px 0 0;
}
.privado legend{
  font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--warn); padding:0 8px;
}
.privado-nota{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:12px; }
.privado .field-row{ margin-bottom:10px; }
.privado .checkline{ margin:2px 0 10px; }
.privado #owner-fields[hidden]{ display:none; }

.ref-chip{
  display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px; font-weight:700; letter-spacing:0.6px;
  background:var(--pine); color:#fff; padding:2px 7px; border-radius:5px;
  vertical-align:middle;
}
.privado-linea{ background:var(--warn-tint); border-radius:6px; padding:5px 8px; margin-top:5px !important; }
.privado-linea b{ color:var(--ink); }
.tenue{ color:var(--ink-soft); font-style:italic; }

#admin-search{ width:100%; margin-bottom:2px; }

/* ================================================================== */
/* fotos y video en el formulario                                     */
/* ================================================================== */

.contador-campo{
  font-weight:600; font-size:11.5px; color:var(--pine-dark);
  background:var(--pine-tint); border-radius:20px; padding:2px 9px; margin-left:6px;
}
.thumb{ position:relative; width:72px; height:72px; border-radius:7px; overflow:hidden; border:1px solid var(--line); }
.thumb.portada{ border:2px solid var(--clay); }
.thumb-tag{
  position:absolute; left:0; right:0; bottom:0; background:rgba(255,153,0,0.92); color:#fff;
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; text-align:center; padding:2px 0;
}
.video-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:9px 12px; border-radius:8px;
  background:var(--pine-tint); border:1px solid var(--pine); font-size:13px; font-weight:600; color:var(--pine-dark);
}

/* ================================================================== */
/* galería del anuncio                                                */
/* ================================================================== */

.an-galeria-pie{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:-16px 0 26px; font-size:13.5px; color:var(--ink-soft); font-weight:500;
}
.an-vertodas{
  background:none; border:none; color:var(--clay-dark); font-size:13.5px; font-weight:600;
  text-decoration:underline; padding:0;
}
.an-mas{
  position:absolute; inset:0; background:rgba(20,18,12,0.62); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:600; font-size:20px;
}
.an-foto-min{ position:relative; }
.an-sinfoto{
  border:1.5px dashed var(--line); border-radius:var(--radius); padding:44px 20px;
  text-align:center; color:var(--ink-soft); font-size:14px; margin-bottom:26px;
}
/*
   El video vive en la columna lateral, debajo del precio. Ahí aprovecha el
   espacio que quedaba vacío y deja que la ficha de datos suba, en vez de
   empujarla media pantalla hacia abajo.
   margin:auto no centra un <video> con width:auto, porque su ancho lo define el
   propio archivo; por eso la caja es flex.
*/
.an-video{ margin-top:14px; display:flex; flex-direction:column; align-items:center; }
.an-video h2{ align-self:flex-start; font-size:15px; margin-bottom:8px; }
.an-video h2{ font-size:20px; margin-bottom:12px; }
/*
   width:auto deja que el video conserve su forma: los de celular son verticales
   y a ancho completo quedaban con franjas negras enormes a los lados.
*/
.an-video video{
  width:auto; max-width:100%; max-height:420px; display:block;
  border-radius:var(--radius); background:#000; box-shadow:var(--shadow);
}
@media (max-width:820px){
  /* En móvil hay ancho de sobra, así que el video puede crecer. */
  .an-video video{ max-height:520px; }
}

/* ================================================================== */
/* panel: aviso al vendedor y estado vendido                          */
/* ================================================================== */

.aviso-link{ color:var(--pine-dark); font-weight:600; white-space:nowrap; }
.status-vendido{ background:var(--clay-tint); color:var(--clay-dark); }
.admin-row-actions .btn{ width:auto; }

/* ================================================================== */
/* bloques del formulario, compartir y confirmación                   */
/* ================================================================== */

.bloque{
  border:1px solid var(--line); border-radius:9px; padding:14px 16px 6px; margin:4px 0 0;
  background:var(--paper);
}
.bloque legend{
  font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink-soft); padding:0 8px;
}
.bloque .field-row{ margin-bottom:10px; }

.compartir{ margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.compartir-t{ font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.compartir-nota{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:10px; }
.compartir-botones{ display:flex; gap:8px; flex-wrap:wrap; }
.compartir-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
  border-radius:8px; padding:9px 14px; font-size:13.5px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.compartir-btn:hover{ border-color:var(--clay); color:var(--clay-dark); }
.compartir-btn.wa{ background:#25632F; border-color:#25632F; color:#fff; }
.compartir-btn.wa:hover{ background:#1C4E25; color:#fff; }
.compartir-btn.fb{ background:#2B4A87; border-color:#2B4A87; color:#fff; }
.compartir-btn.fb:hover{ background:#213A6C; color:#fff; }

.admin-row .compartir{ margin-top:12px; border-top:none; padding-top:10px; }
.admin-row .compartir-botones{ gap:6px; }
.admin-row .compartir-btn{ padding:6px 10px; font-size:12.5px; }

.exito{ text-align:center; padding:10px 0 6px; }
.exito-ico{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px;
  background:var(--pine-tint); color:var(--pine-dark);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;
  border:1px solid var(--pine);
}
.exito h3{ font-size:21px; margin-bottom:8px; }
.exito > p{ font-size:14.5px; color:var(--ink-soft); }
.exito-enlace{
  margin:16px auto 0; max-width:100%; overflow-wrap:anywhere;
  background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:11px 14px; font-size:13px; color:var(--ink-soft);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.exito .compartir{ text-align:left; }

/* type="search" trae adornos propios de cada navegador; se normalizan para que
   se vea igual que el resto de campos. */
input[type="search"]{ -webkit-appearance:none; appearance:none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* ================================================================== */
/* aviso para instalar la app                                         */
/* ================================================================== */

.instalar-app{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:250;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; box-shadow:0 18px 44px rgba(42,40,32,0.22);
  width:min(560px, calc(100vw - 28px));
}
.instalar-app[hidden]{ display:none; }
.instalar-app img{ width:44px; height:44px; border-radius:10px; flex-shrink:0; }
.instalar-txt{ flex:1; min-width:150px; display:flex; flex-direction:column; }
.instalar-txt b{ font-size:14.5px; }
.instalar-txt span{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.instalar-btns{ display:flex; gap:7px; }

@media (max-width:520px){
  .instalar-app{ bottom:12px; padding:12px 14px; }
  .instalar-btns{ width:100%; }
  .instalar-btns .btn{ flex:1; }
}

/* ================================================================== */
/* anuncios destacados                                                */
/* ================================================================== */

.badge-destacado{ background:rgba(154,107,30,0.95); color:#fff; }
.card-destacada{ border-color:var(--warn); box-shadow:0 1px 2px rgba(42,40,32,0.05), 0 10px 28px rgba(154,107,30,0.18); }
.card-destacada:hover{ border-color:var(--warn); box-shadow:0 4px 8px rgba(42,40,32,0.07), 0 20px 44px rgba(154,107,30,0.26); }

/* ================================================================== */
/* generador de imagen para redes                                     */
/* ================================================================== */

.ir-formatos{ display:flex; gap:8px; flex-wrap:wrap; }
.ir-formato{
  flex:1 1 150px; text-align:left; border:1.5px solid var(--line); background:var(--paper);
  border-radius:9px; padding:11px 13px; display:flex; flex-direction:column; gap:2px;
}
.ir-formato:hover{ border-color:var(--clay); }
.ir-formato[aria-pressed="true"]{ border-color:var(--clay); background:var(--clay-tint); }
.ir-formato b{ font-size:14px; color:var(--ink); }
.ir-formato span{ font-size:12px; color:var(--ink-soft); }

.ir-vista{
  display:flex; justify-content:center; align-items:flex-start;
  background:var(--cream); border:1px solid var(--line); border-radius:10px;
  padding:16px; max-height:52vh; overflow:auto;
}
.ir-vista canvas{
  max-width:100%; max-height:calc(52vh - 32px); height:auto; width:auto;
  border-radius:6px; box-shadow:0 10px 30px rgba(42,40,32,0.22); display:block;
}

.ir-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ir-pie span{ font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.ir-grupo{ display:flex; flex-direction:column; gap:7px; }
.ir-rotulo{ font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-soft); }

/* ================================================================== */
/* editor de publicaciones                                            */
/* ================================================================== */

.pe2-scroll{ align-items:center; }
#pe2-canvas{
  max-width:100%; max-height:calc(100vh - 190px); width:auto; height:auto;
  border-radius:6px; box-shadow:0 18px 44px rgba(0,0,0,0.28); display:block;
}
.pe2-fotos{ display:flex; gap:8px; flex-wrap:wrap; }
.pe2-foto{
  position:relative; width:66px; height:66px; padding:0; overflow:hidden;
  border:2px solid var(--line); border-radius:8px; background:var(--line); opacity:0.5;
}
.pe2-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe2-foto.puesta{ opacity:1; border-color:var(--clay); }
.pe2-foto span{
  position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:var(--clay); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.pe-select{ appearance:auto; cursor:pointer; }

/* ---- compartir el cartel como imagen ---- */

.compartir-cartel{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}
.compartir-cartel .btn{ width:100%; }
.compartir-cartel .compartir-nota{ margin-top:6px; }

/* ---- barra de retoque del cartel ---- */

.pe-add-txt{
  margin-left:auto; margin-right:10px;
  padding:6px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:13px;
  font-weight:600; cursor:pointer;
}
.pe-add-txt:hover{ border-color:var(--pine); color:var(--pine); }

.pe-retoque{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 14px; background:var(--pine); color:#fff;
}
.pe-ret-t{ font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; opacity:0.85; }
.pe-retoque button{
  padding:5px 10px; border:1px solid rgba(255,255,255,0.35); border-radius:7px;
  background:rgba(255,255,255,0.12); color:#fff; font:inherit; font-size:13px;
  font-weight:600; cursor:pointer; line-height:1.2;
}
.pe-retoque button:hover{ background:rgba(255,255,255,0.24); }
.pe-ret-grupo{ display:inline-flex; align-items:center; gap:6px; }
.pe-ret-tam{ min-width:34px; text-align:center; font-size:13px; font-weight:700; }
.pe-ret-input{
  flex:1 1 180px; min-width:120px;
  padding:6px 10px; border:1px solid rgba(255,255,255,0.35); border-radius:7px;
  background:rgba(255,255,255,0.14); color:#fff; font:inherit; font-size:13px;
}
.pe-ret-input::placeholder{ color:rgba(255,255,255,0.6); }
.pe-ret-color{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; cursor:pointer; }
.pe-ret-color input{ width:30px; height:26px; padding:0; border:1px solid rgba(255,255,255,0.35); border-radius:6px; background:none; cursor:pointer; }
.pe-ret-x{ background:rgba(0,0,0,0.25) !important; }
.pe-ret-cerrar{ margin-left:auto; padding:4px 10px !important; font-size:16px !important; }

/* lo elegido se marca en la vista previa, nunca en el cartel exportado */
#pe-scaler .pe-elegido{ outline:2px dashed var(--clay); outline-offset:3px; }
#pe-scaler .tc-extra{ pointer-events:auto; cursor:move; }
#pe-scaler .tc-poster{ cursor:default; }

/* ---- orden de las ventanas superpuestas ---- */

/*
 * El formulario se abre DESDE el panel de administración, así que tiene que
 * quedar por encima. Los dos son .overlay con el mismo z-index, y como el
 * panel va después en el HTML terminaba tapando al formulario: al pulsar
 * Editar el formulario abría, pero detrás, y parecía que el botón no servía.
 */
#publish-overlay{ z-index:150; }

/* ------------------------------------------------------------------ */
/* ajustes del sitio (panel de administración)                         */
/* ------------------------------------------------------------------ */

/*
 * Menú de secciones a la izquierda y formulario a la derecha, como los
 * paneles de configuración a los que la gente ya está acostumbrada. En el
 * celular el menú pasa arriba como fila deslizable.
 */
.cfg{ display:grid; grid-template-columns: 188px minmax(0,1fr); gap: 20px; align-items:start; }
.cfg-cargando{ color: var(--ink-soft); font-size:14px; padding: 18px 0; }

.cfg-nav{ display:flex; flex-direction:column; gap:2px; position:sticky; top:0; }
.cfg-nav-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;
  background:none; border:1px solid transparent; border-radius:9px; padding:9px 11px;
  color: var(--ink); transition: background .15s, border-color .15s;
}
.cfg-nav-item:hover{ background: var(--cream); }
.cfg-nav-item[aria-current="true"]{ background: var(--paper); border-color: var(--line); box-shadow: 0 1px 3px rgba(42,40,32,0.06); }
.cfg-nav-item[aria-current="true"] .cfg-nav-t{ color: var(--clay-dark); }
.cfg-nav-t{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; }
.cfg-nav-s{ font-size:11.5px; color: var(--ink-soft); line-height:1.35; }
.cfg-dot{ width:7px; height:7px; border-radius:50%; background: var(--clay); flex-shrink:0; }
.cfg-dot.error{ background: var(--danger); box-shadow: 0 0 0 3px rgba(166,64,47,0.18); }

.cfg-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.cfg-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.cfg-head h3{ font-size:19px; }
.cfg-head p{ font-size:13px; color: var(--ink-soft); margin-top:4px; max-width:46ch; line-height:1.5; }
.cfg-head .btn{ flex-shrink:0; white-space:nowrap; text-decoration:none; }

.cfg-fields{ display:flex; flex-direction:column; gap:18px; }
.cfg-field{ display:flex; flex-direction:column; gap:6px; }
.cfg-label-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cfg-label-row label{ font-size:13px; font-weight:600; color: var(--ink); }
.cfg-req{ font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color: var(--clay-dark); background: var(--clay-tint); padding:2px 6px; border-radius:4px; margin-left:4px; vertical-align:1px; }
.cfg-count{ font-size:11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cfg-count.cerca{ color: var(--warn); font-weight:600; }

.cfg-field input, .cfg-field textarea{
  width:100%; border:1px solid var(--line); background: var(--paper); border-radius:8px;
  padding:10px 12px; font-size:14.5px; line-height:1.45; transition: border-color .15s, box-shadow .15s;
}
.cfg-field textarea{ resize:vertical; min-height:78px; }
.cfg-field input::placeholder, .cfg-field textarea::placeholder{ color: var(--ink-soft); opacity:.75; }
.cfg-field input:focus, .cfg-field textarea:focus{ outline:none; border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }
.cfg-field [aria-invalid="true"]{ border-color: var(--danger); box-shadow: 0 0 0 3px rgba(166,64,47,0.12); }

.cfg-prefijo{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:8px; background: var(--paper); overflow:hidden; }
.cfg-prefijo span{ display:flex; align-items:center; padding:0 10px; font-size:13.5px; color: var(--ink-soft); background: var(--cream); border-right:1px solid var(--line); white-space:nowrap; }
.cfg-prefijo input{ border:none; border-radius:0; }
.cfg-prefijo:focus-within{ border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }
.cfg-prefijo input:focus{ box-shadow:none; }

.cfg-help{ font-size:12px; color: var(--ink-soft); line-height:1.5; }
.cfg-error{ font-size:12.5px; color: var(--danger); font-weight:500; }
.cfg-estado:empty{ display:none; }
.cfg-tag{ display:inline-block; font-size:11px; font-weight:600; color: var(--pine-dark); background: var(--pine-tint); padding:2px 8px; border-radius:20px; }
.cfg-link{ background:none; border:none; padding:0; font-size:12px; color: var(--pine-dark); text-decoration:underline; text-underline-offset:2px; }
.cfg-link:hover{ color: var(--clay-dark); }

/* vistas previas */
.cfg-vista{ border:1px dashed var(--line); border-radius:12px; padding:14px; background: var(--cream); }
.cfg-vista-t{ font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color: var(--ink-soft); margin-bottom:10px; }

.cfg-prev-hero{
  background:
    radial-gradient(420px 160px at 10% -20%, rgba(0,113,133,0.18), transparent 65%),
    radial-gradient(360px 160px at 95% 0%, rgba(255,153,0,0.14), transparent 60%),
    var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:18px 18px 16px;
}
.cfg-prev-hero .e{ font-size:9.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color: var(--clay-dark); margin-bottom:8px; }
.cfg-prev-hero h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:21px; line-height:1.12; margin:0; text-wrap:balance; }
.cfg-prev-hero .s{ font-size:12.5px; color: var(--ink-soft); line-height:1.55; margin-top:8px; }
.cfg-prev-hero ul{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:5px; }
.cfg-prev-hero li{ font-size:11.5px; color: var(--ink-soft); padding-left:16px; position:relative; }
.cfg-prev-hero li::before{ content:""; position:absolute; left:0; top:5px; width:8px; height:8px; border-radius:50%; background: var(--pine); opacity:.7; }

/* Imita un resultado de Google: blanco y con su tipografía también en el tema
   oscuro, porque así es como se ve de verdad. */
.cfg-prev-google{ background:#fff; color:#202124; border-radius:10px; padding:14px 16px; font-family: Arial, sans-serif; border:1px solid #E3E3E3; }
.cfg-prev-google .g-sitio{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.cfg-prev-google .g-ico{ width:26px; height:26px; border-radius:50%; background:#2A1F33; color:#FFFFFF; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.cfg-prev-google .g-nombre{ font-size:13.5px; color:#202124; }
.cfg-prev-google .g-url{ font-size:12px; color:#4D5156; }
.cfg-prev-google .g-titulo{ font-size:19px; color:#1A0DAB; line-height:1.3; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfg-prev-google .g-desc{ font-size:13.5px; color:#4D5156; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.cfg-prev-wa{ display:flex; align-items:center; justify-content:space-between; gap:14px; background: var(--paper); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.cfg-prev-wa .wa-num{ font-weight:600; font-size:16px; font-variant-numeric: tabular-nums; }
.cfg-prev-wa .wa-sub{ font-size:12px; color: var(--ink-soft); margin-top:2px; }
.cfg-prev-wa .btn{ text-decoration:none; flex-shrink:0; }
.cfg-prev-wa .btn.is-off{ opacity:.45; pointer-events:none; }

/* Barra de guardar: se pega al borde de abajo del panel mientras haya cambios. */
.cfg-bar{
  grid-column: 1 / -1; position:sticky; bottom:-22px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin: 4px -22px -22px; padding: 12px 22px;
  background: var(--paper-2); border-top:1px solid var(--line);
  box-shadow: 0 -8px 20px rgba(42,40,32,0.08);
  animation: cfg-sube .18s ease-out;
}
.cfg-bar-t{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.cfg-bar-t::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--clay); }
.cfg-bar-b{ display:flex; gap:8px; }
@keyframes cfg-sube{ from{ transform: translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .cfg-bar{ animation:none; } }

@media (max-width: 700px){
  .cfg{ grid-template-columns: 1fr; gap:14px; }
  .cfg-nav{ flex-direction:row; overflow-x:auto; position:static; gap:6px; padding-bottom:4px; scrollbar-width:none; }
  .cfg-nav::-webkit-scrollbar{ display:none; }
  .cfg-nav-item{ flex-shrink:0; border-color: var(--line); padding:7px 12px; border-radius:20px; }
  .cfg-nav-s{ display:none; }
  .cfg-head{ flex-direction:column; }
  .cfg-bar-b{ width:100%; }
  .cfg-bar-b .btn{ flex:1; }
}

/* redes sociales en el pie */
.foot-social{ display:inline-flex; gap:6px; }
.foot-social a{ display:flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; background: rgba(255,255,255,0.07); color:#D5DCE3; transition: background .15s, color .15s; }
.foot-social a:hover{ background: rgba(255,255,255,0.16); color:#FFFFFF; }
.foot-social svg{ width:17px; height:17px; }

/* ------------------------------------------------------------------ */
/* colores: muestras, selector del formulario y filtro                 */
/* ------------------------------------------------------------------ */

/* Bolita de color. El borde gris deja ver el blanco sobre fondo blanco. */
.muestra-color{ display:inline-flex; align-items:center; gap:5px; margin-right:8px; font-size:13px; white-space:nowrap; }
.muestra-color i{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(15,17,17,0.25); flex-shrink:0; }
.card-colores{ display:inline-flex; margin-left:6px; vertical-align:-2px; }
.card-colores .muestra-color{ margin-right:3px; }
.card-colores .muestra-color i{ width:12px; height:12px; }

.etiqueta-campo{ font-size:13px; font-weight:600; color: var(--ink-soft); }

.sel-color{ position:relative; }
.sel-color-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line); background: var(--paper); border-radius:7px; padding:9px 12px;
  min-height:42px; text-align:left; font-size:14.5px; color: var(--ink-soft);
}
.sel-color-btn:hover, .sel-color-btn[aria-expanded="true"]{ border-color: var(--clay); }
.sel-color-btn svg{ width:18px; height:18px; flex-shrink:0; transition: transform .15s; }
.sel-color-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }
.sel-color-valor{ display:flex; flex-wrap:wrap; gap:4px 0; color: var(--ink); min-width:0; }
.sel-color-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; width:min(360px, 86vw);
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
  box-shadow: 0 16px 36px rgba(15,17,17,0.22);
}
.sel-color-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:4px; max-height:280px; overflow-y:auto; }
.sel-color-op{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:14px;
  border:1px solid transparent;
}
.sel-color-op:hover{ background:#F7FAFA; }
.sel-color-op input{ accent-color: var(--pine); width:16px; height:16px; margin:0; flex-shrink:0; }
.sel-color-op i{ width:20px; height:20px; border-radius:50%; border:1px solid rgba(15,17,17,0.25); flex-shrink:0; }
.sel-color-op:has(input:checked){ background: var(--clay-tint); border-color: var(--clay); font-weight:600; }
.sel-color-pie{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid #EEF0F0; }

/* Filtro por color: bolitas grandes que se tocan, con el nombre debajo. */
.f-colores{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px 4px; }
.f-color{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; text-align:center; }
.f-color input{ position:absolute; opacity:0; width:1px; height:1px; }
.f-color i{ width:28px; height:28px; border-radius:50%; border:1px solid rgba(15,17,17,0.25); box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent; transition: box-shadow .12s; }
.f-color:hover i{ box-shadow: 0 0 0 2px #fff, 0 0 0 3px #BBBFBF; }
.f-color input:checked + i{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--clay); }
.f-color input:focus-visible + i{ outline:2px solid var(--pine); outline-offset:3px; }
.f-color span{ font-size:11px; line-height:1.2; color: var(--ink); }
.f-color em{ font-style:normal; color: var(--ink-soft); }

/* ------------------------------------------------------------------ */
/* confianza: estrellas, calificaciones, reportes y "Por revisar"      */
/* ------------------------------------------------------------------ */

.estrellas{ display:inline-flex; gap:1px; line-height:1; vertical-align:-1px; }
.estrellas .est{ color:#D5D9D9; font-size:15px; }
.estrellas .est.llena{ color:#FFA41C; }
/* Media estrella: la mitad izquierda pintada. */
.estrellas .est.media{ background: linear-gradient(90deg, #FFA41C 50%, #D5D9D9 50%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card-rating{ display:flex; align-items:center; gap:5px; font-size:12.5px; color: var(--pine); }
.card-rating .est{ font-size:13px; }

.calif{ margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.calif h2{ font-size:18px; margin-bottom:10px; }
.calif-resumen{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.calif-resumen .est{ font-size:22px; }
.calif-resumen b{ font-size:20px; }
.calif-resumen span{ color: var(--ink-soft); font-size:13.5px; }
.calif-vacia, .calif-nota{ color: var(--ink-soft); font-size:13.5px; margin:6px 0 10px; line-height:1.55; }
.calif-lista{ list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:10px; }
.calif-lista li{ background:#fff; border:1px solid #E3E6E6; border-radius:10px; padding:10px 12px; font-size:13.5px; }
.calif-lista time{ color: var(--ink-soft); font-size:12px; margin-left:4px; }
.calif-lista p{ margin-top:5px; line-height:1.5; }
.calif-form{ display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid #E3E6E6; border-radius:12px; padding:14px; margin-top:6px; }

/* Estrellas para elegir: van de 5 a 1 en el HTML y se muestran al revés, así
   pasar el mouse por una ilumina también las anteriores (solo con CSS). */
.calif-estrellas{ border:none; margin:0; padding:0; display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; }
.calif-estrellas legend{ width:100%; font-weight:700; font-size:14px; margin-bottom:6px; }
.calif-estrellas input{ position:absolute; opacity:0; width:1px; height:1px; }
.calif-estrellas label{ font-size:34px; line-height:1; color:#D5D9D9; cursor:pointer; transition: color .1s, transform .1s; }
.calif-estrellas label:hover, .calif-estrellas label:hover ~ label,
.calif-estrellas input:checked ~ label{ color:#FFA41C; }
.calif-estrellas label:hover{ transform: scale(1.12); }
.calif-estrellas input:focus-visible + label{ outline:2px solid var(--pine); outline-offset:2px; border-radius:4px; }

.an-calif-mini{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:13px; color: var(--pine); text-decoration:none; }
.an-calif-mini:hover{ text-decoration:underline; }
.an-reportar{ display:block; margin:14px auto 0; background:none; border:none; color: var(--ink-soft); font-size:12.5px; text-decoration:underline; text-underline-offset:2px; }
.an-reportar:hover{ color: var(--danger); }
.reporte-form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; text-align:left; background:#FFF8F6; border:1px solid #F3C9BF; border-radius:10px; padding:12px; }
.reporte-form fieldset{ border:none; margin:0; padding:0; }
.reporte-form legend{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
.reporte-form textarea{ width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:13.5px; resize:vertical; }
.reporte-botones{ display:flex; justify-content:flex-end; gap:8px; }

.checkline.directo{ align-items:flex-start; gap:10px; background:#F0FAF3; border:1px solid #B7E1C3; border-radius:9px; padding:10px 12px; margin-top:4px; font-weight:400; font-size:13px; line-height:1.5; color: var(--ink-soft); }
.checkline.directo b{ color: var(--ink); display:block; margin-bottom:2px; }
.checkline.directo input{ margin-top:3px; accent-color: var(--verde); width:17px; height:17px; flex-shrink:0; }

.revisar-nota{ font-size:13.5px; color: var(--ink-soft); background:#F7FAFA; border:1px solid #E3E6E6; border-radius:9px; padding:10px 12px; margin-bottom:12px; line-height:1.55; }
.reportes-caja{ margin:6px 0; background:#FFF1EE; border:1px solid #F3C9BF; color:#8A2A12; border-radius:8px; padding:7px 10px; font-size:12.5px; }
.reporte-detalle{ margin-top:3px; font-style:italic; }
.status-pill.status-sinrevisar{ background:#FFF4E0; color:#9A5B00; }
.stat-chip.stat-alerta{ background:#FFF4E0; border-color:#FFD18A; }
.tag-directo{ background:#E4F7E7; color:#1E7A3C; border-radius:4px; padding:1px 6px; font-size:11.5px; font-weight:600; }

/* ------------------------------------------------------------------ */
/* cuentas: botón, ingresar/crear cuenta, Mi cuenta, pagos y tiendas    */
/* ------------------------------------------------------------------ */

.btn-cuenta{
  display:flex; align-items:center; gap:7px; flex-shrink:0; background:none; color:#fff;
  border:1px solid transparent; border-radius:6px; padding:7px 9px; font-weight:700; font-size:14px;
}
.btn-cuenta:hover{ border-color:#fff; }
.btn-cuenta svg{ width:20px; height:20px; }

.modal-cuenta{ max-width:440px; }
.cuenta-motivo{ background: var(--clay-tint); border:1px solid #FFD18A; border-radius:9px; padding:10px 12px; font-size:13.5px; font-weight:600; }
.cuenta-pestanas{ display:grid; grid-template-columns:1fr 1fr; background:#F0F2F2; border-radius:10px; padding:4px; gap:4px; }
.cuenta-pestanas button{ background:none; border:none; border-radius:7px; padding:9px; font-weight:700; font-size:14px; color: var(--ink-soft); }
.cuenta-pestanas button[aria-selected="true"]{ background:#fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,17,17,0.15); }
.cuenta-form{ display:flex; flex-direction:column; gap:14px; }
.cuenta-form input[type="email"], .cuenta-form input[type="text"], .cuenta-form input[type="tel"], .cuenta-form input[type="password"]{
  width:100%; border:1px solid #BBBFBF; border-radius:8px; padding:11px 12px; font-size:15px; background:#fff;
}
.cuenta-form input:focus{ outline:none; border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }
.cuenta-ayuda{ font-size:13.5px; color: var(--ink-soft); line-height:1.55; }
.cuenta-link{ background:none; border:none; color: var(--pine); font-size:13.5px; text-decoration:underline; padding:2px; align-self:center; }
.clave-caja{ position:relative; }
.clave-caja input{ padding-right:74px !important; }
.ver-clave{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:#F0F2F2; border:none; border-radius:6px; padding:5px 9px; font-size:12px; font-weight:600; color: var(--ink-soft); }
.checkline.autoriza{ align-items:flex-start; font-size:13px; line-height:1.5; }
.checkline.autoriza input{ margin-top:3px; width:17px; height:17px; flex-shrink:0; accent-color: var(--pine); }

.mc-aviso{ background: var(--clay-tint); border:1px solid #FFD18A; border-radius:10px; padding:11px 13px; font-size:13.5px; line-height:1.55; }
.mc-aviso-alerta{ background:#FFF1EE; border-color:#F3C9BF; }
.mc-t{ font-size:16px; margin:4px 0 -4px; }
.mc-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14.5px; }
.mc-item{ display:flex; flex-wrap:wrap; gap:12px; padding:12px; border:1px solid #E3E6E6; border-radius:10px; background:#fff; align-items:flex-start; }
.mc-info{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mc-info .t{ font-weight:700; font-size:14.5px; }
.mc-info .s{ font-size:12.5px; color: var(--ink-soft); }
.mc-estado{ font-weight:700; }
.mc-activo{ color:#067D62; }
.mc-archivado{ color:#9A5B00; }
.mc-vendido{ color:#0A6FD1; }
.mc-retirado, .mc-rechazado{ color: var(--danger); }
.mc-vacio, .mc-ayuda{ font-size:13.5px; color: var(--ink-soft); line-height:1.55; }
.mc-form{ display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid #E3E6E6; border-radius:12px; padding:16px; }
.mc-form input{ width:100%; border:1px solid #BBBFBF; border-radius:8px; padding:10px 12px; font-size:14.5px; }
.mc-form input:disabled{ background:#F0F2F2; color: var(--ink-soft); }
.mc-form .btn{ align-self:flex-start; }
.mc-pie{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.badge-tienda-txt{ font-weight:700; color:#9A5B00; }

.pago-caja{ background:#fff; border:2px dashed #FFB84D; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.pago-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pago-valor{ font-size:26px; font-weight:800; color: var(--precio); }
.pago-inst{ font-size:13px; color: var(--ink-soft); line-height:1.5; }
.pago-botones{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pago-resuelto{ opacity:0.65; }

.plan-actual{ background:#fff; border:1px solid #E3E6E6; border-radius:12px; padding:14px 16px; }
.plan-actual h3{ font-size:17px; margin-bottom:4px; }
.plan-actual p{ font-size:14px; color: var(--ink-soft); line-height:1.55; margin-top:4px; }
.plan-tienda{ display:flex; gap:14px; align-items:flex-start; border-color:#FFD18A; background:#FFFBF0; }
.plan-ico{ font-size:34px; }
.plan-oferta{ background: linear-gradient(135deg, #131921, #232F3E); color:#fff; border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.plan-oferta-cab{ display:flex; align-items:center; gap:12px; }
.plan-oferta-cab > span{ font-size:36px; }
.plan-oferta h3{ font-size:19px; color:#fff; }
.plan-precio{ font-size:26px; font-weight:800; color: var(--amarillo); }
.plan-precio small{ font-size:14px; font-weight:500; color:#C8D1DA; }
.plan-oferta ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; font-size:14px; color:#E4E9EE; }
.plan-oferta .btn{ align-self:flex-start; }

.badge-tienda{ background:#FFD814; color:#0F1111; }
.status-pill.status-tienda{ background:#FFF4E0; color:#9A5B00; }
.an-tienda{
  display:flex; flex-direction:column; gap:2px; margin-top:10px; padding:10px 12px; border-radius:10px;
  background:#FFFBF0; border:1px solid #FFD18A; color: var(--ink); text-decoration:none; font-size:14px; text-align:left;
}
.an-tienda span{ font-size:12.5px; color: var(--pine); }
.an-tienda:hover span{ text-decoration:underline; }
.usuario-enlace{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.usuario-enlace input{ flex:1 1 220px; min-width:0; border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:12.5px; }

.legal-pagina{ padding-top:28px; padding-bottom:40px; max-width:780px; }
.legal-pagina h1{ font-size:26px; margin-bottom:14px; }
.legal-pagina h2{ font-size:17px; margin:20px 0 6px; }
.legal-pagina p{ line-height:1.7; color: var(--ink); margin-bottom:8px; }
.legal-nota{ font-size:12.5px; color: var(--ink-soft) !important; font-style:italic; }

@media (max-width:700px){
  .btn-cuenta span{ max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #btn-open-publish{ margin-left:0; }
  .btn-cuenta{ margin-left:auto; padding:6px; }
}