:root { --navy:#071c42; --navy-dark:#05152f; --blue:#087ac1; --blue-soft:#e6f5fd; --yellow:#ffbd18; --green:#0b8a5b; --green-soft:#e4f7ee; --orange:#b96b05; --orange-soft:#fff1d9; --ink:#132238; --muted:#66758a; --line:#dce5ee; --surface:#f4f7fa; --white:#fff; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--surface); font-family: "Manrope",sans-serif; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
.hidden { display:none!important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.admin-login { min-height:100vh;display:grid;grid-template-columns:minmax(260px,.85fr) minmax(390px,1.15fr);background:var(--navy-dark); }
.login-brand { display:flex;align-items:center;justify-content:center;gap:18px;padding:45px;color:var(--white);background:radial-gradient(circle at 30% 30%,rgba(8,122,193,.35),transparent 45%),var(--navy-dark); }
.login-brand img { width:100px;height:112px;object-fit:contain;filter:drop-shadow(0 15px 30px rgba(0,0,0,.32)); }
.login-brand span { display:grid;line-height:1.2; }.login-brand strong { font-family:"Source Serif 4",serif;font-size:27px; }.login-brand small { margin-top:7px;color:rgba(255,255,255,.58);font-size:10px;letter-spacing:.12em;text-transform:uppercase; }
.login-card { align-self:center;width:min(520px,calc(100% - 40px));margin-inline:auto;padding:48px;background:var(--white);border-radius:4px 25px 4px 4px;box-shadow:0 30px 90px rgba(0,0,0,.28); }
.login-card h1 { margin:0;color:var(--navy);font-family:"Source Serif 4",serif;font-size:48px;line-height:.98; }.login-card>p:not(.eyebrow) { margin:17px 0 28px;color:var(--muted);font-size:12px;line-height:1.7; }
.login-card form { display:grid;gap:15px; }.login-card label { display:grid;gap:7px; }.login-card label span { color:var(--navy);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }.login-card input { height:47px;padding:0 14px;color:var(--ink);background:#f8fafc;border:1px solid var(--line);border-radius:9px;outline:0;font-size:11px; }.login-card input:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,122,193,.1); }
.login-card form button { min-height:48px;color:var(--white);background:var(--blue);border:0;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer; }.login-card form button:disabled { opacity:.6;cursor:wait; }.login-card>a { display:inline-block;margin-top:24px;color:var(--blue);font-size:10px;font-weight:800; }.login-card #adminLoginMessage { min-height:17px;margin:0;color:#a52b2b;font-size:9px;line-height:1.5; }
.admin-shell { width:min(1320px,calc(100% - 40px));margin-inline:auto; }
.admin-header { position:sticky;top:0;z-index:20;color:var(--white);background:rgba(5,21,47,.97);border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px); }
.header-inner { min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px; }
.admin-brand { display:flex;align-items:center;gap:12px; }
.admin-brand img { width:47px;height:53px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28)); }
.admin-brand span { display:grid;line-height:1.15; }
.admin-brand strong { font-size:13px;text-transform:uppercase; }
.admin-brand small { margin-top:4px;color:rgba(255,255,255,.56);font-size:9px;letter-spacing:.08em;text-transform:uppercase; }
.admin-nav { display:flex;align-items:center;gap:6px; }
.admin-nav a,.admin-nav button { padding:10px 14px;color:rgba(255,255,255,.7);background:transparent;border:1px solid transparent;border-radius:9px;font-size:11px;font-weight:700;cursor:pointer; }
.admin-nav a:hover,.admin-nav a.active { color:var(--white);background:rgba(255,255,255,.09); }
.admin-nav button { margin-left:8px;color:var(--white);border-color:rgba(255,255,255,.25); }
.admin-main { padding:55px 0 80px; }
.page-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:32px; }
.eyebrow { margin:0 0 9px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; }
.page-heading h1 { margin:0;color:var(--navy);font-family:"Source Serif 4",serif;font-size:clamp(44px,6vw,67px);line-height:.95; }
.page-heading > div > p:last-child { max-width:690px;margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.7; }
.heading-actions { display:flex;gap:8px; }.export-button,.refresh-button { flex:0 0 auto;padding:12px 15px;border:0;border-radius:10px;font-size:10px;font-weight:800;cursor:pointer; }.export-button { color:var(--white);background:var(--blue); }.refresh-button { color:var(--navy);background:var(--white);border:1px solid var(--line); }
.state-card { padding:36px;color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:16px;text-align:center; }
.state-card.error { color:#a52b2b;background:#fff6f6;border-color:#efcaca; }
.summary-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px; }
.summary-card { min-height:145px;display:grid;align-content:space-between;padding:21px;background:var(--white);border:1px solid var(--line);border-top:4px solid #bcc8d4;border-radius:15px;box-shadow:0 10px 30px rgba(7,28,66,.04); }
.summary-card.primary { color:var(--white);background:var(--navy);border-color:var(--navy); }
.summary-card.pending { border-top-color:var(--yellow); }.summary-card.managing { border-top-color:var(--blue); }.summary-card.answered { border-top-color:var(--green); }
.summary-card span { color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; }
.summary-card.primary span,.summary-card.primary small { color:rgba(255,255,255,.6); }
.summary-card strong { margin:11px 0;color:var(--navy);font-family:"Source Serif 4",serif;font-size:44px;line-height:1; }
.summary-card.primary strong { color:var(--yellow); }.summary-card small { color:#8a97a8;font-size:9px; }
.records-card { overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 45px rgba(7,28,66,.06); }
.records-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:25px;border-bottom:1px solid var(--line); }
.records-heading h2 { margin:0;color:var(--navy);font-family:"Source Serif 4",serif;font-size:31px; }
.record-tools { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
.record-tools input,.record-tools select { height:41px;padding:0 12px;color:var(--ink);background:#f8fafc;border:1px solid var(--line);border-radius:9px;outline:0;font-size:10px; }
.record-tools input { width:280px; }.record-tools select { min-width:145px; }
.record-tools input:focus,.record-tools select:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,122,193,.1); }
.table-wrap { overflow-x:auto; } table { width:100%;min-width:1080px;border-collapse:collapse; }
th { padding:13px 15px;color:#8491a2;background:#f8fafc;border-bottom:1px solid var(--line);font-size:8px;font-weight:800;letter-spacing:.08em;text-align:left;text-transform:uppercase; }
td { padding:15px;border-bottom:1px solid #edf1f5;font-size:10px;vertical-align:middle; }
tbody tr { border-left:4px solid transparent;transition:background .15s ease; } tbody tr:hover { background:#f9fbfd; }
tbody tr.status-pendiente { border-left-color:var(--yellow); } tbody tr.status-en_gestion { border-left-color:var(--blue); } tbody tr.status-respondido,tbody tr.status-resuelto { border-left-color:var(--green);background:#fbfffd; }
.date-cell { display:grid;gap:3px;white-space:nowrap; }.date-cell strong { color:var(--navy); }.date-cell small { color:var(--muted); }
.category-badge,.status-badge { display:inline-flex;padding:6px 8px;border-radius:20px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap; }
.category-badge { color:#075f91;background:var(--blue-soft); }.category-badge.alumbrado { color:#806000;background:#fff4c9; }.category-badge.otros { color:#6c438d;background:#f2e9fa; }
.person-cell { display:grid;gap:4px; }.person-cell strong { color:var(--navy); }.phone-link { width:fit-content;color:#08724c;font-weight:800;border-bottom:1px solid currentColor; }
.description-cell { max-width:310px;display:-webkit-box;overflow:hidden;color:#4d5b6d;line-height:1.5;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.status-badge { color:#876000;background:#fff6d7; }.status-badge.en_gestion { color:#075f91;background:#e3f4fd; }.status-badge.respondido,.status-badge.resuelto { color:#08724c;background:#dff8eb; }
.row-actions { display:flex;gap:6px;align-items:center; }.row-actions button { padding:7px 9px;border:0;border-radius:7px;font-size:8px;font-weight:800;cursor:pointer; }
.view-button { color:var(--blue);background:var(--blue-soft); }.attend-button { color:#08724c;background:#e4f7ee; }.attend-button.done { color:#617080;background:#edf1f4; }
.empty-state { padding:58px 20px;text-align:center; }.empty-state strong { color:var(--navy);font-family:"Source Serif 4",serif;font-size:24px; }.empty-state p { margin:8px 0 0;color:var(--muted);font-size:10px; }
.records-count { margin:0;padding:13px 25px;color:var(--muted);background:#fbfcfd;font-size:9px;text-align:right; }
dialog { width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:20px;background:transparent;border:0; } dialog::backdrop { background:rgba(2,13,32,.76);backdrop-filter:blur(7px); } dialog[open] { display:grid;place-items:center; }
.detail-panel { position:relative;width:min(850px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:40px;background:var(--white);border-radius:4px 24px 4px 4px;box-shadow:0 30px 100px rgba(0,0,0,.3); }
.dialog-close { position:absolute;top:15px;right:16px;width:36px;height:36px;color:var(--muted);background:#f1f4f7;border:0;border-radius:50%;font-size:23px;cursor:pointer; }
.detail-panel h2 { margin:0;color:var(--navy);font-family:"Source Serif 4",serif;font-size:41px; }
.detail-meta { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:25px 0;overflow:hidden;background:var(--line);border:1px solid var(--line);border-radius:12px; }
.detail-meta div { min-height:85px;display:grid;align-content:center;gap:6px;padding:14px;background:var(--white); }.detail-meta span,.detail-copy>span,.photo-section>span { color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }.detail-meta strong { color:var(--navy);font-size:10px;overflow-wrap:anywhere; }
.detail-copy { margin-top:11px;padding:19px;background:#f5f8fa;border-left:4px solid var(--yellow); }.detail-copy.secondary { border-left-color:#a9b7c5; }.detail-copy.location { border-left-color:var(--blue); }.detail-copy p { margin:10px 0 0;color:#35445a;font-size:12px;line-height:1.7;white-space:pre-wrap; }.detail-copy a { display:inline-block;margin-top:10px;color:var(--blue);font-size:9px;font-weight:800; }
.photo-section { margin-top:18px; }.photo-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:10px; }.photo-grid a { min-height:160px;overflow:hidden;background:#edf2f5;border-radius:10px; }.photo-grid img { width:100%;height:180px;display:block;object-fit:cover; }
.document-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }.document-actions a { padding:10px 12px;border-radius:8px;font-size:9px;font-weight:800; }.document-actions a:nth-child(1) { color:var(--white);background:var(--navy); }.document-actions a:nth-child(2),.document-actions a:nth-child(3) { color:#08724c;background:#ddf6e9; }
.management-form { display:grid;gap:14px;margin-top:25px;padding-top:24px;border-top:1px solid var(--line); }.form-heading { display:flex;align-items:center;justify-content:space-between;gap:15px; }.form-heading>div { display:grid;gap:4px; }.form-heading>div span,.management-form label>span { color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; }.form-heading>div strong { color:var(--navy);font-size:15px; }.resolved-check { display:flex!important;align-items:center;grid-template-columns:auto 1fr!important;gap:8px!important;padding:9px 11px;background:var(--green-soft);border-radius:8px; }.resolved-check input { accent-color:var(--green); }
.management-form label { display:grid;gap:7px; }.management-form select,.management-form textarea { width:100%;padding:11px 12px;color:var(--ink);background:#f8fafc;border:1px solid var(--line);border-radius:9px;outline:0;font-size:10px; }.management-form button { min-height:44px;color:var(--white);background:var(--blue);border:0;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer; }.management-form button:disabled { opacity:.6;cursor:wait; } #managementMessage { min-height:16px;margin:0;color:var(--green);font-size:9px; }
@media(max-width:1000px){.summary-grid{grid-template-columns:repeat(2,1fr)}.records-heading{align-items:stretch;flex-direction:column}.record-tools{justify-content:flex-start}.record-tools input{width:min(100%,330px)}}
@media(max-width:760px){.admin-login{grid-template-columns:1fr}.login-brand{display:none}.login-card{padding:34px 24px}.login-card h1{font-size:40px}}
@media(max-width:650px){.admin-shell{width:calc(100% - 20px)}.header-inner{min-height:68px}.admin-nav a:not(.active){display:none}.admin-main{padding-top:35px}.page-heading{align-items:stretch;flex-direction:column}.heading-actions{display:grid;grid-template-columns:1fr 1fr}.summary-grid{grid-template-columns:1fr 1fr}.summary-card{min-height:125px;padding:16px}.record-tools{display:grid}.record-tools input,.record-tools select{width:100%}.detail-panel{padding:29px 17px}.detail-meta{grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:1fr}.form-heading{align-items:stretch;flex-direction:column}}