/* OM — Angelasin · Office Manager.
   Azul marino y dorado del logo; tarjetas blancas sobre fondo gris
   azulado; modo oscuro automático. */
:root {
  --bg:#f3f5f9; --card:#ffffff; --card2:#f8f9fc; --text:#0f1b33;
  --sec:#46506a; --muted:#7a8399; --line:#e2e6ee; --line2:#eef1f6;
  --navy:#012458; --accent:#1d4ea0; --accbg:#e9effa;
  --gold:#c08a35; --goldbg:#fbf3e4;
  --good:#22764a; --goodbg:#e6f4ec; --bad:#b42318; --badbg:#fdeceb;
  --warn:#9a5b00; --warnbg:#fff4e0;
  --sombra:0 1px 2px rgba(15,27,51,.04), 0 2px 8px rgba(15,27,51,.06);
  --radio:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1220; --card:#131c2e; --card2:#18233a; --text:#e9eef7;
    --sec:#b3bdd0; --muted:#8590a6; --line:#25314a; --line2:#1d2840;
    --navy:#a9c2f0; --accent:#8fb0ea; --accbg:#1a2a49;
    --gold:#d9a75a; --goldbg:#2c2416;
    --good:#6cc790; --goodbg:#143022; --bad:#f08a80; --badbg:#3a1a19;
    --warn:#f0b35a; --warnbg:#33260f;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", sans-serif; }
a { color:var(--accent); }
h1 { font-size:24px; font-weight:700; margin:0; letter-spacing:-.01em; }
h2 { font-size:15px; font-weight:650; margin:0; }
.sub { color:var(--sec); font-size:13px; }
.muted { color:var(--muted); }
.wrap { max-width:1120px; margin:0 auto; padding:24px 16px 56px; }
.wrap.estrecha { max-width:860px; }

/* --- Cabecera fija --- */
.barra { position:sticky; top:0; z-index:20; background:var(--card);
         border-bottom:1px solid var(--line);
         box-shadow:0 1px 0 rgba(15,27,51,.02); }
.barra-in { max-width:1120px; margin:0 auto; padding:0 16px; height:62px;
            display:flex; align-items:center; gap:18px; }
.barra .logo { height:30px; width:auto; display:block; }
.menu { display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; }
.menu::-webkit-scrollbar { display:none; }
.menu a { text-decoration:none; color:var(--sec); font-size:14px;
          font-weight:550; padding:8px 12px; border-radius:9px;
          white-space:nowrap; position:relative; }
.menu a:hover { background:var(--card2); color:var(--text); }
.menu a.on { color:var(--navy); }
.menu a.on::after { content:""; position:absolute; left:12px; right:12px;
                    bottom:-12px; height:3px; border-radius:3px;
                    background:var(--gold); }
.yo { display:flex; align-items:center; gap:10px; flex:none; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--navy);
          color:var(--card); display:flex; align-items:center;
          justify-content:center; font-size:13px; font-weight:700; }
.yo a { font-size:13px; color:var(--muted); text-decoration:none; }
.yo a:hover { color:var(--bad); }
@media (max-width:720px) {
  .barra-in { flex-wrap:wrap; height:auto; padding-top:10px; gap:6px 12px; }
  .barra .logo { height:26px; }
  .yo { margin-left:auto; }
  .menu { order:3; flex-basis:100%; margin:0 -6px; padding-bottom:4px; }
  .menu a.on::after { bottom:-4px; }
}

/* --- Tarjetas --- */
.card { background:var(--card); border:1px solid var(--line);
        border-radius:var(--radio); box-shadow:var(--sombra);
        padding:18px 20px; margin:0 0 20px; }
/* Al saltar a una tarjeta, que no quede debajo de la cabecera fija. */
.card, .co-card, .kpi, [id] { scroll-margin-top:84px; }
@media (max-width:720px) {
  .card, .co-card, .kpi, [id] { scroll-margin-top:118px; }
}
.card.destacada { background:var(--goldbg); border-color:var(--gold); }
.cab { display:flex; align-items:center; gap:12px; margin:-2px 0 14px; }
.cab .ico { width:36px; height:36px; border-radius:10px; flex:none;
            display:flex; align-items:center; justify-content:center;
            font-size:17px; background:var(--accbg); }
.cab .ico.oro { background:var(--goldbg); }
.cab .ico.verde { background:var(--goodbg); }
.cab .tit { flex:1; min-width:0; }
.cab .tit h2 { font-size:16px; }
.cab .tit .sub { font-size:12.5px; color:var(--muted); }
.cab .acc { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:560px) {
  .cab { flex-wrap:wrap; }
  .cab .acc { flex-basis:100%; justify-content:flex-start; }
  .card { padding:16px; }
}

/* --- Botones y chips --- */
.pill, .btn { display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:13.5px; font-weight:600; padding:8px 14px;
  border-radius:9px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap; background:var(--navy);
  color:#fff; transition:filter .15s, background .15s; }
.pill:hover, .btn:hover { filter:brightness(1.12); }
@media (prefers-color-scheme: dark) { .pill, .btn { color:#0b1220; } }
.pill.gris, .btn.sec { background:var(--card); color:var(--text);
  border-color:var(--line); }
.pill.gris:hover, .btn.sec:hover { background:var(--card2); filter:none; }
.btn.peq { font-size:12.5px; padding:5px 10px; border-radius:8px; }
.pill:disabled, .btn:disabled { opacity:.5; cursor:default; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border:1px solid var(--line); border-radius:999px; font-size:12.5px;
  background:var(--card); color:var(--sec); cursor:pointer;
  user-select:none; white-space:nowrap; text-decoration:none;
  transition:background .15s, border-color .15s; }
.chip:hover { background:var(--card2); border-color:var(--muted); }
.chip.activo { border-color:var(--navy); color:var(--navy);
  background:var(--accbg); font-weight:600; }
.chip.aviso { border-color:var(--bad); color:var(--bad); }
.chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
         margin:0 0 12px; }

/* --- Etiquetas --- */
.badge { display:inline-block; font-size:11px; font-weight:650;
  padding:2px 8px; border-radius:6px; white-space:nowrap;
  letter-spacing:.01em; }
.badge.accion { background:var(--accbg); color:var(--accent); }
.badge.importante { background:var(--badbg); color:var(--bad); }
.badge.rutina { background:var(--card2); color:var(--muted); }
.badge.oro { background:var(--goldbg); color:var(--gold); }

/* --- Formularios --- */
.fila { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
        align-items:flex-end; }
input, select, textarea { padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  font:inherit; font-size:14px; max-width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accbg);
  border-color:var(--accent); }
input.crece { flex:1; min-width:180px; }
textarea { width:100%; min-height:180px; }
label.campo { display:flex; flex-direction:column; gap:3px; font-size:12px;
              color:var(--muted); font-weight:550; }
.msg { font-size:13px; color:var(--sec); margin:8px 0 0; min-height:1em; }
.msg:empty { display:none; }
.x { color:var(--muted); cursor:pointer; user-select:none; padding:0 4px; }
.x:hover { color:var(--bad); }
.plegable { background:var(--card2); border:1px solid var(--line2);
            border-radius:11px; padding:12px 14px; margin:0 0 14px; }

/* --- Listas --- */
.lista-item { display:flex; gap:10px; align-items:baseline;
              font-size:13.5px; padding:9px 0;
              border-top:1px solid var(--line2); }
.lista-item:first-child { border-top:0; }
.lista-item .crece { flex:1; white-space:pre-wrap; overflow-wrap:anywhere; }
.vacio { color:var(--muted); padding:22px 0; text-align:center;
         font-size:13.5px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--muted); font-weight:550; font-size:12.5px;
     padding:8px 6px; }
td { padding:9px 6px; border-top:1px solid var(--line2); vertical-align:top; }
.tabla { overflow-x:auto; }

/* --- Check de Hecho --- */
.check { width:24px; height:24px; border-radius:50%; flex:none;
  border:2px solid var(--line); background:var(--card); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color:transparent; font-size:13px; font-weight:800; padding:0;
  transition:all .15s; }
.check:hover { border-color:var(--good); color:var(--good); }
.check.on { background:var(--good); border-color:var(--good); color:#fff; }
.saliendo { opacity:0 !important; transform:translateX(24px);
  transition:opacity .25s, transform .25s; }

/* --- Aviso flotante (con Deshacer) --- */
#toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%)
  translateY(20px); background:var(--navy); color:#fff; padding:10px 14px
  10px 16px; border-radius:12px; font-size:14px; display:flex; gap:12px;
  align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:0;
  pointer-events:none; transition:opacity .2s, transform .2s; z-index:50;
  max-width:calc(100vw - 32px); }
@media (prefers-color-scheme: dark) { #toast { color:#0b1220; } }
#toast.visible { opacity:1; transform:translateX(-50%); pointer-events:auto; }
#toast button { background:none; border:0; color:inherit; font:inherit;
  font-weight:700; cursor:pointer; text-decoration:underline; padding:0; }

/* --- Login --- */
.entrar { min-height:100vh; display:flex; align-items:center;
          justify-content:center; padding:24px 16px; }
.entrar .caja { width:100%; max-width:380px; }
.entrar .logo { width:100%; max-width:300px; display:block;
                margin:0 auto 28px; }