/* =========================================================
   professionals_login.css
   Estilos optimizados — Área Profesionales (Login/Registro)
   Compatible con professionals_login.php
   Conserva clases/IDs existentes para no romper HTML
   ========================================================= */

/* ---------- Variables de tema ---------- */
:root{
  --primary:#02478c;
  --primary-600:#0e92c6;
  --accent:#f77f00;
  --text:#223;
  --muted:#6b5e4f;
  --border:#e6e8eb;
  --bg:#ffffff;
  --bg-soft:#f6f7f8;
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --radius:12px;
}

/* ---------- Reset mínimo y tipografía ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  display:flex; flex-direction:column;
}

/* Accesibilidad: estado de foco uniforme */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:2px solid var(--primary-600);
  outline-offset:2px;
}

/* Utilidades de visibilidad */
.oculto{display:none!important}
.visible{display:inline-block!important}

/* ---------- Cabecera / Logo fijo arriba-izquierda ---------- */
#arriba{position:relative; min-height:64px}
#contenedor_logo_div{
  position:fixed; left:12px; top:12px; z-index:1000;
  display:flex; align-items:center; gap:8px; padding:4px 6px;
  background:transparent;
}
#logo_div .logo{height:40px; width:auto; display:block}

/* ---------- Mensajes flash ---------- */
.flash{
  margin:16px auto 12px; padding:12px 14px; width:min(960px,92vw);
  background:#eef7ff; color:#064a7a; border:1px solid #b5dcff;
  border-radius:10px;
}

/* ---------- Contenedor principal (iconos + formularios) ---------- */
.container-main{ 
  width:min(1200px,94vw); margin:20px auto 40px;
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; justify-content:center;
}
.container-data{
  flex:1 1 360px; max-width:560px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.container-data-title{
  font-weight:700; font-size:1.15rem; color:var(--primary); margin:0 0 4px;
}
.container-data-text{ margin:0 0 12px; color:#556; line-height:1.5 }

/* ---------- Bloques de beneficios ---------- */
.container-data-row{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center
}
.container_iconos{
  flex:1 1 160px; min-width:160px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease;
}
.container_iconos:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08) }
.icono_login{max-width:72px; height:auto}
.iconoDescp_login{ margin:0; color:#334; font-size:.95rem; text-align:center }

/* ---------- Wrapper de Formularios (login/registro) ---------- */
#wrapper{ margin-top:8px }
#wrapper .animate.form{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; background:#fff; box-shadow:var(--shadow);
}
#wrapper h1{
  margin:0 0 12px; font-size:1.35rem; color:var(--primary); text-align:center
}

/* ---------- Formularios ---------- */
label{ display:block; margin:8px 0 6px; font-weight:600; color:#334 }
.inputbox,
input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
textarea, select{
  width:100%; padding:12px 14px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  font:inherit; color:#222; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height:110px; resize:vertical }
.inputbox:focus, input:focus, textarea:focus, select:focus{
  border-color:var(--primary-600); box-shadow:0 0 0 3px rgba(14,146,198,.12)
}
.selectPaises{ appearance:none; background:#fff url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2302478c'/%3E%3C/svg%3E") no-repeat right 12px center; background-size:10px 6px }

/* Agrupaciones de acciones */
p.login.button, p.signin.button{ margin:10px 0 0; text-align:right }

/* ---------- Botones ---------- */
.comprar{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:.75em 1.2em; border:0; border-radius:10px;
  background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
  transition:transform .06s ease, background .15s ease, box-shadow .2s ease;
}
.comprar:hover{ background:var(--primary-600) }
.comprar:active{ transform:translateY(1px) }
.settings{
  display:inline-flex; align-items:center; gap:6px;
  padding:.55em .9em; background:var(--primary); color:#fff;
  border:0; border-radius:8px; font-weight:600; cursor:pointer
}
.settings:hover{ background:var(--primary-600) }

/* ---------- Tablas ligeras (si se muestran en esta página) ---------- */
table{ border-collapse:collapse }
table.cesta{ width:100%; background:transparent }
tr.filaDatos td, tr.filaDatos th{ padding:6px 0 }

/* ---------- Helpers ya existentes ---------- */
.tramitarCestaTitulo{
  padding-top:12px; margin:0 0 14px; font-size:1.25rem; font-weight:800; color:#222
}
.observacionesCestaTitulo,
.referenciaCestaTitulo,
.datosFacturaCestaTitulo{ /* reutiliza inputs base */ }

/* ---------- Footer simple (hereda de menuAbajoProf) ---------- */
#pie.checkout{ margin-top:24px; text-align:center; color:#666 }

/* ========= Botón primario: "Crear cuenta" ========= */
/* Reutiliza .comprar que ya tienes, solo añadimos mejoras y estados extra */
.comprar{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.9em 1.25em;
  min-height:44px;
  border:0; border-radius:10px;
  background:var(--primary);
  color:#fff; font-weight:700; letter-spacing:.2px; text-decoration:none;
  cursor:pointer; user-select:none;
  box-shadow:var(--shadow);
  transition:transform .06s ease, background .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.comprar:hover{ background:var(--primary-600) }
.comprar:active{ transform:translateY(1px) }
.comprar:disabled,
.comprar[disabled]{ opacity:.6; cursor:not-allowed }

/* En móvil, que ocupe todo el ancho para facilitar el tap */
@media (max-width: 520px){
  .signin.button .comprar{ width:100% }
}

/* ========= Crear cuenta Botón secundario (contorno): "Volver a iniciar sesión" ========= */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.7em 1.1em;
  min-height:40px;
  border:1px solid var(--primary);
  border-radius:10px;
  background:#fff;
  color:var(--primary) !important; /* asegura color en <a> */
  font-weight:700; text-decoration:none;
  cursor:pointer; user-select:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}
.btn-outline:hover{
  background:rgba(2,71,140,.06);
  border-color:var(--primary-600);
  color:var(--primary-600) !important;
}
.btn-outline:active{ transform:translateY(1px) }
.btn-outline:focus{ outline:2px solid var(--primary-600); outline-offset:2px }

/* Flecha opcional al inicio (quítalo si no te gusta) */
.btn-outline::before{
  content:"↩";
  display:inline-block;
  transform:translateY(-1px);
  font-weight:700;
}

/* Variante “enlace textual” (por si prefieres un look más ligero) */
.btn-link{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:0;
  color:var(--primary) !important; font-weight:700; text-decoration:underline;
  cursor:pointer;
}
.btn-link:hover{ color:var(--primary-600) !important; text-decoration:none }
.btn-link::before{ content:"↩"; font-weight:700; transform:translateY(-1px) }


/* ---------- Responsivo ---------- */
@media (max-width: 900px){
  .container-main{ gap:18px }
}
@media (max-width: 720px){
  .container-main{ flex-direction:column; align-items:stretch }
  .container-data{ max-width:100% }
}
@media (max-width: 480px){
  #contenedor_logo_div{ left:8px; top:8px }
  #logo_div .logo{ height:34px }
  .container_iconos{ min-width:140px }
  .comprar{ width:100% }
}