:root{--green:#365f54;--green2:#52796f;--tan:#9a6d4b;--bg:#f4f6f5;--line:#d9e1de;--text:#26332f;--muted:#6c7874}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,var(--green) 0 52%,#e8ddca 52%)}.auth-card{width:min(420px,100%);background:#fff;padding:30px;border-radius:22px;box-shadow:0 18px 50px #18352b55}.logo{width:52px;height:52px;border-radius:16px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}.auth h1{margin-bottom:4px}.auth label{display:block;font-weight:650;margin:16px 0}.auth input{display:block;width:100%;margin-top:7px;padding:13px;border:1px solid var(--line);border-radius:12px}.primary{width:100%;padding:14px;border:0;border-radius:12px;background:var(--green);color:white;font-weight:750}.error{color:#b33}.top{position:sticky;top:0;z-index:10;background:var(--green);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}.top small{letter-spacing:1.4px;opacity:.75}.top h1{font-size:1.25rem;margin:2px 0}.top-actions{display:flex;align-items:center;gap:10px}.sync{font-size:.78rem;background:#ffffff18;padding:7px 10px;border-radius:99px}.icon{border:0;background:#ffffff20;color:#fff;border-radius:10px;padding:8px 12px;font-size:1.2rem}.tabs{position:sticky;top:72px;z-index:9;display:flex;gap:8px;overflow:auto;background:#fff;padding:10px 12px;border-bottom:1px solid var(--line)}.tabs button{white-space:nowrap;border:0;background:#edf1ef;padding:10px 14px;border-radius:99px}.tabs button.active{background:var(--green);color:#fff}main{max-width:1100px;margin:auto;padding:14px}.view{display:none}.view.active{display:block}.hero{border-radius:18px;padding:20px;color:#fff;background:linear-gradient(135deg,var(--green),var(--green2));margin-bottom:14px}.hero.tan{background:linear-gradient(135deg,#7d5438,var(--tan))}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat,.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}.stat b{display:block;font-size:1.45rem;color:var(--green)}.section-title{margin:22px 4px 10px}.item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}.item-head{display:flex;gap:10px;align-items:flex-start}.item-head input{width:22px;height:22px;accent-color:var(--green)}.item-name{font-weight:760}.hint{font-size:.82rem;color:var(--muted);margin-top:3px}.updated{font-size:.72rem;color:#87918e;margin-top:5px}.fields{display:grid;grid-template-columns:1fr 90px;gap:10px;margin:12px 0}.fields textarea,.fields input,.note{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;background:#fafbfb}.fields textarea{min-height:70px;resize:vertical}.checks{display:flex;gap:18px;flex-wrap:wrap}.checks label{display:flex;align-items:center;gap:7px;font-size:.9rem}.checks input{width:20px;height:20px;accent-color:var(--green)}.note-card{background:#fff;border:1px solid var(--line);padding:14px;border-radius:16px;margin:10px 0}.note-card label{font-weight:700}.note{margin-top:8px;min-height:80px}.progress{height:10px;background:#e5ebe8;border-radius:99px;overflow:hidden;margin-top:8px}.progress i{display:block;height:100%;background:var(--green)}#drawer{position:fixed;z-index:30;right:-360px;top:0;height:100%;width:min(340px,90vw);background:#fff;padding:24px;transition:.25s;box-shadow:-10px 0 30px #0002;overflow:auto}#drawer.open{right:0}#drawer button{display:block;width:100%;margin:8px 0;padding:11px;border:1px solid var(--line);background:#fff;border-radius:10px}#closeDrawer{font-size:1.5rem!important;width:auto!important;margin-left:auto!important}#shade{display:none;position:fixed;inset:0;background:#0005;z-index:20}#shade.open{display:block}#audit{font-size:.8rem;color:var(--muted)}#audit div{border-bottom:1px solid var(--line);padding:8px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(90px);background:#26332f;color:#fff;padding:12px 18px;border-radius:12px;transition:.25s;z-index:50}#toast.show{transform:translateX(-50%) translateY(0)}@media(min-width:760px){.items-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.item{margin:0}.stats{grid-template-columns:repeat(4,1fr)}}
/* Ocultar correctamente las pantallas marcadas con hidden */
[hidden] {
    display: none !important;
}

/* Tarjetas de resumen: texto visible y títulos claros */
.stat {
    color: var(--text);
}

.stat b {
    margin-bottom: 3px;
}

.stat-label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Botón de fotografías */
.photo-button {
    font-size: 1.15rem;
    line-height: 1;
}

/* Visor de propuestas */
.photo-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(19, 31, 27, 0.82);
    backdrop-filter: blur(5px);
}

.photo-modal[hidden] {
    display: none !important;
}

.photo-dialog {
    width: min(960px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

.photo-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    color: #fff;
    background: var(--green);
}

.photo-header small {
    display: block;
    margin-bottom: 3px;
    opacity: 0.75;
    letter-spacing: 0.1em;
}

.photo-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.photo-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.photo-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
    background: #eef2f0;
}

.photo-card {
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.photo-card img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    background: #e6e2dc;
}

.photo-caption {
    padding: 13px 15px;
}

.photo-caption strong {
    display: block;
    color: var(--green);
    font-size: 1rem;
}

.photo-caption span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

body.photo-open {
    overflow: hidden;
}

@media (min-width: 800px) {
    .photo-gallery.two-images {
        grid-template-columns: 1fr 1fr;
    }

    .photo-gallery.two-images .photo-card img {
        height: 68vh;
        object-fit: contain;
    }
}

/* Botón de propuesta colocado junto a las tarjetas del baño */
.hero .stats.has-photo {
    gri*-template-columns: repeat(2, minma*(0, 1fr));
}

.hero .stats .photo-*utton {
    display: flex;
    min*height: 72px;
    padding: 14px;
 *  flex-direction: column;
    alig*-items: flex-start;
    justify-co*tent: center;
    gap: 4px;
    co*or: var(--text);
    background: #*ff;
    border: 0;
    border-radi*s: 16px;
    cursor: pointer;
    *ext-align: left;
    box-shadow: n*ne;
}

.hero .stats .photo-button:*over {
    background: #f3f7f5;
}

.hero .stats .photo-button:active {
    transform: scale(0.98);
}

.photo-button-icon {
    display: block;
    color: var(--green);
    font-size: 1.45rem;
    line-height: 1;
}

.photo-button-label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Mientras esté en la barra superior no debe verse */
.top-actions > .photo-button {
    display: none;
}

@media (min-width: 760px) {
    .hero .stats.has-photo {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Estilo final del boton Imagen ejemplo */
.hero .stats .photo-button {
  display: flex;
  min-height: 72px;
  padding: 14px;
  align-items: center;
  justify-content: center;
  color: var(--green);
  background: #ffffff;
  border: 2px solid rgba(54,95,84,.18);
  border-radius: 16px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
}
.hero .stats .photo-button:hover { color:#fff; background:var(--green); }

/* ===== Tema calido inspirado en los acabados del bano ===== */
:root {
  --green: #62584f;
  --green2: #897a6c;
  --tan: #9b765b;
  --bg: #f3efe9;
  --line: #d8cec3;
  --text: #342f2a;
  --muted: #746a61;
}

body { background: var(--bg); color: var(--text); }
.top { background: #5f554c; }
.tabs { background: #fbf9f6; border-color: var(--line); }
.tabs button { background: #e9e3dc; color: var(--text); }
.tabs button.active { background: #806a58; color: #fff; }
.hero { background: linear-gradient(135deg,#75665a,#9a8979); }
.hero.tan { background: linear-gradient(135deg,#80634f,#a58165); }
.stat,.card,.item,.note-card { background:#fffdfa; border-color:var(--line); }
.stat b { color:#715d4e; }
.progress { background:#e5ddd4; }
.progress i { background:#a9876c; }
.primary { background:#6f5d4f; }
.auth { background:linear-gradient(145deg,#655a50 0 52%,#e7dccd 52%); }
.logo { background:#6f5d4f; }

/* ===== Resumen responsive sin desbordamiento ===== */
.hero .stats.has-photo {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px;
  width:100%;
}
.hero .stats.has-photo > * { min-width:0; width:100%; }
.hero .stat {
  min-height:88px;
  padding:14px;
  overflow:hidden;
}
.hero .stat b { font-size:1.42rem; }
.hero .stat-label {
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Boton elegante de imagen, sin emoji */
.hero .stats .photo-button {
  position:relative;
  display:flex;
  min-width:0;
  width:100%;
  min-height:88px;
  padding:14px 10px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#6e5a4a;
  background:#fffdfa;
  border:1px solid var(--line);
  border-radius:16px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.045em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  opacity:1;
}
.hero .stats .photo-button::before {
  content:"";
  display:block;
  width:28px;
  height:21px;
  border:2px solid currentColor;
  border-radius:4px;
  background:
    radial-gradient(circle at 72% 28%,currentColor 0 2px,transparent 2.5px),
    linear-gradient(145deg,transparent 48%,currentColor 49% 58%,transparent 59%) 1px 5px/16px 13px no-repeat,
    linear-gradient(38deg,transparent 45%,currentColor 46% 57%,transparent 58%) 10px 7px/15px 11px no-repeat;
}
.hero .stats .photo-button:hover,
.hero .stats .photo-button:focus-visible {
  color:#fff;
  background:#816a57;
  border-color:#816a57;
}
.hero .stats .photo-button .photo-button-icon,
.hero .stats .photo-button .photo-button-label { display:none !important; }

/* Visor movil */
.photo-modal { padding:10px; }
.photo-dialog { width:min(760px,100%); max-height:calc(100dvh - 20px); }
.photo-gallery { padding:10px; }
.photo-card { margin:0; }
.photo-card img { width:100%; height:auto; max-height:calc(100dvh - 150px); object-fit:contain; }

@media (max-width:600px) {
  .top { padding:12px 14px; }
  .top h1 { font-size:1.18rem; }
  .sync { font-size:.72rem; padding:6px 8px; }
  .tabs { top:68px; padding:9px 10px; }
  main { padding:12px; overflow-x:hidden; }
  .hero { padding:16px; border-radius:18px; }
  .hero h2 { font-size:1.45rem; margin-top:0; }
  .hero .stats.has-photo { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .hero .stat,.hero .stats .photo-button { min-height:94px; }
  .item { padding:13px; }
  .fields { grid-template-columns:minmax(0,1fr) 78px; }
  .fields textarea { min-width:0; }
}

@media (min-width:760px) {
  .hero .stats.has-photo { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}

/* ===== Paleta Spa Mineral - version 2026-10-04 ===== */
:root {
  --green: #3f514d;
  --green2: #687a73;
  --tan: #a67f5f;
  --bg: #f1eee8;
  --line: #d7d0c7;
  --text: #292e2c;
  --muted: #6f746f;
  --surface: #fbfaf7;
  --surface-soft: #e7e4dd;
  --accent: #b88a64;
  --accent-dark: #856147;
}

body { background:var(--bg); color:var(--text); }
.top { background:#3f514d; }
.sync,.icon { background:rgba(255,255,255,.12); }
.tabs { background:var(--surface); border-color:var(--line); }
.tabs button { background:var(--surface-soft); color:#404744; }
.tabs button.active { background:#566b64; color:#fff; }
.hero { background:linear-gradient(135deg,#50635d,#71857d); }
.hero.tan { background:linear-gradient(135deg,#735f50,#9a7b63); }
.stat,.card,.item,.note-card { background:var(--surface); border-color:var(--line); }
.stat b { color:#40554f; }
.stat-label,.hint,.updated { color:var(--muted); }
.progress { background:rgba(255,255,255,.7); }
.progress i { background:var(--accent); }
.section-title { color:#35413d; }
.fields textarea,.fields input,.note,.auth input { background:#fff; border-color:var(--line); color:var(--text); }
.fields textarea:focus,.fields input:focus,.note:focus,.auth input:focus { outline:2px solid rgba(184,138,100,.35); border-color:var(--accent); }
.checks input,.item-head input { accent-color:#566b64; }
.primary { background:#566b64; }
.primary:hover { background:#3f514d; }
.auth { background:linear-gradient(145deg,#3f514d 0 52%,#e0d6c8 52%); }
.logo { background:#566b64; }
#drawer { background:var(--surface); }
#drawer button { background:#fff; border-color:var(--line); color:var(--text); }
.photo-header { background:#3f514d; }
.photo-gallery { background:#e8e5df; }
.photo-card { background:var(--surface); }
.photo-caption strong { color:#4b615a; }
.hero .stats .photo-button { color:#52665f; background:var(--surface); border-color:rgba(82,102,95,.24); }
.hero .stats .photo-button:hover,.hero .stats .photo-button:focus-visible { color:#fff; background:#566b64; border-color:#566b64; }

/* ===== Paleta Vanilla solicitada - 2026-10-04 ===== */
:root {
  --green: #4F4D46;
  --green2: #787569;
  --tan: #787569;
  --bg: #E3D9B8;
  --line: #C9C5B1;
  --text: #4F4D46;
  --muted: #787569;
  --surface: #F8F6EA;
  --surface-soft: #C9C5B1;
  --accent: #787569;
  --accent-dark: #4F4D46;
}
body { background:#E3D9B8; color:#4F4D46; }
.top { background:#4F4D46; }
.top small { color:#E3D9B8; }
.sync,.icon { color:#E3D9B8; background:rgba(237,232,208,.14); }
.tabs { background:#F8F6EA; border-color:#C9C5B1; }
.tabs button { background:#E3D9B8; color:#4F4D46; }
.tabs button.active { background:#787569; color:#fff; }
.hero,.hero.tan { background:linear-gradient(135deg,#787569,#4F4D46); }
.stat,.card,.item,.note-card { background:#F8F6EA; border-color:#C9C5B1; }
.stat b { color:#4F4D46; }
.stat-label,.hint,.updated { color:#787569; }
.progress { background:#E3D9B8; }
.progress i { background:#C9C5B1; }
.section-title { color:#4F4D46; }
.fields textarea,.fields input,.note,.auth input { background:#F8F6EA; color:#4F4D46; border-color:#C9C5B1; }
.fields textarea:focus,.fields input:focus,.note:focus,.auth input:focus { outline:2px solid rgba(120,117,105,.28); border-color:#787569; }
.checks input,.item-head input { accent-color:#787569; }
.primary { background:#4F4D46; color:#fff; }
.primary:hover { background:#787569; }
.auth { background:linear-gradient(145deg,#4F4D46 0 52%,#E3D9B8 52%); }
.logo { background:#787569; }
#drawer { background:#F8F6EA; }
#drawer button { background:#E3D9B8; color:#4F4D46; border-color:#C9C5B1; }
.photo-header { background:#4F4D46; }
.photo-gallery { background:#E3D9B8; }
.photo-card { background:#F8F6EA; }
.photo-caption strong { color:#4F4D46; }
.hero .stats .photo-button { color:#4F4D46; background:#F8F6EA; border-color:#C9C5B1; }
.hero .stats .photo-button:hover,.hero .stats .photo-button:focus-visible { color:#fff; background:#787569; border-color:#787569; }