/* ====== Paleta Dojo Masaki (logo) ====== */
:root{
  --black: #0E0E0E;
  --white: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;

  --orange: #F04B23;         /* naranja principal (logo) */
  --orange-dark: #C23A16;    /* acento/hover */
  --green: #2E7D32;          /* verde bonsái (detalles) */
  --cream: #FFF4EC;          /* fondo suave / badges */
}

/* ====== Reset básico ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--white); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ====== Utilidades ====== */
.container { width: min(1100px, 92%); margin: 0 auto; }
.btn { display: inline-block; padding: 0.9rem 1.2rem; border-radius: 10px; border: 1px solid var(--black); transition: transform .1s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(90deg, var(--orange), var(--orange-dark)); color: #fff; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { background: #fff; color: var(--black); }
.btn-outline:hover { background: var(--cream); border-color: var(--orange); color: var(--black); }
.badge { display: inline-block; font-size: .85rem; padding: .35rem .6rem; border-radius: 999px; background: var(--cream); color: var(--black); border: 1px solid rgba(0,0,0,.05); }

/* ====== Header / Nav ====== */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 2px solid var(--orange); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: baseline; gap: .5rem; font-weight: 800; letter-spacing: .3px; }
.brand span:first-child { font-size: 1.1rem; color: var(--black); text-transform: uppercase; }
.brand span:last-child { font-size: .85rem; color: var(--muted); }
.nav-links { display: flex; gap: 1rem; align-items: center; }
.nav-links a { padding: .45rem .7rem; border-radius: 8px; color: #374151; }
.nav-links a.active, .nav-links a:hover { background: var(--cream); color: var(--black); border: 1px solid rgba(240,75,35,.25); }

/* Mobile menu (no JS) */
#menu-toggle { display: none; }
.burger { display: none; cursor: pointer; padding: .4rem; border: 1px solid var(--border); border-radius: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--black); margin: 4px 0; }

/* ====== Hero  ====== */
.hero{
  /* capas superiores: velos de color */
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(240,75,35,.18), transparent 55%),
    linear-gradient(180deg, rgba(14,14,14,.78), rgba(14,14,14,.45)),
    /* capa inferior: imagen */
    url('masaki.png') center top / clamp(450px, 85vw, 500px) auto no-repeat;
  color:#fff;
}

.hero-inner { padding: 80px 0; text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: .3px; }
.hero p { margin: 1rem auto 1.5rem; max-width: 700px; color: #e5e7eb; }
.hero .cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ====== Secciones comunes ====== */
.section { padding: 60px 0; }
.section h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: .8rem; }
.section p.lead { color: #4b5563; margin-bottom: 1.5rem; }
.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { border: 1px solid var(--border); border-radius: 16px; padding: 1rem; background: #fff; }
.card h3 { margin-bottom: .4rem; }

/* Variante de tarjeta acentuada */
.card.accent { border: 2px solid var(--orange); box-shadow: 0 10px 26px rgba(240,75,35,.12); }
.kicker { display:inline-block; font-size:.78rem; text-transform:uppercase; letter-spacing:.7px; color: var(--green); font-weight: 800; }

/* ====== Listas / tablas ====== */
.table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.table th, .table td { padding: .8rem; border-bottom: 1px solid var(--border); text-align: left; }
.table th { background: var(--cream); color: var(--black); font-weight: 700; }
.table tbody tr:nth-child(odd){ background:#fafafa; }
.table tbody tr:hover{ background:#fff3ed; }

/* ====== Footer ====== */
.footer { border-top: 3px solid var(--orange); padding: 28px 0; color: var(--muted); background: #ffffff; }
.footer a { color: #374151; }
.footer .grid { align-items: center; }

/* ====== Contacto ====== */
.contact { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.input { width: 100%; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; }
.input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240,75,35,.18); }
textarea.input { min-height: 160px; resize: vertical; }

/* Pequeños acentos en enlaces */
a.link-accent { color: var(--orange); }
a.link-accent:hover { color: var(--orange-dark); text-decoration: underline; }

/* ====== Responsive ====== */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-links { position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); flex-direction: column; padding: .75rem; display: none; }
  #menu-toggle:checked ~ .nav-links { display: flex; }
  .burger { display: block; }
}

/* Botón de login compacto en la barra superior */
.btn-sm{ padding: .5rem .75rem; border-radius: 8px; font-size: .95rem; }
.login-btn:hover{ background: var(--cream); border-color: var(--orange); color: var(--black); }

/* En móvil, a ancho completo dentro del menú */
@media (max-width: 760px){
  .login-btn{ width: 100%; text-align: center; }
}

/* ====== Login (corregido, logo +50%) ====== */
.auth-wrap{
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
}
.auth-card{
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 1.25rem;
}
.auth-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: .75rem; /* un poco más de aire bajo el logo */
}
/* Logo aumentado un 50% (46px → 69px) */
.auth-logos img{
  height: 100px;
  width: auto;
  display: block;
}
.auth-x{
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
}

.field{ margin: .85rem 0; }
.field label{
  display:block;
  font-weight:700;
  font-size:.95rem;
  margin-bottom:.35rem;
  color:#374151;
}
.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.remember{ display:flex; align-items:center; gap:.5rem; color:#374151; }
.auth-meta{ margin-top:.9rem; text-align:center; color: var(--muted); }
.auth-back{ margin-top: .75rem; text-align: center; }

.password-toggle{ display:flex; gap:.5rem; align-items:center; }
.password-toggle .input{ flex:1; }

/* Un poco más de aire en pantallas pequeñas */
@media (max-width: 480px){
  .auth-card{ padding: 1rem; }
  /* Logo móvil también +50% (40px → 60px) */
  .auth-logos img{ height: 60px; }
}


/*Avisos de recuperar y restablecer contraseña */

.alert-success{
  padding:.75rem 1rem;
  border:1px solid #c7e7cf;
  background:#ecf9f0;
  color:#265d36;
  border-radius:12px;
  margin-top:.75rem;
}