:root {
  --c-bg: #f6f7f9;
  --c-surface: #ffffff;
  --c-ink: #1c2230;
  --c-ink-soft: #5b6472;
  --c-brand: #2f6d8f;      /* azul Pictoaplicaciones */
  --c-brand-d: #245572;
  --c-accent: #c55a11;
  --c-line: #e3e7ec;
  --c-danger-bg: #fdecea;
  --c-danger: #a3352a;
  --radius: 10px;
  --f: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--f); background: var(--c-bg); color: var(--c-ink); line-height: 1.55; }

.wrap { max-width: 940px; margin-inline: auto; padding: 2rem 1.25rem 4rem; }

/* --- Botones --- */
.btn { display: inline-block; font: inherit; font-weight: 600; font-size: 0.92rem; padding: 0.7em 1.3em; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background .16s, color .16s; }
.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-d); }
.btn--ghost { background: transparent; border: 1.5px solid var(--c-line); color: var(--c-ink); }
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--danger:hover { background: #862a21; }
.btn--danger-ghost { background: transparent; border: 1.5px solid var(--c-danger); color: var(--c-danger); }
.btn--danger-ghost:hover { background: var(--c-danger); color: #fff; }

/* Zona de peligro en la ficha de entidad + caja de confirmación de borrado */
.danger-zone { margin-top: 2rem; padding: 1.2rem 1.3rem; border: 1.5px solid var(--c-danger); border-radius: 10px; background: #fff8f7; }
.danger-zone__title { margin: 0 0 .4rem; font-size: 1rem; color: var(--c-danger); }
.danger-zone__text { margin: 0 0 1rem; font-size: .88rem; color: #6b4a46; }
.danger-box { padding: 1.4rem 1.5rem; border: 1.5px solid var(--c-danger); border-radius: 12px; background: #fff8f7; }
.danger-box__lead { font-size: 1.1rem; margin: 0 0 .8rem; }
.danger-box__list { margin: .5rem 0 1rem 1.1rem; font-size: .92rem; line-height: 1.7; }
.danger-box__note { font-size: .86rem; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: .7em 1em; color: #555; }
.btn--full { width: 100%; }
.btn--sm { padding: 0.5em 1em; font-size: 0.85rem; }

/* --- Login / auth --- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth__card { background: var(--c-surface); width: 100%; max-width: 380px; padding: 2.25rem 2rem; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(28,34,48,.08); border: 1px solid var(--c-line); }
.auth__card--center { text-align: center; display: grid; gap: 1rem; justify-items: center; }
.auth__brand { text-align: center; margin-bottom: 1.5rem; }
.auth__logo { font-size: 1.9rem; font-weight: 800; color: var(--c-brand); letter-spacing: -.02em; }
.auth__sub { margin: .25rem 0 0; font-size: .82rem; color: var(--c-ink-soft); }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field span { font-size: .82rem; font-weight: 600; color: var(--c-ink-soft); }
.field input { font: inherit; padding: .7em .85em; border: 1.5px solid var(--c-line); border-radius: 8px; background: #fff; }
.field input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(47,109,143,.15); }

.alert { background: var(--c-danger-bg); color: var(--c-danger); padding: .7em 1em; border-radius: 8px; font-size: .88rem; margin-bottom: 1.1rem; }

/* --- Topbar --- */
.topbar { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.topbar__inner { max-width: 940px; margin-inline: auto; padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.topbar__brand { font-weight: 800; font-size: 1.25rem; color: var(--c-brand); letter-spacing: -.02em; }
.topbar__dot { color: var(--c-accent); }
.topbar__right { display: flex; align-items: center; gap: 1rem; }
.topbar__user { font-size: .88rem; color: var(--c-ink-soft); }

/* --- Panel --- */
.panel-head { margin: 1rem 0 2rem; }
.panel-head h1 { margin: 0 0 .3rem; font-size: 1.7rem; letter-spacing: -.02em; }
.panel-head__sub { margin: 0; color: var(--c-ink-soft); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.3rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; }
.card--soon { opacity: .72; }
.card__title { margin: 0 0 .4rem; font-size: 1.1rem; }
.card__desc { margin: 0; font-size: .88rem; color: var(--c-ink-soft); }
.card__tag { align-self: flex-start; margin-top: 1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-brand); background: rgba(47,109,143,.1); padding: .3em .7em; border-radius: 6px; }
.card--soon .card__tag { color: var(--c-ink-soft); background: #eceef1; }

.error-code { font-size: 3rem; font-weight: 800; color: var(--c-brand); margin: 0; }

/* ===== Gestor de entidades ===== */
.wrap--narrow { max-width: 720px; }

.card { position: relative; }
.card__link { position: absolute; inset: 0; z-index: 1; }
.card:not(.card--soon) { cursor: pointer; transition: border-color .16s, transform .16s; }
.card:not(.card--soon):hover { border-color: var(--c-brand); transform: translateY(-2px); }

.crumbs { font-size: .85rem; color: var(--c-ink-soft); margin: 1.25rem 0 .5rem; }
.crumbs a { color: var(--c-brand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .5rem 0 1.5rem; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 .25rem; font-size: 1.7rem; letter-spacing: -.02em; }
.page-head__sub { margin: 0; color: var(--c-ink-soft); }

.notice { background: #e7f4ec; color: #1c6b3f; border: 1px solid #b8e0c8; padding: .7em 1em; border-radius: 8px; margin-bottom: 1.25rem; font-size: .9rem; }

.empty { background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: var(--radius); padding: 2.5rem; text-align: center; color: var(--c-ink-soft); }
.empty .btn { margin-top: 1rem; }

/* Tabla de entidades */
.tbl { width: 100%; border-collapse: collapse; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.tbl th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-ink-soft); padding: .8rem 1rem; border-bottom: 1px solid var(--c-line); background: #fafbfc; }
.tbl td { padding: .8rem 1rem; border-bottom: 1px solid var(--c-line); font-size: .92rem; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .muted { color: var(--c-ink-soft); }
.tbl .right { text-align: right; }

.ent { display: flex; align-items: center; gap: .75rem; }
.ent__logo { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--c-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--c-brand); }
.ent__logo--empty { background: rgba(47,109,143,.08); }
.ent__name { font-weight: 600; }

.badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .25em .6em; border-radius: 6px; }
.badge--activa { color: #1c6b3f; background: #e7f4ec; }
.badge--inactiva { color: #8a6d00; background: #fdf3d6; }

/* Formulario de entidad */
.form--wide { display: grid; gap: 1.5rem; }
.form-section { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.5rem; }
.form-section__title { margin: 0 0 1rem; font-size: 1rem; color: var(--c-brand); }
.form-section__hint { margin: -0.4rem 0 1rem; font-size: 0.85rem; color: #667; line-height: 1.45; }
.field span small { font-weight: 400; color: #889; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 200px; }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; cursor: pointer; }
.field--check input { margin-top: .2rem; width: auto; }
.field--check span { font-weight: 400; }
.tbl tr.is-past td { opacity: .6; }
.form-section .field { margin-bottom: 1rem; }
.form-section .field:last-child { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.current-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.current-logo img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.current-logo small { color: var(--c-ink-soft); }
.field input[type="file"] { font: inherit; font-size: .85rem; }
.field select { font: inherit; padding: .7em .85em; border: 1.5px solid var(--c-line); border-radius: 8px; background: #fff; }
.field select:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(47,109,143,.15); }

.form-actions { display: flex; justify-content: flex-end; gap: .75rem; }

@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } .page-head { align-items: flex-start; } }