/* Sistema de diseño ASU (corporativo estilizado). Compartido por el sitio, el catálogo y el portal. */
:root {
  --navy: #1A3A5C;
  --blue: #054A80;
  --cyan: #12C7D6;
  --cyan-h: #0AA9B8;
  --sun: #12C7D6;
  --coral: #FF6B5B;
  --mint: #E6F7F9;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --text: #1F2A37;
  --gray: #737B83;
  --muted: #5B6B7A;
  --line: #E1E6EC;
  --danger: #B42318;
  --success: #067647;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1923; --card: #1A2636; --text: #F0F4F8; --muted: #A9B8C7; --gray: #A9B8C7; --line: #2D3F54; --mint: #13303A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1923; --card: #1A2636; --text: #F0F4F8; --muted: #A9B8C7; --gray: #A9B8C7; --line: #2D3F54; --mint: #13303A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }
h1, h2, h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.2; margin: 0; color: var(--navy); font-weight: 700; letter-spacing: -.015em; }
a { color: var(--blue); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Encabezado */
.top { position: sticky; top: 0; z-index: 50; background: linear-gradient(100deg, #1A3A5C 0%, #054A80 100%); color: #fff; position: sticky; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #12C7D6, transparent 70%); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; padding: 0 64px; }
.brand { display: flex; align-items: center; gap: .6rem; white-space: nowrap; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.brand img { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 3px; }
.brand span { color: #9FE7EE; }
.top-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: rgba(255,255,255,.08); padding: 5px; border-radius: 10px; }
.top-nav a { color: rgba(255,255,255,.85); text-decoration: none; padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.top-nav a:hover, .top-nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: 10px 18px; border-radius: 10px; border: 2px solid transparent; font: 700 13px 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer; text-decoration: none; transition: transform .15s, background .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-cyan { background: var(--cyan); color: var(--navy); }
.btn-cyan:hover { background: var(--cyan-h); }
.btn-sun { background: var(--cyan); color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--cyan); }
.btn-danger { background: transparent; color: var(--danger); border-color: #F4C7C3; }
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 9px; }
.top .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }

/* Campos */
.field { display: grid; gap: .35rem; margin-bottom: .9rem; }
.field label, .lbl { font-size: .86rem; font-weight: 700; color: var(--navy); }
.input, .select, .textarea { width: 100%; font: inherit; padding: .7rem .85rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); }
.textarea { min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(18,199,214,.2); }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .grid-form { grid-template-columns: 1fr; } }

/* Tarjetas, chips, estados */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px rgba(26,58,92,.06); }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #E6F7F9; color: #0A7F8A; }
.chip.warn { background: #FFF0C9; color: #7A4B00; }
.chip.ok { background: #DCF7E8; color: var(--success); }
.chip.muted { background: var(--line); color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 120px); background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 12px; font-weight: 700; transition: transform .3s; z-index: 300; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); }
.toast.err { background: var(--danger); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(10,25,40,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 200; }
.modal[hidden] { display: none; }
.modal-box { background: var(--card); color: var(--text); border-radius: 14px; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 1.6rem; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.x-btn { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .25rem; }

@media (max-width: 880px) { .top-in { padding: 0 16px; height: auto; min-height: 64px; padding-block: 10px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }