/* ══════════════════════════════════════════════════════════════════
   SIJAECH · Buzón de sugerencias — estilo del diálogo y del botón
   ══════════════════════════════════════════════════════════════════ */

/* Botón, en la barra del visor de módulos junto a «Volver al Portal» */
.sbz-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-family:inherit; font-size:.78rem; font-weight:600;
  padding:7px 14px; border-radius:8px; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, border-color .16s ease;
}
.sbz-btn:hover{ background:rgba(201,162,39,.9); border-color:#c9a227; color:#16233f; }
.sbz-btn:focus-visible{ outline:2px solid #c9a227; outline-offset:2px; }
.sbz-btn svg{ flex:none; }

/* ── Diálogo ── */
.sbz-fondo{
  position:fixed; inset:0; z-index:10500; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(12,18,32,.55); backdrop-filter:blur(2px);
}
.sbz-fondo.abierto{ display:flex; }
.sbz-caja{
  background:#fff; border-radius:16px; width:100%; max-width:560px;
  max-height:calc(100vh - 44px); display:flex; flex-direction:column;
  box-shadow:0 26px 60px rgba(12,18,32,.4); overflow:hidden;
  animation:sbzEntra .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes sbzEntra{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none; } }
.sbz-cab{
  display:flex; align-items:center; gap:12px; padding:15px 20px;
  background:#16233f; color:#fff; flex:none;
}
.sbz-cab h2{ margin:0; font-family:'Fraunces',Georgia,serif; font-size:1.05rem; font-weight:600; flex:1; }
.sbz-x{ background:none; border:0; color:#c6cfe2; cursor:pointer; padding:4px; border-radius:6px; display:flex; }
.sbz-x:hover{ background:rgba(255,255,255,.14); color:#fff; }

.sbz-cuerpo{ padding:18px 20px 4px; overflow-y:auto; }
.sbz-guia{
  background:#eef4f0; border-left:3px solid #0f766e; border-radius:0 8px 8px 0;
  padding:10px 14px; font-size:.79rem; color:#274a41; margin-bottom:16px; line-height:1.5;
}
.sbz-guia ol{ margin:5px 0 0; padding-left:18px; }
.sbz-guia li{ margin-top:2px; }

.sbz-c{ display:block; margin-bottom:14px; }
.sbz-c > span{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#7b8291; margin-bottom:5px;
}
.sbz-c > span i{ font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; }
.sbz-c input, .sbz-c textarea{
  width:100%; border:1px solid #dcd8cc; border-radius:9px; background:#fbfaf7;
  padding:9px 12px; font-family:inherit; font-size:.88rem; color:#23293a; resize:vertical;
}
.sbz-c input:focus, .sbz-c textarea:focus{ outline:2px solid #c9a227; outline-offset:-1px; background:#fff; }
.sbz-c input[readonly]{ background:#f1efe9; color:#5b6270; }
.sbz-f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:520px){ .sbz-f2{ grid-template-columns:1fr; } }

/* Tipo de reporte */
.sbz-tipos{ display:flex; flex-wrap:wrap; gap:7px; }
.sbz-tipos label{ cursor:pointer; }
.sbz-tipos input{ position:absolute; opacity:0; pointer-events:none; }
.sbz-tipos span{
  display:block; border:1px solid #dcd8cc; border-radius:99px; background:#fbfaf7;
  padding:6px 14px; font-size:.8rem; font-weight:600; color:#6b7183;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.sbz-tipos input:checked + span{ background:#16233f; border-color:#16233f; color:#fff; }
.sbz-tipos input:focus-visible + span{ outline:2px solid #c9a227; outline-offset:2px; }

/* Captura adjunta */
.sbz-img{
  display:flex; gap:10px; align-items:center; width:100%; text-align:left;
  border:1.5px dashed #cdc7b6; border-radius:11px; background:#fbfaf7;
  padding:12px 14px; font-family:inherit; font-size:.83rem; color:#4b5262;
  cursor:pointer; line-height:1.4;
}
.sbz-img:hover{ border-color:#c9a227; background:#fffdf6; }
.sbz-img i{ font-style:normal; color:#8a8577; font-size:.74rem; }
.sbz-img.puesta{ border-style:solid; border-color:#b9d8c4; background:#f1f8f3; cursor:default; }
.sbz-img.puesta img{ width:52px; height:40px; object-fit:cover; border-radius:6px; border:1px solid #cfe0d5; flex:none; }
.sbz-imgx{ margin-left:auto; border:0; background:none; color:#8a8577; cursor:pointer; font-size:15px; padding:3px 7px; border-radius:6px; }
.sbz-imgx:hover{ background:#fff; color:#b3372c; }

.sbz-aviso{ margin:12px 0 0; font-size:.8rem; color:#8a6f16; min-height:1em; }
.sbz-aviso.err{ color:#b3372c; font-weight:600; }

.sbz-pie{ display:flex; justify-content:flex-end; gap:9px; padding:14px 20px 18px; flex:none; }
.sbz-b1, .sbz-b2{ font-family:inherit; font-size:.85rem; border-radius:9px; padding:9px 20px; cursor:pointer; font-weight:600; }
.sbz-b1{ background:#16233f; color:#fff; border:0; }
.sbz-b1:hover{ background:#22345c; }
.sbz-b1:disabled{ opacity:.6; cursor:default; }
.sbz-b2{ background:none; border:1px solid #dcd8cc; color:#5b6270; }
.sbz-b2:hover{ background:#f4f2ec; }

@media (prefers-reduced-motion: reduce){ .sbz-caja{ animation:none; } }
