/* Estilos de bin/backend.php — sitio 5toB */

:root { --azul:#0b3d91; --azul-suave:#4a6aa5; --verde:#4e8a1f; --verde-osc:#2f5e10; --claro:#f4f9ea; --borde:#cfe3a9; --rojo:#b3261e; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",Roboto,Arial,sans-serif; color:var(--azul);
       background:#eef5df url('../imagenes/Fondo.png') center/cover fixed; min-height:100vh; }
a { color:var(--verde-osc); }
button, .btn { font:inherit; cursor:pointer; border:0; border-radius:6px; padding:.5rem .9rem;
       background:var(--verde); color:#fff; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:var(--verde-osc); }
.btn-sec { background:#fff; color:var(--verde-osc); border:1px solid var(--borde); }
.btn-sec:hover { background:var(--claro); }
.btn-del { background:var(--rojo); } .btn-del:hover { background:#7f1a15; }
input[type=text], input[type=password], input[type=number], textarea {
       font:inherit; width:100%; padding:.45rem .6rem; border:1px solid var(--borde); border-radius:6px; background:#fff; }
textarea { resize:vertical; min-height:3.2rem; }
label { font-size:.85rem; font-weight:600; display:block; margin:.5rem 0 .2rem; }
.msg { padding:.6rem .9rem; border-radius:6px; margin-bottom:.6rem; }
.msg.ok { background:#e3f3cf; border:1px solid #9cc96b; }
.msg.error { background:#fbe3e1; border:1px solid #e3a19c; color:#7f1a15; }

/* Login */
.login { max-width:360px; margin:10vh auto; background:rgba(255,255,255,.93); padding:2rem;
         border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); text-align:center; }
.login img { width:110px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.login h1 { font-size:1.3rem; margin:.6rem 0 1rem; }
.login form { text-align:left; }
.login button[type=submit] { width:100%; margin-top:1rem; }
.clave-wrap { position:relative; }
.clave-wrap input { padding-right:2.8rem; }
.ver-clave { position:absolute; right:4px; top:50%; transform:translateY(-50%);
             background:transparent; color:var(--verde-osc); padding:.2rem .45rem; font-size:1.1rem; line-height:1; }
.ver-clave:hover { background:var(--claro); }
.ver-clave[aria-pressed=true] { background:var(--verde); color:#fff; }

/* Panel */
header { position:sticky; top:0; z-index:5; background:var(--verde-osc); color:#fff;
         display:flex; align-items:center; gap:1rem; padding:.6rem 1.2rem; }
header img { height:44px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
header h1 { font-size:1.15rem; margin:0; flex:1; }
header form { margin:0; }
header .btn-sec { padding:.35rem .7rem; }
.layout { display:grid; grid-template-columns:270px 1fr; gap:1.2rem; padding:1.2rem; }
.card { background:rgba(255,255,255,.94); border-radius:10px; padding:1rem 1.1rem;
        box-shadow:0 2px 10px rgba(0,0,0,.08); margin-bottom:1.2rem; }
.card h2 { font-size:1.05rem; margin:0 0 .6rem; color:var(--verde-osc); }
.lista-alb { list-style:none; margin:0; padding:0; }
.lista-alb a { display:flex; justify-content:space-between; padding:.45rem .6rem; border-radius:6px;
               text-decoration:none; color:inherit; }
.lista-alb a:hover { background:var(--claro); }
.lista-alb a.activo { background:var(--verde); color:#fff; }
.lista-alb small { opacity:.75; }
.fila { display:grid; grid-template-columns:1fr 1fr 110px; gap:.8rem; }
.fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.foto { border:1px solid var(--borde); border-radius:8px; padding:.7rem; background:#fff; }
.foto img { width:100%; height:180px; object-fit:cover; border-radius:6px; background:var(--claro); }
.foto .nombre { font-family:monospace; font-size:.85rem; margin:.4rem 0 0; word-break:break-all; }
.foto .sinbd { font-size:.75rem; color:#946200; }
.acciones { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.acciones form { margin:0; }
.peligro { border:1px solid #e3a19c; }
@media (max-width:800px) { .layout { grid-template-columns:1fr; } .fila { grid-template-columns:1fr; } }

/* Clases que antes estaban como estilos en línea */
.txt-letra { font-size:1rem; line-height:1.5; }
.subtitulo { font-weight:400; }
.peligro h2 { color:var(--rojo); }
.input-corto { max-width:300px; }

/* Gestión de comentarios */
.com-admin { border:1px solid var(--borde); border-left:5px solid var(--verde); border-radius:8px;
             padding:.8rem 1rem; margin-bottom:.8rem; background:#fff; }
.com-cab { display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.35rem; }
.com-nombre { font-size:1.05rem; color:var(--verde-osc); }
.com-fecha { font-size:.85rem; color:var(--azul-suave); white-space:nowrap; margin:0; }
.com-texto { line-height:1.5; overflow-wrap:anywhere; max-height:9em; overflow:auto; }
.com-botones { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.6rem; }
.com-botones form { margin:0; }

/* Ventana emergente de edición */
.dlg-editar { width:min(860px, 94vw); max-height:92vh; overflow:auto; margin:auto; padding:1.2rem 1.5rem 1.3rem;
              border:0; border-top:6px solid var(--verde); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.dlg-editar::backdrop { background:rgba(20,35,8,.55); backdrop-filter:blur(3px); }
.dlg-editar .dlg-cab { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dlg-editar h2 { margin:0; font-size:1.25rem; color:var(--verde-osc); }
.dlg-x { background:var(--claro); color:var(--verde-osc); border-radius:50%; width:2.3rem; height:2.3rem; padding:0; }
.dlg-x:hover { background:#dcedc4; }
.dlg-editar textarea { min-height:16rem; font-size:1.05rem; line-height:1.55; }
.dlg-editar input[type=text] { font-size:1.05rem; font-weight:600; }
.dlg-pie { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.9rem; }

/* Biblioteca de videos */
.vid-admin { display:block; width:100%; height:180px; border-radius:6px; background:#1d2e10; object-fit:contain; }
.limites { font-size:.9rem; color:var(--azul-suave); }
.progreso { margin:.8rem 0 .2rem; }
.progreso .barra { height:14px; border-radius:7px; background:var(--claro); border:1px solid var(--borde); overflow:hidden; }
.progreso .barra span { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--verde), #8bc34a);
                        transition:width .2s; }
.progreso-texto { font-size:.9rem; margin-top:.3rem; color:var(--verde-osc); font-weight:600; }

/* Imagen de Bienvenidos */
.bienv-actual img { display:block; max-width:100%; max-height:240px; border-radius:8px;
                    border:1px solid var(--borde); box-shadow:0 3px 12px rgba(0,0,0,.12); background:var(--claro); }
code { background:var(--claro); padding:.05rem .35rem; border-radius:4px; font-size:.92em; }

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