/* IDÓNEA DOCS — identidad Gestión Idónea (manual de marca: azul #114A77, verde #B3CF3A) */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #114A77;
  --navy-900: #0A2F4E;
  --navy-700: #0E3D63;
  --navy-100: #E3ECF4;
  --navy-50: #F1F5F9;
  --lime: #B3CF3A;
  --lime-600: #93AD22;
  --lime-100: #F1F6DA;
  --ink: #1B2733;
  --ink-2: #4A5866;
  --line: #D7DFE7;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --danger: #B42318;
  --danger-50: #FDECEA;
  --warn: #8A5A00;
  --warn-50: #FFF6E0;
  --ok: #2F6B12;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(10, 47, 78, .06), 0 4px 14px rgba(10, 47, 78, .06);
  --font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Cinzel", Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
img, svg, canvas { max-width: 100%; }
a { color: var(--navy); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; color: var(--navy-900); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 .8em; }
code { background: var(--navy-50); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--navy-900); padding: 8px 14px; border-radius: 6px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.icon { width: 22px; height: 22px; flex: none; }
.icon--sm { width: 16px; height: 16px; vertical-align: -3px; }

/* Barra superior */
.topbar { background: var(--navy); color: #fff; border-bottom: 4px solid var(--lime); position: sticky; top: 0; z-index: 20; }
.topbar__inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand img { height: 40px; width: auto; border: 1px solid rgba(255,255,255,.5); }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; }
.brand__tag { font-size: .75rem; color: var(--lime); letter-spacing: .06em; text-transform: uppercase; }
.mainnav { display: flex; gap: 4px; margin-left: auto; }
.mainnav a { display: flex; align-items: center; gap: 6px; color: #DCE7F1; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.mainnav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.mainnav a[aria-current="page"] { background: rgba(179,207,58,.18); color: #fff; box-shadow: inset 0 -2px 0 var(--lime); }
.mainnav .icon { width: 18px; height: 18px; }
.userbox { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.2); }
.userbox__name { font-size: .9rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox form { margin: 0; }
.btn-icon { background: transparent; border: 0; color: #fff; padding: 8px; border-radius: 8px; cursor: pointer; display: flex; }
.btn-icon:hover { background: rgba(255,255,255,.12); }

.page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 16px 40px; }
.page:focus { outline: none; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 16px; font-size: .8rem; color: var(--ink-2); border-top: 1px solid var(--line); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--navy-900); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; min-height: 42px; }
.btn:hover { border-color: var(--navy); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--navy-700); }
.btn--accent { background: var(--lime); border-color: var(--lime); color: var(--navy-900); }
.btn--accent:hover:not(:disabled) { background: var(--lime-600); border-color: var(--lime-600); }
.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); }
.btn--small { padding: 5px 10px; min-height: 32px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn--ms { width: 100%; background: #fff; border: 1px solid #8C9BAA; color: #2F2F2F; }
.btn .icon { width: 18px; height: 18px; }

/* Alertas y chips */
.alert { padding: 12px 14px; border-radius: 8px; margin: 0 0 16px; border: 1px solid; font-size: .95rem; }
.alert--info { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-900); }
.alert--error { background: var(--danger-50); border-color: #F5C2BE; color: var(--danger); }
.alert--warn { background: var(--warn-50); border-color: #F1D79A; color: var(--warn); }
.alert--ok { background: var(--lime-100); border-color: #D8E79A; color: var(--ok); }
.chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--navy-50); color: var(--navy-700); letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.chip--warn { background: var(--warn-50); color: var(--warn); }
.chip--ok { background: var(--lime-100); color: var(--ok); }
.chip--danger { background: var(--danger-50); color: var(--danger); }

/* Formularios */
.form { display: grid; gap: 14px; }
.form--grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.form__actions { display: flex; gap: 8px; }
.field { display: grid; gap: 5px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
input, select, textarea { font: inherit; color: var(--ink); padding: 9px 11px; border: 1px solid #B7C3CF; border-radius: 8px; background: #fff; min-height: 42px; width: 100%; }
input:focus, select:focus { border-color: var(--navy); outline: 3px solid rgba(179,207,58,.55); outline-offset: 0; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--navy); }
.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline select { width: auto; min-height: 32px; padding: 4px 8px; }

/* Inicio */
.hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(120deg, var(--navy-900), var(--navy)); color: #fff; padding: 28px 30px; border-radius: 14px; margin-bottom: 28px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 26px solid rgba(179,207,58,.18); }
.hero h1 { color: #fff; font-size: 1.6rem; }
.hero__lead { color: #D2E0EC; margin: 0; max-width: 60ch; }
.eyebrow { font-family: var(--display); color: var(--lime); letter-spacing: .12em; font-size: .8rem; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.hero__badge { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(179,207,58,.6); padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: .9rem; line-height: 1.2; position: relative; z-index: 1; }
.hero__badge .icon { color: var(--lime); width: 28px; height: 28px; }

.toolgroup { margin-bottom: 30px; }
.toolgroup h2 { font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em; display: flex; align-items: center; gap: 10px; }
.toolgroup h2::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.toolgroup--funcional h2::before { content: ""; width: 10px; height: 10px; background: var(--lime); border-radius: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); position: relative; transition: transform .15s, border-color .15s, box-shadow .15s; }
a.card:hover { transform: translateY(-2px); border-color: var(--lime); box-shadow: 0 8px 22px rgba(10,47,78,.12); }
.card__icon { width: 46px; height: 46px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; box-shadow: inset 0 -3px 0 var(--lime); }
.card__body { display: grid; gap: 3px; }
.card__title { font-weight: 700; color: var(--navy-900); }
.card__desc { font-size: .9rem; color: var(--ink-2); }
.card .chip { position: absolute; top: 10px; right: 10px; }
.card--disabled { opacity: .62; box-shadow: none; background: #FAFBFC; }
.card--disabled .card__icon { background: #9AAABA; box-shadow: none; }

/* Encabezados de páginas internas */
.crumbs { font-size: .875rem; color: var(--ink-2); margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
.toolhead { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.toolhead h1 { margin: 0 0 2px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolhead p { margin: 0; }
.toolhead__icon { width: 56px; height: 56px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: inset 0 -4px 0 var(--lime); flex: none; }
.toolhead__icon .icon { width: 28px; height: 28px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead h1 { margin: 0 0 4px; }
.privacy-note { margin-top: 18px; font-size: .85rem; color: var(--ink-2); }

/* Área de trabajo de herramientas */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.loading { color: var(--ink-2); }
.dropzone { border: 2px dashed #9FB3C6; border-radius: 12px; background: var(--navy-50); padding: 34px 20px; text-align: center; transition: background .15s, border-color .15s; }
.dropzone.is-over { background: var(--lime-100); border-color: var(--lime-600); }
.dropzone__icon { width: 44px; height: 44px; color: var(--navy); }
.dropzone__title { font-weight: 700; font-size: 1.1rem; color: var(--navy-900); margin: 8px 0 4px; }
.dropzone__hint { font-size: .875rem; color: var(--ink-2); margin: 8px 0 0; }
.dropzone--compact { padding: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dropzone--compact .dropzone__icon { width: 24px; height: 24px; }
.dropzone--compact .dropzone__title { margin: 0; font-size: 1rem; }

.filelist { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.fileitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fileitem__thumb { width: 44px; height: 56px; border: 1px solid var(--line); border-radius: 4px; background: var(--navy-50); flex: none; display: grid; place-items: center; overflow: hidden; }
.fileitem__thumb canvas, .fileitem__thumb img { width: 100%; height: 100%; object-fit: contain; }
.fileitem__num { font-weight: 700; color: var(--navy); width: 22px; text-align: center; }
.fileitem__info { flex: 1; min-width: 0; }
.fileitem__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem__meta { font-size: .8rem; color: var(--ink-2); }
.fileitem__actions { display: flex; gap: 4px; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; color: var(--navy-900); font-size: 1rem; font-weight: 700; padding: 0; }
.iconbtn:hover:not(:disabled) { border-color: var(--navy); background: var(--navy-50); }
.iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.iconbtn--danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: var(--danger-50); }

.options { display: grid; gap: 14px; padding: 16px; border-radius: 10px; background: var(--navy-50); margin: 16px 0; }
.options legend { font-weight: 700; color: var(--navy-900); padding: 0; margin-bottom: 6px; }
.options fieldset { border: 0; margin: 0; padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radio { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.radio:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.help { font-size: .85rem; color: var(--ink-2); margin: 4px 0 0; font-weight: 400; }

.actionsbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.actionsbar .spacer { flex: 1; }
.status { margin-top: 14px; }
.progress { height: 8px; background: var(--navy-100); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy), var(--lime)); transition: width .2s; }

.results { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.results h2 { display: flex; align-items: center; gap: 8px; }
.results h2::before { content: ""; width: 10px; height: 10px; background: var(--lime); border-radius: 2px; }
.resultlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.resultitem { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Miniaturas de páginas */
.pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; margin: 16px 0; }
.pagecard { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px; display: grid; gap: 6px; position: relative; }
.pagecard.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.pagecard.is-deleted { opacity: .4; }
.pagecard.is-deleted .pagecard__thumb::after { content: "Se eliminará"; position: absolute; inset: auto 0 40% 0; text-align: center; font-weight: 700; color: var(--danger); background: rgba(255,255,255,.9); padding: 4px; font-size: .8rem; }
.pagecard__thumb { height: 150px; display: grid; place-items: center; background: var(--navy-50); border-radius: 6px; overflow: hidden; position: relative; }
.pagecard__thumb canvas { max-height: 146px; width: auto; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; background: #fff; }
.pagecard__label { font-size: .8rem; font-weight: 700; color: var(--navy-900); text-align: center; }
.pagecard__tools { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pagecard__tools .iconbtn { width: 30px; height: 30px; font-size: .9rem; }
.pagecard__check { position: absolute; top: 12px; left: 12px; z-index: 2; width: 20px; height: 20px; }

/* Visor */
.viewer { display: grid; gap: 12px; }
.viewer__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; background: var(--navy-50); border-radius: 10px; position: sticky; top: 70px; z-index: 5; }
.viewer__bar input[type="number"] { width: 70px; min-height: 34px; padding: 4px 6px; }
.viewer__bar .sep { width: 1px; height: 24px; background: var(--line); }
.viewer__pages { display: grid; gap: 16px; justify-items: center; background: #E6EBF0; padding: 16px; border-radius: 10px; overflow: auto; max-height: 75vh; }
.viewer__page { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); position: relative; }
.viewer__page canvas { display: block; }

.textout { width: 100%; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.45; }

/* Tablas */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.panel summary { font-weight: 700; color: var(--navy-900); cursor: pointer; }
.panel[open] summary { margin-bottom: 14px; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); background: var(--navy-50); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table--compact td { padding: 7px 12px; }
.table tr.is-off td { color: var(--ink-2); background: #FAFBFC; }
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini { position: relative; }
.mini summary { list-style: none; }
.mini summary::-webkit-details-marker { display: none; }
.mini__form { position: absolute; right: 0; top: 38px; z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; gap: 6px; box-shadow: var(--shadow); width: 300px; }

/* Páginas varias */
.empty { text-align: center; padding: 60px 16px; }
.empty__code { font-family: var(--display); font-size: 3rem; color: var(--lime-600); margin: 0; font-weight: 700; }
.prose { max-width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; }
.prose h2 { margin-top: 1.4em; }
.prose .lead { font-size: 1.1rem; color: var(--ink-2); }

/* Ingreso */
body.auth { background: var(--navy-900); }
.auth__wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth__brand { background: linear-gradient(150deg, var(--navy-900), var(--navy)); color: #fff; padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-right: 6px solid var(--lime); }
.auth__brand::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 40px solid rgba(179,207,58,.12); right: -160px; bottom: -160px; }
.auth__brand img { width: 108px; height: auto; border: 1px solid rgba(255,255,255,.5); margin-bottom: 22px; }
.auth__title { font-family: var(--display); font-size: 2.3rem; font-weight: 700; margin: 0; letter-spacing: .04em; }
.auth__tag { color: var(--lime); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0 0 30px; }
.auth__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: #D2E0EC; position: relative; z-index: 1; }
.auth__points .icon { color: var(--lime); margin-right: 6px; }
.auth__panel { background: var(--bg); padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
.auth__panel > * { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
.auth__h1 { font-family: var(--display); font-size: 1.8rem; margin-bottom: 4px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .85rem; margin: 18px auto; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 860px) {
  .auth__wrap { grid-template-columns: 1fr; }
  .auth__brand { padding: 32px 24px; border-right: 0; border-bottom: 6px solid var(--lime); }
  .auth__title { font-size: 1.7rem; }
  .auth__points { display: none; }
  .auth__panel { padding: 32px 20px; }
  .mainnav span { display: none; }
  .userbox__name { display: none; }
  .hero { flex-direction: column; align-items: flex-start; padding: 22px; }
  .topbar__inner { gap: 10px; }
  .brand__tag { display: none; }
  .tool { padding: 16px; }
}
@media (max-width: 520px) {
  .brand__text { display: none; }
  .fileitem { flex-wrap: wrap; }
  .fileitem__actions { width: 100%; justify-content: flex-end; }
  .viewer__bar { top: 64px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Ajustes tras revisión visual */
.pagegrid { list-style: none; padding: 0; }
.fileitem__name, .fileitem__meta { display: block; }
.card:has(> .chip) .card__body { padding-right: 56px; }
.table td.actions { display: table-cell; white-space: nowrap; }
.table td.actions > * { display: inline-flex; vertical-align: middle; margin: 2px 4px 2px 0; }