/* ============================================================
   MOD-306 — CREAR EMPRESA DESDE EL CONTACTO
   ------------------------------------------------------------
   Ventana propia, hermana de la de sucursales (284): mismo lenguaje
   Notion/Linear/GitHub — borde de 1 px, jerarquía por tamaño y color,
   espacio generoso, sin sombras de adorno ni degradados.

   REGLAS QUE SE RESPETAN AQUÍ:
   · Todo acotado a `#mo-ec306`: este modal se monta en <body> y no
     heredaría variables declaradas dentro de una página.
   · Sin colores literales — todo por variables del tema.
   · Sin `!important`: si hiciera falta, el selector estaría mal.
   · El alto se HEREDA (`max-height` + `overflow`), nunca `calc(100vh - N)`.
   · `text-transform:none` en el cuerpo: aquí se teclean razón social y
     domicilio, y las mayúsculas forzadas impiden leer lo que se escribió.
   ============================================================ */

#mo-ec306.mo{align-items:center}

#mo-ec306 .ec306-box{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  /* Sin sombra dramática: la doctrina de la casa es Notion × Linear × GitHub,
     jerarquía por borde de 1 px y no por profundidad. Lo copiado de
     284-sucursales traía `0 24px 60px`, que es de otro lenguaje. */
  box-shadow:0 1px 3px var(--dash-shadow, rgba(15,23,42,.10));
  color:var(--text);
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  max-height:92vh;
  overflow:hidden;
  text-transform:none;
  width:min(680px,94vw);
}
#mo-ec306 .ec306-box *{box-sizing:border-box;text-transform:none}

#mo-ec306 .ec306-head{
  align-items:center;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:10px;
  padding:17px 20px;
}
#mo-ec306 .ec306-head b{font-size:15px;font-weight:600}
#mo-ec306 .ec306-x{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:15px;margin-left:auto;padding:4px 6px;
}
#mo-ec306 .ec306-x:hover{color:var(--text)}

#mo-ec306 .ec306-body{overflow-y:auto;padding:18px 20px}

#mo-ec306 .ec306-sub{
  color:var(--dim);font-size:12.5px;line-height:1.5;margin-bottom:14px;
}
#mo-ec306 .ec306-sub b{color:var(--text)}

/* Aviso de empresa primaria ya existente. No es un error: es la
   consecuencia de guardar, dicha ANTES de guardar. */
#mo-ec306 .ec306-aviso{
  align-items:flex-start;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text2);
  display:flex;
  font-size:12.5px;
  gap:9px;
  line-height:1.5;
  margin-bottom:16px;
  padding:11px 13px;
}
#mo-ec306 .ec306-aviso i{color:var(--dim);margin-top:2px}
#mo-ec306 .ec306-aviso b{color:var(--text)}

#mo-ec306 .ec306-grid{display:grid;gap:13px 16px;grid-template-columns:1fr 1fr}
#mo-ec306 .ec306-f{display:flex;flex-direction:column;gap:5px}
#mo-ec306 .ec306-f.w2{grid-column:1 / -1}
#mo-ec306 .ec306-f label{
  color:var(--text2);font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
#mo-ec306 .ec306-req{color:var(--red);margin-left:3px}

#mo-ec306 .ec306-in{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  padding:8px 11px;
  width:100%;
}
#mo-ec306 .ec306-in:focus{border-color:var(--accent);outline:none}
#mo-ec306 .ec306-in::placeholder{color:var(--dim)}
/* Los `<select>` (sector, entidad, régimen, uso de CFDI) comparten la clase de
   los inputs. Sin quitarles la apariencia nativa el navegador los pinta con su
   propio gris y quedan como un parche del sistema operativo en medio del tema. */
#mo-ec306 select.ec306-in{
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
  padding-right:30px;
  text-overflow:ellipsis;
}

/* CSF — el único campo de archivo. Va aparte del grid porque su ausencia
   es el motivo más frecuente por el que este formulario no se puede
   guardar, y enterrarlo entre doce cajas de texto lo escondía. */
#mo-ec306 .ec306-csf{
  border:1px solid var(--border);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:16px;
  padding:13px;
}
#mo-ec306 .ec306-csf label{
  color:var(--text2);font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
#mo-ec306 .ec306-csf input[type=file]{color:var(--text2);font-size:12.5px}
#mo-ec306 .ec306-csf-nom{color:var(--dim);font-size:11.5px}

/* Lista de lo que falta. Se muestran TODOS los huecos a la vez. */
#mo-ec306 .ec306-err{display:none}
#mo-ec306 .ec306-err.on{
  background:var(--bg);
  border:1px solid var(--red);
  border-radius:10px;
  color:var(--text);
  display:block;
  font-size:12.5px;
  line-height:1.6;
  margin-top:16px;
  padding:11px 13px;
}
#mo-ec306 .ec306-err ul{margin:6px 0 0;padding-left:18px}
#mo-ec306 .ec306-err li{color:var(--text2)}

#mo-ec306 .ec306-foot{
  border-top:1px solid var(--border);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 20px;
}

/* La ventana es hermana de los modales del CRM y NO hereda sus `--crm-*`:
   los botones se repintan aquí con el tema global para que no salgan sin
   borde ni fondo (declaración invalidada por `var()` indefinida). */
#mo-ec306 .crm260-btn{
  align-items:center;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;color:var(--text2);cursor:pointer;display:inline-flex;
  font-family:var(--font);font-size:12px;font-weight:600;gap:7px;height:36px;
  justify-content:center;padding:0 14px;white-space:nowrap;
}
#mo-ec306 .crm260-btn:hover{background:var(--bg3);color:var(--text)}
#mo-ec306 .crm260-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#mo-ec306 .crm260-btn.primary:disabled{cursor:default;opacity:.6}

@media (max-width:560px){
  #mo-ec306 .ec306-grid{grid-template-columns:1fr}
  #mo-ec306 .ec306-f.w2{grid-column:auto}
}