/* admin/tema.css — tema oscuro del panel admin.oftalsoft.com (2026-10-29).
   Solo actúa con html[data-tema="oscuro"] (lo pone tema.js); en claro las páginas quedan exactamente como estaban. */
.btn-tema { background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: 2px 9px; font-size: 15px; line-height: 1.4; cursor: pointer; color: inherit; }
.btn-tema:hover { background: rgba(255,255,255,.15); }
.btn-tema.flotante { position: fixed; top: 14px; right: 14px; z-index: 100; border-color: #c8ddf0; background: #fff;
                     width: auto; margin: 0; padding: 4px 10px; font-weight: normal; }   /* el login tiene button{width:100%} */
.btn-tema.flotante:hover { background: #eef4fb; }
html[data-tema="oscuro"] .btn-tema.flotante:hover { background: #22303e; }

html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"] body { background: #0f1720; color: #dbe6f0; }
html[data-tema="oscuro"] header { background: #12355e; }
html[data-tema="oscuro"] header a { color: #9ccbf2; }
html[data-tema="oscuro"] header a.act { color: #fff; }
html[data-tema="oscuro"] .btn-tema.flotante { background: #17212b; border-color: #2a3a4a; }

/* Superficies: columnas, paneles, tarjetas, modales */
html[data-tema="oscuro"] .col-left,
html[data-tema="oscuro"] .panel,
html[data-tema="oscuro"] .pn,
html[data-tema="oscuro"] .card,
html[data-tema="oscuro"] .modal-ov .card { background: #17212b; border-color: #2a3a4a; box-shadow: none; }
html[data-tema="oscuro"] .col-left { border-right-color: #2a3a4a; }
html[data-tema="oscuro"] .fbox, html[data-tema="oscuro"] .lista .cab, html[data-tema="oscuro"] .tabs,
html[data-tema="oscuro"] .pn h4, html[data-tema="oscuro"] details.grp { border-color: #2a3a4a; }

/* Textos */
html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3, html[data-tema="oscuro"] .modal-ov h3,
html[data-tema="oscuro"] .cuenta .n, html[data-tema="oscuro"] .det .tit h2, html[data-tema="oscuro"] .chip strong { color: #6fb1f0; }
html[data-tema="oscuro"] .sub, html[data-tema="oscuro"] .cuenta .s, html[data-tema="oscuro"] .info,
html[data-tema="oscuro"] .opt-cl, html[data-tema="oscuro"] .chks .ck, html[data-tema="oscuro"] #mc-texto,
html[data-tema="oscuro"] .lista li .nom { color: #dbe6f0 !important; }
html[data-tema="oscuro"] .panel h4, html[data-tema="oscuro"] .modal-ov .card h4, html[data-tema="oscuro"] .pn h4,
html[data-tema="oscuro"] .frm label, html[data-tema="oscuro"] .field label, html[data-tema="oscuro"] .campo label,
html[data-tema="oscuro"] details.grp summary, html[data-tema="oscuro"] .tabs button { color: #8fa6bb; }
html[data-tema="oscuro"] .tabs button.act { color: #6fb1f0; border-bottom-color: #6fb1f0; }

/* Formularios */
html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea {
    background: #1e2a36; color: #dbe6f0; border-color: #33475a; }
html[data-tema="oscuro"] input:focus, html[data-tema="oscuro"] select:focus { background: #22303e; border-color: #4d9be6; }
html[data-tema="oscuro"] input[readonly], html[data-tema="oscuro"] input[disabled], html[data-tema="oscuro"] select[disabled] { background: #141c24; color: #7f93a6; }
html[data-tema="oscuro"] input.mod, html[data-tema="oscuro"] select.mod { background: #3a2e18; border-color: #c48a2a; }
html[data-tema="oscuro"] ::placeholder { color: #6f8396; }

/* Tablas */
html[data-tema="oscuro"] th { background: #1b2733; color: #8fa6bb; border-color: #2a3a4a; }
html[data-tema="oscuro"] td { border-color: #223040; }
html[data-tema="oscuro"] tr:hover td, html[data-tema="oscuro"] tbody tr:hover td { background: #1f2b38; }

/* Listas y selección */
html[data-tema="oscuro"] .cuenta, html[data-tema="oscuro"] .opt-cl, html[data-tema="oscuro"] .lista li { border-color: #223040; }
html[data-tema="oscuro"] .cuenta:hover, html[data-tema="oscuro"] .opt-cl:hover, html[data-tema="oscuro"] .lista li:hover { background: #1f2b38; }
html[data-tema="oscuro"] .cuenta.sel, html[data-tema="oscuro"] .lista li.sel { background: #1f3550; }
html[data-tema="oscuro"] .chip { background: #1e2a36; border-color: #33475a; color: #8fa6bb; }
html[data-tema="oscuro"] .badge { background: #1f3550; color: #8cc4ff; }
html[data-tema="oscuro"] .badge.off { background: #4a2326; color: #ff9a9a; }

/* Botones secundarios */
html[data-tema="oscuro"] .btn-del, html[data-tema="oscuro"] .btn.peligro { background: #3a2124; color: #ff9a9a; border-color: #5a3034; }
html[data-tema="oscuro"] .btn.sec, html[data-tema="oscuro"] .btn-volver { background: #1e2a36; color: #8cc4ff; border-color: #33475a; }
html[data-tema="oscuro"] .enlaces button { color: #8cc4ff; }
html[data-tema="oscuro"] .enlaces button:hover { background: #1e2a36; }
html[data-tema="oscuro"] .btn-pri:disabled { background: #2b4560; color: #8fa6bb; }

/* Clientes */
html[data-tema="oscuro"] .nota { background: #2f2915; color: #e8d49a; border-color: #5a4b20; }
html[data-tema="oscuro"] .campo .bl { color: #8fa6bb; }

/* Login */
html[data-tema="oscuro"] .secreto { background: #1e2a36; border-color: #33475a; color: #dbe6f0; }
html[data-tema="oscuro"] #qr svg { background: #fff; padding: 6px; border-radius: 6px; }   /* el QR necesita fondo claro para leerse */

/* Dashboard */
html[data-tema="oscuro"] .gauge .b { background: #22303e; }
html[data-tema="oscuro"] .stat, html[data-tema="oscuro"] .gauge span { color: #66bb6a; }
html[data-tema="oscuro"] .lcb { border-color: #388e3c; }
html[data-tema="oscuro"] .lcb .n { color: #81c784; } html[data-tema="oscuro"] .lcb .f { color: #b8c8d8; }
html[data-tema="oscuro"] .barras text { fill: #9fb3c8; }
html[data-tema="oscuro"] .ley { color: #8fa6bb; }
html[data-tema="oscuro"] .barra { color: #8fa6bb; }
html[data-tema="oscuro"] td.rojo { color: #ff8a80; } html[data-tema="oscuro"] td.verde { color: #81c784; }

/* ─── Cabecera y menú comunes (admin/_menu.php) ─────────────────────── */
header.adm-hdr { height: auto; min-height: 56px; background: #1a5fa8; color: #fff; display: flex; align-items: center; justify-content: space-between;
                 flex-wrap: wrap; gap: 4px 16px; padding: 8px 20px; position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
header.adm-hdr .t { font-size: 19px; font-weight: 600; white-space: nowrap; }
header.adm-hdr .r { font-size: 15px; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-wrap: wrap; }
header.adm-hdr .r a { color: #cfe5f8; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-weight: normal; }
header.adm-hdr .r a:hover { background: rgba(255,255,255,.12); color: #fff; }
header.adm-hdr .r a.act { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
header.adm-hdr .r .who { color: #cfe5f8; font-size: 14px; margin-left: 8px; }
header.adm-hdr .r .salir { border: 1px solid rgba(255,255,255,.35); }
header.adm-hdr .btn-tema { margin-right: 4px; }
html[data-tema="oscuro"] header.adm-hdr { background: #12355e; }
@media (max-width: 760px) {
    header.adm-hdr { padding: 8px 12px; }
    header.adm-hdr .t { font-size: 17px; }
    header.adm-hdr .r .who { display: none; }
    header.adm-hdr .r a { padding: 5px 8px; }
}