/* ============================================================
   styles.css — Sil Rouvier · Kit de herramientas
   Estilos globales compartidos por todas las páginas.
   Para cambiar colores, tipografía o header/footer:
   editá solo este archivo.
   ============================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── Variables ── */
:root{
  --bg:#eceae3;
  --card:#ffffff;
  --border:#d8d5cc;
  --input-bg:#f0ede6;
  --accent:#c4622d;
  --accent-light:#fdf0ea;
  --accent-border:#f0c8b0;
  --dark:#1a1a18;
  --mid:#6b6b60;
  --light:#a8a89a;
  --card-radius:12px;
}

/* ── Body ── */
body{
  background:var(--bg);
  color:var(--dark);
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  line-height:1.6;
}

/* ── Header ── */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 40px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.logo{font-family:'DM Mono',monospace;font-size:13px;color:var(--mid);text-decoration:none}
.logo span{color:var(--accent);font-weight:500}
.header-badge{font-family:'DM Mono',monospace;font-size:11px;color:var(--mid);background:var(--input-bg);border:1px solid var(--border);padding:4px 12px;border-radius:20px}
.header-cta{font-family:'DM Mono',monospace;font-size:11px;background:var(--accent);color:#fff;border:none;padding:9px 18px;border-radius:6px;cursor:pointer;letter-spacing:.04em;text-decoration:none;transition:opacity .2s}
.header-cta:hover{opacity:.88}
.btn-logout{font-family:'DM Mono',monospace;font-size:11px;color:var(--mid);background:none;border:1px solid var(--border);padding:4px 12px;border-radius:20px;cursor:pointer;flex-shrink:0;transition:color .15s,border-color .15s}
.btn-logout:hover{color:var(--accent);border-color:var(--accent)}

/* ── Footer ── */
footer{
  border-top:1px solid var(--border);
  padding:20px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
footer span{font-family:'DM Mono',monospace;font-size:11px;color:var(--light);letter-spacing:.04em}

/* ── Inputs ── */
input[type="email"],
input[type="password"],
input[type="text"]{
  width:100%;
  padding:11px 14px;
  background:var(--input-bg);
  border:1.5px solid var(--border);
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  color:var(--dark);
  transition:border-color .15s,box-shadow .15s;
  appearance:none;
}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,98,45,.1)}
input.error{border-color:#c0392b;background:#fff8f8}
input::placeholder{color:var(--light)}

select{
  width:100%;
  padding:11px 14px;
  background:var(--input-bg);
  border:1.5px solid var(--border);
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  color:var(--dark);
  transition:border-color .15s;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b60' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  cursor:pointer;
}
select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,98,45,.1)}
select.error{border-color:#c0392b;background:#fff8f8}

.input-wrap{position:relative}
.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--light);font-size:13px;font-family:'DM Mono',monospace;padding:2px 4px}
.toggle-pass:hover{color:var(--mid)}
.forgot{display:block;text-align:right;font-size:12px;color:var(--mid);margin-top:4px;cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif}
.forgot:hover{color:var(--accent)}

/* ── Form helpers ── */
.field,.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field-error{font-size:12px;color:#c0392b;display:none}
.field-error.visible{display:block}
.field-hint{font-size:12px;color:var(--light);margin-top:2px}

/* ── Botón primario ── */
.btn{
  width:100%;
  padding:13px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,transform .1s;
  margin-top:8px;
}
.btn:hover{background:#a8501f}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-loading::after{content:' …'}

/* ── Alertas ── */
.alert{border-radius:8px;padding:12px 16px;font-size:13px;line-height:1.5;margin-bottom:20px;display:none}
.alert.visible{display:block}
.alert-error{background:#fff0ee;border:1px solid #f5c6c0;color:#7a2b20}
.alert-warning{background:#fff8ee;border:1px solid #f5dfc0;color:#7a5520}

/* ── Auth helpers ── */
.divider{display:flex;align-items:center;gap:12px;margin:24px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{font-family:'DM Mono',monospace;font-size:11px;color:var(--light)}
.link-row{text-align:center;font-size:13px;color:var(--mid)}
.link-row a{color:var(--accent);text-decoration:none;font-weight:500}
.link-row a:hover{text-decoration:underline}

/* ── Responsive ── */
@media(max-width:600px){
  header{padding:16px 20px}
  footer{padding:16px 20px;flex-direction:column;gap:6px;text-align:center}
}