/* Estilos de bin/comentarios.php — sitio 5toB (se carga después de mostrar.css) */

/* Ocupa todo el ancho disponible, con un tope razonable en pantallas muy grandes */
.comentarios { max-width:1400px; }

/* ---------- Barra superior: cantidad + botón ---------- */
.barra-com { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
             margin:0 0 1.2rem; }
.cuantos { display:inline-block; font-size:1rem; font-weight:600; color:#fff; background:var(--verde-osc);
           padding:.4rem 1rem; border-radius:999px; }
.btn-comentar { display:inline-block; font-size:1.1rem; font-weight:700; text-decoration:none; color:#fff;
                background:var(--verde); padding:.75rem 1.5rem; border-radius:12px;
                box-shadow:0 4px 12px rgba(0,0,0,.2); transition:background .15s, transform .15s; }
.btn-comentar:hover { background:var(--verde-osc); transform:translateY(-2px); }
.vacio p { margin:0 0 1rem; font-size:1.1rem; }

/* ---------- Ventana emergente (pop-up) con el formulario ---------- */
dialog.formulario { width:min(760px, 94vw); max-height:92vh; overflow:auto; margin:auto;
                    padding:1.2rem 1.6rem 1.4rem; border:0; border-top:6px solid var(--verde); border-radius:14px;
                    background:#fff; color:inherit; box-shadow:0 20px 60px rgba(0,0,0,.35); }
dialog.formulario::backdrop { background:rgba(20,35,8,.55); backdrop-filter:blur(3px); }
dialog.formulario[open] { animation:aparecer .18s ease-out; }
@keyframes aparecer { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.dlg-cab { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.2rem; }
.dlg-cerrar { flex:none; width:2.3rem; height:2.3rem; display:flex; align-items:center; justify-content:center;
              border-radius:50%; text-decoration:none; color:var(--verde-osc); background:#eef6e2; font-size:1.2rem; }
.dlg-cerrar:hover { background:#dcedc4; }
.botones { display:flex; gap:.6rem; align-items:center; }
.btn-cancelar { padding:.7rem 1.1rem; border-radius:10px; text-decoration:none; color:var(--verde-osc);
                border:1px solid #bcd893; background:#fff; font-weight:600; }
.btn-cancelar:hover { background:#f1f8e6; }

.formulario h2 { margin:0; font-size:1.35rem; color:var(--verde-osc); }
.formulario label { display:block; font-weight:600; font-size:.95rem; margin:.8rem 0 .3rem; }
.formulario input[type=text], .formulario textarea {
    display:block; width:100%; font:inherit; font-size:1.1rem; padding:.7rem .85rem;
    border:1px solid #bcd893; border-radius:10px; background:#fff; }
.formulario input:focus, .formulario textarea:focus { outline:3px solid #c5e39a; border-color:var(--verde); }
.formulario textarea { resize:vertical; min-height:8rem; line-height:1.5; }
.pie-form { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.9rem; }
.pie-form .contador { font-size:.85rem; color:var(--azul-suave); }
.pie-form button { font:inherit; font-size:1.05rem; font-weight:600; cursor:pointer; border:0; border-radius:10px;
                   padding:.7rem 1.5rem; background:var(--verde); color:#fff; }
.pie-form button:hover { background:var(--verde-osc); }

.aviso { padding:.7rem 1rem; border-radius:10px; margin:.6rem 0 .4rem; }
#lista > .aviso { margin:0 0 1.2rem; }
.aviso.ok { background:#e3f3cf; border:1px solid #9cc96b; }
.aviso.error { background:#fbe3e1; border:1px solid #e3a19c; color:#7f1a15; }

/* ---------- Listado: cada comentario en su propia tarjeta ---------- */
.comentario { background:#fff; border:1px solid #d5e6b8; border-left:6px solid var(--verde);
              border-radius:12px; margin-bottom:1.4rem; overflow:hidden;
              box-shadow:0 4px 14px rgba(0,0,0,.12); }
.comentario:nth-of-type(even) { border-left-color:#8bc34a; }

/* Encabezado de la tarjeta: avatar + nombre + fecha, sobre franja de color */
.cabecera { display:flex; align-items:center; gap:.8rem; padding:.7rem 1.2rem;
            background:#f1f8e6; border-bottom:1px solid #d5e6b8; }
.avatar { flex:none; width:42px; height:42px; border-radius:50%; background:var(--verde); color:#fff;
          display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700;
          box-shadow:0 2px 6px rgba(0,0,0,.2); }
.tono-0 { background:#4e8a1f; } .tono-1 { background:#2f5e10; } .tono-2 { background:#6aa52b; }
.tono-3 { background:#7a9a2e; } .tono-4 { background:#3d7f5a; } .tono-5 { background:#8a6d1f; }
.tono-6 { background:#5b6fa8; } .tono-7 { background:#a8513d; }
.cabecera .quien { display:flex; flex-direction:column; min-width:0; }
.cabecera strong { font-size:1.1rem; color:var(--verde-osc); overflow-wrap:anywhere; }
.cabecera time { font-size:.85rem; color:var(--azul-suave); }

/* Texto del comentario */
.comentario p { margin:0; padding:1rem 1.3rem 1.2rem; font-size:1.1rem; line-height:1.6;
                overflow-wrap:anywhere; color:var(--azul); }

.paginas { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.paginas a { padding:.45rem .85rem; border-radius:8px; background:#fff; color:var(--verde-osc);
             text-decoration:none; font-weight:600; border:1px solid #cfe3a9; }
.paginas a.activo { background:var(--verde); color:#fff; border-color:var(--verde); }

@media (max-width:560px) {
  dialog.formulario { padding:1rem 1.1rem 1.2rem; }
  .pie-form { flex-direction:column-reverse; align-items:stretch; }
  .botones { justify-content:flex-end; }
  .btn-comentar { width:100%; text-align:center; }
}

/* Texto escrito en los campos, también en azul */
.formulario input, .formulario textarea { color:var(--azul); }