/* ============================================================
   LOBU LIMPIEZA — Sistema de diseño compartido
   Usado por: index.html, cargar-planos.html
   ============================================================ */

:root{
  /* Colores de marca — Group Lobu */
  --gold:#B87547; --gold-dark:#8F5834; --gold-light:#D19268; --gold-pale:#f5ebe3;
  --teal:#5FA8A8; --teal-dark:#4A8A8A; --teal-light:#7BBDBD; --teal-pale:#e6f2f2;
  --copper:#8B5A3C;
  --cream:#F7F3EE; --dark:#1E1A16; --dark2:#2a2420; --bg:#f3f0eb;
  --card:#fff; --border:#e0d8cd;

  /* Semánticos */
  --red:#c0392b; --red-light:#fdecea;
  --green:#27ae60; --green-light:#e8f8f0;
  --blue:#2c6fbb; --blue-light:#eaf2fc;
  --orange:#e67e22;

  /* Grises (escala consolidada) */
  --gray-900:#1E1A16; --gray-700:#4a4338; --gray-500:#888; --gray-400:#aaa; --gray-300:#ccc; --gray-200:#ddd;

  /* Efectos */
  --shadow:0 1px 4px rgba(30,26,22,.06),0 4px 16px rgba(30,26,22,.04);
  --shadow-lg:0 8px 32px rgba(30,26,22,.1);

  /* Escalas */
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:9999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:30px; --fs-2xl:38px; --fs-display:48px;

  --tr:.2s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--bg);color:var(--dark);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.serif{font-family:'Cormorant Garamond',Georgia,serif}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--teal-light);border-radius:3px}
input,select,textarea,button{font-family:inherit}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--radius-sm);font:600 13px/1.2 'DM Sans',sans-serif;cursor:pointer;transition:all var(--tr);border:1.5px solid transparent;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-gold,.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-color:var(--teal)}
.btn-gold:hover,.btn-primary:hover{background:var(--teal-dark)}
.btn-outline,.btn-secondary{background:transparent;color:var(--dark);border-color:var(--border)}
.btn-outline:hover,.btn-secondary:hover{border-color:var(--teal);background:var(--teal-pale)}
.btn-red,.btn-danger{background:var(--red-light);color:var(--red);border-color:#f5c6c6}
.btn-green,.btn-success{background:var(--green);color:#fff}
.btn-green:hover,.btn-success:hover{background:#219a52}
.btn-blue{background:var(--blue);color:#fff}
.btn-orange,.btn-warning{background:var(--orange);color:#fff}
.btn-ghost{background:none;border:none;color:var(--teal-light);padding:6px 10px}
.btn-sm{padding:6px 12px;font-size:11px;border-radius:var(--radius-sm)}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:var(--radius-lg)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ===== Topbar ===== */
.topbar{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,#3a8080,#2d6b6b);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.topbar .tb-back{background:none;border:none;color:rgba(255,255,255,.85);font:500 13px 'DM Sans';cursor:pointer}
.topbar .tb-title{flex:1;font:600 17px 'Cormorant Garamond';color:#fff}
.topbar .tb-badge{font-size:var(--fs-xs);color:rgba(250,248,242,.5);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Main / layout ===== */
.main{flex:1;padding:var(--sp-4);max-width:960px;margin:0 auto;width:100%;padding-bottom:var(--sp-8)}
.main-wide{max-width:1400px}

/* ===== Cards ===== */
.card{background:var(--card);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow);margin-bottom:14px;border:1px solid var(--border)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:var(--sp-2);flex-wrap:wrap}
.card-header h3{font-size:var(--fs-md);margin:0;display:flex;align-items:center;gap:var(--sp-2)}
.card-accent{border-left:4px solid var(--teal)}

/* ===== Campos de formulario ===== */
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font:500 14px 'DM Sans';background:var(--cream);color:var(--dark);transition:var(--tr)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(95,168,168,.15)}
.field textarea{resize:vertical;min-height:80px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.form-row .field{flex:1;min-width:140px}

/* ===== Status chips / feedback ===== */
.status{margin:10px 0;padding:12px;border-radius:var(--radius-sm);display:none;font-size:var(--fs-sm)}
.status.ok{background:var(--green-light);color:var(--green);display:block;border:1px solid #b7e4c7}
.status.err{background:var(--red-light);color:var(--red);display:block;border:1px solid #f5c6c6}
.status.info{background:var(--blue-light);color:var(--blue);display:block;border:1px solid #b7d0ee}