:root { --tinta:#182f28; --papel:#f5f5ef; --verde:#244c3c; --gris:#59665f; --linea:#d7dcd0; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--papel); color:var(--tinta); line-height:1.6; }
.caja { width:min(1100px,100% - 2.5rem); margin:3rem auto; }
.brand { color:var(--verde); font-size:.8rem; text-decoration:none; font-weight:700; }
h1 { font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.05em; margin:1.5rem 0 .35rem; }
h2 { margin:0 0 .75rem; font-size:1.3rem; } h3 { margin:1rem 0; }
.sub { color:var(--gris); margin:0 0 1.5rem; font-size:.95rem; }
.card { background:#fff; border:1px solid var(--linea); border-radius:12px; padding:1.75rem; margin:1.5rem 0; }
.login { max-width:460px; display:grid; gap:1rem; }
label { font-weight:600; font-size:.9rem; display:grid; gap:.4rem; }
input,textarea,select { width:100%; min-width:0; font:inherit; padding:.7rem .8rem; border:1px solid var(--linea); border-radius:6px; background:#fff; color:var(--tinta); }
textarea { min-height:180px; resize:vertical; }
button,.btn { font:inherit; font-size:.9rem; font-weight:600; min-height:44px; padding:.6rem 1.1rem; border:1px solid transparent; border-radius:6px; background:var(--verde); color:#fff; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.sec { background:#fff; color:var(--tinta); border-color:var(--linea); }
button:disabled { opacity:.5; cursor:default; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #9dae45; outline-offset:3px; }
.barra { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:1rem 0; }
.barra .espacio { flex:1; min-width:180px; } #buscar { align-items:end; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:.85rem .75rem; border-bottom:1px solid var(--linea); font-size:.85rem; overflow-wrap:anywhere; }
th { background:#f3f5ef; font-weight:600; } td:first-child { min-width:180px; }
.pagination { justify-content:flex-end; font-size:.8rem; }
.aviso { background:#f4f5d6; padding:1rem; border-radius:6px; color:var(--gris); }
.ok { color:var(--verde); font-weight:600; } .err { color:#a72d0a; font-weight:600; }
.form-grid { display:grid; gap:1rem; } .form-grid button { justify-self:start; }
dialog { max-width:650px; width:calc(100% - 2rem); max-height:85vh; overflow:auto; padding:2rem; border:1px solid var(--linea); border-radius:12px; color:var(--tinta); }
dialog::backdrop { background:#11251eb3; }
button,.btn { word-break:normal; overflow-wrap:normal; }
@media(max-width:700px) {
 .caja { width:calc(100% - 1.5rem); margin:1.25rem auto; }
 .card { padding:1rem; min-width:0; }
 dialog { width:calc(100% - 1rem); max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem); padding:1rem; overscroll-behavior:contain; }
 dialog h2 { font-size:1.2rem; }
 input,textarea,select { font-size:16px; }
 .table-wrap { min-width:0; }
 table.responsive-table,#panel table.responsive-table { min-width:0; width:100%; }
 .responsive-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .responsive-table tbody { display:block; min-width:0 !important; }
 .responsive-table tr { display:block; border:1px solid var(--linea); border-radius:10px; margin:.75rem 0; padding:.75rem; background:#fff; }
 .responsive-table td { display:block; width:100%; min-width:0; padding:.4rem 0; border:0; }
 .responsive-table td[data-label]::before { content:attr(data-label); display:block; font-size:.75rem; font-weight:600; color:var(--gris); margin-bottom:.15rem; }
 .responsive-table td[colspan] { padding:.25rem 0; }
 .responsive-table td button,.responsive-table td .btn { width:100%; }
 .responsive-table .actions { flex-direction:column; align-items:stretch; }
 .form-grid button { justify-self:stretch; }
 .barra .espacio { min-width:0; }
}
.message-preview { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--papel); padding:1.3rem; border-radius:6px; max-height:300px; overflow:auto; }
@media(max-width:600px) { .caja { margin:1.5rem auto; } .card { padding:1.2rem; } .barra .espacio { flex-basis:100%; } th,td { padding:.65rem .5rem; } }