/* Facturas — Farbwelt «Azul Maya» und die Mobil-Bausteine der Bauagent-App
   als gestalterisches Vorbild, hier auf das Nötige reduziert. Ein Farbton
   (205°) von fast weiß bis fast schwarz, warmer Kalkputz-Grund, Marcellus für
   Titel, Karla für Text, IBM Plex Mono für Folios und Beträge. */

:root {
  --maya-50:  #eff7ff; --maya-100: #d7ecfe; --maya-200: #b3dcfd; --maya-300: #94cffc;
  --maya-400: #73c2fb; --maya-500: #3ea2ea; --maya-600: #2183ca; --maya-700: #1a6aa2;
  --maya-800: #17527d; --maya-900: #163e5a; --maya-950: #0f2433;
  --cal-50: #fcfbf8; --cal-100: #f7f3ec; --cal-200: #ece5d9; --cal-300: #dcd2c2;
  --ocre: #d5a03c; --terracota: #c05a3e; --salvia: #7ea886;

  /* Grund hauchzart in den Maya-Ton getönt (paletas.fondo für «maya») */
  --bg: #eef5fb; --surface: #ffffff; --surface-sunk: #f5f9fd;
  --border: #d9e6f0; --border-strong: #b9d0e2;
  --text: #10303f; --text-soft: #4a687a; --text-faint: #63808f;
  --primary: var(--maya-700); --primary-hover: var(--maya-800); --on-primary: #fff;
  --focus: var(--maya-400);
  --exito: #2f7d5f; --alerta: var(--ocre); --peligro: var(--terracota);

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --sh-1: 0 1px 2px rgba(20,48,61,.07), 0 2px 6px -1px rgba(20,48,61,.07);
  --sh-2: 0 2px 4px rgba(20,48,61,.06), 0 8px 20px -5px rgba(20,48,61,.13);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.7);
  --serif: "Marcellus", Georgia, serif;
  --sans: "Karla", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

html { background: var(--bg); }
body.movil {
  margin: 0; min-height: calc(100lvh + 1px);
  font-family: var(--sans); font-size: 15px; line-height: 1.45;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
body.movil * { box-sizing: border-box; }
a { color: var(--primary); }
.mono { font-family: var(--mono); font-size: .93em; letter-spacing: .01em; }

/* ---- Kopf ------------------------------------------------------------- */
.mcab {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--maya-400); border-bottom: 1px solid var(--maya-500);
}
.mcab__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--maya-950); }
.mcab__glifo {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--bg); box-shadow: var(--sh-1), var(--sh-inset), inset 0 0 0 1px rgba(10,38,53,.08);
  color: var(--maya-900);
}
.mcab__glifo--grande { width: 56px; height: 56px; border-radius: 14px; }
.mcab__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nombre { font-family: var(--serif); font-size: 1.15rem; }
.marca__sub { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--maya-900); opacity: .75; }
.mcab__acc { display: flex; gap: 8px; }
.micono {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.3);
  color: var(--maya-950); text-decoration: none; cursor: pointer;
}
.micono:active { background: #fff; }

/* ---- Inhalt ----------------------------------------------------------- */
.mmain { padding: 18px 16px 8px; max-width: 640px; margin: 0 auto; }
.mtitulo { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin: 4px 0 12px; }
.mtitulo--fila { font-size: 1.25rem; margin: 0; line-height: 1.2; }
.msub { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.msub--sin { margin-top: 0; }
.msub__n { font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--maya-800);
  background: var(--maya-100); border-radius: 999px; padding: 2px 8px; }
.mnota { font-size: .82rem; color: var(--text-soft); margin: 6px 0 0; }
.mnota--arriba { margin: -4px 0 14px; }
.mnota--pie { margin-top: 18px; color: var(--text-faint); font-size: .72rem; word-break: break-all; }
.mnota--alerta { color: #7a5713; }
.mvolver { display: inline-block; margin: 0 0 10px; font-size: .85rem; text-decoration: none; font-weight: 600; }
.mvacio { text-align: center; color: var(--text-faint); padding: 40px 10px; }

/* ---- Kamera-Kachel ---------------------------------------------------- */
.mcamara {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--maya-400), var(--maya-600));
  color: #fff; box-shadow: var(--sh-2); border: 1px solid var(--maya-500);
}
.mcamara:active { filter: brightness(.95); }
.mcamara__ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255,255,255,.22); box-shadow: var(--sh-inset); }
.mcamara__ico svg { width: 26px; height: 26px; }
.mcamara__txt { display: flex; flex-direction: column; gap: 2px; }
.mcamara__txt strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.mcamara__txt span { font-size: .78rem; opacity: .92; }

/* ---- Karten ----------------------------------------------------------- */
.mlista { display: flex; flex-direction: column; gap: 10px; }
.mlista--fila { flex-direction: row; gap: 8px; margin-top: 8px; }
.mlista--fila .mbtn { flex: 1; }
.mlista--suave .mtarj { opacity: .82; }
.mtarj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--sh-1); }
.mtarj--cab { margin-bottom: 12px; }
.mtarj--link { text-decoration: none; color: var(--text); display: block; }
.mtarj--link:active { background: var(--maya-50); }
.mtarj__fila { display: flex; align-items: center; gap: 12px; }
.mtarj__mini { width: 46px; height: 46px; flex: none; border-radius: 9px; overflow: hidden;
  background: var(--cal-200); border: 1px solid var(--border); }
.mtarj__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtarj__cuerpo { flex: 1; min-width: 0; }
.mtarj__linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mtarj__linea strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtarj__sub { font-size: .82rem; color: var(--text-soft); margin-top: 2px; }
.mtarj__nota { font-size: .76rem; color: #8a4a35; margin-top: 3px; }
.mtarj__flecha { color: var(--text-faint); font-size: 1.4rem; line-height: 1; }

.etiqueta { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--cal-200); color: var(--text-soft); }
.etiqueta--ok   { background: #e4f2ec; color: #1f5c45; border-color: #bfddd0; }
.etiqueta--pend { background: var(--maya-100); color: var(--maya-800); border-color: var(--maya-200); }
.etiqueta--info { background: #fbf1dc; color: #7a5713; border-color: #ecd9ad; }
.etiqueta--err  { background: #f9e4de; color: #8a3a26; border-color: #eec7bb; }

.mkpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.mkpi > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surface-sunk); border: 1px solid var(--border); }
.mkpi__l { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.mkpi__v { font-size: 1rem; font-weight: 600; word-break: break-all; }
.mkpi__v.mono { font-size: .9rem; }
.mkpi__v small { font-weight: 400; color: var(--text-soft); }

/* ---- Knöpfe & Formulare ---------------------------------------------- */
.mbtn { display: inline-block; text-align: center; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--on-primary); text-decoration: none;
  font: inherit; font-weight: 600; font-size: .92rem; border: 0; cursor: pointer; }
.mbtn--suave { background: var(--surface); color: var(--primary); border: 1px solid var(--border-strong); }
.mbtn--peligro { background: var(--surface); color: var(--peligro); border: 1px solid #eec7bb; }
.mbtn--full { width: 100%; margin-top: 6px; }
.mbtn--fino { padding: 7px 14px; font-size: .78rem; border-radius: 999px; }
.mbtn:active { filter: brightness(.94); }
.macciones { margin: 12px 0; }
.macciones--pie { margin-top: 26px; text-align: center; }
.mform { display: flex; flex-direction: column; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; box-shadow: var(--sh-1); }
.mform label { display: grid; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.mform input, .mform select, .marchivo { padding: 12px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); font: inherit; font-size: 16px; background: var(--surface); color: var(--text);
  width: 100%; max-width: 100%; min-width: 0; }
.marchivo { margin-bottom: 8px; font-size: .85rem; }
:where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

.mcopias { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.mcopia strong { word-break: break-all; }
.mcopia { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px dashed var(--border-strong);
  background: var(--surface-sunk); font: inherit; cursor: pointer; color: var(--text); }
.mcopia span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.mcopia strong { font-size: 1rem; }
.mcopia--ok { border-color: var(--exito); background: #e4f2ec; }

.aviso { padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  font-size: .88rem; margin: 0 0 12px; box-shadow: var(--sh-1); }
.aviso--ok { background: #e4f2ec; border-color: #bfddd0; color: #1f5c45; }
.aviso--err { background: #f9e4de; border-color: #eec7bb; color: #8a3a26; }

.mfoto { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--sh-1); }
.mfoto img { width: 100%; max-height: 62vh; object-fit: contain; display: block; background: var(--cal-100); }
.mdet { margin-top: 14px; }
.mdet summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text-soft); }
.mpre { white-space: pre-wrap; font-family: var(--sans); font-size: .82rem; background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0 0; }
.mtabla { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.mtabla th, .mtabla td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mtabla th { font-weight: 600; color: var(--text-faint); width: 34%; }
.mtabla td { word-break: break-all; }

/* ---- Tab-Leiste ------------------------------------------------------- */
.mtab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px rgba(20,48,61,.06); }
.mtab__i { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px; text-decoration: none; color: var(--text-faint); font-size: .68rem; font-weight: 600; cursor: pointer; }
.mtab__i svg { width: 22px; height: 22px; }
.mtab__i--on { color: var(--primary); }
.mtab__i--cam { color: var(--maya-900); }
.mtab__cam { width: 44px; height: 44px; margin-top: -22px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--maya-400), var(--maya-600)); color: #fff;
  box-shadow: var(--sh-2), 0 0 0 4px var(--surface); }
.mtab__cam svg { width: 24px; height: 24px; }

/* ---- Warte-Vorhang ---------------------------------------------------- */
.velo[hidden] { display: none; }
.velo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(238,245,251,.86); backdrop-filter: blur(3px); }
.velo__caja { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-2); font-weight: 600; color: var(--maya-900); }
.velo__giro { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--maya-200);
  border-top-color: var(--maya-700); animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---- Anmeldung -------------------------------------------------------- */
.entrada { padding-bottom: 0; }
.entrada__caja { max-width: 380px; padding-top: 18vh; }
.entrada__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--maya-900); }
.entrada__marca div { display: flex; flex-direction: column; line-height: 1.05; }

@media (min-width: 720px) {
  .mmain { padding-top: 26px; }
  .mtab { max-width: 640px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* ---- Vollständigkeit --------------------------------------------------- */
.mcheck { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; margin: 0 0 12px; box-shadow: var(--sh-1); }
.mcheck--ok { border-color: #bfddd0; background: #eef8f3; }
.mcheck--falta { border-color: #ecd9ad; background: #fdf7e8; }
.mcheck__cab { font-weight: 700; margin-bottom: 8px; }
.mcheck--ok .mcheck__cab { color: #1f5c45; }
.mcheck--falta .mcheck__cab { color: #7a5713; }
.mcheck__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mcheck__lista li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; }
.mcheck__lista li span:last-child { display: flex; flex-direction: column; gap: 1px; }
.mcheck__lista small { color: var(--text-soft); font-size: .76rem; word-break: break-word; }
.mcheck__ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.mcheck__lista li.ok .mcheck__ico { background: #2f7d5f; color: #fff; }
.mcheck__lista li.falta .mcheck__ico { background: #fff; color: #b8862a; border: 2px solid #e2c27a; }
.mbtn--listo { background: var(--exito); box-shadow: 0 0 0 4px rgba(47,125,95,.18), 0 6px 18px -4px rgba(47,125,95,.6); animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 4px rgba(47,125,95,.18), 0 6px 18px -4px rgba(47,125,95,.6); } 50% { box-shadow: 0 0 0 7px rgba(47,125,95,.10), 0 6px 22px -2px rgba(47,125,95,.7); } }
.mbtn--gris, .mbtn--gris:active { background: var(--cal-200); color: var(--text-faint); border: 1px solid var(--border-strong); box-shadow: none; cursor: not-allowed; filter: none; opacity: .85; }

/* ---- Nachfrage nach dem Foto ------------------------------------------- */
.hoja[hidden] { display: none; }
.hoja { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(16,48,63,.45); backdrop-filter: blur(2px); }
.hoja__caja { width: 100%; max-width: 640px; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--sh-3, 0 -8px 30px rgba(20,48,61,.25)); display: flex; flex-direction: column; gap: 8px; text-align: center; }
.hoja__minis { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }
.hoja__minis img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.hoja__titulo { font-family: var(--serif); font-size: 1.25rem; }
.hoja .mbtn--listo { animation: none; }

/* ---- Belegseite, vereinfacht ------------------------------------------- */
.mcabeza { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.mcabeza__mini { width: 54px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; background: var(--cal-200); border: 1px solid var(--border); }
.mcabeza__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcabeza__txt { flex: 1; min-width: 0; }
.mcabeza .mtitulo--fila { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcabeza__sub { font-size: .82rem; color: var(--text-soft); }
.mlisto { border-radius: var(--r-lg); padding: 18px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sh-2); margin-bottom: 8px; }
.mlisto--ok { background: linear-gradient(160deg, #e8f5ee, #d5ecdf); border: 1px solid #bfddd0; }
.mlisto--falta { background: linear-gradient(160deg, #fdf5e2, #f8ead0); border: 1px solid #ecd9ad; text-align: left; }
.mlisto--hecho { background: #eef8f3; border: 1px solid #bfddd0; }
.mlisto__cab { font-family: var(--serif); font-size: 1.5rem; }
.mlisto--ok .mlisto__cab, .mlisto--hecho .mlisto__cab { color: #1f5c45; }
.mlisto--falta .mlisto__cab { color: #7a5713; }
.mlisto__faltan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mlisto__faltan li { display: flex; flex-direction: column; font-size: .9rem; padding-left: 14px; border-left: 3px solid #e2c27a; }
.mlisto__faltan small { color: var(--text-soft); font-size: .78rem; }
.mbtn--grande { width: 100%; padding: 16px; font-size: 1.05rem; border-radius: var(--r-md); }
.mbtn--listo.mbtn--grande { animation: parpadeo 1.3s ease-in-out infinite; }
@keyframes parpadeo { 0%, 100% { background: var(--exito); box-shadow: 0 0 0 4px rgba(47,125,95,.15), 0 6px 18px -4px rgba(47,125,95,.6); } 50% { background: #3f9a76; box-shadow: 0 0 0 9px rgba(47,125,95,.06), 0 8px 24px -2px rgba(47,125,95,.75); } }
.mdet--bloque { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.mdet--bloque > summary { font-weight: 600; color: var(--primary); }
.mdet--bloque .msub { margin-top: 18px; }
.mdet--centro summary { text-align: center; }

/* ---- Betrachter --------------------------------------------------------- */
.visor[hidden] { display: none; }
.visor { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; }
.visor__barra { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--maya-400); border-bottom: 1px solid var(--maya-500); font-weight: 600; color: var(--maya-950); }
.visor__cuerpo { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; align-items: center; -webkit-overflow-scrolling: touch; }
.visor__cuerpo canvas, .visor__cuerpo img { max-width: 100%; height: auto; background: #fff; box-shadow: var(--sh-2); border-radius: 4px; }

.mcamara-grupo { display: grid; gap: 10px; }
.mcamara--archivo { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--sh-1); }
.mcamara--archivo .mcamara__ico { background: var(--maya-100); color: var(--maya-800); }
.mcamara--archivo .mcamara__txt span { color: var(--text-soft); }
.hoja__pdf { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; color: var(--maya-800); background: var(--maya-50); }